Skip to content

Commit 23098bf

Browse files
dani-zilladani-zilla
authored
feat(account-drawer) Made the landscape view and small screen view us… (#11488)
2 parents f19d7b0 + c330735 commit 23098bf

7 files changed

Lines changed: 106 additions & 25 deletions

File tree

‎components/ui/bolt/src/commonMain/kotlin/net/thunderbird/components/ui/bolt/organism/drawer/NavigationDrawerItem.kt‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
package net.thunderbird.components.ui.bolt.organism.drawer
22

3+
import androidx.compose.foundation.layout.height
4+
import androidx.compose.foundation.layout.heightIn
35
import androidx.compose.foundation.layout.padding
6+
import androidx.compose.foundation.layout.wrapContentHeight
47
import androidx.compose.material.icons.Icons
58
import androidx.compose.material.icons.outlined.AccountBox
69
import androidx.compose.material3.NavigationDrawerItem as Material3NavigationDrawerItem
@@ -10,9 +13,13 @@ import androidx.compose.ui.Modifier
1013
import androidx.compose.ui.text.AnnotatedString
1114
import androidx.compose.ui.text.style.TextOverflow
1215
import androidx.compose.ui.tooling.preview.Preview
16+
import androidx.compose.ui.unit.dp
1317
import net.thunderbird.components.ui.bolt.PreviewWithThemes
1418
import net.thunderbird.components.ui.bolt.atom.icon.Icon
1519
import net.thunderbird.components.ui.bolt.atom.text.TextLabelLarge
20+
import net.thunderbird.components.ui.bolt.atom.text.TextLabelMedium
21+
import net.thunderbird.components.ui.bolt.atom.text.TextLabelSmall
22+
import net.thunderbird.components.ui.bolt.theme.BoltTheme
1623

1724
/**
1825
* A navigation drawer item that can be used in a navigation drawer.
@@ -32,18 +39,32 @@ fun NavigationDrawerItem(
3239
modifier: Modifier = Modifier,
3340
icon: (@Composable () -> Unit)? = null,
3441
badge: (@Composable () -> Unit)? = null,
42+
reduceTextSize: Boolean = false,
3543
) {
3644
NavigationDrawerItem(
3745
label = {
38-
TextLabelLarge(
39-
text = label,
40-
overflow = TextOverflow.Ellipsis,
41-
maxLines = 2,
42-
)
46+
if (reduceTextSize) {
47+
TextLabelLarge(
48+
text = label,
49+
overflow = TextOverflow.Ellipsis,
50+
maxLines = 2,
51+
)
52+
} else {
53+
TextLabelLarge(
54+
text = label,
55+
overflow = TextOverflow.Ellipsis,
56+
maxLines = 2,
57+
)
58+
}
4359
},
4460
selected = selected,
4561
onClick = onClick,
46-
modifier = modifier,
62+
modifier = if (reduceTextSize) {
63+
modifier
64+
.height((BoltTheme.typography.labelLarge.lineHeight.value + BoltTheme.spacings.double.value).dp)
65+
} else {
66+
modifier
67+
},
4768
icon = icon,
4869
badge = badge,
4970
)

‎feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/DrawerContent.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,17 @@ import androidx.compose.foundation.layout.Column
1414
import androidx.compose.foundation.layout.WindowInsets
1515
import androidx.compose.foundation.layout.fillMaxHeight
1616
import androidx.compose.foundation.layout.fillMaxSize
17+
import androidx.compose.foundation.layout.padding
1718
import androidx.compose.foundation.layout.safeDrawing
1819
import androidx.compose.foundation.layout.width
1920
import androidx.compose.foundation.layout.windowInsetsPadding
21+
import androidx.compose.foundation.layout.wrapContentHeight
2022
import androidx.compose.runtime.Composable
2123
import androidx.compose.ui.Modifier
2224
import androidx.compose.ui.platform.LocalContext
2325
import androidx.compose.ui.platform.testTag
2426
import androidx.compose.ui.unit.IntOffset
27+
import androidx.compose.ui.unit.dp
2528
import net.thunderbird.components.ui.bolt.atom.DividerHorizontal
2629
import net.thunderbird.components.ui.bolt.atom.Surface
2730
import net.thunderbird.components.ui.bolt.theme.BoltTheme

‎feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/account/AccountListItem.kt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import androidx.compose.ui.text.font.FontWeight
1313
import androidx.compose.ui.text.withStyle
1414
import net.thunderbird.components.ui.bolt.atom.icon.Icon
1515
import net.thunderbird.components.ui.bolt.atom.icon.Icons
16-
import net.thunderbird.components.ui.bolt.atom.text.TextBodyLarge
1716
import net.thunderbird.components.ui.bolt.atom.text.TextBodyLargeAutoResize
1817
import net.thunderbird.components.ui.bolt.atom.text.TextBodyMedium
1918
import net.thunderbird.components.ui.bolt.organism.drawer.NavigationDrawerItem

‎feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/setting/AccountSettingList.kt‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
package net.thunderbird.feature.navigation.drawer.dropdown.ui.setting
22

33
import androidx.compose.foundation.layout.fillMaxWidth
4+
import androidx.compose.foundation.layout.height
45
import androidx.compose.foundation.layout.padding
6+
import androidx.compose.foundation.layout.wrapContentHeight
57
import androidx.compose.foundation.lazy.grid.GridItemSpan
68
import androidx.compose.runtime.Composable
79
import androidx.compose.ui.Modifier
810
import androidx.compose.ui.res.stringResource
911
import net.thunderbird.components.ui.bolt.atom.icon.Icons
1012
import net.thunderbird.components.ui.bolt.common.window.WindowHeightSizeClass
13+
import net.thunderbird.components.ui.bolt.common.window.WindowWidthSizeClass
1114
import net.thunderbird.components.ui.bolt.common.window.calculateWindowSizeInfo
1215
import net.thunderbird.components.ui.bolt.theme.BoltTheme
1316
import net.thunderbird.feature.navigation.drawer.dropdown.R
@@ -23,12 +26,21 @@ internal fun AccountSettingList(
2326
val windowSizeInfo = calculateWindowSizeInfo()
2427
val isLandscape = windowSizeInfo.size.width > windowSizeInfo.size.height
2528
val isCompactHeight = windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Compact
26-
val hideText = isLandscape && isCompactHeight
29+
val isSmallDisplay = windowSizeInfo.sizeClass.widthSizeClass == WindowWidthSizeClass.Small ||
30+
windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Small
31+
val hideText = (isLandscape && isCompactHeight) || isSmallDisplay
2732

2833
SettingList(
29-
modifier = modifier
30-
.padding(vertical = BoltTheme.spacings.default)
31-
.fillMaxWidth(),
34+
modifier = if (hideText) {
35+
modifier
36+
.padding(vertical = BoltTheme.spacings.double)
37+
.fillMaxWidth()
38+
.height(BoltTheme.sizes.iconAvatar)
39+
} else {
40+
modifier
41+
.padding(vertical = BoltTheme.spacings.default)
42+
.fillMaxWidth()
43+
},
3244
) {
3345
item(span = { if (hideText) GridItemSpan(1) else GridItemSpan(maxLineSpan) }) {
3446
SettingListItem(

‎feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/setting/FolderSettingList.kt‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
package net.thunderbird.feature.navigation.drawer.dropdown.ui.setting
22

33
import androidx.compose.foundation.layout.fillMaxWidth
4+
import androidx.compose.foundation.layout.height
45
import androidx.compose.foundation.layout.padding
56
import androidx.compose.foundation.lazy.grid.GridItemSpan
67
import androidx.compose.runtime.Composable
78
import androidx.compose.ui.Modifier
89
import androidx.compose.ui.res.stringResource
910
import net.thunderbird.components.ui.bolt.atom.icon.Icons
1011
import net.thunderbird.components.ui.bolt.common.window.WindowHeightSizeClass
12+
import net.thunderbird.components.ui.bolt.common.window.WindowWidthSizeClass
1113
import net.thunderbird.components.ui.bolt.common.window.calculateWindowSizeInfo
1214
import net.thunderbird.components.ui.bolt.theme.BoltTheme
1315
import net.thunderbird.feature.navigation.drawer.dropdown.R
@@ -25,12 +27,21 @@ internal fun FolderSettingList(
2527
val windowSizeInfo = calculateWindowSizeInfo()
2628
val isLandscape = windowSizeInfo.size.width > windowSizeInfo.size.height
2729
val isCompactHeight = windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Compact
28-
val hideText = isLandscape && isCompactHeight
30+
val isSmallDisplay = windowSizeInfo.sizeClass.widthSizeClass == WindowWidthSizeClass.Small ||
31+
windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Small
32+
val hideText = (isLandscape && isCompactHeight) || isSmallDisplay
2933

3034
SettingList(
31-
modifier = modifier
32-
.padding(vertical = BoltTheme.spacings.default)
33-
.fillMaxWidth(),
35+
modifier = if (hideText) {
36+
modifier
37+
.padding(vertical = BoltTheme.spacings.double)
38+
.fillMaxWidth()
39+
.height(BoltTheme.sizes.iconAvatar)
40+
} else {
41+
modifier
42+
.padding(vertical = BoltTheme.spacings.default)
43+
.fillMaxWidth()
44+
},
3445
) {
3546
if (isUnifiedAccount.not()) {
3647
item(span = { if (hideText) GridItemSpan(1) else GridItemSpan(maxLineSpan) }) {

‎feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/setting/SettingList.kt‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
package net.thunderbird.feature.navigation.drawer.dropdown.ui.setting
22

3+
import androidx.compose.foundation.layout.fillMaxWidth
4+
import androidx.compose.foundation.layout.height
35
import androidx.compose.foundation.lazy.grid.GridCells
46
import androidx.compose.foundation.lazy.grid.LazyGridScope
7+
import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
58
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
69
import androidx.compose.runtime.Composable
710
import androidx.compose.ui.Modifier
811
import androidx.compose.ui.unit.dp
912
import net.thunderbird.components.ui.bolt.common.window.WindowHeightSizeClass
13+
import net.thunderbird.components.ui.bolt.common.window.WindowWidthSizeClass
1014
import net.thunderbird.components.ui.bolt.common.window.calculateWindowSizeInfo
1115

1216
@Composable
@@ -17,16 +21,27 @@ internal fun SettingList(
1721
val windowSizeInfo = calculateWindowSizeInfo()
1822
val isLandscape = windowSizeInfo.size.width > windowSizeInfo.size.height
1923
val isCompactHeight = windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Compact
24+
val isSmallDisplay = windowSizeInfo.sizeClass.widthSizeClass == WindowWidthSizeClass.Small ||
25+
windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Small
2026
val phoneLandscape = isLandscape && isCompactHeight
2127

22-
LazyVerticalGrid(
23-
columns = if (phoneLandscape) {
24-
GridCells.Adaptive(minSize = 64.dp)
25-
} else {
26-
GridCells.Adaptive(minSize = 200.dp)
27-
},
28-
modifier = modifier,
29-
) {
30-
content()
28+
if (isSmallDisplay) {
29+
LazyHorizontalGrid(
30+
GridCells.Adaptive(minSize = 64.dp),
31+
modifier = modifier.fillMaxWidth(),
32+
) {
33+
content()
34+
}
35+
} else {
36+
LazyVerticalGrid(
37+
columns = if (phoneLandscape) {
38+
GridCells.Adaptive(minSize = 64.dp)
39+
} else {
40+
GridCells.Adaptive(minSize = 200.dp)
41+
},
42+
modifier = modifier,
43+
) {
44+
content()
45+
}
3146
}
3247
}

‎feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/setting/SettingListItem.kt‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,22 @@ import androidx.compose.animation.core.animateFloat
66
import androidx.compose.animation.core.infiniteRepeatable
77
import androidx.compose.animation.core.rememberInfiniteTransition
88
import androidx.compose.animation.core.tween
9+
import androidx.compose.foundation.layout.height
10+
import androidx.compose.foundation.layout.wrapContentHeight
11+
import androidx.compose.foundation.layout.wrapContentSize
912
import androidx.compose.runtime.Composable
1013
import androidx.compose.runtime.getValue
1114
import androidx.compose.ui.Modifier
1215
import androidx.compose.ui.draw.rotate
1316
import androidx.compose.ui.graphics.vector.ImageVector
17+
import androidx.compose.ui.unit.dp
1418
import net.thunderbird.components.ui.bolt.atom.button.ButtonIcon
1519
import net.thunderbird.components.ui.bolt.atom.icon.Icon
1620
import net.thunderbird.components.ui.bolt.common.window.WindowHeightSizeClass
21+
import net.thunderbird.components.ui.bolt.common.window.WindowWidthSizeClass
1722
import net.thunderbird.components.ui.bolt.common.window.calculateWindowSizeInfo
1823
import net.thunderbird.components.ui.bolt.organism.drawer.NavigationDrawerItem
24+
import net.thunderbird.components.ui.bolt.theme.BoltTheme
1925

2026
@Composable
2127
internal fun SettingListItem(
@@ -31,6 +37,7 @@ internal fun SettingListItem(
3137
// On phones in landscape, the height size class is typically Compact even if width is Medium.
3238
// Use height size class to better detect phone-in-landscape and hide labels accordingly.
3339
val isCompactHeight = windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Compact
40+
val isSmallWidth = windowSizeInfo.sizeClass.widthSizeClass == WindowWidthSizeClass.Small
3441
val hideText = isLandscape && isCompactHeight
3542

3643
val rotation: Float = if (isLoading) {
@@ -49,7 +56,20 @@ internal fun SettingListItem(
4956
0f
5057
}
5158

52-
if (hideText) {
59+
if (isSmallWidth) {
60+
ButtonIcon(
61+
onClick = onClick,
62+
imageVector = icon,
63+
modifier = if (rotation != 0f) {
64+
modifier
65+
.rotate(rotation)
66+
.height(BoltTheme.sizes.icon)
67+
} else {
68+
modifier.height(BoltTheme.sizes.icon)
69+
},
70+
contentDescription = label,
71+
)
72+
} else if (hideText) {
5373
ButtonIcon(
5474
onClick = onClick,
5575
imageVector = icon,

0 commit comments

Comments
 (0)