Skip to content

Commit d3ed3cd

Browse files
PururunPururun
committed
Merge branch 'update-remove-icon-color-and-size-in-too-many-devices-droid-620'
2 parents 76da84c + ba037e8 commit d3ed3cd

File tree

2 files changed

+131
-14
lines changed
  • android

2 files changed

+131
-14
lines changed

‎android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt

+130-14
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ package net.mullvad.mullvadvpn.compose.screen
22

33
import androidx.compose.animation.animateContentSize
44
import androidx.compose.foundation.Image
5+
import androidx.compose.foundation.layout.Arrangement
56
import androidx.compose.foundation.layout.Column
67
import androidx.compose.foundation.layout.ColumnScope
78
import androidx.compose.foundation.layout.fillMaxSize
@@ -34,6 +35,7 @@ import net.mullvad.mullvadvpn.R
3435
import net.mullvad.mullvadvpn.compose.button.PrimaryButton
3536
import net.mullvad.mullvadvpn.compose.button.VariantButton
3637
import net.mullvad.mullvadvpn.compose.cell.BaseCell
38+
import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
3739
import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorMedium
3840
import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
3941
import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
@@ -56,7 +58,73 @@ import org.koin.androidx.compose.koinViewModel
5658

5759
@Composable
5860
@Preview
59-
private fun PreviewDeviceListScreen() {
61+
private fun PreviewDeviceListScreenTooManyDevices() {
62+
AppTheme {
63+
DeviceListScreen(
64+
state =
65+
DeviceListUiState(
66+
deviceUiItems =
67+
listOf(
68+
DeviceListItemUiState(
69+
device =
70+
Device(
71+
id = "ID1",
72+
name = "Name1",
73+
pubkey = ByteArray(10),
74+
created = "2012-12-12 12:12:12 UTC"
75+
),
76+
isLoading = false
77+
),
78+
DeviceListItemUiState(
79+
device =
80+
Device(
81+
id = "ID2",
82+
name = "Name2",
83+
pubkey = ByteArray(10),
84+
created = "2012-12-12 12:12:12 UTC"
85+
),
86+
isLoading = false
87+
),
88+
DeviceListItemUiState(
89+
device =
90+
Device(
91+
id = "ID3",
92+
name = "Name3",
93+
pubkey = ByteArray(10),
94+
created = "2012-12-12 12:12:12 UTC"
95+
),
96+
isLoading = false
97+
),
98+
DeviceListItemUiState(
99+
device =
100+
Device(
101+
id = "ID4",
102+
name = "Name4",
103+
pubkey = ByteArray(10),
104+
created = "2012-12-12 12:12:12 UTC"
105+
),
106+
isLoading = false
107+
),
108+
DeviceListItemUiState(
109+
device =
110+
Device(
111+
id = "ID5",
112+
name = "Name5",
113+
pubkey = ByteArray(10),
114+
created = "2012-12-12 12:12:12 UTC"
115+
),
116+
isLoading = true
117+
)
118+
),
119+
isLoading = false
120+
)
121+
)
122+
}
123+
}
124+
125+
@Composable
126+
@Preview
127+
private fun PreviewDeviceListScreenNotTooManyDevices() {
60128
AppTheme {
61129
DeviceListScreen(
62130
state =
@@ -69,17 +137,33 @@ private fun PreviewDeviceListScreen() {
69137
id = "ID",
70138
name = "Name",
71139
pubkey = ByteArray(10),
72-
created = "2002-12-12"
140+
created = "2012-12-12 12:12:12 UTC"
73141
),
74142
isLoading = false
75143
)
76144
),
77-
isLoading = true
145+
isLoading = false
78146
)
79147
)
80148
}
81149
}
82150

151+
@Composable
152+
@Preview
153+
private fun PreviewDeviceListScreenEmpty() {
154+
AppTheme {
155+
DeviceListScreen(state = DeviceListUiState(deviceUiItems = emptyList(), isLoading = false))
156+
}
157+
}
158+
159+
@Composable
160+
@Preview
161+
private fun PreviewDeviceListLoading() {
162+
AppTheme {
163+
DeviceListScreen(state = DeviceListUiState(deviceUiItems = emptyList(), isLoading = true))
164+
}
165+
}
166+
83167
@Destination
84168
@Composable
85169
fun DeviceList(
@@ -146,25 +230,55 @@ fun DeviceListScreen(
146230
)
147231
.verticalScroll(scrollState)
148232
.weight(1f)
149-
) {
150-
DeviceListHeader(state = state)
151-
152-
state.deviceUiItems.forEachIndexed { index, deviceUiState ->
153-
DeviceListItem(
154-
deviceUiState = deviceUiState,
155-
) {
156-
navigateToRemoveDeviceConfirmationDialog(deviceUiState.device)
157-
}
158-
if (state.deviceUiItems.lastIndex != index) {
159-
Divider()
233+
.fillMaxWidth(),
234+
verticalArrangement =
235+
if (state.isLoading) {
236+
Arrangement.Center
237+
} else {
238+
Arrangement.Top
160239
}
240+
) {
241+
if (state.isLoading) {
242+
DeviceListLoading()
243+
} else {
244+
DeviceListContent(
245+
state = state,
246+
navigateToRemoveDeviceConfirmationDialog =
247+
navigateToRemoveDeviceConfirmationDialog
248+
)
161249
}
162250
}
163251
DeviceListButtonPanel(state, onContinueWithLogin, onBackClick)
164252
}
165253
}
166254
}
167255

256+
@Composable
257+
private fun ColumnScope.DeviceListLoading() {
258+
MullvadCircularProgressIndicatorLarge(
259+
modifier = Modifier.padding(Dimens.smallPadding).align(Alignment.CenterHorizontally)
260+
)
261+
}
262+
263+
@Composable
264+
private fun ColumnScope.DeviceListContent(
265+
state: DeviceListUiState,
266+
navigateToRemoveDeviceConfirmationDialog: (Device) -> Unit
267+
) {
268+
DeviceListHeader(state = state)
269+
270+
state.deviceUiItems.forEachIndexed { index, deviceUiState ->
271+
DeviceListItem(
272+
deviceUiState = deviceUiState,
273+
) {
274+
navigateToRemoveDeviceConfirmationDialog(deviceUiState.device)
275+
}
276+
if (state.deviceUiItems.lastIndex != index) {
277+
Divider()
278+
}
279+
}
280+
}
281+
168282
@Composable
169283
private fun ColumnScope.DeviceListHeader(state: DeviceListUiState) {
170284
Image(
@@ -267,6 +381,8 @@ private fun DeviceListItem(
267381
Icon(
268382
painter = painterResource(id = R.drawable.icon_close),
269383
contentDescription = stringResource(id = R.string.remove_button),
384+
tint = MaterialTheme.colorScheme.onPrimary,
385+
modifier = Modifier.size(size = Dimens.deleteIconSize)
270386
)
271387
}
272388
}

‎android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ data class Dimensions(
3333
val connectButtonExtraPadding: Dp = 4.dp,
3434
val countryRowPadding: Dp = 18.dp,
3535
val customPortBoxMinWidth: Dp = 80.dp,
36+
val deleteIconSize: Dp = 24.dp,
3637
val dialogIconHeight: Dp = 44.dp,
3738
val dialogIconSize: Dp = 48.dp,
3839
val expandableCellChevronSize: Dp = 30.dp,

0 commit comments

Comments
 (0)