From ceff6fea376972e32f49f2fe8e6858594d421121 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 8 Jan 2024 13:46:33 +0800 Subject: [PATCH] Improve labels modal on Android --- .../ui/components/LabelsSelectionSheet.kt | 75 ++++++++++++------- .../omnivore/ui/library/LibraryView.kt | 13 +++- .../ui/reader/WebReaderLoadingContainer.kt | 3 +- .../app/omnivore/omnivore/ui/theme/Color.kt | 18 ++--- 4 files changed, 68 insertions(+), 41 deletions(-) diff --git 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 index 3b4605df3..d6ec5c75f 100644 --- 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 + ), ) } } diff --git 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 index 76850d9af..8c9068efe 100644 --- 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 by libraryViewModel.savedItemLabelsLiveData.observeAsState( listOf() diff --git 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 index abdfebfcd..15193a361 100644 --- 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) { diff --git 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 index f7243c32b..8939caf19 100644 --- 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)