Merge pull request #709 from synonymdev/fix/price-widget-layout

feat: add gradient overlay to price widget appbar

Author: jvsena42

app/src/main/java/to/bitkit/ui/screens/widgets/price/PriceEditScreen.kt

@@ -1,28 +1,35 @@
 package to.bitkit.ui.screens.widgets.price
 
+import androidx.compose.foundation.background
 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.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.TileMode
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import to.bitkit.R
+import to.bitkit.data.dto.price.Change
 import to.bitkit.data.dto.price.GraphPeriod
 import to.bitkit.data.dto.price.PriceDTO
 import to.bitkit.data.dto.price.PriceWidgetData
@@ -32,16 +39,18 @@ import to.bitkit.ui.components.BodyM
 import to.bitkit.ui.components.BodySSB
 import to.bitkit.ui.components.PrimaryButton
 import to.bitkit.ui.components.SecondaryButton
+import to.bitkit.ui.components.VerticalSpacer
 import to.bitkit.ui.scaffold.AppTopBar
 import to.bitkit.ui.scaffold.DrawerNavIcon
 import to.bitkit.ui.scaffold.ScreenColumn
+import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 
 @Composable
 fun PriceEditScreen(
     viewModel: PriceViewModel,
     onBack: () -> Unit,
-    navigatePreview: () -> Unit
+    navigatePreview: () -> Unit,
 ) {
     val customPreferences by viewModel.customPreferences.collectAsStateWithLifecycle()
     val currentPrice by viewModel.currentPrice.collectAsStateWithLifecycle()
@@ -87,66 +96,83 @@ fun PriceEditContent(
     ScreenColumn(
         modifier = Modifier.testTag("weather_edit_screen")
     ) {
-        AppTopBar(
-            titleText = stringResource(R.string.widgets__widget__edit),
-            onBackClick = onBack,
-            actions = { DrawerNavIcon() },
-        )
-
-        Column(
+        Box(
             modifier = Modifier
-                .padding(horizontal = 16.dp)
                 .weight(1f)
-                .verticalScroll(rememberScrollState())
-                .testTag("WidgetEditScrollView")
+                .fillMaxWidth()
         ) {
-            Spacer(modifier = Modifier.height(26.dp))
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 16.dp)
+                    .verticalScroll(rememberScrollState())
+                    .testTag("WidgetEditScrollView")
+            ) {
+                VerticalSpacer(82.dp)
 
-            BodyM(
-                text = stringResource(R.string.widgets__widget__edit_description).replace(
-                    "{name}",
-                    stringResource(R.string.widgets__price__name)
-                ),
-                color = Colors.White64,
-                modifier = Modifier.testTag("edit_description")
-            )
+                BodyM(
+                    text = stringResource(R.string.widgets__widget__edit_description).replace(
+                        "{name}",
+                        stringResource(R.string.widgets__price__name)
+                    ),
+                    color = Colors.White64,
+                    modifier = Modifier.testTag("edit_description")
+                )
+
+                VerticalSpacer(32.dp)
+
+                priceModel.widgets.map { data ->
+                    PriceEditOptionRow(
+                        label = data.pair.displayName,
+                        value = data.price,
+                        isEnabled = data.pair in preferences.enabledPairs,
+                        onClick = {
+                            onClickTradingPair(data.pair)
+                        },
+                        testTagPrefix = data.pair.displayName,
+                    )
+                }
 
-            Spacer(modifier = Modifier.height(32.dp))
+                allPeriodsUsd.map { priceData ->
+                    PriceChartOptionRow(
+                        widgetData = priceData,
+                        isEnabled = priceData.period == preferences.period,
+                        onClick = onClickGraph,
+                        testTagPrefix = priceData.period.value,
+                    )
+                }
 
-            priceModel.widgets.map { data ->
                 PriceEditOptionRow(
-                    label = data.pair.displayName,
-                    value = data.price,
-                    isEnabled = data.pair in preferences.enabledPairs,
-                    onClick = {
-                        onClickTradingPair(data.pair)
-                    },
-                    testTagPrefix = data.pair.displayName,
+                    label = stringResource(R.string.widgets__widget__source),
+                    value = priceModel.source,
+                    isEnabled = preferences.showSource,
+                    onClick = onClickSource,
+                    testTagPrefix = "showSource",
                 )
             }
 
-            allPeriodsUsd.map { priceData ->
-                PriceChartOptionRow(
-                    widgetData = priceData,
-                    isEnabled = priceData.period == preferences.period,
-                    onClick = onClickGraph,
-                    testTagPrefix = priceData.period.value,
+            Column {
+                AppTopBar(
+                    titleText = stringResource(R.string.widgets__widget__edit),
+                    onBackClick = onBack,
+                    actions = { DrawerNavIcon() },
+                    modifier = Modifier.background(
+                        Brush.verticalGradient(
+                            colors = listOf(
+                                MaterialTheme.colorScheme.background,
+                                Color.Transparent
+                            ),
+                            tileMode = TileMode.Decal
+                        )
+                    )
                 )
             }
-
-            PriceEditOptionRow(
-                label = stringResource(R.string.widgets__widget__source),
-                value = priceModel.source,
-                isEnabled = preferences.showSource,
-                onClick = onClickSource,
-                testTagPrefix = "showSource",
-            )
         }
 
         Row(
             horizontalArrangement = Arrangement.spacedBy(16.dp),
             modifier = Modifier
-                .padding(vertical = 21.dp, horizontal = 16.dp)
+                .padding(16.dp)
                 .fillMaxWidth()
                 .testTag("buttons_row")
         ) {
@@ -179,14 +205,14 @@ private fun PriceEditOptionRow(
     value: String,
     isEnabled: Boolean,
     onClick: () -> Unit,
-    testTagPrefix: String
+    testTagPrefix: String,
 ) {
     Column {
         Row(
             horizontalArrangement = Arrangement.spacedBy(16.dp),
             verticalAlignment = Alignment.CenterVertically,
             modifier = Modifier
-                .padding(vertical = 21.dp)
+                .padding(vertical = 16.dp)
                 .fillMaxWidth()
                 .testTag("${testTagPrefix}_setting_row")
         ) {
@@ -232,7 +258,7 @@ private fun PriceChartOptionRow(
     widgetData: PriceWidgetData,
     isEnabled: Boolean,
     onClick: (GraphPeriod) -> Unit,
-    testTagPrefix: String
+    testTagPrefix: String,
 ) {
     Column {
         Row(
@@ -268,3 +294,56 @@ private fun PriceChartOptionRow(
         )
     }
 }
+
+@Suppress("MagicNumber")
+@Preview(showSystemUi = true)
+@Composable
+private fun Preview() {
+    AppThemeSurface {
+        PriceEditContent(
+            onBack = {},
+            priceModel = PriceDTO(
+                widgets = listOf(
+                    PriceWidgetData(
+                        pair = TradingPair.BTC_USD,
+                        period = GraphPeriod.ONE_DAY,
+                        change = Change(isPositive = true, formatted = "+2.5%"),
+                        price = "$97,500",
+                        pastValues = listOf(95000.0, 96000.0, 95500.0, 97000.0, 97500.0)
+                    ),
+                    PriceWidgetData(
+                        pair = TradingPair.BTC_EUR,
+                        period = GraphPeriod.ONE_DAY,
+                        change = Change(isPositive = true, formatted = "+2.3%"),
+                        price = "€89,000",
+                        pastValues = listOf(87000.0, 88000.0, 87500.0, 88500.0, 89000.0)
+                    )
+                ),
+                source = "Kraken"
+            ),
+            allPeriodsUsd = listOf(
+                PriceWidgetData(
+                    pair = TradingPair.BTC_USD,
+                    period = GraphPeriod.ONE_DAY,
+                    change = Change(isPositive = true, formatted = "+2.5%"),
+                    price = "$97,500",
+                    pastValues = listOf(95000.0, 96000.0, 95500.0, 97000.0, 97500.0)
+                ),
+                PriceWidgetData(
+                    pair = TradingPair.BTC_USD,
+                    period = GraphPeriod.ONE_WEEK,
+                    change = Change(isPositive = true, formatted = "+5.0%"),
+                    price = "$97,500",
+                    pastValues = listOf(93000.0, 94000.0, 95000.0, 96000.0, 97500.0)
+                )
+            ),
+            onClickReset = {},
+            onClickGraph = {},
+            onClickTradingPair = {},
+            onClickPreview = {},
+            onClickSource = {},
+            preferences = PricePreferences(),
+            isLoading = false
+        )
+    }
+}