From 4f0758bff9fbf389ef2a5e5a438c02d5e4128d14 Mon Sep 17 00:00:00 2001 From: mosayeb Date: Sat, 23 Dec 2023 02:42:57 -0800 Subject: [PATCH 1/2] support large screens --- .../me/ash/reader/ui/component/FilterBar.kt | 164 +++++++++++++----- .../reader/ui/page/home/feeds/FeedsPage.kt | 23 ++- .../ash/reader/ui/page/home/flow/FlowPage.kt | 14 +- 3 files changed, 144 insertions(+), 57 deletions(-) diff --git a/app/src/main/java/me/ash/reader/ui/component/FilterBar.kt b/app/src/main/java/me/ash/reader/ui/component/FilterBar.kt index 249d1f2a2..22c6b39e0 100644 --- a/app/src/main/java/me/ash/reader/ui/component/FilterBar.kt +++ b/app/src/main/java/me/ash/reader/ui/component/FilterBar.kt @@ -16,6 +16,8 @@ import me.ash.reader.domain.model.general.Filter import me.ash.reader.infrastructure.preference.FlowFilterBarStylePreference import me.ash.reader.infrastructure.preference.LocalThemeIndex import me.ash.reader.ui.ext.surfaceColorAtElevation +import me.ash.reader.ui.page.home.feeds.WindowInfo +import me.ash.reader.ui.page.home.feeds.rememberWindowInfo import me.ash.reader.ui.theme.palette.onDark @Composable @@ -30,59 +32,125 @@ fun FilterBar( val view = LocalView.current val themeIndex = LocalThemeIndex.current - NavigationBar( - modifier = Modifier - .background(MaterialTheme.colorScheme.surfaceColorAtElevation(filterBarTonalElevation)) - .navigationBarsPadding(), - tonalElevation = filterBarTonalElevation, - ) { - Spacer(modifier = Modifier.width(filterBarPadding)) - Filter.values.forEach { item -> - NavigationBarItem( + val windowInfo = rememberWindowInfo() + + + if (windowInfo.screenWidthInfo is WindowInfo.WindowType.Compat) { + NavigationBar( + modifier = Modifier + .background( + MaterialTheme.colorScheme.surfaceColorAtElevation( + filterBarTonalElevation + ) + ) + .navigationBarsPadding(), + tonalElevation = filterBarTonalElevation, + ) { + Spacer(modifier = Modifier.width(filterBarPadding)) + Filter.values.forEach { item -> + NavigationBarItem( // modifier = Modifier.height(60.dp), - alwaysShowLabel = when (filterBarStyle) { - FlowFilterBarStylePreference.Icon.value -> false - FlowFilterBarStylePreference.IconLabel.value -> true - FlowFilterBarStylePreference.IconLabelOnlySelected.value -> false - else -> false - }, - icon = { - Icon( - imageVector = if (filter == item && filterBarFilled) { - item.iconFilled + alwaysShowLabel = when (filterBarStyle) { + FlowFilterBarStylePreference.Icon.value -> false + FlowFilterBarStylePreference.IconLabel.value -> true + FlowFilterBarStylePreference.IconLabelOnlySelected.value -> false + else -> false + }, + icon = { + Icon( + imageVector = if (filter == item && filterBarFilled) { + item.iconFilled + } else { + item.iconOutline + }, + contentDescription = item.toName() + ) + }, + label = if (filterBarStyle == FlowFilterBarStylePreference.Icon.value) { + null + } else { + { + Text( + text = item.toName(), +// style = MaterialTheme.typography.labelLarge, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + } + }, + selected = filter == item, + onClick = { +// view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP) + view.playSoundEffect(SoundEffectConstants.CLICK) + filterOnClick(item) + }, + colors = NavigationBarItemDefaults.colors( + indicatorColor = if (themeIndex == 5 && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) { + MaterialTheme.colorScheme.secondaryContainer } else { - item.iconOutline - }, - contentDescription = item.toName() + MaterialTheme.colorScheme.primaryContainer + } onDark MaterialTheme.colorScheme.secondaryContainer, + ), + ) + } + Spacer(modifier = Modifier.width(filterBarPadding)) + } + } else { + NavigationRail( + modifier = Modifier + .background( + MaterialTheme.colorScheme.surfaceColorAtElevation( + filterBarTonalElevation ) - }, - label = if (filterBarStyle == FlowFilterBarStylePreference.Icon.value) { - null - } else { - { - Text( - text = item.toName(), -// style = MaterialTheme.typography.labelLarge, - maxLines = 1, - overflow = TextOverflow.Ellipsis, + ) + + ) { + Filter.values.forEach { item -> + NavigationRailItem( +// modifier = Modifier.height(60.dp), + alwaysShowLabel = when (filterBarStyle) { + FlowFilterBarStylePreference.Icon.value -> false + FlowFilterBarStylePreference.IconLabel.value -> true + FlowFilterBarStylePreference.IconLabelOnlySelected.value -> false + else -> false + }, + icon = { + Icon( + imageVector = if (filter == item && filterBarFilled) { + item.iconFilled + } else { + item.iconOutline + }, + contentDescription = item.toName() ) - } - }, - selected = filter == item, - onClick = { -// view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP) - view.playSoundEffect(SoundEffectConstants.CLICK) - filterOnClick(item) - }, - colors = NavigationBarItemDefaults.colors( - indicatorColor = if (themeIndex == 5 && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) { - MaterialTheme.colorScheme.secondaryContainer + }, + label = if (filterBarStyle == FlowFilterBarStylePreference.Icon.value) { + null } else { - MaterialTheme.colorScheme.primaryContainer - } onDark MaterialTheme.colorScheme.secondaryContainer, - ), - ) + { + Text( + text = item.toName(), +// style = MaterialTheme.typography.labelLarge, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + } + }, + selected = filter == item, + onClick = { +// view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP) + view.playSoundEffect(SoundEffectConstants.CLICK) + filterOnClick(item) + }, + colors = NavigationRailItemDefaults.colors( + indicatorColor = if (themeIndex == 5 && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) { + MaterialTheme.colorScheme.secondaryContainer + } else { + MaterialTheme.colorScheme.primaryContainer + } onDark MaterialTheme.colorScheme.secondaryContainer, + ), + ) + } } - Spacer(modifier = Modifier.width(filterBarPadding)) } } diff --git a/app/src/main/java/me/ash/reader/ui/page/home/feeds/FeedsPage.kt b/app/src/main/java/me/ash/reader/ui/page/home/feeds/FeedsPage.kt index 94ef8d916..0a863fc04 100644 --- a/app/src/main/java/me/ash/reader/ui/page/home/feeds/FeedsPage.kt +++ b/app/src/main/java/me/ash/reader/ui/page/home/feeds/FeedsPage.kt @@ -107,6 +107,8 @@ fun FeedsPage( } } + val windowInfo = rememberWindowInfo() + LaunchedEffect(Unit) { feedsViewModel.fetchAccount() } @@ -157,7 +159,12 @@ fun FeedsPage( } }, content = { - LazyColumn { + LazyColumn( + modifier = Modifier + .padding( + start = if (windowInfo.screenWidthInfo is WindowInfo.WindowType.Compat) 0.dp else 66.dp , + end = if (windowInfo.screenWidthInfo is WindowInfo.WindowType.Compat) 0.dp else 36.dp) + ) { item { DisplayText( modifier = Modifier @@ -226,10 +233,11 @@ fun FeedsPage( indicatorAlpha = groupIndicatorAlpha, isEnded = { index == groupWithFeedList.lastIndex }, onExpanded = { - groupsVisible[groupWithFeed.group.id] = groupsVisible.getOrPut( - groupWithFeed.group.id, - groupListExpand::value - ).not() + groupsVisible[groupWithFeed.group.id] = + groupsVisible.getOrPut( + groupWithFeed.group.id, + groupListExpand::value + ).not() } ) { filterChange( @@ -274,6 +282,7 @@ fun FeedsPage( } } }, + bottomBar = { FilterBar( filter = filterUiState.filter, @@ -289,8 +298,8 @@ fun FeedsPage( isNavigate = false, ) } - } - ) + + }) SubscribeDialog() GroupOptionDrawer() diff --git a/app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt b/app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt index 50dc5ee90..dc37b25ad 100644 --- a/app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt +++ b/app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt @@ -30,6 +30,8 @@ import me.ash.reader.ui.component.base.* import me.ash.reader.ui.ext.collectAsStateValue import me.ash.reader.ui.page.common.RouteName import me.ash.reader.ui.page.home.HomeViewModel +import me.ash.reader.ui.page.home.feeds.WindowInfo +import me.ash.reader.ui.page.home.feeds.rememberWindowInfo @OptIn( com.google.accompanist.pager.ExperimentalPagerApi::class, @@ -69,6 +71,9 @@ fun FlowPage( it?.let { isSyncing = it.any { it.state == WorkInfo.State.RUNNING } } } + val windowInfo = rememberWindowInfo() + + LaunchedEffect(onSearch) { snapshotFlow { onSearch }.collect { if (it) { @@ -166,7 +171,12 @@ fun FlowPage( } ) { LazyColumn( - modifier = Modifier.fillMaxSize(), + modifier = Modifier + .fillMaxSize() + .padding( + start = if (windowInfo.screenWidthInfo is WindowInfo.WindowType.Compat) 0.dp else 66.dp , + end = if (windowInfo.screenWidthInfo is WindowInfo.WindowType.Compat) 0.dp else 38.dp) + , state = listState, ) { item { @@ -247,7 +257,7 @@ fun FlowPage( feedId = filterUiState.feed?.id, articleId = it.article.id, MarkAsReadConditions.All - ) + ) } item { Spacer(modifier = Modifier.height(128.dp)) From 8d21032377b5fbb995e1508c19f3962d3f031476 Mon Sep 17 00:00:00 2001 From: mosayeb Date: Sat, 23 Dec 2023 02:43:42 -0800 Subject: [PATCH 2/2] support large screens --- .../ui/page/home/feeds/RememberWindowInfo.kt | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 app/src/main/java/me/ash/reader/ui/page/home/feeds/RememberWindowInfo.kt diff --git a/app/src/main/java/me/ash/reader/ui/page/home/feeds/RememberWindowInfo.kt b/app/src/main/java/me/ash/reader/ui/page/home/feeds/RememberWindowInfo.kt new file mode 100644 index 000000000..8a459231e --- /dev/null +++ b/app/src/main/java/me/ash/reader/ui/page/home/feeds/RememberWindowInfo.kt @@ -0,0 +1,40 @@ +package me.ash.reader.ui.page.home.feeds + +import androidx.compose.runtime.Composable +import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp + + +@Composable +fun rememberWindowInfo(): WindowInfo { + val configuration = LocalConfiguration.current + return WindowInfo( + screenWidthInfo = when { + configuration.screenWidthDp < 600 -> WindowInfo.WindowType.Compat + configuration.screenWidthDp < 840 -> WindowInfo.WindowType.Medium + else -> WindowInfo.WindowType.Expanded + }, + screenHeightInfo = when { + configuration.screenWidthDp < 480 -> WindowInfo.WindowType.Compat + configuration.screenWidthDp < 900 -> WindowInfo.WindowType.Medium + else -> WindowInfo.WindowType.Expanded + }, + screenWidth = configuration.screenWidthDp.dp, + screenHeight = configuration.screenWidthDp.dp, + ) +} + +data class WindowInfo( + val screenWidthInfo: WindowType, + val screenHeightInfo: WindowType, + val screenWidth: Dp, + val screenHeight: Dp + +) { + sealed class WindowType { + object Compat : WindowType() + object Medium : WindowType() + object Expanded : WindowType() + } +} \ No newline at end of file