Skip to content

Commit

Permalink
Custom format all screen
Browse files Browse the repository at this point in the history
  • Loading branch information
Rawa committed Dec 12, 2023
1 parent 556ebce commit 0814fe4
Show file tree
Hide file tree
Showing 16 changed files with 347 additions and 378 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,11 @@ private fun PreviewAccountScreen() {
AppTheme {
AccountScreen(
showSitePayment = true,
uiState =
AccountUiState(
uiState = AccountUiState(
deviceName = "Test Name",
accountNumber = "1234123412341234",
accountExpiry = null,
billingPaymentState =
PaymentState.PaymentAvailable(
billingPaymentState = PaymentState.PaymentAvailable(
listOf(
PaymentProduct(
ProductId("productId"),
Expand Down Expand Up @@ -103,10 +101,8 @@ fun AccountScreen(
onRedeemVoucherClick: () -> Unit = {},
onManageAccountClick: () -> Unit = {},
onLogoutClick: () -> Unit = {},
onPurchaseBillingProductClick:
(productId: ProductId, activityProvider: () -> Activity) -> Unit =
{ _, _ ->
},
onPurchaseBillingProductClick: (productId: ProductId, activityProvider: () -> Activity) -> Unit = { _, _ ->
},
onClosePurchaseResultDialog: (success: Boolean) -> Unit = {},
onBackClick: () -> Unit = {},
) {
Expand Down Expand Up @@ -163,7 +159,9 @@ fun AccountScreen(
Column(
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(Dimens.accountRowSpacing),
modifier = modifier.animateContentSize().padding(horizontal = Dimens.sideMargin),
modifier = modifier
.animateContentSize()
.padding(horizontal = Dimens.sideMargin),
) {
DeviceNameRow(deviceName = uiState.deviceName ?: "") { showDeviceNameInfoDialog = true }

Expand Down Expand Up @@ -238,7 +236,9 @@ private fun AccountNumberRow(accountNumber: String) {
)
CopyableObfuscationView(
content = accountNumber,
modifier = Modifier.heightIn(min = Dimens.accountRowMinHeight).fillMaxWidth(),
modifier = Modifier
.heightIn(min = Dimens.accountRowMinHeight)
.fillMaxWidth(),
)
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ fun ConnectScreen(
is ConnectViewModel.UiSideEffect.OpenAccountManagementPageInBrowser -> {
context.openAccountPageInBrowser(uiSideEffect.token)
}

is ConnectViewModel.UiSideEffect.OpenOutOfTimeView -> {
onOpenOutOfTimeScreen()
}
Expand All @@ -120,26 +121,22 @@ fun ConnectScreen(
}

ScaffoldWithTopBarAndDeviceName(
topBarColor =
if (uiState.tunnelUiState.isSecured()) {
topBarColor = if (uiState.tunnelUiState.isSecured()) {
MaterialTheme.colorScheme.inversePrimary
} else {
MaterialTheme.colorScheme.error
},
statusBarColor =
if (uiState.tunnelUiState.isSecured()) {
statusBarColor = if (uiState.tunnelUiState.isSecured()) {
MaterialTheme.colorScheme.inversePrimary
} else {
MaterialTheme.colorScheme.error
},
navigationBarColor = null,
iconTintColor =
if (uiState.tunnelUiState.isSecured()) {
iconTintColor = if (uiState.tunnelUiState.isSecured()) {
MaterialTheme.colorScheme.onPrimary
} else {
MaterialTheme.colorScheme.onError
}
.copy(alpha = AlphaTopBar),
}.copy(alpha = AlphaTopBar),
onSettingsClicked = onSettingsClick,
onAccountClicked = onAccountClick,
deviceName = uiState.deviceName,
Expand All @@ -148,8 +145,8 @@ fun ConnectScreen(
Column(
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.Start,
modifier =
Modifier.padding(it)
modifier = Modifier
.padding(it)
.background(color = MaterialTheme.colorScheme.primary)
.fillMaxHeight()
.drawVerticalScrollbar(
Expand All @@ -167,22 +164,15 @@ fun ConnectScreen(
onClickDismissNewDevice = onDismissNewDeviceClick,
)
Spacer(modifier = Modifier.weight(1f))
if (
uiState.tunnelRealState is TunnelState.Connecting ||
(
uiState.tunnelRealState is TunnelState.Disconnecting &&
uiState.tunnelRealState.actionAfterDisconnect ==
ActionAfterDisconnect.Reconnect
)
) {
if (uiState.tunnelRealState is TunnelState.Connecting || (uiState.tunnelRealState is TunnelState.Disconnecting && uiState.tunnelRealState.actionAfterDisconnect == ActionAfterDisconnect.Reconnect)) {
MullvadCircularProgressIndicatorLarge(
color = MaterialTheme.colorScheme.onPrimary,
modifier =
Modifier.padding(
start = Dimens.sideMargin,
end = Dimens.sideMargin,
top = Dimens.mediumPadding,
)
modifier = Modifier
.padding(
start = Dimens.sideMargin,
end = Dimens.sideMargin,
top = Dimens.mediumPadding,
)
.align(Alignment.CenterHorizontally)
.testTag(CIRCULAR_PROGRESS_INDICATOR),
)
Expand All @@ -206,28 +196,25 @@ fun ConnectScreen(
)
LocationInfo(
onToggleTunnelInfo = onToggleTunnelInfo,
isVisible =
uiState.tunnelRealState != TunnelState.Disconnected &&
uiState.location?.hostname != null,
isVisible = uiState.tunnelRealState != TunnelState.Disconnected && uiState.location?.hostname != null,
isExpanded = uiState.isTunnelInfoExpanded,
location = uiState.location,
inAddress = uiState.inAddress,
outAddress = uiState.outAddress,
modifier =
Modifier.fillMaxWidth()
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = Dimens.sideMargin)
.testTag(LOCATION_INFO_TEST_TAG),
)
Spacer(modifier = Modifier.height(Dimens.buttonSpacing))
SwitchLocationButton(
modifier =
Modifier.fillMaxWidth()
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = Dimens.sideMargin)
.testTag(SELECT_LOCATION_BUTTON_TEST_TAG),
onClick = onSwitchLocationClick,
showChevron = uiState.showLocation,
text =
if (uiState.showLocation) {
text = if (uiState.showLocation) {
uiState.relayLocation?.locationName ?: ""
} else {
stringResource(id = R.string.switch_location)
Expand All @@ -236,8 +223,8 @@ fun ConnectScreen(
Spacer(modifier = Modifier.height(Dimens.buttonSpacing))
ConnectionButton(
state = uiState.tunnelUiState,
modifier =
Modifier.padding(horizontal = Dimens.sideMargin)
modifier = Modifier
.padding(horizontal = Dimens.sideMargin)
.testTag(CONNECT_BUTTON_TEST_TAG),
disconnectClick = onDisconnectClick,
reconnectClick = { handleThrottledAction(onReconnectClick) },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,10 @@ import net.mullvad.mullvadvpn.util.formatDate
private fun PreviewDeviceListScreen() {
AppTheme {
DeviceListScreen(
state =
DeviceListUiState(
deviceUiItems =
listOf(
state = DeviceListUiState(
deviceUiItems = listOf(
DeviceListItemUiState(
device =
Device(
device = Device(
id = "ID",
name = "Name",
pubkey = ByteArray(10),
Expand Down Expand Up @@ -97,15 +94,17 @@ fun DeviceListScreen(
onAccountClicked = null,
) {
Column(
modifier = Modifier.fillMaxSize().padding(it),
modifier = Modifier
.fillMaxSize()
.padding(it),
) {
val scrollState = rememberScrollState()
Column(
modifier =
Modifier.drawVerticalScrollbar(
scrollState,
MaterialTheme.colorScheme.onBackground,
)
modifier = Modifier
.drawVerticalScrollbar(
scrollState,
MaterialTheme.colorScheme.onBackground,
)
.verticalScroll(scrollState)
.weight(1f),
) {
Expand All @@ -130,56 +129,49 @@ fun DeviceListScreen(
@Composable
private fun ColumnScope.DeviceListHeader(state: DeviceListUiState) {
Image(
painter =
painterResource(
id =
if (state.hasTooManyDevices) {
painter = painterResource(
id = if (state.hasTooManyDevices) {
R.drawable.icon_fail
} else {
R.drawable.icon_success
},
),
contentDescription = null, // No meaningful user info or action.
modifier =
Modifier.align(Alignment.CenterHorizontally)
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(top = Dimens.iconFailSuccessTopMargin)
.size(Dimens.bigIconSize),
)

Text(
text =
stringResource(
id =
if (state.hasTooManyDevices) {
text = stringResource(
id = if (state.hasTooManyDevices) {
R.string.max_devices_warning_title
} else {
R.string.max_devices_resolved_title
},
),
style = MaterialTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.onBackground,
modifier =
Modifier.padding(
modifier = Modifier.padding(
start = Dimens.sideMargin,
end = Dimens.sideMargin,
top = Dimens.screenVerticalMargin,
),
)

Text(
text =
stringResource(
id =
if (state.hasTooManyDevices) {
text = stringResource(
id = if (state.hasTooManyDevices) {
R.string.max_devices_warning_description
} else {
R.string.max_devices_resolved_description
},
),
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onBackground,
modifier =
Modifier.wrapContentHeight()
modifier = Modifier
.wrapContentHeight()
.animateContentSize()
.padding(
top = Dimens.smallPadding,
Expand Down Expand Up @@ -207,15 +199,11 @@ private fun DeviceListItem(
)
Text(
modifier = Modifier.fillMaxWidth(),
text =
deviceUiState.device.created.parseAsDateTime()?.let { creationDate ->
text = deviceUiState.device.created.parseAsDateTime()?.let { creationDate ->
stringResource(id = R.string.created_x, creationDate.formatDate())
}
?: "",
} ?: "",
style = MaterialTheme.typography.listItemSubText,
color =
MaterialTheme.colorScheme.onPrimary
.copy(alpha = AlphaDescription)
color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaDescription)
.compositeOver(MaterialTheme.colorScheme.primary),
)
}
Expand Down Expand Up @@ -245,8 +233,7 @@ private fun DeviceListButtonPanel(
onBackClick: () -> Unit,
) {
Column(
modifier =
Modifier.padding(
modifier = Modifier.padding(
start = Dimens.sideMargin,
end = Dimens.sideMargin,
top = Dimens.spacingAboveButton,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,11 @@ fun DeviceRevokedScreen(
onSettingsClicked: () -> Unit = {},
onGoToLoginClicked: () -> Unit = {},
) {
val topColor =
if (state == DeviceRevokedUiState.SECURED) {
MaterialTheme.colorScheme.inversePrimary
} else {
MaterialTheme.colorScheme.error
}
val topColor = if (state == DeviceRevokedUiState.SECURED) {
MaterialTheme.colorScheme.inversePrimary
} else {
MaterialTheme.colorScheme.error
}

ScaffoldWithTopBar(
topBarColor = topColor,
Expand All @@ -55,8 +54,8 @@ fun DeviceRevokedScreen(
onAccountClicked = null,
) {
ConstraintLayout(
modifier =
Modifier.fillMaxHeight()
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
.padding(it)
.background(color = MaterialTheme.colorScheme.background),
Expand All @@ -66,19 +65,18 @@ fun DeviceRevokedScreen(
Image(
painter = painterResource(id = R.drawable.icon_fail),
contentDescription = null, // No meaningful user info or action.
modifier =
Modifier.constrainAs(icon) {
top.linkTo(parent.top, margin = 30.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
modifier = Modifier
.constrainAs(icon) {
top.linkTo(parent.top, margin = 30.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
.padding(horizontal = 12.dp)
.size(Dimens.bigIconSize),
)

Column(
modifier =
Modifier.constrainAs(body) {
modifier = Modifier.constrainAs(body) {
top.linkTo(icon.bottom, margin = 22.dp)
start.linkTo(parent.start, margin = 22.dp)
end.linkTo(parent.end, margin = 22.dp)
Expand Down Expand Up @@ -110,8 +108,7 @@ fun DeviceRevokedScreen(
}

Column(
modifier =
Modifier.constrainAs(actionButtons) {
modifier = Modifier.constrainAs(actionButtons) {
bottom.linkTo(parent.bottom, margin = 22.dp)
start.linkTo(parent.start, margin = 22.dp)
end.linkTo(parent.end, margin = 22.dp)
Expand Down
Loading

0 comments on commit 0814fe4

Please sign in to comment.