From 9e39f240ee9cedc8054cf88a5ca7fafcc1580954 Mon Sep 17 00:00:00 2001 From: Diego Beraldin Date: Wed, 9 Aug 2023 09:44:26 +0200 Subject: [PATCH] fix: general layout improvements --- .../core/commonui/communitydetail/PostCard.kt | 2 +- .../commonui/components/PostCardFooter.kt | 3 ++- .../commonui/modals/LanguageBottomSheet.kt | 7 +++++-- .../commonui/modals/ListingTypeBottomSheet.kt | 7 +++++-- .../core/commonui/modals/SortBottomSheet.kt | 7 +++++-- .../core/commonui/modals/ThemeBottomSheet.kt | 7 +++++-- .../feature/home/ui/PostsTopBar.kt | 4 +++- .../content/logged/ProfileLoggedViewModel.kt | 4 +--- .../profile/content/logged/SectionSelector.kt | 6 +++--- .../feature/profile/login/LoginBottomSheet.kt | 2 ++ .../diegoberaldin/raccoonforlemmy/App.kt | 19 +++++++++++++++---- .../ui/navigation/TabNavigationItem.kt | 11 +++++++---- 12 files changed, 54 insertions(+), 25 deletions(-) diff --git a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/communitydetail/PostCard.kt b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/communitydetail/PostCard.kt index f1756998a..2de83e4ca 100644 --- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/communitydetail/PostCard.kt +++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/communitydetail/PostCard.kt @@ -48,7 +48,7 @@ fun PostCard( ), ) { Column( - verticalArrangement = Arrangement.spacedBy(Spacing.xs), + verticalArrangement = Arrangement.spacedBy(Spacing.xxs), ) { PostCardTitle(post) PostCardSubtitle( diff --git a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/PostCardFooter.kt b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/PostCardFooter.kt index d19afb92f..588a81b5f 100644 --- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/PostCardFooter.kt +++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/PostCardFooter.kt @@ -37,10 +37,11 @@ fun PostCardFooter( onReply: (() -> Unit)? = null, ) { Row( + modifier = Modifier.padding(horizontal = Spacing.xs), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(Spacing.xxs), ) { - val buttonModifier = Modifier.size(32.dp).padding(4.dp) + val buttonModifier = Modifier.size(28.dp).padding(4.dp) if (comments != null) { Image( modifier = buttonModifier.onClick { diff --git a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/LanguageBottomSheet.kt b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/LanguageBottomSheet.kt index 437194b21..3d06dabcb 100644 --- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/LanguageBottomSheet.kt +++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/LanguageBottomSheet.kt @@ -53,14 +53,17 @@ class LanguageBottomSheet( ) { for (value in values) { Row( - modifier = Modifier.padding(Spacing.s).onClick { + modifier = Modifier.padding( + horizontal = Spacing.s, + vertical = Spacing.m, + ).onClick { onSelected(value) onHide() }, ) { Text( text = value.toLanguageName(), - style = MaterialTheme.typography.bodyMedium, + style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onBackground, ) } diff --git a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ListingTypeBottomSheet.kt b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ListingTypeBottomSheet.kt index c1a4e7571..675b22e9c 100644 --- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ListingTypeBottomSheet.kt +++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ListingTypeBottomSheet.kt @@ -61,14 +61,17 @@ class ListingTypeBottomSheet( ) { for (value in values) { Row( - modifier = Modifier.padding(Spacing.s).onClick { + modifier = Modifier.padding( + horizontal = Spacing.s, + vertical = Spacing.m, + ).onClick { onSelected(value) onHide() }, ) { Text( text = value.toReadableName(), - style = MaterialTheme.typography.bodyMedium, + style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onBackground, ) Spacer(modifier = Modifier.weight(1f)) diff --git a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/SortBottomSheet.kt b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/SortBottomSheet.kt index 67f93caa9..3d65600a8 100644 --- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/SortBottomSheet.kt +++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/SortBottomSheet.kt @@ -62,14 +62,17 @@ class SortBottomSheet( ) { for (value in values) { Row( - modifier = Modifier.padding(Spacing.s).onClick { + modifier = Modifier.padding( + horizontal = Spacing.s, + vertical = Spacing.m, + ).onClick { onSelected(value) onHide() }, ) { Text( text = value.toReadableName(), - style = MaterialTheme.typography.bodyMedium, + style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onBackground, ) Spacer(modifier = Modifier.weight(1f)) diff --git a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ThemeBottomSheet.kt b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ThemeBottomSheet.kt index ffda33c42..7a7635784 100644 --- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ThemeBottomSheet.kt +++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ThemeBottomSheet.kt @@ -59,14 +59,17 @@ class ThemeBottomSheet( ) { for (value in values) { Row( - modifier = Modifier.padding(Spacing.s).onClick { + modifier = Modifier.padding( + horizontal = Spacing.s, + vertical = Spacing.m, + ).onClick { onSelected(value) onHide() }, ) { Text( text = value.toReadableName(), - style = MaterialTheme.typography.bodyMedium, + style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onBackground, ) Spacer(modifier = Modifier.weight(1f)) diff --git a/feature-home/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/home/ui/PostsTopBar.kt b/feature-home/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/home/ui/PostsTopBar.kt index 56fd994a9..03f8f28df 100644 --- a/feature-home/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/home/ui/PostsTopBar.kt +++ b/feature-home/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/home/ui/PostsTopBar.kt @@ -32,7 +32,9 @@ internal fun PostsTopBar( onSelectSortType: () -> Unit, ) { Row( - modifier = Modifier.height(64.dp).padding(Spacing.s), + modifier = Modifier.height(50.dp).padding( + horizontal = Spacing.s, + ), verticalAlignment = Alignment.CenterVertically, ) { Row( diff --git a/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/ProfileLoggedViewModel.kt b/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/ProfileLoggedViewModel.kt index 88a5d4dcf..439b6002d 100644 --- a/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/ProfileLoggedViewModel.kt +++ b/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/ProfileLoggedViewModel.kt @@ -15,9 +15,7 @@ class ProfileLoggedViewModel( override fun reduce(intent: ProfileLoggedMviModel.Intent) { when (intent) { is ProfileLoggedMviModel.Intent.SelectTab -> mvi.updateState { - it.copy( - currentTab = intent.value, - ) + it.copy(currentTab = intent.value) } } } diff --git a/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/SectionSelector.kt b/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/SectionSelector.kt index 8a38ecaff..b765e2fc5 100644 --- a/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/SectionSelector.kt +++ b/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/SectionSelector.kt @@ -44,10 +44,10 @@ internal fun SectionSelector( modifier = Modifier .weight(1f) .fillMaxHeight() + .padding(bottom = Spacing.xxs) .onClick { onSectionSelected(ProfileLoggedSection.POSTS) } - .padding(bottom = Spacing.xxs) .let { if (currentSection == ProfileLoggedSection.POSTS) { it.background( @@ -77,10 +77,10 @@ internal fun SectionSelector( modifier = Modifier .weight(1f) .fillMaxHeight() + .padding(bottom = Spacing.xxs) .onClick { onSectionSelected(ProfileLoggedSection.COMMENTS) } - .padding(bottom = Spacing.xxs) .let { if (currentSection == ProfileLoggedSection.COMMENTS) { it.background( @@ -105,10 +105,10 @@ internal fun SectionSelector( modifier = Modifier .weight(1f) .fillMaxHeight() + .padding(bottom = Spacing.xxs) .onClick { onSectionSelected(ProfileLoggedSection.SAVED) } - .padding(bottom = Spacing.xxs) .let { if (currentSection == ProfileLoggedSection.SAVED) { it.background( diff --git a/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/login/LoginBottomSheet.kt b/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/login/LoginBottomSheet.kt index 41821b31d..ec65d8665 100644 --- a/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/login/LoginBottomSheet.kt +++ b/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/login/LoginBottomSheet.kt @@ -132,6 +132,7 @@ class LoginBottomSheet( ), keyboardOptions = KeyboardOptions( keyboardType = KeyboardType.Email, + autoCorrect = false, imeAction = ImeAction.Next, ), onValueChange = { value -> @@ -159,6 +160,7 @@ class LoginBottomSheet( ), keyboardOptions = KeyboardOptions( keyboardType = KeyboardType.Email, + autoCorrect = false, imeAction = ImeAction.Next, ), onValueChange = { value -> diff --git a/shared/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/App.kt b/shared/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/App.kt index d05b3562c..d6bd8900c 100644 --- a/shared/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/App.kt +++ b/shared/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/App.kt @@ -1,8 +1,10 @@ package com.github.diegoberaldin.raccoonforlemmy import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.material.BottomAppBar import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material3.BottomAppBar +import androidx.compose.material.MaterialTheme import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable @@ -11,9 +13,11 @@ import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.unit.dp import cafe.adriel.voyager.navigator.bottomSheet.BottomSheetNavigator import cafe.adriel.voyager.navigator.tab.CurrentTab import cafe.adriel.voyager.navigator.tab.TabNavigator +import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.ThemeState import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.toThemeState import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.AppTheme import com.github.diegoberaldin.raccoonforlemmy.core.preferences.KeyStoreKeys @@ -38,8 +42,8 @@ import kotlinx.coroutines.flow.onEach fun App() { val keyStore = remember { getTemporaryKeyStore() } val systemDarkTheme = isSystemInDarkTheme() - val currentTheme = keyStore[KeyStoreKeys.UiTheme, if (systemDarkTheme) 1 else 0] - .let { it.toThemeState() } + val currentTheme = + keyStore[KeyStoreKeys.UiTheme, if (systemDarkTheme) 1 else 0].let { it.toThemeState() } val defaultLocale = stringResource(MR.strings.lang) val langCode = keyStore[KeyStoreKeys.Locale, defaultLocale] @@ -75,7 +79,14 @@ fun App() { CurrentTab() }, bottomBar = { - BottomAppBar { + BottomAppBar( + contentPadding = PaddingValues(0.dp), + backgroundColor = if (currentTheme == ThemeState.Light) { + MaterialTheme.colors.surface + } else { + MaterialTheme.colors.onSurface + }, + ) { TabNavigationItem(HomeTab) TabNavigationItem(SearchTab) TabNavigationItem(ProfileTab) diff --git a/shared/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/ui/navigation/TabNavigationItem.kt b/shared/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/ui/navigation/TabNavigationItem.kt index 15d7f46c1..b393725d3 100644 --- a/shared/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/ui/navigation/TabNavigationItem.kt +++ b/shared/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/ui/navigation/TabNavigationItem.kt @@ -4,8 +4,10 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons @@ -31,14 +33,13 @@ internal fun RowScope.TabNavigationItem(tab: Tab) { .fillMaxHeight() .onClick { tabNavigator.current = tab - } - .padding(top = Spacing.s), + }, contentAlignment = Alignment.Center, ) { Column( - modifier = Modifier.fillMaxSize(0.9f), + modifier = Modifier.padding(vertical = Spacing.xs), horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(Spacing.xs), + verticalArrangement = Arrangement.spacedBy(Spacing.xxxs), ) { val color = if (tabNavigator.current == tab) { MaterialTheme.colorScheme.primary @@ -52,10 +53,12 @@ internal fun RowScope.TabNavigationItem(tab: Tab) { tint = color, ) Text( + modifier = Modifier, text = tab.options.title, style = MaterialTheme.typography.labelSmall, color = color, ) + Spacer(modifier = Modifier.height(Spacing.xxxs)) } } }