Merge pull request #85 from DroidKaigi/yamada-ika/brush-up-timetable-…

…item-detail-screen Apply timetable item(session) detail design roughly
DroidKaigi · Jul 3, 2024 · 7b31ab8 · 7b31ab8
2 parents 8eba181 + d0ef34e
commit 7b31ab8
Show file tree

Hide file tree

Showing 8 changed files with 744 additions and 73 deletions.
diff --git a/...mmonMain/res/drawable/calendar_add_on.xml → ...oseResources/drawable/calendar_add_on.xml b/...mmonMain/res/drawable/calendar_add_on.xml → ...oseResources/drawable/calendar_add_on.xml
diff --git a/...ain/res/drawable/icon_droidkaigi_logo.xml → ...sources/drawable/icon_droidkaigi_logo.xml b/...ain/res/drawable/icon_droidkaigi_logo.xml → ...sources/drawable/icon_droidkaigi_logo.xml
diff --git a/...rc/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/TimetableItemDetailScreen.kt b/...rc/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/TimetableItemDetailScreen.kt
@@ -4,19 +4,15 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Button
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -25,7 +21,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
-import androidx.compose.ui.platform.testTag
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
@@ -36,13 +31,16 @@ import io.github.droidkaigi.confsched.designsystem.preview.MultiLanguagePreviews
 import io.github.droidkaigi.confsched.designsystem.preview.MultiThemePreviews
 import io.github.droidkaigi.confsched.designsystem.theme.KaigiTheme
 import io.github.droidkaigi.confsched.model.Lang
-import io.github.droidkaigi.confsched.model.Lang.JAPANESE
-import io.github.droidkaigi.confsched.model.MultiLangText
 import io.github.droidkaigi.confsched.model.TimetableItem
 import io.github.droidkaigi.confsched.model.TimetableItem.Session
 import io.github.droidkaigi.confsched.model.fake
 import io.github.droidkaigi.confsched.sessions.TimetableItemDetailScreenUiState.Loaded
 import io.github.droidkaigi.confsched.sessions.TimetableItemDetailScreenUiState.Loading
+import io.github.droidkaigi.confsched.sessions.component.TimeTableItemDetailContent
+import io.github.droidkaigi.confsched.sessions.component.TimeTableItemDetailHeadline
+import io.github.droidkaigi.confsched.sessions.component.TimeTableItemDetailSummaryCard
+import io.github.droidkaigi.confsched.sessions.component.TimetableItemDetailBottomAppBar
+import io.github.droidkaigi.confsched.sessions.component.TimetableItemDetailTopAppBar
 import io.github.droidkaigi.confsched.ui.SnackbarMessageEffect
 import io.github.droidkaigi.confsched.ui.UserMessageStateHolder
 import io.github.droidkaigi.confsched.ui.UserMessageStateHolderImpl
@@ -151,82 +149,49 @@ private fun TimetableItemDetailScreen(
             .nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
             if (uiState is Loaded) {
-                LargeTopAppBar(title = {
-                    Row {
-                        Button(onClick = { onNavigationIconClick() }) {
-                            Text(
-                                text = "Back",
-                                style = MaterialTheme.typography.bodySmall,
-                            )
-                        }
-                        Text(
-                            modifier = Modifier.weight(1F),
-                            text = uiState.timetableItem.title.currentLangTitle,
-                            style = MaterialTheme.typography.bodyLarge,
-                        )
-                        if (uiState.isLangSelectable) {
-                            Button(onClick = { onSelectedLanguage(JAPANESE) }) {
-                                Text(
-                                    text = "日本語",
-                                    style = MaterialTheme.typography.bodySmall,
-                                )
-                            }
-                            Button(onClick = { onSelectedLanguage(Lang.ENGLISH) }) {
-                                Text(
-                                    text = "English",
-                                    style = MaterialTheme.typography.bodySmall,
-                                )
-                            }
-                        }
-                    }
-                })
+                TimetableItemDetailTopAppBar(
+                    isLangSelectable = uiState.isLangSelectable,
+                    onNavigationIconClick = onNavigationIconClick,
+                    onSelectedLanguage = onSelectedLanguage,
+                    scrollBehavior = scrollBehavior,
+                )
             }
         },
         bottomBar = {
             if (uiState is Loaded) {
-                Column {
-                    Button(
-                        modifier = Modifier.testTag(TimetableItemDetailBookmarkIconTestTag),
-                        onClick = { onBookmarkClick(uiState.timetableItem) },
-                    ) {
-                        Text(text = "Bookmark: ${uiState.isBookmarked}")
-                    }
-                    Button(
-
-                        onClick = { onCalendarRegistrationClick(uiState.timetableItem) },
-                    ) {
-                        Text(text = "Calendar")
-                    }
-                    Button(onClick = { onShareClick(uiState.timetableItem) }) {
-                        Text(text = "Share")
-                    }
-                }
+                TimetableItemDetailBottomAppBar(
+                    timetableItem = uiState.timetableItem,
+                    isBookmarked = uiState.isBookmarked,
+                    onBookmarkClick = onBookmarkClick,
+                    onCalendarRegistrationClick = onCalendarRegistrationClick,
+                    onShareClick = onShareClick,
+                )
             }
         },
         snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
     ) { innerPadding ->
         if (uiState is Loaded) {
-            Column(
-                Modifier.padding(
-                    top = innerPadding.calculateTopPadding(),
-                ),
+            LazyColumn(
+                modifier = Modifier.fillMaxSize().padding(innerPadding),
             ) {
-                val currentLang = uiState.currentLang ?: Lang.ENGLISH
-                fun MultiLangText.getByLang(lang: Lang): String {
-                    return if (lang == JAPANESE) {
-                        jaTitle
-                    } else {
-                        enTitle
-                    }
+                item {
+                    TimeTableItemDetailHeadline(
+                        timetableItem = uiState.timetableItem,
+                    )
                 }
-                Text(
-                    text = when (val item = uiState.timetableItem) {
-                        is TimetableItem.Session -> item.description.getByLang(currentLang)
-                        is TimetableItem.Special -> item.description.getByLang(currentLang)
-                    },
-                )
-                Button(onClick = { onLinkClick(uiState.timetableItem.url) }) {
-                    Text(text = "Link")
+
+                item {
+                    TimeTableItemDetailSummaryCard(
+                        timetableItem = uiState.timetableItem,
+                    )
+                }
+
+                item {
+                    TimeTableItemDetailContent(
+                        timetableItem = uiState.timetableItem,
+                        currentLang = uiState.currentLang,
+                        onLinkClick = onLinkClick,
+                    )
                 }
             }
         }