refactor: UI polish from Material catalog

Lastaapps · May 21, 2024 · 4471b55 · 4471b55
1 parent 1e704e6
commit 4471b55
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/app/src/main/kotlin/cz/lastaapps/menza/features/today/ui/widget/ImageSize.kt b/app/src/main/kotlin/cz/lastaapps/menza/features/today/ui/widget/ImageSize.kt
@@ -26,13 +26,15 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Label
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.PlainTooltip
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.Text
+import androidx.compose.material3.TooltipDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
@@ -90,9 +92,9 @@ internal fun ImageSizeSetting(
                 Label(
                     label = {
                         PlainTooltip(
-                            modifier = Modifier
-                                .wrapContentWidth()
-                                .padding(vertical = Padding.Smaller),
+                            caretSize = TooltipDefaults.caretSize,
+                            modifier = Modifier.wrapContentWidth(),
+                            shape = CircleShape,
                         ) {
                             Text(
                                 "%.0f%%".format(it.value * 100),

diff --git a/app/src/main/kotlin/cz/lastaapps/menza/ui/components/MaterialPullIndicator.kt b/app/src/main/kotlin/cz/lastaapps/menza/ui/components/MaterialPullIndicator.kt
@@ -19,13 +19,19 @@
 
 package cz.lastaapps.menza.ui.components
 
+import androidx.compose.animation.core.LinearOutSlowInEasing
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.pulltorefresh.PullToRefreshBox
+import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
+import androidx.compose.material3.pulltorefresh.PullToRefreshState
+import androidx.compose.material3.pulltorefresh.pullToRefresh
+import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.key.Key
 import androidx.compose.ui.input.key.isCtrlPressed
 import androidx.compose.ui.input.key.key
@@ -40,17 +46,16 @@ fun PullToRefreshWrapper(
     enabled: Boolean = true,
     content: @Composable BoxScope.() -> Unit,
 ) {
-    if (!enabled) {
-        Box(modifier) {
-            content()
-        }
-        return
-    }
+    // move to the call side after it is not experimental any more
+    val state: PullToRefreshState = rememberPullToRefreshState()
 
-    PullToRefreshBox(
-        isRefreshing = isRefreshing,
-        onRefresh = onRefresh,
-        modifier = modifier
+    Box(
+        modifier
+            .pullToRefresh(
+                state = state,
+                isRefreshing = isRefreshing,
+                onRefresh = onRefresh,
+            )
             .onKeyEvent {
                 if ((it.isCtrlPressed && it.key == Key.R) || it.key == Key.Refresh) {
                     onRefresh()
@@ -59,6 +64,25 @@ fun PullToRefreshWrapper(
                 false
             }
             .clipToBounds(),
-        content = content,
-    )
+    ) {
+        content()
+
+        if (enabled) {
+            val scaleFraction = {
+                if (isRefreshing) 1f else
+                    LinearOutSlowInEasing.transform(state.distanceFraction).coerceIn(0f, 1f)
+            }
+
+            Box(
+                Modifier
+                    .align(Alignment.TopCenter)
+                    .graphicsLayer {
+                        scaleX = scaleFraction()
+                        scaleY = scaleFraction()
+                    },
+            ) {
+                PullToRefreshDefaults.Indicator(state = state, isRefreshing = isRefreshing)
+            }
+        }
+    }
 }