Merge pull request #877 from Hachimori/feature/issue826-make-chips-co…

…rner-rounded Replace Chip Design with Newly Defined Tag
DroidKaigi · Aug 23, 2023 · 2be2fbb · 2be2fbb
2 parents da15888 + c94e4ff
commit 2be2fbb
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 70 deletions.
diff --git a/...essions/src/main/java/io/github/droidkaigi/confsched2023/sessions/component/SessionTag.kt b/...essions/src/main/java/io/github/droidkaigi/confsched2023/sessions/component/SessionTag.kt
@@ -0,0 +1,72 @@
+package io.github.droidkaigi.confsched2023.sessions.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.github.droidkaigi.confsched2023.designsystem.preview.MultiThemePreviews
+import io.github.droidkaigi.confsched2023.designsystem.theme.KaigiTheme
+import io.github.droidkaigi.confsched2023.designsystem.theme.hallColors
+
+@Composable
+fun SessionTag(
+    label: String,
+    modifier: Modifier = Modifier,
+    labelColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
+    backgroundColor: Color = Color.Transparent,
+    borderColor: Color? = null,
+) {
+    Box(
+        modifier = modifier
+            .height(24.dp)
+            .then(
+                if (borderColor != null) {
+                    Modifier.border(
+                        width = 1.dp,
+                        color = borderColor,
+                        shape = RoundedCornerShape(50.dp),
+                    )
+                } else {
+                    Modifier
+                },
+            )
+            .background(
+                color = backgroundColor,
+                shape = RoundedCornerShape(50.dp),
+            )
+            .padding(horizontal = 8.dp, vertical = 4.dp),
+    ) {
+        Text(
+            text = label,
+            fontWeight = FontWeight.Medium,
+            fontSize = 12.sp,
+            color = labelColor,
+        )
+    }
+}
+
+@MultiThemePreviews
+@Composable
+fun SessionTagPreview() {
+    val hallColor = hallColors()
+    KaigiTheme {
+        Surface {
+            SessionTag(
+                label = "Chipmunk",
+                labelColor = hallColor.hallText,
+                backgroundColor = hallColor.hallC,
+            )
+        }
+    }
+}
diff --git a/.../src/main/java/io/github/droidkaigi/confsched2023/sessions/component/TimetableListItem.kt b/.../src/main/java/io/github/droidkaigi/confsched2023/sessions/component/TimetableListItem.kt
@@ -4,6 +4,7 @@ import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
@@ -70,7 +71,11 @@ fun TimetableListItem(
             .clickable { onClick(timetableItem) },
     ) {
         Row(verticalAlignment = Alignment.CenterVertically) {
-            FlowRow(modifier = Modifier.weight(1F)) {
+            FlowRow(
+                modifier = Modifier.weight(1F),
+                horizontalArrangement = Arrangement.spacedBy(4.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
                 chipContent()
             }
             IconToggleButton(

diff --git a/...essions/src/main/java/io/github/droidkaigi/confsched2023/sessions/section/BookmarkList.kt b/...essions/src/main/java/io/github/droidkaigi/confsched2023/sessions/section/BookmarkList.kt
@@ -11,8 +11,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.itemsIndexed
-import androidx.compose.material3.AssistChip
-import androidx.compose.material3.AssistChipDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
@@ -27,10 +26,10 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import io.github.droidkaigi.confsched2023.designsystem.theme.hallColors
 import io.github.droidkaigi.confsched2023.model.TimetableItem
 import io.github.droidkaigi.confsched2023.model.TimetableItemId
+import io.github.droidkaigi.confsched2023.sessions.component.SessionTag
 import io.github.droidkaigi.confsched2023.sessions.component.TimetableListItem
 import io.github.droidkaigi.confsched2023.sessions.component.color
 import kotlinx.collections.immutable.PersistentMap
@@ -104,25 +103,14 @@ fun BookmarkList(
                                 val hallColor = hallColors()
                                 val roomChipBackgroundColor = timetableItem.room.color
                                 val roomChipLabelColor = hallColor.hallText
-                                AssistChip(
-                                    onClick = { /*Do Nothing*/ },
-                                    label = {
-                                        Text(
-                                            timetableItem.room.name.currentLangTitle,
-                                            fontWeight = FontWeight.Medium,
-                                            fontSize = 12.sp,
-                                        )
-                                    },
-                                    colors = AssistChipDefaults.assistChipColors(
-                                        containerColor = roomChipBackgroundColor,
-                                        labelColor = roomChipLabelColor,
-                                    ),
-                                    border = null,
+                                SessionTag(
+                                    label = timetableItem.room.name.currentLangTitle,
+                                    labelColor = roomChipLabelColor,
+                                    backgroundColor = roomChipBackgroundColor,
                                 )
-                                Spacer(modifier = Modifier.size(5.dp))
-                                AssistChip(
-                                    onClick = { /*Do Nothing*/ },
-                                    label = { Text(timetableItem.day?.name.orEmpty()) },
+                                SessionTag(
+                                    label = timetableItem.day?.name.orEmpty(),
+                                    borderColor = MaterialTheme.colorScheme.outline,
                                 )
                             },
                             onClick = onTimetableItemClick,

diff --git a/.../sessions/src/main/java/io/github/droidkaigi/confsched2023/sessions/section/SearchList.kt b/.../sessions/src/main/java/io/github/droidkaigi/confsched2023/sessions/section/SearchList.kt
@@ -14,8 +14,6 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SuggestionChip
-import androidx.compose.material3.SuggestionChipDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
@@ -34,6 +32,7 @@ import io.github.droidkaigi.confsched2023.designsystem.theme.hallColors
 import io.github.droidkaigi.confsched2023.model.TimetableItem
 import io.github.droidkaigi.confsched2023.model.TimetableItemId
 import io.github.droidkaigi.confsched2023.sessions.SessionsStrings
+import io.github.droidkaigi.confsched2023.sessions.component.SessionTag
 import io.github.droidkaigi.confsched2023.sessions.component.TimetableListItem
 import io.github.droidkaigi.confsched2023.sessions.component.color
 import kotlinx.collections.immutable.PersistentList
@@ -152,30 +151,15 @@ fun SearchList(
                         val hallColor = hallColors()
                         val roomChipBackgroundColor = timetableItem.room.color
                         val roomChipLabelColor = hallColor.hallText
-                        SuggestionChip(
-                            colors = SuggestionChipDefaults.suggestionChipColors(
-                                containerColor = roomChipBackgroundColor,
-                                labelColor = roomChipLabelColor,
-                            ),
-                            border = null,
-                            onClick = { /* Do nothing */ },
-                            label = {
-                                Text(
-                                    text = timetableItem.room.name.currentLangTitle,
-                                    style = MaterialTheme.typography.bodyMedium,
-                                )
-                            },
+                        SessionTag(
+                            label = timetableItem.room.name.currentLangTitle,
+                            labelColor = roomChipLabelColor,
+                            backgroundColor = roomChipBackgroundColor,
                         )
                         infoChip.forEach {
-                            SuggestionChip(
-                                modifier = Modifier.padding(start = 4.dp),
-                                onClick = { /* Do nothing */ },
-                                label = {
-                                    Text(
-                                        text = it,
-                                        style = MaterialTheme.typography.bodyMedium,
-                                    )
-                                },
+                            SessionTag(
+                                label = it,
+                                borderColor = MaterialTheme.colorScheme.outline,
                             )
                         }
                     },

diff --git a/...ssions/src/main/java/io/github/droidkaigi/confsched2023/sessions/section/TimetableList.kt b/...ssions/src/main/java/io/github/droidkaigi/confsched2023/sessions/section/TimetableList.kt
@@ -15,8 +15,6 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SuggestionChip
-import androidx.compose.material3.SuggestionChipDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
@@ -35,6 +33,7 @@ import androidx.compose.ui.unit.dp
 import io.github.droidkaigi.confsched2023.designsystem.theme.hallColors
 import io.github.droidkaigi.confsched2023.model.Timetable
 import io.github.droidkaigi.confsched2023.model.TimetableItem
+import io.github.droidkaigi.confsched2023.sessions.component.SessionTag
 import io.github.droidkaigi.confsched2023.sessions.component.TimetableListItem
 import io.github.droidkaigi.confsched2023.sessions.component.color
 import kotlinx.collections.immutable.PersistentMap
@@ -129,30 +128,15 @@ fun TimetableList(
                                 val containerColor = timetableItem.room.color
                                 val labelColor = hallColor.hallText
 
-                                SuggestionChip(
-                                    colors = SuggestionChipDefaults.suggestionChipColors(
-                                        containerColor = containerColor,
-                                        labelColor = labelColor,
-                                    ),
-                                    border = null,
-                                    onClick = { /* Do nothing */ },
-                                    label = {
-                                        Text(
-                                            text = timetableItem.room.name.currentLangTitle,
-                                            style = MaterialTheme.typography.bodyMedium,
-                                        )
-                                    },
+                                SessionTag(
+                                    label = timetableItem.room.name.currentLangTitle,
+                                    labelColor = labelColor,
+                                    backgroundColor = containerColor,
                                 )
                                 timetableItem.language.labels.forEach {
-                                    SuggestionChip(
-                                        modifier = Modifier.padding(start = 4.dp),
-                                        onClick = { /* Do nothing */ },
-                                        label = {
-                                            Text(
-                                                text = it,
-                                                style = MaterialTheme.typography.bodyMedium,
-                                            )
-                                        },
+                                    SessionTag(
+                                        label = it,
+                                        borderColor = MaterialTheme.colorScheme.outline,
                                     )
                                 }
                             },