Skip to content

Commit 9574fa1

Browse files
AndyScherzingerAndyScherzinger
committed
style(assistant): Make chat bubbles dark/light aware and like Nextcloud Talk chat bubbles
* background color like incoming chat messages * timestamp end-aligned * Make toolbar look like other toolbar usages (headline size, drawer icon) * Ensure tab bar theming respects server-theme Resolves #16351 Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
1 parent c8acace commit 9574fa1

5 files changed

Lines changed: 32 additions & 19 deletions

File tree

‎app/src/main/java/com/nextcloud/client/assistant/chat/ChatContent.kt‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ import androidx.compose.ui.Alignment
4242
import androidx.compose.ui.Modifier
4343
import androidx.compose.ui.draw.clip
4444
import androidx.compose.ui.draw.scale
45-
import androidx.compose.ui.graphics.Color
4645
import androidx.compose.ui.layout.ContentScale
4746
import androidx.compose.ui.res.colorResource
4847
import androidx.compose.ui.res.painterResource
@@ -123,7 +122,7 @@ private fun AssistantTypingIndicator() {
123122
bottomEnd = CHAT_BUBBLE_CORNER_RADIUS
124123
)
125124
)
126-
.background(color = colorResource(R.color.white))
125+
.background(color = colorResource(R.color.bg_message_bubble))
127126
) {
128127
TypingAnimation()
129128
}
@@ -148,7 +147,9 @@ private fun AnimatedAssistantIcon() {
148147
modifier = Modifier
149148
.size(ASSISTANT_ICON_SIZE)
150149
.clip(CircleShape)
151-
.background(Color.White),
150+
.background(
151+
color = colorResource(R.color.bg_message_bubble)
152+
),
152153
contentAlignment = Alignment.Center
153154
) {
154155
Image(
@@ -205,7 +206,9 @@ private fun AssistantMessageItem(message: ChatMessage) {
205206
modifier = Modifier
206207
.size(ASSISTANT_ICON_SIZE)
207208
.clip(CircleShape)
208-
.background(Color.White),
209+
.background(
210+
color = colorResource(R.color.bg_message_bubble)
211+
),
209212
contentAlignment = Alignment.Center
210213
) {
211214
Image(
@@ -228,7 +231,7 @@ private fun AssistantMessageItem(message: ChatMessage) {
228231
)
229232
)
230233
.background(
231-
color = colorResource(R.color.white)
234+
color = colorResource(R.color.bg_message_bubble)
232235
)
233236
) {
234237
MessageTextItem(message)
@@ -259,7 +262,7 @@ private fun UserMessageItem(message: ChatMessage) {
259262
bottomStart = CHAT_BUBBLE_CORNER_RADIUS
260263
)
261264
)
262-
.background(color = colorResource(R.color.white))
265+
.background(color = colorResource(R.color.bg_message_bubble))
263266
) {
264267
MessageTextItem(message)
265268
}
@@ -280,13 +283,14 @@ private fun MessageTextItem(message: ChatMessage) {
280283
fontSize = 16.sp
281284
)
282285
)
283-
Spacer(modifier = Modifier.height(8.dp))
286+
Spacer(modifier = Modifier.height(4.dp))
284287
Text(
285288
text = message.time(),
286289
style = TextStyle(
287-
color = colorResource(R.color.text_color),
290+
color = colorResource(R.color.secondary_text_color),
288291
fontSize = 12.sp
289-
)
292+
),
293+
modifier = Modifier.align(Alignment.End)
290294
)
291295
}
292296
}

‎app/src/main/java/com/nextcloud/client/assistant/taskTypes/TaskTypesRow.kt‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.Spacer
1515
import androidx.compose.foundation.layout.width
1616
import androidx.compose.material3.Icon
1717
import androidx.compose.material3.IconButton
18+
import androidx.compose.material3.MaterialTheme
1819
import androidx.compose.material3.PrimaryScrollableTabRow
1920
import androidx.compose.material3.Tab
2021
import androidx.compose.material3.TabRowDefaults
@@ -43,7 +44,7 @@ fun TaskTypesRow(
4344
val selectedTabIndex = data.indexOfFirst { it.id == selectedTaskType?.id }.takeIf { it >= 0 } ?: 0
4445

4546
Row(
46-
modifier = Modifier.background(color = colorResource(R.color.actionbar_color)),
47+
modifier = Modifier.background(color = MaterialTheme.colorScheme.surface),
4748
horizontalArrangement = Arrangement.Center
4849
) {
4950
if (data.any { it.isChat() }) {
@@ -63,11 +64,11 @@ fun TaskTypesRow(
6364
PrimaryScrollableTabRow(
6465
selectedTabIndex = selectedTabIndex,
6566
edgePadding = 0.dp,
66-
containerColor = colorResource(R.color.actionbar_color),
67+
containerColor = MaterialTheme.colorScheme.surface,
6768
indicator = {
6869
TabRowDefaults.SecondaryIndicator(
6970
Modifier.tabIndicatorOffset(selectedTabIndex),
70-
color = colorResource(R.color.primary)
71+
color = MaterialTheme.colorScheme.primary
7172
)
7273
}
7374
) {

‎app/src/main/res/layout/toolbar_standard.xml‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,7 @@
118118
android:id="@+id/toolbar_linear_layout"
119119
android:layout_width="match_parent"
120120
android:layout_height="wrap_content"
121-
android:layout_marginStart="@dimen/standard_half_margin"
122121
android:layout_marginTop="@dimen/standard_half_margin"
123-
android:layout_marginEnd="@dimen/standard_margin"
124122
android:layout_marginBottom="@dimen/standard_quarter_margin"
125123
android:orientation="horizontal"
126124
android:visibility="gone"
@@ -134,18 +132,24 @@
134132
style="@style/Widget.AppTheme.Button.IconButton"
135133
android:layout_width="@dimen/minimum_size_for_touchable_area"
136134
android:layout_height="@dimen/minimum_size_for_touchable_area"
135+
android:layout_marginStart="@dimen/standard_quarter_margin"
136+
android:layout_marginTop="-4dp"
137+
android:layout_marginEnd="@dimen/standard_half_margin"
138+
android:contentDescription="@string/drawer_open"
137139
app:cornerRadius="@dimen/button_corner_radius"
138140
app:icon="@drawable/ic_menu"
139-
app:iconTint="@color/black" />
141+
app:iconSize="@dimen/search_bar_icon_size"
142+
app:iconTint="@color/fontAppbar" />
140143

141144
<com.google.android.material.textview.MaterialTextView
142145
android:id="@+id/toolbar_title"
146+
android:layout_width="wrap_content"
147+
android:layout_height="@dimen/minimum_size_for_touchable_area"
143148
android:gravity="center"
144-
android:textColor="@color/black"
145149
android:lines="1"
146-
android:textSize="16sp"
147-
android:layout_width="wrap_content"
148-
android:layout_height="@dimen/minimum_size_for_touchable_area"/>
150+
android:textColor="@color/black"
151+
android:textSize="24sp"
152+
tools:text="Headline" />
149153

150154
</LinearLayout>
151155

‎app/src/main/res/values-night/colors.xml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,6 @@
3939
<color name="fontAppbar">@android:color/white</color>
4040

4141
<color name="actionbar_color">#101418</color>
42+
43+
<color name="bg_message_bubble">#2A2A2A</color>
4244
</resources>

‎app/src/main/res/values/colors.xml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,4 +89,6 @@
8989
<color name="fontSecondaryAppbar">#A5A5A5</color>
9090

9191
<color name="actionbar_color">#F7F9FF</color>
92+
93+
<color name="bg_message_bubble">#EFEFEF</color>
9294
</resources>

0 commit comments

Comments
 (0)