Improve labels modal on Android

2024-01-08 13:46:33 +08:00
parent 24a87d696d
commit ceff6fea37
4 changed files with 68 additions and 41 deletions
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/components/LabelsSelectionSheet.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/components/LabelsSelectionSheet.kt
@ -8,6 +8,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@ -20,15 +21,22 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Scaffold
 import androidx.compose.material.TextFieldDefaults
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AddCircle
+import androidx.compose.material.icons.filled.MoreVert
+import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
@ -49,6 +57,7 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalViewConfiguration
 import androidx.compose.ui.platform.ViewConfiguration
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.intl.Locale
@ -56,6 +65,7 @@ import androidx.compose.ui.text.toLowerCase
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import app.omnivore.omnivore.R
 import app.omnivore.omnivore.persistence.entities.SavedItemLabel
 import com.dokar.chiptextfield.Chip
@ -279,40 +289,43 @@ fun LabelsSelectionSheetContent(
        stringResource(R.string.label_selection_sheet_title) else
        stringResource(R.string.label_selection_sheet_title_alt)

-    Surface(
+    Scaffold(
        modifier = Modifier
            .fillMaxSize()
-            .background(MaterialTheme.colorScheme.background),
-    ) {
+            .background(MaterialTheme.colorScheme.primaryContainer),
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = {
+                    Text(titleText, fontWeight = FontWeight.ExtraBold)
+                },
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.background
+                ),
+                navigationIcon = {
+                    TextButton(onClick = onCancel) {
+                        Text(text = stringResource(R.string.label_selection_sheet_action_cancel))
+                    }
+                },
+                actions = {
+                    TextButton(onClick = { onSave(state.chips.map { it.label }) }) {
+                        Text(
+                            text = if (isLibraryMode)
+                                stringResource(R.string.label_selection_sheet_action_search) else
+                                stringResource(R.string.label_selection_sheet_action_save)
+                        )
+                    }
+                }
+            )
+        }
+    ) { paddingValues ->
        Column(
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
-                .padding(horizontal = 5.dp)
+                .background(MaterialTheme.colorScheme.background)
+                .padding(horizontal = paddingValues.calculateTopPadding())
        ) {
-
-            Row(
-                horizontalArrangement = Arrangement.SpaceBetween,
-                verticalAlignment = Alignment.CenterVertically,
-                modifier = Modifier
-                    .fillMaxWidth()
-            ) {
-                TextButton(onClick = onCancel) {
-                    Text(text = stringResource(R.string.label_selection_sheet_action_cancel))
-                }
-
-                Text(titleText, fontWeight = FontWeight.ExtraBold)
-
-                TextButton(onClick = { onSave(state.chips.map { it.label }) }) {
-                    Text(
-                        text = if (isLibraryMode)
-                            stringResource(R.string.label_selection_sheet_action_search) else
-                            stringResource(R.string.label_selection_sheet_action_save)
-                    )
-                }
-            }
-
            ChipTextField(
                state = state,
                value = filterTextValue,
@ -344,7 +357,7 @@ fun LabelsSelectionSheetContent(
                ),
                colors = TextFieldDefaults.textFieldColors(
                    textColor = MaterialTheme.colorScheme.onBackground,
-                    backgroundColor = MaterialTheme.colorScheme.background
+                    backgroundColor = MaterialTheme.colorScheme.surface
                ),
                contentPadding = PaddingValues(10.dp),
                modifier = Modifier
@ -403,13 +416,17 @@ fun LabelsSelectionSheetContent(
                    Icon(
                        imageVector = Icons.Filled.AddCircle,
                        contentDescription = null,
-                        modifier = Modifier.padding(end = 8.dp)
+                        modifier = Modifier.padding(end = 8.dp),
+                        tint =  MaterialTheme.colorScheme.onSurface
                    )
                    Text(
                        text = stringResource(
                            R.string.label_selection_sheet_text_create,
                            filterTextValue.text.trim()
-                        )
+                        ),
+                        style = TextStyle(
+                            color = MaterialTheme.colorScheme.onSurface
+                        ),
                    )
                }
            }
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/library/LibraryView.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/library/LibraryView.kt
@ -20,6 +20,7 @@ import androidx.compose.material.DismissValue
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.FractionalThreshold
 import androidx.compose.material.Icon
+import androidx.compose.material.ModalBottomSheetValue
 import androidx.compose.material.Scaffold
 import androidx.compose.material.ScaffoldState
 import androidx.compose.material.SwipeToDismiss
@ -31,6 +32,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material.rememberDismissState
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.material.rememberScaffoldState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
@ -144,14 +146,21 @@ fun showAddLinkBottomSheet(libraryViewModel: LibraryViewModel) {
    libraryViewModel.bottomSheetState.value = LibraryBottomSheetState.ADD_LINK
 }

-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
@Composable
 fun LabelBottomSheet(
    libraryViewModel: LibraryViewModel,
    labelsViewModel: LabelsViewModel,
    onDismiss: () -> Unit = {}
 ) {
-    ModalBottomSheet(onDismissRequest = { onDismiss() }) {
+    ModalBottomSheet(
+        onDismissRequest = { onDismiss() },
+        containerColor = Color.Transparent,
+        sheetState = rememberModalBottomSheetState(
+            skipPartiallyExpanded = true
+        ),
+    ) {
+
        val currentSavedItemData = libraryViewModel.currentSavedItemUnderEdit()
        val labels: List<SavedItemLabel> by libraryViewModel.savedItemLabelsLiveData.observeAsState(
            listOf()
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/reader/WebReaderLoadingContainer.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/reader/WebReaderLoadingContainer.kt
@ -12,6 +12,7 @@ import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Home
@ -197,7 +198,7 @@ fun WebReaderLoadingContainer(onLibraryIconTap: (() -> Unit)? = null,
  ModalBottomSheetLayout(
    modifier = Modifier
      .statusBarsPadding(),
-    sheetBackgroundColor = Color.Transparent,
+    sheetBackgroundColor = MaterialTheme.colors.primary,
    sheetState = modalBottomSheetState,
    sheetContent = {
      when (bottomSheetState) {
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/theme/Color.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/theme/Color.kt
@ -34,12 +34,12 @@ val md_theme_light_outlineVariant = Color(0xFFD3C4B4)
 val md_theme_light_scrim = Color(0xFF000000)

 val md_theme_dark_primary = Color(0xFFEFC125)
-val md_theme_dark_onPrimary = Color(0xFF3D2F00)
-val md_theme_dark_primaryContainer = Color(0xFF633F00)
+val md_theme_dark_onPrimary = Color(0xFF212121)
+val md_theme_dark_primaryContainer = Color(0xFF212121)
 val md_theme_dark_onPrimaryContainer = Color(0xFFFFDDB3)
 val md_theme_dark_secondary = Color(0xFFDDC2A1)
-val md_theme_dark_onSecondary = Color(0xFF3E2D16)
-val md_theme_dark_secondaryContainer = Color(0xFF56442A)
+val md_theme_dark_onSecondary = Color(0xFF212121)
+val md_theme_dark_secondaryContainer = Color(0xFF283237)
 val md_theme_dark_onSecondaryContainer = Color(0xFFFBDEBC)
 val md_theme_dark_tertiary = Color(0xFFB8CEA1)
 val md_theme_dark_onTertiary = Color(0xFF243515)
@ -49,20 +49,20 @@ val md_theme_dark_error = Color(0xFFFFB4AB)
 val md_theme_dark_errorContainer = Color(0xFF93000A)
 val md_theme_dark_onError = Color(0xFF690005)
 val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
-val md_theme_dark_background = Color(0xFF1F1B16)
+val md_theme_dark_background = Color(0xFF262626)
 val md_theme_dark_onBackground = Color(0xFFEAE1D9)
 val md_theme_dark_surface = Color(0xFF1F1B16)
 val md_theme_dark_onSurface = Color(0xFFEAE1D9)
-val md_theme_dark_surfaceVariant = Color(0xFF4F4539)
+val md_theme_dark_surfaceVariant = Color(0xFF212121)
 val md_theme_dark_onSurfaceVariant = Color(0xFFD3C4B4)
 val md_theme_dark_outline = Color(0xFF9C8F80)
 val md_theme_dark_inverseOnSurface = Color(0xFF1F1B16)
 val md_theme_dark_inverseSurface = Color(0xFFEAE1D9)
-val md_theme_dark_inversePrimary = Color(0xFF825500)
+val md_theme_dark_inversePrimary = Color(0xFF212121)
 val md_theme_dark_shadow = Color(0xFF000000)
 val md_theme_dark_surfaceTint = Color(0xFFFFB951)
-val md_theme_dark_outlineVariant = Color(0xFF4F4539)
+val md_theme_dark_outlineVariant = Color(0xFF424242)
 val md_theme_dark_scrim = Color(0xFF000000)


-val seed = Color(0xFF825500)
+// val seed = Color(0xFF825500)