Rework Switch and titles to fix textoverflow

mullvad · Oct 18, 2023 · 0a14773 · 0a14773
1 parent 85bb4b1
commit 0a14773
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 135 deletions.
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
@@ -4,8 +4,9 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -20,6 +21,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import net.mullvad.mullvadvpn.compose.component.SpacedColumn
@@ -54,9 +56,9 @@ private fun PreviewBaseCell() {
 @Composable
 internal fun BaseCell(
     modifier: Modifier = Modifier,
-    iconView: @Composable () -> Unit = {},
-    title: @Composable () -> Unit,
-    bodyView: @Composable () -> Unit = {},
+    iconView: @Composable RowScope.() -> Unit = {},
+    title: @Composable RowScope.() -> Unit,
+    bodyView: @Composable ColumnScope.() -> Unit = {},
     isRowEnabled: Boolean = true,
     onCellClicked: () -> Unit = {},
     background: Color = MaterialTheme.colorScheme.primary,
@@ -82,8 +84,6 @@ internal fun BaseCell(
 
         title()
 
-        Spacer(modifier = Modifier.weight(1.0f))
-
         Column(modifier = Modifier.wrapContentWidth().wrapContentHeight()) { bodyView() }
     }
 }
@@ -93,14 +93,16 @@ internal fun BaseCellTitle(
     title: String,
     style: TextStyle,
     modifier: Modifier = Modifier,
-    textAlign: TextAlign = TextAlign.Center
+    textAlign: TextAlign = TextAlign.Start
 ) {
     Text(
         text = title,
         textAlign = textAlign,
         style = style,
         color = MaterialTheme.colorScheme.onPrimary,
-        modifier = modifier.wrapContentWidth(align = Alignment.End).wrapContentHeight()
+        overflow = TextOverflow.Ellipsis,
+        maxLines = 1,
+        modifier = modifier
     )
 }
 

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
@@ -57,7 +57,7 @@ fun ExpandableComposeCell(
             BaseCellTitle(
                 title = title,
                 style = MaterialTheme.typography.titleMedium,
-                modifier = titleModifier
+                modifier = titleModifier.weight(1f, fill = true)
             )
         },
         bodyView = {

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
@@ -49,7 +49,7 @@ fun InformationComposeCell(
             BaseCellTitle(
                 title = title,
                 style = MaterialTheme.typography.titleMedium,
-                modifier = titleModifier
+                modifier = titleModifier.weight(1f, true)
             )
         },
         background = background,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/MtuComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/MtuComposeCell.kt
@@ -6,10 +6,8 @@ import androidx.compose.foundation.layout.wrapContentWidth as wrapContentWidth1
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.constant.MTU_MAX_VALUE
@@ -30,7 +28,7 @@ fun MtuComposeCell(
     val titleModifier = Modifier
 
     BaseCell(
-        title = { MtuTitle(modifier = titleModifier) },
+        title = { MtuTitle(modifier = titleModifier.weight(1f, true)) },
         bodyView = { MtuBodyView(mtuValue = mtuValue, modifier = titleModifier) },
         onCellClicked = { onEditMtu.invoke() }
     )
@@ -40,10 +38,9 @@ fun MtuComposeCell(
 private fun MtuTitle(modifier: Modifier) {
     Text(
         text = stringResource(R.string.wireguard_mtu),
-        textAlign = TextAlign.Center,
         style = MaterialTheme.typography.titleMedium,
         color = MaterialTheme.colorScheme.onPrimary,
-        modifier = modifier.wrapContentWidth1(align = Alignment.End).wrapContentHeight()
+        modifier = modifier
     )
 }
 

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt
@@ -17,41 +17,46 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 
 @Preview
 @Composable
 private fun PreviewNavigationCell() {
-    NavigationComposeCell(
-        title = "Navigation sample",
-        bodyView = {
-            NavigationCellBody(
-                contentBodyDescription = "",
-                content = "content body",
-                contentColor = MaterialTheme.colorScheme.error,
-            )
-        },
-        onClick = {},
-        showWarning = true
-    )
+    AppTheme {
+        NavigationComposeCell(
+            title = "Navigation sample",
+            bodyView = {
+                NavigationCellBody(
+                    contentBodyDescription = "",
+                    content = "content body",
+                    contentColor = MaterialTheme.colorScheme.error,
+                )
+            },
+            onClick = {},
+            showWarning = true
+        )
+    }
 }
 
 @Preview
 @Composable
 private fun PreviewExternalLinkComposeCell() {
-    NavigationComposeCell(
-        title = "External link sample",
-        bodyView = {
-            NavigationCellBody(
-                contentBodyDescription = "content body",
-                content = "content body",
-                contentColor = MaterialTheme.colorScheme.onSecondary,
-                isExternalLink = true
-            )
-        },
-        onClick = {},
-        showWarning = false
-    )
+    AppTheme {
+        NavigationComposeCell(
+            title = "External link sample",
+            bodyView = {
+                NavigationCellBody(
+                    contentBodyDescription = "content body",
+                    content = "content body",
+                    contentColor = MaterialTheme.colorScheme.onSecondary,
+                    isExternalLink = true
+                )
+            },
+            onClick = {},
+            showWarning = false
+        )
+    }
 }
 
 @Composable
@@ -66,7 +71,11 @@ fun NavigationComposeCell(
     BaseCell(
         onCellClicked = onClick,
         title = {
-            NavigationTitleView(title = title, modifier = modifier, showWarning = showWarning)
+            NavigationTitleView(
+                title = title,
+                modifier = modifier.weight(1f, true),
+                showWarning = showWarning
+            )
         },
         bodyView = { bodyView() },
         isRowEnabled = isRowEnabled
@@ -89,7 +98,8 @@ internal fun NavigationTitleView(
     Text(
         text = title,
         style = MaterialTheme.typography.titleMedium,
-        color = MaterialTheme.colorScheme.onPrimary
+        color = MaterialTheme.colorScheme.onPrimary,
+        modifier = modifier
     )
 }
 

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
@@ -1,6 +1,7 @@
 package net.mullvad.mullvadvpn.compose.cell
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -36,7 +37,7 @@ fun SelectableCell(
     title: String,
     isSelected: Boolean,
     iconContentDescription: String? = null,
-    selectedIcon: @Composable () -> Unit = {
+    selectedIcon: @Composable RowScope.() -> Unit = {
         Icon(
             painter = painterResource(id = R.drawable.icon_tick),
             contentDescription = iconContentDescription,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
@@ -2,6 +2,7 @@ package net.mullvad.mullvadvpn.compose.cell
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentWidth
@@ -20,7 +21,7 @@ import androidx.compose.ui.unit.dp
 import androidx.core.text.HtmlCompat
 import androidx.core.text.HtmlCompat.FROM_HTML_MODE_COMPACT
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.CellSwitch
+import net.mullvad.mullvadvpn.compose.component.MullvadSwitch
 import net.mullvad.mullvadvpn.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
@@ -61,7 +62,13 @@ fun NormalSwitchComposeCell(
     onInfoClicked: (() -> Unit)? = null
 ) {
     SwitchComposeCell(
-        titleView = { BaseCellTitle(title = title, style = MaterialTheme.typography.labelLarge) },
+        titleView = {
+            BaseCellTitle(
+                title = title,
+                style = MaterialTheme.typography.labelLarge,
+                modifier = Modifier.weight(1f, true)
+            )
+        },
         isToggled = isToggled,
         startPadding = startPadding,
         isEnabled = isEnabled,
@@ -83,7 +90,13 @@ fun HeaderSwitchComposeCell(
     onInfoClicked: (() -> Unit)? = null,
 ) {
     SwitchComposeCell(
-        titleView = { BaseCellTitle(title = title, style = MaterialTheme.typography.titleMedium) },
+        titleView = {
+            BaseCellTitle(
+                title = title,
+                style = MaterialTheme.typography.titleMedium,
+                modifier = Modifier.weight(1f, fill = true)
+            )
+        },
         isToggled = isToggled,
         startPadding = startPadding,
         isEnabled = isEnabled,
@@ -96,7 +109,7 @@ fun HeaderSwitchComposeCell(
 
 @Composable
 private fun SwitchComposeCell(
-    titleView: @Composable () -> Unit,
+    titleView: @Composable RowScope.() -> Unit,
     isToggled: Boolean,
     startPadding: Dp,
     isEnabled: Boolean,
@@ -154,7 +167,7 @@ fun SwitchCellView(
             )
         }
 
-        CellSwitch(isChecked = isToggled, isEnabled = isEnabled, onCheckedChange = onSwitchClicked)
+        MullvadSwitch(checked = isToggled, enabled = isEnabled, onCheckedChange = onSwitchClicked)
     }
 }