added slider with optional label

CharLEE-X · Feb 28, 2022 · d3e5177 · d3e5177
1 parent baec5a8
commit d3e5177
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 118 deletions.
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/app/src/main/kotlin/com/adwi/neumorph/sample/ui/components/OptionsItem.kt b/app/src/main/kotlin/com/adwi/neumorph/sample/ui/components/OptionsItem.kt
@@ -14,6 +14,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.adwi.neumorph.android.components.PreviewTemplate
+import com.adwi.neumorph.android.components.MorphSlider
 
 @OptIn(ExperimentalAnimationApi::class)
 @Composable
@@ -23,8 +24,8 @@ fun OptionsItem(
     value: Float,
     onValueChange: (Float) -> Unit,
     valueRange: ClosedFloatingPointRange<Float>,
-    elevation: Dp = 4.dp,
-    cornerRadius: Dp = 4.dp,
+    elevation: Dp = 10.dp,
+    cornerRadius: Dp = 10.dp,
     backgroundColor: Color = MaterialTheme.colors.background,
     labelColor: Color = MaterialTheme.colors.onBackground,
 ) {
@@ -34,7 +35,7 @@ fun OptionsItem(
             color = MaterialTheme.colors.onSurface
         )
         Spacer(modifier = Modifier.size(12.dp))
-        SliderWithLabel(
+        MorphSlider(
             value = value,
             onValueChange = onValueChange,
             valueRange = valueRange,

diff --git a/app/src/main/kotlin/com/adwi/neumorph/sample/ui/components/OptionsPanel.kt b/app/src/main/kotlin/com/adwi/neumorph/sample/ui/components/OptionsPanel.kt
diff --git a/app/src/main/kotlin/com/adwi/neumorph/sample/ui/components/RoundedIndicator.kt b/app/src/main/kotlin/com/adwi/neumorph/sample/ui/components/RoundedIndicator.kt
diff --git a/app/src/main/kotlin/com/adwi/neumorph/sample/ui/screens/HomeScreen.kt b/app/src/main/kotlin/com/adwi/neumorph/sample/ui/screens/HomeScreen.kt
@@ -183,7 +183,7 @@ fun HomeScreen() {
                     isExpanded.scrollToItemIfExpanded(scope, lazyListState, 6)
                 }
             ) { elevation, cornerRadius, color ->
-                MorphSlider(
+                MorphSliderBar(
                     value = sliderValue,
                     onValueChange = { sliderValue = it },
                     elevation = elevation.dp,

diff --git a/art/sliderd.gif b/art/sliderd.gif
diff --git a/art/sliderl.gif b/art/sliderl.gif
diff --git a/...otlin/com/adwi/neumorph/android/Slider.kt → ...in/com/adwi/neumorph/android/SliderBar.kt b/...otlin/com/adwi/neumorph/android/Slider.kt → ...in/com/adwi/neumorph/android/SliderBar.kt
@@ -54,7 +54,7 @@ import com.github.krottv.compose.sliders.SliderValueHorizontal
  * @param darkShadowColor color of darker shadow
  */
 @Composable
-fun MorphSlider(
+fun MorphSliderBar(
     modifier: Modifier = Modifier,
     value: Float = 20f,
     onValueChange: (Float) -> Unit,
@@ -85,7 +85,7 @@ fun MorphSlider(
 
     BoxWithConstraints(
         contentAlignment = Alignment.CenterStart,
-        modifier = Modifier.fillMaxSize()
+        modifier = Modifier.fillMaxWidth()
     ) {
         val indicatorWidth = 1f / (valueRange.endInclusive - valueRange.start) * value
         val offset = (this.maxWidth - handleSize.height) * indicatorWidth
@@ -196,7 +196,7 @@ private fun SliderLight() {
         darkTheme = false,
     ) {
         var value by remember { mutableStateOf(10f) }
-        MorphSlider(
+        MorphSliderBar(
             value = value,
             onValueChange = { value = it },
             handleColor = MaterialTheme.colors.primary
@@ -211,7 +211,7 @@ private fun SliderDark() {
         darkTheme = true,
     ) {
         var value by remember { mutableStateOf(10f) }
-        MorphSlider(
+        MorphSliderBar(
             value = value,
             onValueChange = { value = it },
             handleColor = MaterialTheme.colors.primary

diff --git a/...h/sample/ui/components/SliderWithLabel.kt → .../adwi/neumorph/android/SliderWithLabel.kt b/...h/sample/ui/components/SliderWithLabel.kt → .../adwi/neumorph/android/SliderWithLabel.kt
@@ -1,4 +1,4 @@
-package com.adwi.neumorph.sample.ui.components
+package com.adwi.neumorph.android.components
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.MaterialTheme
@@ -9,14 +9,15 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
-import com.adwi.neumorph.android.MorphSlider
-import com.adwi.neumorph.android.components.PreviewTemplate
+import com.adwi.neumorph.android.MorphSliderBar
 import com.adwi.neumorph.android.neumorph.LightSource
 import com.adwi.neumorph.android.theme.AppColors
+import com.adwi.neumorph.sample.ui.components.SliderLabel
 
 @Composable
-fun SliderWithLabel(
+fun MorphSlider(
     modifier: Modifier = Modifier,
+    hasLabel: Boolean = true,
     value: Float = 10f,
     onValueChange: (Float) -> Unit,
     valueRange: ClosedFloatingPointRange<Float> = 0f..30f,
@@ -36,28 +37,33 @@ fun SliderWithLabel(
     labelColor: Color = MaterialTheme.colors.onBackground,
 ) {
     Column(modifier = modifier) {
-        BoxWithConstraints(
-            modifier = Modifier
-                .fillMaxWidth()
-        ) {
-            val offset = getSliderOffset(
-                value = value,
-                valueRange = valueRange,
-                boxWidth = maxWidth,
-                labelWidth = labelMinWidth + 8.dp
-            )
-            SliderLabel(
-                value = value.toInt(),
-                backgroundColor = backgroundColor,
-                labelColor = labelColor,
-                cornerRadius = cornerRadius,
-                elevation = elevation,
+        if (hasLabel) {
+            BoxWithConstraints(
                 modifier = Modifier
-                    .padding(start = offset)
-                    .size(labelSize.dp)
-            )
+                    .fillMaxWidth()
+            ) {
+                val offset = getSliderOffset(
+                    value = value,
+                    valueRange = valueRange,
+                    boxWidth = maxWidth,
+                    labelWidth = labelMinWidth + 8.dp
+                )
+                SliderLabel(
+                    value = value.toInt(),
+                    backgroundColor = backgroundColor,
+                    labelColor = labelColor,
+                    cornerRadius = cornerRadius,
+                    elevation = elevation,
+                    modifier = Modifier
+                        .padding(
+                            start = offset,
+                            bottom = 4.dp
+                        )
+                        .size(labelSize.dp)
+                )
+            }
         }
-        MorphSlider(
+        MorphSliderBar(
             value = value,
             onValueChange = onValueChange,
             valueRange = valueRange,
@@ -84,10 +90,12 @@ private fun OptionsSliderLight() {
         darkTheme = false,
     ) {
         var value by remember { mutableStateOf(10f) }
-        SliderWithLabel(
+        MorphSlider(
             value = value,
             onValueChange = { value = it },
-            handleColor = MaterialTheme.colors.primary
+            handleColor = MaterialTheme.colors.primary,
+            cornerRadius = 5.dp,
+            elevation = 10.dp
         )
     }
 }
@@ -99,10 +107,12 @@ private fun OptionsSliderDark() {
         darkTheme = true,
     ) {
         var value by remember { mutableStateOf(10f) }
-        SliderWithLabel(
+        MorphSlider(
             value = value,
             onValueChange = { value = it },
-            handleColor = MaterialTheme.colors.primary
+            handleColor = MaterialTheme.colors.primary,
+            cornerRadius = 5.dp,
+            elevation = 10.dp
         )
     }
 }

diff --git a/neumorph/src/main/kotlin/com/adwi/neumorph/android/Test.kt b/neumorph/src/main/kotlin/com/adwi/neumorph/android/Test.kt
@@ -2,20 +2,17 @@ package com.adwi.neumorph.android
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.adwi.neumorph.android.components.PreviewTemplate
 import com.adwi.neumorph.android.theme.MorphUiTheme
 import com.adwi.neumorph.android.theme.AppColors
+import com.adwi.neumorph.android.components.MorphSlider
 
 private val lightBrush =
     Brush.verticalGradient(listOf(AppColors.Light.BackgroundTop, AppColors.Light.BackgroundBottom).reversed())

diff --git a/neumorph/src/main/kotlin/com/adwi/neumorph/android/components/PreviewTemplate.kt b/neumorph/src/main/kotlin/com/adwi/neumorph/android/components/PreviewTemplate.kt
@@ -1,14 +1,17 @@
 package com.adwi.neumorph.android.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.adwi.neumorph.android.theme.AppColors
 import com.adwi.neumorph.android.theme.MorphUiTheme
 
 @Composable
@@ -19,7 +22,22 @@ fun PreviewTemplate(
     content: @Composable (content: @Composable () -> Unit) -> Unit,
 ) {
     MorphUiTheme(darkTheme = darkTheme) {
-        MorphBackground {
+        Box(
+            contentAlignment = Alignment.Center,
+            modifier = Modifier
+                .fillMaxSize()
+                .background(brush = Brush.verticalGradient(
+            if (darkTheme)
+                listOf(
+                    AppColors.Dark.BackgroundTop,
+                    AppColors.Dark.BackgroundBottom
+                )
+            else
+                listOf(
+                    AppColors.Light.BackgroundTop,
+                    AppColors.Light.BackgroundBottom
+                )
+        ))) {
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally,
                 modifier = modifier
@@ -69,7 +87,7 @@ private fun PreviewTemplateDark() {
     PreviewTemplate(
         darkTheme = true,
     ) {
-        PreviewTemplate() {
+        PreviewTemplate(darkTheme = true) {
             it()
         }
     }

diff --git a/...morph/sample/ui/components/SliderLabel.kt → ...eumorph/android/components/SliderLabel.kt b/...morph/sample/ui/components/SliderLabel.kt → ...eumorph/android/components/SliderLabel.kt