ui: Only animate height where possible to smooth out animation when y…

…ou are resizing the window
AChep · Dec 28, 2024 · bb979cb · bb979cb
1 parent 80b5957
commit bb979cb
Show file tree

Hide file tree

Showing 12 changed files with 259 additions and 64 deletions.
diff --git a/...rc/commonMain/kotlin/com/artemchep/keyguard/feature/attachments/compose/ItemAttachment.kt b/...rc/commonMain/kotlin/com/artemchep/keyguard/feature/attachments/compose/ItemAttachment.kt
@@ -2,7 +2,6 @@ package com.artemchep.keyguard.feature.attachments.compose
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.Crossfade
-import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.fadeIn

diff --git a/common/src/commonMain/kotlin/com/artemchep/keyguard/feature/auth/login/LoginScreen.kt b/common/src/commonMain/kotlin/com/artemchep/keyguard/feature/auth/login/LoginScreen.kt
@@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -21,7 +20,6 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.Login
 import androidx.compose.material.icons.outlined.Add
-import androidx.compose.material.icons.outlined.AppRegistration
 import androidx.compose.material.icons.outlined.Security
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenu
@@ -31,7 +29,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -86,7 +83,6 @@ import com.artemchep.keyguard.ui.UrlFlatTextField
 import com.artemchep.keyguard.ui.icons.ChevronIcon
 import com.artemchep.keyguard.ui.icons.DropdownIcon
 import com.artemchep.keyguard.ui.icons.IconBox
-import com.artemchep.keyguard.ui.icons.icon
 import com.artemchep.keyguard.ui.skeleton.SkeletonText
 import com.artemchep.keyguard.ui.skeleton.SkeletonTextField
 import com.artemchep.keyguard.ui.theme.Dimens

diff --git a/common/src/commonMain/kotlin/com/artemchep/keyguard/feature/barcodetype/BarcodeTypeScreen.kt b/common/src/commonMain/kotlin/com/artemchep/keyguard/feature/barcodetype/BarcodeTypeScreen.kt
@@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.QrCode
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -44,6 +43,7 @@ import com.artemchep.keyguard.res.*
 import com.artemchep.keyguard.ui.FlatDropdown
 import com.artemchep.keyguard.ui.FlatItemTextContent
 import com.artemchep.keyguard.ui.KeepScreenOnEffect
+import com.artemchep.keyguard.ui.animation.animateContentHeight
 import com.artemchep.keyguard.ui.icons.DropdownIcon
 import com.artemchep.keyguard.ui.icons.icon
 import org.jetbrains.compose.resources.stringResource
@@ -120,7 +120,7 @@ private fun BarcodeTypeContent(
                     BarcodeImage(
                         modifier = Modifier
                             .fillMaxWidth()
-                            .animateContentSize(),
+                            .animateContentHeight(),
                         imageModel = {
                             imageRequest
                                 ?.copy(

diff --git a/...n/src/commonMain/kotlin/com/artemchep/keyguard/feature/confirmation/ConfirmationScreen.kt b/...n/src/commonMain/kotlin/com/artemchep/keyguard/feature/confirmation/ConfirmationScreen.kt
@@ -2,7 +2,6 @@ package com.artemchep.keyguard.feature.confirmation
 
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.animateContentSize
-import androidx.compose.animation.core.animateSizeAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
@@ -42,7 +41,6 @@ import com.artemchep.keyguard.feature.auth.common.VisibilityState
 import com.artemchep.keyguard.feature.auth.common.VisibilityToggle
 import com.artemchep.keyguard.feature.dialog.Dialog
 import com.artemchep.keyguard.feature.filepicker.FilePickerEffect
-import com.artemchep.keyguard.feature.filepicker.humanReadableByteCountBin
 import com.artemchep.keyguard.feature.filepicker.humanReadableByteCountSI
 import com.artemchep.keyguard.feature.navigation.LocalNavigationController
 import com.artemchep.keyguard.feature.navigation.NavigationIntent
@@ -57,7 +55,6 @@ import com.artemchep.keyguard.ui.FlatItemLayout
 import com.artemchep.keyguard.ui.FlatTextField
 import com.artemchep.keyguard.ui.MediumEmphasisAlpha
 import com.artemchep.keyguard.ui.PasswordStrengthBadge
-import com.artemchep.keyguard.ui.icons.IconBox
 import com.artemchep.keyguard.ui.skeleton.SkeletonItem
 import com.artemchep.keyguard.ui.theme.Dimens
 import com.artemchep.keyguard.ui.theme.combineAlpha

diff --git a/...om/artemchep/keyguard/feature/confirmation/organization/OrganizationConfirmationScreen.kt b/...om/artemchep/keyguard/feature/confirmation/organization/OrganizationConfirmationScreen.kt
@@ -1,7 +1,6 @@
 package com.artemchep.keyguard.feature.confirmation.organization
 
 import androidx.compose.animation.animateContentSize
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope

diff --git a/common/src/commonMain/kotlin/com/artemchep/keyguard/feature/generator/GeneratorScreen.kt b/common/src/commonMain/kotlin/com/artemchep/keyguard/feature/generator/GeneratorScreen.kt
@@ -106,6 +106,7 @@ import com.artemchep.keyguard.ui.MediumEmphasisAlpha
 import com.artemchep.keyguard.ui.OptionsButton
 import com.artemchep.keyguard.ui.PasswordStrengthBadge
 import com.artemchep.keyguard.ui.ScaffoldColumn
+import com.artemchep.keyguard.ui.animation.animateContentHeight
 import com.artemchep.keyguard.ui.collectIsInteractedWith
 import com.artemchep.keyguard.ui.colorizePassword
 import com.artemchep.keyguard.ui.icons.DropdownIcon
@@ -556,7 +557,7 @@ fun ColumnScope.GeneratorValue(
                 Crossfade(
                     targetState = value.password,
                     modifier = Modifier
-                        .animateContentSize(),
+                        .animateContentHeight(),
                 ) { password ->
                     AutoResizeText(
                         text = colorizePasswordOrEmpty(password),
@@ -1189,23 +1190,18 @@ fun AutoResizeText(
     minFontSize: Float = 14f,
     maxLines: Int = Int.MAX_VALUE,
 ) {
-    Box(
-        modifier = modifier,
-    ) {
-        val fontSize = kotlin.run {
-            val ratio = 1f - (text.length / 128f)
-                .coerceAtMost(1f)
-            minFontSize + (maxFontSize - minFontSize) * ratio
-        }
-        Text(
-            modifier = Modifier
-                .animateContentSize(),
-            text = text,
-            fontFamily = monoFontFamily,
-            fontSize = fontSize.sp,
-            maxLines = maxLines,
-            overflow = TextOverflow.Ellipsis,
-            style = MaterialTheme.typography.titleLarge,
-        )
+    val fontSize = run {
+        val ratio = 1f - (text.length / 128f)
+            .coerceAtMost(1f)
+        minFontSize + (maxFontSize - minFontSize) * ratio
     }
+    Text(
+        modifier = modifier,
+        text = text,
+        fontFamily = monoFontFamily,
+        fontSize = fontSize.sp,
+        maxLines = maxLines,
+        overflow = TextOverflow.Ellipsis,
+        style = MaterialTheme.typography.titleLarge,
+    )
 }
diff --git a/...ommonMain/kotlin/com/artemchep/keyguard/feature/home/vault/component/VaultViewInfoItem.kt b/...ommonMain/kotlin/com/artemchep/keyguard/feature/home/vault/component/VaultViewInfoItem.kt
@@ -1,7 +1,6 @@
 package com.artemchep.keyguard.feature.home.vault.component
 
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
@@ -19,7 +18,6 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowDownward
-import androidx.compose.material.icons.outlined.ArrowDropDown
 import androidx.compose.material.icons.outlined.ErrorOutline
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.Icon
@@ -47,6 +45,7 @@ import com.artemchep.keyguard.res.*
 import com.artemchep.keyguard.ui.DisabledEmphasisAlpha
 import com.artemchep.keyguard.ui.ExpandedIfNotEmpty
 import com.artemchep.keyguard.ui.MediumEmphasisAlpha
+import com.artemchep.keyguard.ui.animation.animateContentHeight
 import com.artemchep.keyguard.ui.theme.Dimens
 import com.artemchep.keyguard.ui.theme.combineAlpha
 import com.artemchep.keyguard.ui.theme.info
@@ -114,7 +113,7 @@ fun VaultViewInfoItem(
                             .fillMaxWidth()
                             .padding(top = 4.dp)
                             .padding(horizontal = 8.dp)
-                            .animateContentSize(),
+                            .animateContentHeight(),
                         text = message,
                         style = MaterialTheme.typography.bodySmall,
                         color = LocalContentColor.current

diff --git a/...ommonMain/kotlin/com/artemchep/keyguard/feature/home/vault/component/VaultViewTotpItem.kt b/...ommonMain/kotlin/com/artemchep/keyguard/feature/home/vault/component/VaultViewTotpItem.kt
@@ -28,7 +28,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
@@ -39,8 +38,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.isSpecified
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import arrow.core.getOrElse

diff --git a/...mmonMain/kotlin/com/artemchep/keyguard/feature/home/vault/component/VaultViewValueItem.kt b/...mmonMain/kotlin/com/artemchep/keyguard/feature/home/vault/component/VaultViewValueItem.kt
@@ -1,7 +1,7 @@
 package com.artemchep.keyguard.feature.home.vault.component
 
-import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
@@ -35,12 +35,11 @@ import com.artemchep.keyguard.ui.FlatDropdown
 import com.artemchep.keyguard.ui.FlatItemAction
 import com.artemchep.keyguard.ui.MediumEmphasisAlpha
 import com.artemchep.keyguard.ui.animatedConcealedText
+import com.artemchep.keyguard.ui.animation.animateContentHeight
 import com.artemchep.keyguard.ui.colorizePassword
 import com.artemchep.keyguard.ui.theme.combineAlpha
 import com.artemchep.keyguard.ui.theme.monoFontFamily
 import org.jetbrains.compose.resources.stringResource
-import kotlinx.coroutines.flow.MutableSharedFlow
-import kotlin.Int
 
 @OptIn(ExperimentalLayoutApi::class)
 @Composable
@@ -83,28 +82,27 @@ fun VaultViewValueItem(
                 } else {
                     null
                 },
-                text = if (shownValue.isNotBlank()) {
-                    // composable
-                    {
-                        Text(
-                            modifier = Modifier
-                                .animateContentSize(),
-                            text = shownValue,
-                            fontFamily = if (item.monospace) monoFontFamily else null,
-                            maxLines = item.maxLines,
-                            overflow = TextOverflow.Ellipsis,
-                        )
-                    }
-                } else {
-                    // composable
-                    {
-                        Text(
-                            modifier = Modifier
-                                .animateContentSize()
-                                .alpha(MediumEmphasisAlpha),
-                            text = stringResource(Res.string.empty_value),
-                            fontFamily = if (item.monospace) monoFontFamily else null,
-                        )
+                text = {
+                    Box(
+                        modifier = Modifier
+                            .animateContentHeight(),
+                    ) {
+                        val fontFamily = if (item.monospace) monoFontFamily else null
+                        if (shownValue.isNotBlank()) {
+                            Text(
+                                text = shownValue,
+                                fontFamily = fontFamily,
+                                maxLines = item.maxLines,
+                                overflow = TextOverflow.Ellipsis,
+                            )
+                        } else {
+                            Text(
+                                modifier = Modifier
+                                    .alpha(MediumEmphasisAlpha),
+                                text = stringResource(Res.string.empty_value),
+                                fontFamily = fontFamily,
+                            )
+                        }
                     }
                 },
             )

diff --git a/common/src/commonMain/kotlin/com/artemchep/keyguard/feature/sync/SyncScreen.kt b/common/src/commonMain/kotlin/com/artemchep/keyguard/feature/sync/SyncScreen.kt
@@ -19,7 +19,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.mutableStateOf

diff --git a/common/src/commonMain/kotlin/com/artemchep/keyguard/ui/AutofillWindow.kt b/common/src/commonMain/kotlin/com/artemchep/keyguard/ui/AutofillWindow.kt
@@ -1,7 +1,6 @@
 package com.artemchep.keyguard.ui
 
 import androidx.compose.animation.Crossfade
-import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -52,6 +51,7 @@ import com.artemchep.keyguard.feature.home.vault.component.Section
 import com.artemchep.keyguard.feature.localization.wrap
 import com.artemchep.keyguard.res.Res
 import com.artemchep.keyguard.res.*
+import com.artemchep.keyguard.ui.animation.animateContentHeight
 import com.artemchep.keyguard.ui.icons.icon
 import com.artemchep.keyguard.ui.skeleton.SkeletonItem
 import com.artemchep.keyguard.ui.theme.combineAlpha
@@ -320,7 +320,7 @@ private fun ColumnScope.GeneratorValue2(
                 Crossfade(
                     targetState = value.password,
                     modifier = Modifier
-                        .animateContentSize(),
+                        .animateContentHeight(),
                 ) { password ->
                     AutoResizeText(
                         text = if (password.isEmpty()) {