Remove remaining uses of old topbar

mullvad · Oct 4, 2023 · 4427971 · 4427971
1 parent bdd68fe
commit 4427971
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 263 deletions.
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
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
@@ -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
@@ -1,23 +1,30 @@
+@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
 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
 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 = {}) {
+                    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
+    )
+}