Fix copy button scaling issue

mullvad · Aug 4, 2023 · 8d4481e · 8d4481e
1 parent c02098a
commit 8d4481e
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 16 deletions.
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/AccountNumberView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/AccountNumberView.kt
@@ -1,15 +1,21 @@
 package net.mullvad.mullvadvpn.compose.component
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import net.mullvad.mullvadvpn.lib.common.util.groupPasswordModeWithSpaces
 import net.mullvad.mullvadvpn.lib.common.util.groupWithSpaces
 
 @Composable
-fun AccountNumberView(accountNumber: String, doObfuscateWithPasswordDots: Boolean) {
+fun AccountNumberView(
+    accountNumber: String,
+    doObfuscateWithPasswordDots: Boolean,
+    modifier: Modifier = Modifier
+) {
     InformationView(
         content =
             if (doObfuscateWithPasswordDots) accountNumber.groupPasswordModeWithSpaces()
             else accountNumber.groupWithSpaces(),
+        modifier = modifier,
         whenMissing = MissingPolicy.SHOW_SPINNER
     )
 }
diff --git a/...d/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt b/...d/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt
@@ -1,13 +1,14 @@
 package net.mullvad.mullvadvpn.compose.component
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
+import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalContext
@@ -30,7 +31,7 @@ fun CopyableObfuscationView(content: String) {
     val context = LocalContext.current
     val shouldObfuscated = remember { mutableStateOf(true) }
 
-    Row(verticalAlignment = Alignment.CenterVertically) {
+    Row(verticalAlignment = CenterVertically, horizontalArrangement = Arrangement.End) {
         AccountNumberView(
             accountNumber = content,
             doObfuscateWithPasswordDots = shouldObfuscated.value
@@ -40,6 +41,7 @@ fun CopyableObfuscationView(content: String) {
             defaultIcon = painterResource(id = R.drawable.icon_hide),
             secondaryIcon = painterResource(id = R.drawable.icon_show),
             isToggleButton = true,
+            modifier = Modifier.padding(start = Dimens.smallPadding, end = Dimens.sideMargin),
             onClick = { shouldObfuscated.value = shouldObfuscated.value.not() }
         )
         AnimatedIconButton(
@@ -48,7 +50,7 @@ fun CopyableObfuscationView(content: String) {
             secondaryIconColorFilter =
                 ColorFilter.tint(color = MaterialTheme.colorScheme.inversePrimary),
             isToggleButton = false,
-            modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin),
+            modifier = Modifier.padding(end = Dimens.sideMargin),
             onClick = {
                 context.copyToClipboard(
                     content = content,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt
@@ -5,11 +5,12 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.compose.theme.Dimens
+import net.mullvad.mullvadvpn.compose.theme.typeface.TypeScale.TextMedium
+import net.mullvad.mullvadvpn.compose.theme.typeface.TypeScale.TextSmall
 
 @Preview
 @Composable
@@ -24,31 +25,40 @@ private fun PreviewEmptyInformationView() {
 }
 
 @Composable
-fun InformationView(content: String, whenMissing: MissingPolicy = MissingPolicy.SHOW_VIEW) {
+fun InformationView(
+    content: String,
+    modifier: Modifier = Modifier,
+    whenMissing: MissingPolicy = MissingPolicy.SHOW_VIEW,
+    maxLines: Int = 1
+) {
     return if (content.isNotEmpty()) {
-        Text(
+        AutoResizeText(
             style = MaterialTheme.typography.titleSmall,
             text = content,
+            minTextSize = TextSmall,
+            maxTextSize = TextMedium,
+            maxLines = maxLines,
             modifier =
-                Modifier.padding(
+                modifier.padding(
                     start = Dimens.sideMargin,
-                    end = Dimens.sideMargin,
                     top = Dimens.smallPadding,
-                    bottom = Dimens.mediumPadding
+                    bottom = Dimens.smallPadding
                 )
         )
     } else {
         when (whenMissing) {
             MissingPolicy.SHOW_VIEW -> {
-                Text(
+                AutoResizeText(
                     style = MaterialTheme.typography.titleMedium,
                     text = content,
+                    minTextSize = TextSmall,
+                    maxTextSize = TextMedium,
+                    maxLines = maxLines,
                     modifier =
-                        Modifier.padding(
+                        modifier.padding(
                             start = Dimens.sideMargin,
-                            end = Dimens.sideMargin,
                             top = Dimens.smallPadding,
-                            bottom = Dimens.mediumPadding
+                            bottom = Dimens.smallPadding
                         )
                 )
             }
@@ -58,9 +68,8 @@ fun InformationView(content: String, whenMissing: MissingPolicy = MissingPolicy.
                     modifier =
                         Modifier.padding(
                                 start = Dimens.sideMargin,
-                                end = Dimens.sideMargin,
                                 top = Dimens.smallPadding,
-                                bottom = Dimens.mediumPadding
+                                bottom = Dimens.smallPadding
                             )
                             .height(Dimens.loadingSpinnerSizeMedium)
                             .width(Dimens.loadingSpinnerSizeMedium),

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Text.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Text.kt
@@ -3,7 +3,12 @@ package net.mullvad.mullvadvpn.compose.component
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextStyle
@@ -13,6 +18,9 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.sp
+
+private val DEFAULT_TEXT_STEP = 1.sp
 
 @Composable
 fun CapsText(
@@ -52,3 +60,37 @@ fun CapsText(
         style = style,
     )
 }
+
+@Composable
+fun AutoResizeText(
+    text: String,
+    minTextSize: TextUnit,
+    maxTextSize: TextUnit,
+    modifier: Modifier = Modifier,
+    style: TextStyle = LocalTextStyle.current,
+    maxLines: Int = Int.MAX_VALUE,
+) {
+    var fontSizeValue by remember { mutableStateOf(maxTextSize.value) }
+    var readyToDraw by remember { mutableStateOf(false) }
+
+    Text(
+        text = text,
+        maxLines = maxLines,
+        style = style,
+        fontSize = fontSizeValue.sp,
+        onTextLayout = {
+            if (it.didOverflowHeight && !readyToDraw) {
+                val nextFontSizeValue = fontSizeValue - DEFAULT_TEXT_STEP.value
+                if (nextFontSizeValue <= minTextSize.value) {
+                    fontSizeValue = minTextSize.value
+                    readyToDraw = true
+                } else {
+                    fontSizeValue = nextFontSizeValue
+                }
+            } else {
+                readyToDraw = true
+            }
+        },
+        modifier = modifier.drawWithContent { if (readyToDraw) drawContent() }
+    )
+}