From 2a53fa3bd681553c2ef2537b21d749bf34e6f5c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20G=C3=B6ransson?= Date: Wed, 4 Oct 2023 14:56:35 +0200 Subject: [PATCH] Remove remaining uses of old topbar --- .../compose/component/CollapsingTopBar.kt | 112 ------------- .../compose/component/Scaffolding.kt | 37 ++--- .../mullvadvpn/compose/component/TopBar.kt | 70 +++++++- .../compose/screen/ReportProblemScreen.kt | 154 ++++++++---------- .../compose/screen/SettingsScreen.kt | 19 ++- .../compose/screen/SplitTunnelingScreen.kt | 5 +- .../compose/screen/ViewLogsScreen.kt | 35 ++-- .../compose/screen/VpnSettingsScreen.kt | 1 - 8 files changed, 171 insertions(+), 262 deletions(-) delete mode 100644 android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CollapsingTopBar.kt diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CollapsingTopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CollapsingTopBar.kt deleted file mode 100644 index f2906f1d4610..000000000000 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CollapsingTopBar.kt +++ /dev/null @@ -1,112 +0,0 @@ -package net.mullvad.mullvadvpn.compose.component - -import androidx.compose.foundation.Image -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width -import androidx.compose.foundation.layout.wrapContentHeight -import androidx.compose.foundation.layout.wrapContentWidth -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.rotate -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.dimensionResource -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp -import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.lib.theme.AppTheme - -@Preview -@Composable -private fun PreviewTopBar() { - AppTheme { - CollapsingTopBar( - backgroundColor = MaterialTheme.colorScheme.secondary, - onBackClicked = {}, - title = "View title", - progress = 1.0f, - modifier = Modifier.height(102.dp) - ) - } -} - -@Composable -fun CollapsingTopBar( - backgroundColor: Color, - onBackClicked: () -> Unit, - title: String, - progress: Float, - modifier: Modifier, - backIcon: Int? = null, - shouldRotateBackButtonDown: Boolean = false -) { - val expandedToolbarHeight = dimensionResource(id = R.dimen.expanded_toolbar_height) - val iconSize = dimensionResource(id = R.dimen.icon_size) - val sideMargin = dimensionResource(id = R.dimen.side_margin) - val verticalMargin = dimensionResource(id = R.dimen.cell_label_vertical_padding) - val maxTopPadding = 48 - val minTopPadding = 14 - val maxTitleSize = 30 - val minTitleSize = 20 - - Spacer( - modifier = Modifier.fillMaxWidth().height(expandedToolbarHeight).background(backgroundColor) - ) - - Button( - modifier = Modifier.wrapContentWidth().wrapContentHeight(), - onClick = onBackClicked, - colors = - ButtonDefaults.buttonColors( - contentColor = Color.White, - containerColor = backgroundColor - ), - shape = MaterialTheme.shapes.small - ) { - Image( - painter = painterResource(id = backIcon ?: R.drawable.icon_back), - contentDescription = stringResource(id = R.string.back), - modifier = - Modifier.rotate(if (shouldRotateBackButtonDown) 270f else 0f) - .width(iconSize) - .height(iconSize) - ) - } - - Text( - text = title, - style = - TextStyle(color = Color.White, fontWeight = FontWeight.Bold, textAlign = TextAlign.End), - modifier = - modifier.padding( - start = sideMargin, - end = sideMargin, - top = (minTopPadding + (maxTopPadding - minTopPadding) * progress).dp, - bottom = verticalMargin - ), - fontSize = - topBarSize( - progress = progress, - minTitleSize = minTitleSize, - maxTitleSize = maxTitleSize - ) - .sp - ) -} - -private fun topBarSize(progress: Float, minTitleSize: Int, maxTitleSize: Int): Float { - return (minTitleSize + ((maxTitleSize - minTitleSize) * progress)) -} diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt index 47966b3b88e4..e2ba1d4f764e 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt @@ -10,13 +10,11 @@ import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.MediumTopAppBar import androidx.compose.material3.Scaffold import androidx.compose.material3.Snackbar import androidx.compose.material3.SnackbarData import androidx.compose.material3.SnackbarHost import androidx.compose.material3.SnackbarHostState -import androidx.compose.material3.Text import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.rememberTopAppBarState import androidx.compose.runtime.Composable @@ -25,7 +23,6 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.nestedscroll.nestedScroll -import androidx.compose.ui.text.style.TextOverflow import com.google.accompanist.systemuicontroller.rememberSystemUiController import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar @@ -94,19 +91,18 @@ fun ScaffoldWithMediumTopBar( Scaffold( modifier = modifier.fillMaxSize().nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { - MediumTopAppBar( - title = { Text(appBarTitle, maxLines = 1, overflow = TextOverflow.Ellipsis) }, + MullvadMediumTopBar( + title = appBarTitle, navigationIcon = navigationIcon, - scrollBehavior = scrollBehavior, - colors = - TopAppBarDefaults.mediumTopAppBarColors( - containerColor = MaterialTheme.colorScheme.background - ), - actions = actions + actions, + scrollBehavior = scrollBehavior ) }, content = { - content(Modifier.fillMaxSize().padding(it).drawVerticalScrollbar(lazyListState), lazyListState) + content( + Modifier.fillMaxSize().padding(it).drawVerticalScrollbar(lazyListState), + lazyListState + ) } ) } @@ -130,20 +126,19 @@ fun ScaffoldWithMediumTopBar( Scaffold( modifier = modifier.fillMaxSize().nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { - MediumTopAppBar( - title = { Text(appBarTitle, maxLines = 1, overflow = TextOverflow.Ellipsis) }, + MullvadMediumTopBar( + title = appBarTitle, navigationIcon = navigationIcon, - scrollBehavior = scrollBehavior, - colors = - TopAppBarDefaults.mediumTopAppBarColors( - containerColor = MaterialTheme.colorScheme.background - ), - actions = actions + actions, + scrollBehavior = scrollBehavior ) }, content = { content( - Modifier.fillMaxSize().padding(it).drawVerticalScrollbar(scrollState).verticalScroll(scrollState) + Modifier.fillMaxSize() + .padding(it) + .drawVerticalScrollbar(scrollState) + .verticalScroll(scrollState) ) } ) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt index 2b41ba672209..c204be293ec3 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt @@ -1,7 +1,10 @@ +@file:OptIn(ExperimentalMaterial3Api::class) + package net.mullvad.mullvadvpn.compose.component import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -9,8 +12,11 @@ import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.MediumTopAppBar +import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBarDefaults +import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment @@ -18,6 +24,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import net.mullvad.mullvadvpn.R @@ -105,13 +112,14 @@ fun MullvadTopBar( val logoHeight = Dimens.mediumPadding val logoStartEndPadding = Dimens.mediumPadding - val shouldShowText = remember(maxWidth) { - val logoHeightWidthRatio = - logoTextPainter.intrinsicSize.width / - logoTextPainter.intrinsicSize.height - val expectedLength = logoHeightWidthRatio * logoHeight.value - maxWidth > (expectedLength + logoStartEndPadding.value * 2).dp - } + val shouldShowText = + remember(maxWidth) { + val logoHeightWidthRatio = + logoTextPainter.intrinsicSize.width / + logoTextPainter.intrinsicSize.height + val expectedLength = logoHeightWidthRatio * logoHeight.value + maxWidth > (expectedLength + logoStartEndPadding.value * 2).dp + } if (shouldShowText) { Icon( @@ -152,3 +160,51 @@ fun MullvadTopBar( ), ) } + +@Preview +@Composable +private fun PreviewMediumTopBar() { + AppTheme { + MullvadMediumTopBar( + title = "Title", + ) + } +} + +@Preview(widthDp = 260) +@Composable +private fun PreviewSlimMediumTopBar() { + AppTheme { + MullvadMediumTopBar( + title = "Long top bar with long title", + actions = { + IconButton(onClick = { /*TODO*/}) { + Icon( + painter = painterResource(id = R.drawable.icon_settings), + contentDescription = null + ) + } + } + ) + } +} + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun MullvadMediumTopBar( + title: String, + navigationIcon: @Composable () -> Unit = {}, + actions: @Composable RowScope.() -> Unit = {}, + scrollBehavior: TopAppBarScrollBehavior? = null +) { + MediumTopAppBar( + title = { Text(text = title, maxLines = 1, overflow = TextOverflow.Ellipsis) }, + navigationIcon = navigationIcon, + scrollBehavior = scrollBehavior, + colors = + TopAppBarDefaults.mediumTopAppBarColors( + containerColor = MaterialTheme.colorScheme.background + ), + actions = actions + ) +} diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt index 4d524c28dca1..77288fc9a423 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt @@ -3,8 +3,8 @@ package net.mullvad.mullvadvpn.compose.screen import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope +import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding @@ -13,7 +13,6 @@ import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.TextField import androidx.compose.runtime.Composable @@ -33,12 +32,10 @@ import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.withStyle import androidx.compose.ui.tooling.preview.Preview -import me.onebone.toolbar.ScrollStrategy -import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.button.ActionButton -import net.mullvad.mullvadvpn.compose.component.CollapsingToolbarScaffold -import net.mullvad.mullvadvpn.compose.component.CollapsingTopBar +import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton +import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar import net.mullvad.mullvadvpn.compose.dialog.ReportProblemNoEmailDialog import net.mullvad.mullvadvpn.compose.textfield.mullvadWhiteTextFieldColors import net.mullvad.mullvadvpn.dataproxy.SendProblemReportResult @@ -100,39 +97,30 @@ fun ReportProblemScreen( onNavigateToViewLogs: () -> Unit = {}, onBackClick: () -> Unit = {} ) { + var email by rememberSaveable { mutableStateOf("") } + var description by rememberSaveable { mutableStateOf("") } - val scaffoldState = rememberCollapsingToolbarScaffoldState() - val progress = scaffoldState.toolbarState.progress - CollapsingToolbarScaffold( - backgroundColor = MaterialTheme.colorScheme.background, - modifier = Modifier.fillMaxSize(), - state = scaffoldState, - scrollStrategy = ScrollStrategy.ExitUntilCollapsed, - isEnabledWhenCollapsable = false, - toolbar = { - val scaffoldModifier = - Modifier.road( - whenCollapsed = Alignment.TopCenter, - whenExpanded = Alignment.BottomStart - ) - CollapsingTopBar( - backgroundColor = MaterialTheme.colorScheme.background, - onBackClicked = onBackClick, - title = stringResource(id = R.string.report_a_problem), - progress = progress, - modifier = scaffoldModifier, - ) - }, - ) { - var email by rememberSaveable { mutableStateOf("") } - var description by rememberSaveable { mutableStateOf("") } + // Dialog to show confirm if no email was added + if (uiState.showConfirmNoEmail) { + ReportProblemNoEmailDialog( + onDismiss = onDismissNoEmailDialog, + onConfirm = { onSendReport(email, description) } + ) + } + + ScaffoldWithMediumTopBar( + appBarTitle = stringResource(id = R.string.report_a_problem), + navigationIcon = { NavigateBackIconButton(onBackClick) } + ) { modifier -> - // Show sending states + //// Show sending states if (uiState.sendingState != null) { Column( modifier = - Modifier.fillMaxSize() - .padding(vertical = Dimens.mediumPadding, horizontal = Dimens.sideMargin) + modifier.padding( + vertical = Dimens.mediumPadding, + horizontal = Dimens.sideMargin + ) ) { when (uiState.sendingState) { SendingReportUiState.Sending -> SendingContent() @@ -140,69 +128,61 @@ fun ReportProblemScreen( ErrorContent({ onSendReport(email, description) }, onClearSendResult) is SendingReportUiState.Success -> SentContent(uiState.sendingState) } - return@CollapsingToolbarScaffold + return@ScaffoldWithMediumTopBar } } - // Dialog to show confirm if no email was added - if (uiState.showConfirmNoEmail) { - ReportProblemNoEmailDialog( - onDismiss = onDismissNoEmailDialog, - onConfirm = { onSendReport(email, description) } - ) - } - - Surface(color = MaterialTheme.colorScheme.background) { - Column( - modifier = - Modifier.padding( + Column( + modifier = + modifier + .padding( start = Dimens.sideMargin, end = Dimens.sideMargin, bottom = Dimens.verticalSpace, - ), - verticalArrangement = Arrangement.spacedBy(Dimens.mediumPadding) - ) { - Text(text = stringResource(id = R.string.problem_report_description)) + ) + .height(IntrinsicSize.Max), + verticalArrangement = Arrangement.spacedBy(Dimens.mediumPadding) + ) { + Text(text = stringResource(id = R.string.problem_report_description)) - TextField( - modifier = Modifier.fillMaxWidth(), - value = email, - onValueChange = { email = it }, - maxLines = 1, - singleLine = true, - placeholder = { Text(text = stringResource(id = R.string.user_email_hint)) }, - colors = mullvadWhiteTextFieldColors() - ) + TextField( + modifier = Modifier.fillMaxWidth(), + value = email, + onValueChange = { email = it }, + maxLines = 1, + singleLine = true, + placeholder = { Text(text = stringResource(id = R.string.user_email_hint)) }, + colors = mullvadWhiteTextFieldColors() + ) - TextField( - modifier = Modifier.fillMaxWidth().weight(1f), - value = description, - onValueChange = { description = it }, - placeholder = { Text(stringResource(R.string.user_message_hint)) }, - colors = mullvadWhiteTextFieldColors() - ) + TextField( + modifier = Modifier.fillMaxWidth().weight(1f), + value = description, + onValueChange = { description = it }, + placeholder = { Text(stringResource(R.string.user_message_hint)) }, + colors = mullvadWhiteTextFieldColors() + ) - ActionButton( - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - contentColor = MaterialTheme.colorScheme.onPrimary - ), - onClick = onNavigateToViewLogs, - text = stringResource(id = R.string.view_logs) - ) + ActionButton( + colors = + ButtonDefaults.buttonColors( + containerColor = MaterialTheme.colorScheme.primary, + contentColor = MaterialTheme.colorScheme.onPrimary + ), + onClick = onNavigateToViewLogs, + text = stringResource(id = R.string.view_logs) + ) - ActionButton( - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.surface, - contentColor = MaterialTheme.colorScheme.onSurface - ), - onClick = { onSendReport(email, description) }, - isEnabled = description.isNotEmpty(), - text = stringResource(id = R.string.send) - ) - } + ActionButton( + colors = + ButtonDefaults.buttonColors( + containerColor = MaterialTheme.colorScheme.surface, + contentColor = MaterialTheme.colorScheme.onSurface + ), + onClick = { onSendReport(email, description) }, + isEnabled = description.isNotEmpty(), + text = stringResource(id = R.string.send) + ) } } } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt index 86dcc80f289b..8983e6ac4a9a 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt @@ -31,6 +31,7 @@ import net.mullvad.mullvadvpn.compose.state.SettingsUiState import net.mullvad.mullvadvpn.compose.test.LAZY_LIST_TEST_TAG import net.mullvad.mullvadvpn.constant.IS_PLAY_BUILD import net.mullvad.mullvadvpn.lib.common.util.openLink +import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens import net.mullvad.mullvadvpn.util.appendHideNavOnPlayBuild @@ -38,11 +39,17 @@ import net.mullvad.mullvadvpn.util.appendHideNavOnPlayBuild @Preview @Composable private fun PreviewSettings() { - SettingsScreen( - uiState = - SettingsUiState(appVersion = "2222.22", isLoggedIn = true, isUpdateAvailable = true), - enterTransitionEndAction = MutableSharedFlow() - ) + AppTheme { + SettingsScreen( + uiState = + SettingsUiState( + appVersion = "2222.22", + isLoggedIn = true, + isUpdateAvailable = true + ), + enterTransitionEndAction = MutableSharedFlow() + ) + } } @ExperimentalMaterial3Api @@ -64,7 +71,7 @@ fun SettingsScreen( } ScaffoldWithMediumTopBar( - appBarTitle = stringResource(id = R.string.settings_vpn), + appBarTitle = stringResource(id = R.string.settings), navigationIcon = { NavigateBackDownIconButton(onBackClick) }, ) { modifier, lazyListState -> LazyColumn( diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt index 7823a2849466..28d5e05fb34d 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt @@ -88,10 +88,7 @@ fun SplitTunnelingScreen( appBarTitle = stringResource(id = R.string.split_tunneling), navigationIcon = { NavigateBackIconButton(onBackClick) } ) { _, lazyListState -> - LazyColumn( - horizontalAlignment = Alignment.CenterHorizontally, - state = lazyListState - ) { + LazyColumn(horizontalAlignment = Alignment.CenterHorizontally, state = lazyListState) { item(key = CommonContentKey.DESCRIPTION, contentType = ContentType.DESCRIPTION) { Box(modifier = Modifier.fillMaxWidth()) { Text( diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt index 091d19f480a3..cdef4bdbb3ae 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt @@ -8,7 +8,9 @@ import androidx.compose.foundation.text.selection.SelectionContainer import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Card import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Scaffold import androidx.compose.material3.TextField import androidx.compose.material3.TextFieldDefaults import androidx.compose.runtime.Composable @@ -17,11 +19,9 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview -import me.onebone.toolbar.ScrollStrategy -import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.component.CollapsingToolbarScaffold -import net.mullvad.mullvadvpn.compose.component.CollapsingTopBar +import net.mullvad.mullvadvpn.compose.component.MullvadMediumTopBar +import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens @@ -39,38 +39,25 @@ private fun PreviewViewLogsLoadingScreen() { AppTheme { ViewLogsScreen(uiState = ViewLogsUiState()) } } +@OptIn(ExperimentalMaterial3Api::class) @Composable fun ViewLogsScreen( uiState: ViewLogsUiState, onBackClick: () -> Unit = {}, ) { - val scaffoldState = rememberCollapsingToolbarScaffoldState() - val progress = scaffoldState.toolbarState.progress - CollapsingToolbarScaffold( - backgroundColor = MaterialTheme.colorScheme.background, - modifier = Modifier.fillMaxSize(), - state = scaffoldState, - scrollStrategy = ScrollStrategy.ExitUntilCollapsed, - isEnabledWhenCollapsable = false, - toolbar = { - val scaffoldModifier = - Modifier.road( - whenCollapsed = Alignment.TopCenter, - whenExpanded = Alignment.BottomStart - ) - CollapsingTopBar( - backgroundColor = MaterialTheme.colorScheme.secondary, - onBackClicked = onBackClick, + Scaffold( + topBar = { + MullvadMediumTopBar( title = stringResource(id = R.string.view_logs), - progress = progress, - modifier = scaffoldModifier, + navigationIcon = { NavigateBackIconButton(onBackClick) } ) - }, + } ) { Card( modifier = Modifier.fillMaxSize() + .padding(it) .padding( start = Dimens.sideMargin, end = Dimens.sideMargin, diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt index a6857dcd72e9..c65710f17bc7 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt @@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.material3.Divider -import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable