Skip to content

Commit 23e1e59

Browse files
SimonSchubertSimonSchubert
committed
Migrate to material 3
1 parent eaecb7a commit 23e1e59

19 files changed

Lines changed: 191 additions & 188 deletions

File tree

‎composeApp/build.gradle.kts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ kotlin {
4040
implementation(project(":common"))
4141
implementation(compose.runtime)
4242
implementation(compose.foundation)
43-
implementation(compose.material)
43+
implementation(compose.material3)
4444
implementation(compose.materialIconsExtended)
4545
implementation(compose.ui)
4646
implementation(compose.components.resources)
@@ -59,7 +59,6 @@ kotlin {
5959
implementation(libs.koin.androidx.compose)
6060
implementation(libs.androidx.activity.compose)
6161
implementation(libs.androidx.preference)
62-
implementation(libs.androidx.material3)
6362
}
6463
}
6564

‎composeApp/src/androidMain/kotlin/com/linuxcommandlibrary/app/ui/theme/DynamicColors.android.kt‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
package com.linuxcommandlibrary.app.ui.theme
22

33
import android.os.Build
4-
import androidx.compose.material.darkColors
5-
import androidx.compose.material.lightColors
64
import androidx.compose.material3.dynamicDarkColorScheme
75
import androidx.compose.material3.dynamicLightColorScheme
86
import androidx.compose.runtime.Composable
@@ -19,27 +17,13 @@ actual fun dynamicThemeColors(darkTheme: Boolean): DynamicThemeColors? {
1917
dynamicLightColorScheme(context)
2018
}
2119

22-
val colors = if (darkTheme) {
23-
darkColors(
24-
primary = BrandRed,
25-
primaryVariant = BrandDarkRed,
26-
secondary = m3Scheme.onSurface,
27-
background = m3Scheme.background,
28-
surface = m3Scheme.surface,
29-
)
30-
} else {
31-
lightColors(
32-
primary = BrandRed,
33-
primaryVariant = BrandDarkRed,
34-
secondary = m3Scheme.onSurface,
35-
background = m3Scheme.background,
36-
surface = m3Scheme.surface,
37-
)
38-
}
20+
val colorScheme = m3Scheme.copy(
21+
primary = BrandRed,
22+
)
3923

4024
val customColors = CustomColors(
4125
navBarBackground = m3Scheme.surfaceContainer,
4226
)
4327

44-
return DynamicThemeColors(colors = colors, customColors = customColors)
28+
return DynamicThemeColors(colorScheme = colorScheme, customColors = customColors)
4529
}

‎composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/App.kt‎

Lines changed: 57 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,29 @@ import androidx.compose.foundation.layout.Box
99
import androidx.compose.foundation.layout.Row
1010
import androidx.compose.foundation.layout.fillMaxSize
1111
import androidx.compose.foundation.layout.fillMaxWidth
12+
import androidx.compose.foundation.layout.height
1213
import androidx.compose.foundation.layout.heightIn
1314
import androidx.compose.foundation.layout.navigationBarsPadding
1415
import androidx.compose.foundation.layout.padding
1516
import androidx.compose.foundation.layout.size
1617
import androidx.compose.foundation.layout.statusBarsPadding
17-
import androidx.compose.material.BottomNavigation
18-
import androidx.compose.material.BottomNavigationItem
19-
import androidx.compose.material.Icon
20-
import androidx.compose.material.IconButton
21-
import androidx.compose.material.LocalContentAlpha
22-
import androidx.compose.material.LocalContentColor
23-
import androidx.compose.material.MaterialTheme
24-
import androidx.compose.material.OutlinedTextField
25-
import androidx.compose.material.Scaffold
26-
import androidx.compose.material.Text
27-
import androidx.compose.material.TextFieldDefaults
28-
import androidx.compose.material.TopAppBar
2918
import androidx.compose.material.icons.Icons
3019
import androidx.compose.material.icons.filled.Close
3120
import androidx.compose.material.icons.filled.Info
3221
import androidx.compose.material.icons.filled.Search
22+
import androidx.compose.material3.ExperimentalMaterial3Api
23+
import androidx.compose.material3.Icon
24+
import androidx.compose.material3.IconButton
25+
import androidx.compose.material3.MaterialTheme
26+
import androidx.compose.material3.NavigationBar
27+
import androidx.compose.material3.NavigationBarItem
28+
import androidx.compose.material3.NavigationBarItemDefaults
29+
import androidx.compose.material3.OutlinedTextField
30+
import androidx.compose.material3.OutlinedTextFieldDefaults
31+
import androidx.compose.material3.Scaffold
32+
import androidx.compose.material3.Text
33+
import androidx.compose.material3.TopAppBar
34+
import androidx.compose.material3.TopAppBarDefaults
3335
import androidx.compose.runtime.Composable
3436
import androidx.compose.runtime.LaunchedEffect
3537
import androidx.compose.runtime.MutableState
@@ -110,7 +112,7 @@ fun App(initialDeeplink: String? = null) {
110112
.statusBarsPadding()
111113
.background(LocalCustomColors.current.navBarBackground)
112114
.navigationBarsPadding()
113-
.background(MaterialTheme.colors.background),
115+
.background(MaterialTheme.colorScheme.background),
114116
) {
115117
LinuxApp(initialDeeplink = initialDeeplink)
116118
}
@@ -294,7 +296,7 @@ fun LinuxApp(initialDeeplink: String? = null) {
294296
enter = fadeIn(animationSpec = tween(300)),
295297
exit = fadeOut(animationSpec = tween(durationMillis = 300, delayMillis = 300)),
296298
) {
297-
Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.background)) {
299+
Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
298300
val searchViewModel: SearchViewModel = koinInject()
299301
SearchScreen(
300302
searchText = searchTextValue.value.text,
@@ -351,6 +353,7 @@ private fun parseDeeplink(url: String?): Route? {
351353
}
352354
}
353355

356+
@OptIn(ExperimentalMaterial3Api::class)
354357
@Composable
355358
private fun GenericTopBar(
356359
title: String,
@@ -361,6 +364,7 @@ private fun GenericTopBar(
361364
var showDialog by remember { mutableStateOf(false) }
362365

363366
TopAppBar(
367+
expandedHeight = 56.dp,
364368
title = {
365369
Text(
366370
title,
@@ -369,11 +373,14 @@ private fun GenericTopBar(
369373
overflow = TextOverflow.Ellipsis,
370374
)
371375
},
372-
backgroundColor = LocalCustomColors.current.topBarBackground,
373-
contentColor = LocalCustomColors.current.topBarContent,
374-
elevation = 0.dp,
375-
navigationIcon = if (showBackIcon) {
376-
{
376+
colors = TopAppBarDefaults.topAppBarColors(
377+
containerColor = LocalCustomColors.current.topBarBackground,
378+
titleContentColor = LocalCustomColors.current.topBarContent,
379+
navigationIconContentColor = LocalCustomColors.current.topBarContent,
380+
actionIconContentColor = LocalCustomColors.current.topBarContent,
381+
),
382+
navigationIcon = {
383+
if (showBackIcon) {
377384
IconButton(
378385
modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
379386
onClick = { navController.popBackStack() },
@@ -384,8 +391,6 @@ private fun GenericTopBar(
384391
)
385392
}
386393
}
387-
} else {
388-
null
389394
},
390395
actions = {
391396
if (showAppInfoIcon) {
@@ -406,6 +411,7 @@ private fun GenericTopBar(
406411
}
407412
}
408413

414+
@OptIn(ExperimentalMaterial3Api::class)
409415
@Composable
410416
private fun DetailTopBar(
411417
commandName: String,
@@ -421,6 +427,7 @@ private fun DetailTopBar(
421427
val bookmarkBorderPainter = rememberIconPainter(AppIcon.BOOKMARK_BORDER)
422428

423429
TopAppBar(
430+
expandedHeight = 56.dp,
424431
title = {
425432
Text(
426433
commandName,
@@ -429,9 +436,12 @@ private fun DetailTopBar(
429436
overflow = TextOverflow.Ellipsis,
430437
)
431438
},
432-
backgroundColor = LocalCustomColors.current.topBarBackground,
433-
contentColor = LocalCustomColors.current.topBarContent,
434-
elevation = 0.dp,
439+
colors = TopAppBarDefaults.topAppBarColors(
440+
containerColor = LocalCustomColors.current.topBarBackground,
441+
titleContentColor = LocalCustomColors.current.topBarContent,
442+
navigationIconContentColor = LocalCustomColors.current.topBarContent,
443+
actionIconContentColor = LocalCustomColors.current.topBarContent,
444+
),
435445
navigationIcon = {
436446
IconButton(
437447
modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
@@ -515,16 +525,20 @@ private fun SearchTopBar(
515525
.focusRequester(focusRequester)
516526
.padding(start = 8.dp, end = 8.dp),
517527
placeholder = { Text("Search...", color = topBarContent.copy(alpha = 0.7f)) },
518-
textStyle = MaterialTheme.typography.subtitle1.copy(color = topBarContent),
519-
colors = TextFieldDefaults.outlinedTextFieldColors(
520-
textColor = topBarContent,
528+
textStyle = MaterialTheme.typography.titleMedium.copy(color = topBarContent),
529+
colors = OutlinedTextFieldDefaults.colors(
530+
focusedTextColor = topBarContent,
531+
unfocusedTextColor = topBarContent,
521532
cursorColor = topBarContent,
522533
focusedBorderColor = Color.Transparent,
523534
unfocusedBorderColor = Color.Transparent,
524535
disabledBorderColor = Color.Transparent,
525-
backgroundColor = Color.Transparent,
526-
trailingIconColor = topBarContent.copy(alpha = LocalContentAlpha.current),
527-
placeholderColor = topBarContent.copy(alpha = 0.7f),
536+
focusedContainerColor = Color.Transparent,
537+
unfocusedContainerColor = Color.Transparent,
538+
focusedTrailingIconColor = topBarContent,
539+
unfocusedTrailingIconColor = topBarContent,
540+
focusedPlaceholderColor = topBarContent.copy(alpha = 0.7f),
541+
unfocusedPlaceholderColor = topBarContent.copy(alpha = 0.7f),
528542
),
529543
maxLines = 1,
530544
singleLine = true,
@@ -548,7 +562,7 @@ private fun SearchTopBar(
548562
.weight(1f)
549563
.padding(start = 16.dp)
550564
.semantics { contentDescription = "TopAppBarTitle" },
551-
style = MaterialTheme.typography.h6,
565+
style = MaterialTheme.typography.titleLarge,
552566
maxLines = 1,
553567
overflow = TextOverflow.Ellipsis,
554568
color = topBarContent,
@@ -581,9 +595,10 @@ private fun BottomBar(
581595
isOnTips: Boolean,
582596
onSelectTab: (Route) -> Unit,
583597
) {
584-
BottomNavigation(
585-
backgroundColor = LocalCustomColors.current.navBarBackground,
586-
elevation = 0.dp,
598+
NavigationBar(
599+
modifier = Modifier.height(64.dp),
600+
containerColor = LocalCustomColors.current.navBarBackground,
601+
tonalElevation = 0.dp,
587602
) {
588603
bottomBarItems.forEach { screen ->
589604
val painter = rememberIconPainter(screen.icon)
@@ -592,7 +607,7 @@ private fun BottomBar(
592607
Screen.Commands -> isOnCommands
593608
Screen.Tips -> isOnTips
594609
}
595-
BottomNavigationItem(
610+
NavigationBarItem(
596611
modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
597612
icon = {
598613
Icon(
@@ -603,8 +618,13 @@ private fun BottomBar(
603618
},
604619
label = { Text(screen.titleRes) },
605620
selected = isSelected,
606-
selectedContentColor = MaterialTheme.colors.primary,
607-
unselectedContentColor = MaterialTheme.colors.onSurface,
621+
colors = NavigationBarItemDefaults.colors(
622+
selectedIconColor = MaterialTheme.colorScheme.primary,
623+
selectedTextColor = MaterialTheme.colorScheme.primary,
624+
unselectedIconColor = MaterialTheme.colorScheme.onSurface,
625+
unselectedTextColor = MaterialTheme.colorScheme.onSurface,
626+
indicatorColor = Color.Transparent,
627+
),
608628
onClick = {
609629
val route = when (screen) {
610630
Screen.Basics -> Route.Basics

‎composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/composables/CommandView.kt‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ package com.linuxcommandlibrary.app.ui.composables
22

33
import androidx.compose.foundation.layout.Row
44
import androidx.compose.foundation.layout.padding
5-
import androidx.compose.material.Icon
6-
import androidx.compose.material.IconButton
7-
import androidx.compose.material.MaterialTheme
8-
import androidx.compose.material.Text
95
import androidx.compose.material.icons.Icons
106
import androidx.compose.material.icons.filled.Share
7+
import androidx.compose.material3.Icon
8+
import androidx.compose.material3.IconButton
9+
import androidx.compose.material3.MaterialTheme
10+
import androidx.compose.material3.Text
1111
import androidx.compose.runtime.Composable
1212
import androidx.compose.runtime.remember
1313
import androidx.compose.ui.Alignment
@@ -36,8 +36,8 @@ fun CommandView(
3636
verticalPadding: Dp = 6.dp,
3737
searchText: String = "",
3838
) {
39-
val codeColor = MaterialTheme.colors.primary
40-
val highlightColor = MaterialTheme.colors.secondary
39+
val codeColor = MaterialTheme.colorScheme.primary
40+
val highlightColor = MaterialTheme.colorScheme.onSurface
4141
val baseAnnotatedString = remember(elements, codeColor, searchText, highlightColor) {
4242
buildAnnotatedString {
4343
elements.forEach { element ->
@@ -102,7 +102,7 @@ fun CommandView(
102102
modifier = Modifier
103103
.weight(1f)
104104
.align(Alignment.CenterVertically),
105-
style = MaterialTheme.typography.subtitle2,
105+
style = MaterialTheme.typography.titleSmall,
106106
)
107107

108108
val shareHandler: ShareHandler = koinInject()

‎composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/composables/FastScrollBar.kt‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,9 @@ import androidx.compose.foundation.layout.offset
1010
import androidx.compose.foundation.layout.padding
1111
import androidx.compose.foundation.layout.size
1212
import androidx.compose.foundation.layout.width
13-
import androidx.compose.foundation.shape.CircleShape
1413
import androidx.compose.foundation.lazy.LazyListState
15-
import androidx.compose.material.MaterialTheme
16-
import androidx.compose.ui.geometry.Size
17-
import androidx.compose.ui.graphics.Outline
18-
import androidx.compose.ui.graphics.Path
19-
import androidx.compose.ui.graphics.Shape
20-
import androidx.compose.ui.unit.Density
21-
import androidx.compose.ui.unit.LayoutDirection
14+
import androidx.compose.foundation.shape.CircleShape
15+
import androidx.compose.material3.MaterialTheme
2216
import androidx.compose.runtime.Composable
2317
import androidx.compose.runtime.derivedStateOf
2418
import androidx.compose.runtime.getValue
@@ -28,9 +22,15 @@ import androidx.compose.runtime.rememberCoroutineScope
2822
import androidx.compose.runtime.setValue
2923
import androidx.compose.ui.Alignment
3024
import androidx.compose.ui.Modifier
25+
import androidx.compose.ui.geometry.Size
26+
import androidx.compose.ui.graphics.Outline
27+
import androidx.compose.ui.graphics.Path
28+
import androidx.compose.ui.graphics.Shape
3129
import androidx.compose.ui.input.pointer.pointerInput
3230
import androidx.compose.ui.layout.onSizeChanged
31+
import androidx.compose.ui.unit.Density
3332
import androidx.compose.ui.unit.IntOffset
33+
import androidx.compose.ui.unit.LayoutDirection
3434
import androidx.compose.ui.unit.dp
3535
import kotlinx.coroutines.launch
3636

@@ -124,7 +124,7 @@ fun FastScrollBar(
124124
.height(BUBBLE_HEIGHT_DP)
125125
.onSizeChanged { thumbHeightPx = it.height.toFloat() }
126126
.background(
127-
color = MaterialTheme.colors.secondary.copy(
127+
color = MaterialTheme.colorScheme.onSurface.copy(
128128
alpha = if (isDragging) 0.4f else 0.15f,
129129
),
130130
shape = BubbleShape,
@@ -137,7 +137,7 @@ fun FastScrollBar(
137137
.padding(end = 2.dp)
138138
.size(16.dp)
139139
.background(
140-
color = MaterialTheme.colors.secondary.copy(
140+
color = MaterialTheme.colorScheme.onSurface.copy(
141141
alpha = if (isDragging) 0.6f else 0.3f,
142142
),
143143
shape = CircleShape,

‎composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/composables/HighlightedText.kt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
package com.linuxcommandlibrary.app.ui.composables
22

3-
import androidx.compose.material.MaterialTheme
4-
import androidx.compose.material.Text
3+
import androidx.compose.material3.MaterialTheme
4+
import androidx.compose.material3.Text
55
import androidx.compose.runtime.Composable
66
import androidx.compose.runtime.remember
77
import androidx.compose.ui.text.SpanStyle
@@ -26,10 +26,10 @@ fun HighlightedText(
2626
text = text,
2727
maxLines = maxLines,
2828
overflow = TextOverflow.Ellipsis,
29-
color = MaterialTheme.colors.primary,
29+
color = MaterialTheme.colorScheme.primary,
3030
)
3131
} else {
32-
val highlightColor = MaterialTheme.colors.primary
32+
val highlightColor = MaterialTheme.colorScheme.primary
3333
val annotatedString = remember(text, pattern, highlightColor) {
3434
buildAnnotatedString {
3535
val splitText = text.split(pattern, ignoreCase = true)

0 commit comments

Comments
 (0)