Skip to content

Commit 390efae

Browse files
TlasterTlaster
authored
Merge pull request #1101 from DimensionDev/feature/ui_glassify
make ui more glassify
2 parents 7d61455 + d0f9f78 commit 390efae

File tree

62 files changed

+2520
-1442
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+2520
-1442
lines changed

‎app/build.gradle.kts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,8 @@ dependencies {
146146
implementation(libs.compose.placeholder.material3)
147147
implementation(libs.webkit)
148148
implementation(libs.bundles.navigation3)
149+
implementation(libs.haze)
150+
implementation(libs.haze.materials)
149151

150152
if (project.file("google-services.json").exists()) {
151153
implementation(platform(libs.firebase.bom))

‎app/src/main/java/dev/dimension/flare/ui/component/FlareTopAppBar.kt‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ package dev.dimension.flare.ui.component
33
import androidx.compose.foundation.layout.RowScope
44
import androidx.compose.foundation.layout.WindowInsets
55
import androidx.compose.material3.ExperimentalMaterial3Api
6+
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
67
import androidx.compose.material3.MaterialTheme
78
import androidx.compose.material3.TopAppBarColors
89
import androidx.compose.material3.TopAppBarDefaults
910
import androidx.compose.material3.TopAppBarScrollBehavior
1011
import androidx.compose.runtime.Composable
12+
import androidx.compose.ui.Alignment
1113
import androidx.compose.ui.Modifier
1214
import androidx.compose.ui.unit.Dp
1315

@@ -22,8 +24,8 @@ fun FlareTopAppBar(
2224
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
2325
colors: TopAppBarColors =
2426
TopAppBarDefaults.topAppBarColors(
25-
containerColor = MaterialTheme.colorScheme.surface,
26-
scrolledContainerColor = MaterialTheme.colorScheme.surface,
27+
containerColor = MaterialTheme.colorScheme.background,
28+
scrolledContainerColor = MaterialTheme.colorScheme.background,
2729
),
2830
scrollBehavior: TopAppBarScrollBehavior? = null,
2931
) {
@@ -38,3 +40,42 @@ fun FlareTopAppBar(
3840
scrollBehavior = scrollBehavior,
3941
)
4042
}
43+
44+
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
45+
@Composable
46+
fun FlareLargeFlexibleTopAppBar(
47+
title: @Composable () -> Unit,
48+
modifier: Modifier = Modifier,
49+
subtitle: (@Composable () -> Unit)? = null,
50+
navigationIcon: @Composable () -> Unit = {},
51+
actions: @Composable RowScope.() -> Unit = {},
52+
titleHorizontalAlignment: Alignment.Horizontal = Alignment.Start,
53+
collapsedHeight: Dp = TopAppBarDefaults.LargeAppBarCollapsedHeight,
54+
expandedHeight: Dp =
55+
if (subtitle != null) {
56+
TopAppBarDefaults.LargeFlexibleAppBarWithSubtitleExpandedHeight
57+
} else {
58+
TopAppBarDefaults.LargeFlexibleAppBarWithoutSubtitleExpandedHeight
59+
},
60+
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
61+
colors: TopAppBarColors =
62+
TopAppBarDefaults.topAppBarColors(
63+
containerColor = MaterialTheme.colorScheme.background,
64+
scrolledContainerColor = MaterialTheme.colorScheme.background,
65+
),
66+
scrollBehavior: TopAppBarScrollBehavior? = null,
67+
) {
68+
androidx.compose.material3.LargeFlexibleTopAppBar(
69+
title = title,
70+
modifier = modifier,
71+
subtitle = subtitle,
72+
navigationIcon = navigationIcon,
73+
actions = actions,
74+
titleHorizontalAlignment = titleHorizontalAlignment,
75+
collapsedHeight = collapsedHeight,
76+
expandedHeight = expandedHeight,
77+
windowInsets = windowInsets,
78+
colors = colors,
79+
scrollBehavior = scrollBehavior,
80+
)
81+
}

‎app/src/main/java/dev/dimension/flare/ui/component/InAppNotificationComponent.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ internal fun InAppNotificationComponent(
6565
showText = true
6666
delay(3.seconds)
6767
showNotification = false
68+
showText = false
6869
}
6970
AnimatedVisibility(
7071
showNotification,

‎app/src/main/java/dev/dimension/flare/ui/component/NavigationSuiteScaffold2.kt‎

Lines changed: 55 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import androidx.compose.animation.AnimatedContent
44
import androidx.compose.animation.ExperimentalSharedTransitionApi
55
import androidx.compose.animation.SharedTransitionLayout
66
import androidx.compose.animation.animateContentSize
7-
import androidx.compose.animation.fadeIn
8-
import androidx.compose.animation.fadeOut
97
import androidx.compose.animation.slideInVertically
108
import androidx.compose.animation.slideOutVertically
119
import androidx.compose.foundation.ExperimentalFoundationApi
@@ -23,24 +21,25 @@ import androidx.compose.foundation.layout.fillMaxHeight
2321
import androidx.compose.foundation.layout.fillMaxWidth
2422
import androidx.compose.foundation.layout.only
2523
import androidx.compose.foundation.layout.padding
24+
import androidx.compose.foundation.layout.size
2625
import androidx.compose.foundation.layout.systemBars
2726
import androidx.compose.foundation.layout.windowInsetsPadding
2827
import androidx.compose.foundation.rememberScrollState
28+
import androidx.compose.foundation.shape.CircleShape
2929
import androidx.compose.foundation.shape.RoundedCornerShape
3030
import androidx.compose.foundation.verticalScroll
3131
import androidx.compose.material3.BadgedBox
3232
import androidx.compose.material3.ExperimentalMaterial3Api
3333
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
34-
import androidx.compose.material3.FloatingActionButton
3534
import androidx.compose.material3.FloatingToolbarDefaults.floatingToolbarVerticalNestedScroll
3635
import androidx.compose.material3.HorizontalDivider
36+
import androidx.compose.material3.Icon
3737
import androidx.compose.material3.MaterialTheme
3838
import androidx.compose.material3.ModalWideNavigationRail
3939
import androidx.compose.material3.NavigationBarItem
4040
import androidx.compose.material3.NavigationDrawerItem
4141
import androidx.compose.material3.NavigationRailItem
4242
import androidx.compose.material3.ShortNavigationBarItem
43-
import androidx.compose.material3.SmallFloatingActionButton
4443
import androidx.compose.material3.Surface
4544
import androidx.compose.material3.WideNavigationRailState
4645
import androidx.compose.material3.WideNavigationRailValue
@@ -75,6 +74,10 @@ import androidx.compose.ui.unit.dp
7574
import compose.icons.FontAwesomeIcons
7675
import compose.icons.fontawesomeicons.Solid
7776
import compose.icons.fontawesomeicons.solid.Pen
77+
import dev.chrisbanes.haze.hazeSource
78+
import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
79+
import dev.chrisbanes.haze.materials.HazeMaterials
80+
import dev.chrisbanes.haze.rememberHazeState
7881
import dev.dimension.flare.R
7982

8083
val LocalBottomBarHeight = androidx.compose.runtime.staticCompositionLocalOf<Dp> { 0.dp }
@@ -85,6 +88,7 @@ val LocalBottomBarShowing = androidx.compose.runtime.staticCompositionLocalOf<Bo
8588
ExperimentalMaterial3ExpressiveApi::class,
8689
ExperimentalMaterial3Api::class,
8790
ExperimentalSharedTransitionApi::class,
91+
ExperimentalHazeMaterialsApi::class,
8892
)
8993
@ExperimentalMaterial3AdaptiveNavigationSuiteApi
9094
@Composable
@@ -105,6 +109,7 @@ fun NavigationSuiteScaffold2(
105109
footerItems: NavigationSuiteScope2.() -> Unit = {},
106110
content: @Composable () -> Unit = {},
107111
) {
112+
val hazeState = rememberHazeState()
108113
var isPodcastShowing by remember { mutableStateOf(false) }
109114
var isBottomBarExpanded by remember { mutableStateOf(true) }
110115
Surface(
@@ -132,7 +137,11 @@ fun NavigationSuiteScaffold2(
132137
ModalWideNavigationRail(
133138
hideOnCollapse = layoutType == NavigationSuiteType.NavigationBar,
134139
state = wideNavigationRailState,
135-
colors = navigationSuiteColors.wideNavigationRailColors,
140+
colors =
141+
navigationSuiteColors.wideNavigationRailColors
142+
.copy(
143+
containerColor = Color.Transparent,
144+
),
136145
) {
137146
val actualLayoutType =
138147
if (layoutType == NavigationSuiteType.NavigationBar) {
@@ -224,8 +233,15 @@ fun NavigationSuiteScaffold2(
224233
0.dp
225234
},
226235
LocalBottomBarShowing provides (layoutType == NavigationSuiteType.NavigationBar),
236+
LocalHazeState provides hazeState,
227237
) {
228-
content.invoke()
238+
Box(
239+
modifier =
240+
Modifier
241+
.hazeSource(state = hazeState),
242+
) {
243+
content.invoke()
244+
}
229245
}
230246
Column(
231247
modifier =
@@ -279,15 +295,12 @@ fun NavigationSuiteScaffold2(
279295
AnimatedContent(
280296
isBottomBarExpanded,
281297
) { isExpanded ->
282-
Surface(
283-
shape =
284-
if (isExpanded) {
285-
RoundedCornerShape(25)
286-
} else {
287-
RoundedCornerShape(50)
288-
},
298+
Glassify(
299+
shape = RoundedCornerShape(50),
289300
shadowElevation = 8.dp,
290301
tonalElevation = 8.dp,
302+
hazeState = hazeState,
303+
hazeStyle = HazeMaterials.thick(),
291304
modifier =
292305
Modifier
293306
.sharedElement(
@@ -309,11 +322,9 @@ fun NavigationSuiteScaffold2(
309322
ShortNavigationBarItem(
310323
modifier =
311324
it.modifier
312-
.sharedBounds(
325+
.sharedElement(
313326
rememberSharedContentState("item_$index"),
314327
animatedVisibilityScope = this@AnimatedContent,
315-
enter = fadeIn(),
316-
exit = fadeOut(),
317328
),
318329
selected = it.selected,
319330
onClick = it.onClick,
@@ -322,7 +333,9 @@ fun NavigationSuiteScaffold2(
322333
modifier =
323334
Modifier
324335
.sharedElement(
325-
rememberSharedContentState("item_icon_$index"),
336+
rememberSharedContentState(
337+
"item_icon_$index",
338+
),
326339
animatedVisibilityScope = this@AnimatedContent,
327340
),
328341
) {
@@ -347,36 +360,31 @@ fun NavigationSuiteScaffold2(
347360
AnimatedContent(
348361
isBottomBarExpanded,
349362
) { isExpanded ->
350-
if (isExpanded) {
351-
FloatingActionButton(
352-
modifier =
353-
Modifier
354-
.sharedElement(
355-
rememberSharedContentState("compose_fab"),
356-
animatedVisibilityScope = this@AnimatedContent,
357-
),
358-
onClick = onFabClicked,
359-
) {
360-
FAIcon(
361-
imageVector = FontAwesomeIcons.Solid.Pen,
362-
contentDescription = stringResource(id = R.string.compose_title),
363-
)
364-
}
365-
} else {
366-
SmallFloatingActionButton(
367-
onClick = onFabClicked,
368-
modifier =
369-
Modifier
370-
.sharedElement(
371-
rememberSharedContentState("compose_fab"),
372-
animatedVisibilityScope = this@AnimatedContent,
373-
),
374-
) {
375-
FAIcon(
376-
imageVector = FontAwesomeIcons.Solid.Pen,
377-
contentDescription = stringResource(id = R.string.compose_title),
378-
)
379-
}
363+
Glassify(
364+
onClick = onFabClicked,
365+
shape = CircleShape,
366+
shadowElevation = 8.dp,
367+
tonalElevation = 8.dp,
368+
color = MaterialTheme.colorScheme.primaryContainer,
369+
hazeState = hazeState,
370+
modifier =
371+
Modifier
372+
.sharedElement(
373+
rememberSharedContentState("compose_fab"),
374+
animatedVisibilityScope = this@AnimatedContent,
375+
).size(
376+
if (isExpanded) {
377+
56.dp
378+
} else {
379+
40.dp
380+
},
381+
),
382+
) {
383+
Icon(
384+
imageVector = FontAwesomeIcons.Solid.Pen,
385+
contentDescription = stringResource(id = R.string.compose_title),
386+
modifier = Modifier.size(20.dp),
387+
)
380388
}
381389
}
382390
}

‎app/src/main/java/dev/dimension/flare/ui/component/SearchBar.kt‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import androidx.compose.animation.fadeOut
66
import androidx.compose.animation.togetherWith
77
import androidx.compose.foundation.clickable
88
import androidx.compose.foundation.layout.Arrangement
9-
import androidx.compose.foundation.layout.PaddingValues
109
import androidx.compose.foundation.layout.imePadding
1110
import androidx.compose.foundation.layout.padding
1211
import androidx.compose.foundation.layout.width
@@ -17,7 +16,6 @@ import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
1716
import androidx.compose.foundation.text.input.TextFieldState
1817
import androidx.compose.foundation.text.input.delete
1918
import androidx.compose.foundation.text.input.rememberTextFieldState
20-
import androidx.compose.material3.Card
2119
import androidx.compose.material3.ExperimentalMaterial3Api
2220
import androidx.compose.material3.IconButton
2321
import androidx.compose.material3.ListItem
@@ -46,6 +44,7 @@ import dev.dimension.flare.common.onLoading
4644
import dev.dimension.flare.common.onSuccess
4745
import dev.dimension.flare.model.AccountType
4846
import dev.dimension.flare.model.MicroBlogKey
47+
import dev.dimension.flare.ui.component.status.AdaptiveCard
4948
import dev.dimension.flare.ui.component.status.CommonStatusHeaderComponent
5049
import dev.dimension.flare.ui.component.status.UserPlaceholder
5150
import dev.dimension.flare.ui.component.status.status
@@ -59,7 +58,6 @@ import dev.dimension.flare.ui.presenter.home.SearchHistoryState
5958
import dev.dimension.flare.ui.presenter.home.UserPresenter
6059
import dev.dimension.flare.ui.presenter.home.UserState
6160
import dev.dimension.flare.ui.presenter.invoke
62-
import dev.dimension.flare.ui.theme.screenHorizontalPadding
6361

6462
@Composable
6563
internal fun SearchBar(
@@ -197,18 +195,22 @@ internal fun LazyStaggeredGridScope.searchContent(
197195
headlineContent = {
198196
Text(text = stringResource(R.string.search_users))
199197
},
198+
colors =
199+
ListItemDefaults
200+
.colors(
201+
containerColor = Color.Transparent,
202+
),
200203
)
201204
}
202205
item(
203206
span = StaggeredGridItemSpan.FullLine,
204207
) {
205208
LazyRow(
206209
horizontalArrangement = Arrangement.spacedBy(8.dp),
207-
contentPadding = PaddingValues(horizontal = screenHorizontalPadding),
208210
) {
209211
items(itemCount) {
210212
val item = get(it)
211-
Card(
213+
AdaptiveCard(
212214
modifier =
213215
Modifier
214216
.width(256.dp),
@@ -238,10 +240,15 @@ internal fun LazyStaggeredGridScope.searchContent(
238240
headlineContent = {
239241
Text(text = stringResource(R.string.search_users))
240242
},
243+
colors =
244+
ListItemDefaults
245+
.colors(
246+
containerColor = Color.Transparent,
247+
),
241248
)
242249
}
243250
items(10) {
244-
Card(
251+
AdaptiveCard(
245252
modifier =
246253
Modifier
247254
.width(256.dp),
@@ -261,6 +268,11 @@ internal fun LazyStaggeredGridScope.searchContent(
261268
headlineContent = {
262269
Text(text = stringResource(R.string.search_status))
263270
},
271+
colors =
272+
ListItemDefaults
273+
.colors(
274+
containerColor = Color.Transparent,
275+
),
264276
)
265277
}
266278
status(searchStatus)

0 commit comments

Comments
 (0)