From 326e777b7f5b7413b1fae49b86d0fdbff0b99210 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sat, 12 Oct 2024 14:48:52 +0800 Subject: [PATCH] Refactor(TopAppBar): Optimize size of TopAppBar --- .../top/fatweb/oxygen/toolbox/ui/OxygenApp.kt | 24 ++++++++++++------- .../oxygen/toolbox/ui/about/AboutScreen.kt | 7 +++++- .../toolbox/ui/about/LibrariesScreen.kt | 7 +++++- .../toolbox/ui/component/OxygenTopAppBar.kt | 11 ++++++++- .../fatweb/oxygen/toolbox/ui/theme/Theme.kt | 2 +- .../oxygen/toolbox/ui/view/ToolViewScreen.kt | 5 +++- 6 files changed, 42 insertions(+), 14 deletions(-) diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt index 7aa5603..9cd1d25 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt @@ -7,12 +7,12 @@ import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsetsSides import androidx.compose.foundation.layout.consumeWindowInsets import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.safeDrawingPadding import androidx.compose.foundation.layout.windowInsetsPadding -import androidx.compose.material3.BottomAppBar import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme @@ -35,6 +35,8 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.navigation.NavDestination import androidx.navigation.NavDestination.Companion.hierarchy @@ -129,13 +131,11 @@ fun OxygenApp(appState: OxygenAppState) { AnimatedVisibility( visible = appState.shouldShowBottomBar && destination != null ) { - BottomAppBar { - OxygenBottomBar( - destinations = appState.topLevelDestinations, - currentDestination = appState.currentDestination, - onNavigateToDestination = appState::navigateToTopLevelDestination - ) - } + OxygenBottomBar( + destinations = appState.topLevelDestinations, + currentDestination = appState.currentDestination, + onNavigateToDestination = appState::navigateToTopLevelDestination + ) } } ) { padding -> @@ -170,7 +170,13 @@ fun OxygenApp(appState: OxygenAppState) { OxygenTopAppBar( scrollBehavior = topAppBarScrollBehavior, title = { - destination?.let { Text(text = stringResource(destination.titleTextId)) } + destination?.let { + Text( + text = stringResource(destination.titleTextId), + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + } }, navigationIcon = OxygenIcons.Search, navigationIconContentDescription = stringResource(R.string.feature_settings_top_app_bar_navigation_icon_description), diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt index 9de247f..1c838e6 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt @@ -41,6 +41,7 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import kotlinx.coroutines.delay import top.fatweb.oxygen.toolbox.R @@ -96,7 +97,11 @@ internal fun AboutScreen( OxygenTopAppBar( scrollBehavior = topAppBarScrollBehavior, title = { - Text(text = stringResource(R.string.feature_settings_more_about)) + Text( + text = stringResource(R.string.feature_settings_more_about), + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) }, navigationIcon = OxygenIcons.Back, navigationIconContentDescription = stringResource(R.string.core_back), diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt index 2c5b5d7..4645246 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt @@ -47,6 +47,7 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle @@ -132,7 +133,11 @@ internal fun LibrariesScreen( OxygenTopAppBar( scrollBehavior = topAppBarScrollBehavior, title = { - Text(text = stringResource(R.string.feature_settings_open_source_license)) + Text( + text = stringResource(R.string.feature_settings_open_source_license), + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) }, navigationIcon = OxygenIcons.Back, navigationIconContentDescription = stringResource(R.string.core_back), diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt index 0868efd..59c24c9 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt @@ -33,6 +33,7 @@ import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.LocalSoftwareKeyboardController import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.input.ImeAction +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import top.fatweb.oxygen.toolbox.R import top.fatweb.oxygen.toolbox.icon.OxygenIcons @@ -81,6 +82,7 @@ fun OxygenTopAppBar( CenterAlignedTopAppBar( modifier = modifier, scrollBehavior = scrollBehavior, + expandedHeight = 48.dp, title = { if (activeSearch) TextField( modifier = Modifier @@ -116,6 +118,7 @@ fun OxygenTopAppBar( }, maxLines = 1, singleLine = true, + textStyle = MaterialTheme.typography.titleSmall, onValueChange = { if ("\n" !in it) onQueryChange(it) } @@ -175,7 +178,13 @@ enum class SearchButtonPosition { private fun OxygenTopAppBarPreview() { OxygenTheme { OxygenTopAppBar( - title = { Text(text = stringResource(androidR.string.untitled)) }, + title = { + Text( + text = stringResource(androidR.string.untitled), + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + }, navigationIcon = OxygenIcons.Search, navigationIconContentDescription = "Navigation icon", actionIcon = OxygenIcons.MoreVert, diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/theme/Theme.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/theme/Theme.kt index 778f0b9..f0a0ce9 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/theme/Theme.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/theme/Theme.kt @@ -204,7 +204,7 @@ fun supportsDynamicTheming() = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL ) @Preview( - name = "Api 21 Light", group = "ApiLevelPreviews", apiLevel = 21, + name = "Api 24 Light", group = "ApiLevelPreviews", apiLevel = 24, uiMode = Configuration.UI_MODE_NIGHT_NO or Configuration.UI_MODE_TYPE_NORMAL ) annotation class OxygenPreviews diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt index 5a21f81..8d62652 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt @@ -37,6 +37,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextOverflow import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.kevinnzou.web.AccompanistWebChromeClient @@ -119,7 +120,9 @@ private fun TopBar( R.string.feature_tool_view_preview_suffix, toolViewUiState.toolName ) else toolViewUiState.toolName - } + }, + maxLines = 1, + overflow = TextOverflow.Ellipsis ) }, navigationIcon = OxygenIcons.Back,