Merge pull request #29 from kiwicom/switch_pixel_art

switch: more precise drawing of Thumb
kiwicom · Sep 15, 2021 · d36ace5 · d36ace5
2 parents 9f47322 + b093c1c
commit d36ace5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/SwitchScreen.kt b/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/SwitchScreen.kt
@@ -14,6 +14,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import kiwi.orbit.compose.catalog.SubScreen
+import kiwi.orbit.compose.ui.controls.Separator
 import kiwi.orbit.compose.ui.controls.Surface
 import kiwi.orbit.compose.ui.controls.Switch
 
@@ -41,6 +42,12 @@ fun SwitchScreenInner() {
 
             Spacer(Modifier.height(8.dp))
 
+            Switch(checked = !value, onCheckedChange = { value = !it })
+
+            Spacer(Modifier.height(16.dp))
+            Separator()
+            Spacer(Modifier.height(16.dp))
+
             Switch(checked = true, onCheckedChange = {}, enabled = false)
 
             Spacer(Modifier.height(8.dp))

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/controls/Switch.kt b/ui/src/main/java/kiwi/orbit/compose/ui/controls/Switch.kt
@@ -4,6 +4,7 @@ import androidx.compose.animation.core.AnimationSpec
 import androidx.compose.animation.core.TweenSpec
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.indication
 import androidx.compose.foundation.interaction.DragInteraction
@@ -157,9 +158,17 @@ private fun BoxScope.SwitchImpl(
                 indication = rememberRipple(bounded = false, radius = ThumbRippleRadius)
             )
             .requiredSize(ThumbDiameter)
-            .shadow(elevation, CircleShape, clip = false)
+            .border(ThumbStrokeWidth, Color(0x1907405C), CircleShape) // 10% alpha from 255 = 25 dec = 19 hex
+            .padding(ThumbStrokeWidth)
+            .then(
+                if (enabled) {
+                    Modifier.shadow(elevation, CircleShape, clip = false)
+                } else {
+                    Modifier
+                }
+            )
             .background(OrbitTheme.colors.surface.main, CircleShape)
-            .padding((ThumbDiameter - 10.dp) / 2)
+            .padding((ThumbDiameter - ThumbInnerDiameter - ThumbStrokeWidth * 2) / 2)
             .background(mainColor, CircleShape)
     )
 }
@@ -213,10 +222,12 @@ private val SwitchHeight = 32.dp
 private val TrackWidth = SwitchWidth - SwitchPadding * 2
 private val TrackStrokeWidth = SwitchHeight - SwitchPadding * 2
 private val ThumbDiameter = SwitchHeight
+private val ThumbStrokeWidth = 0.5.dp
+private val ThumbInnerDiameter = 10.dp
 private val ThumbPathLength = SwitchWidth - ThumbDiameter
 private val ThumbRippleRadius = 24.dp
 
 private val AnimationSpec = TweenSpec<Float>(durationMillis = 100)
 
-private val ThumbDefaultElevation = 1.dp
+private val ThumbDefaultElevation = 3.dp
 private val ThumbPressedElevation = 6.dp