Skip to content
This repository has been archived by the owner on Nov 5, 2024. It is now read-only.

Commit

Permalink
Improve SettingsScreen.kt
Browse files Browse the repository at this point in the history
  • Loading branch information
ILIYANGERMANOV committed May 2, 2022
1 parent 49ef52e commit 46b3a71
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 26 deletions.
81 changes: 55 additions & 26 deletions app/src/main/java/com/ivy/wallet/ui/settings/SettingsScreen.kt
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
Expand All @@ -29,6 +30,8 @@ import com.google.accompanist.insets.statusBarsPadding
import com.ivy.design.api.navigation
import com.ivy.design.l0_system.UI
import com.ivy.design.l0_system.style
import com.ivy.design.l1_buildingBlocks.IconScale
import com.ivy.design.l1_buildingBlocks.IvyIconScaled
import com.ivy.wallet.BuildConfig
import com.ivy.wallet.Constants
import com.ivy.wallet.Constants.URL_IVY_CONTRIBUTORS
Expand All @@ -39,7 +42,6 @@ import com.ivy.wallet.domain.data.core.User
import com.ivy.wallet.ui.*
import com.ivy.wallet.ui.theme.*
import com.ivy.wallet.ui.theme.components.IvyButton
import com.ivy.wallet.ui.theme.components.IvyIcon
import com.ivy.wallet.ui.theme.components.IvySwitch
import com.ivy.wallet.ui.theme.components.IvyToolbar
import com.ivy.wallet.ui.theme.modal.*
Expand Down Expand Up @@ -457,14 +459,13 @@ private fun StartDateOfMonth(
SettingsButtonRow(
onClick = onClick
) {
Spacer(Modifier.width(16.dp))
Spacer(Modifier.width(12.dp))

IvyIcon(
modifier = Modifier
.size(48.dp)
.padding(all = 4.dp),
IvyIconScaled(
icon = R.drawable.ic_custom_calendar_m,
tint = UI.colors.pureInverse
tint = UI.colors.pureInverse,
iconScale = IconScale.M,
padding = 0.dp
)

Spacer(Modifier.width(8.dp))
Expand Down Expand Up @@ -500,6 +501,7 @@ private fun IvyTelegram() {
icon = R.drawable.ic_telegram_24dp,
text = stringResource(R.string.ivy_telegram),
backgroundGradient = Gradient.solid(Blue),
customIconPadding = 8.dp
) {
rootActivity.openUrlInBrowser(Constants.URL_IVY_TELEGRAM_INVITE)
}
Expand Down Expand Up @@ -580,11 +582,13 @@ private fun AppSwitch(
onSetLockApp(!lockApp)
}
) {
Spacer(Modifier.width(16.dp))
Spacer(Modifier.width(12.dp))

IvyIcon(
IvyIconScaled(
icon = icon,
tint = UI.colors.pureInverse
tint = UI.colors.pureInverse,
iconScale = IconScale.M,
padding = 0.dp
)

Spacer(Modifier.width(8.dp))
Expand Down Expand Up @@ -746,8 +750,9 @@ private fun AccountCardUser(
) {
Spacer(Modifier.width(24.dp))

IvyIcon(
icon = R.drawable.ic_email
IvyIconScaled(
icon = R.drawable.ic_email,
iconScale = IconScale.M
)

Spacer(Modifier.width(12.dp))
Expand All @@ -772,9 +777,10 @@ private fun AccountCardUser(
) {
Spacer(Modifier.width(24.dp))

IvyIcon(
IvyIconScaled(
icon = R.drawable.ic_data_synced,
tint = Orange
tint = Orange,
iconScale = IconScale.M
)

Spacer(Modifier.width(12.dp))
Expand All @@ -798,9 +804,10 @@ private fun AccountCardUser(
) {
Spacer(Modifier.width(24.dp))

IvyIcon(
IvyIconScaled(
icon = R.drawable.ic_data_synced,
tint = Green
tint = Green,
iconScale = IconScale.M
)

Spacer(Modifier.width(12.dp))
Expand Down Expand Up @@ -853,7 +860,10 @@ private fun AccountCardLocalAccount(
) {
Spacer(Modifier.width(20.dp))

IvyIcon(icon = R.drawable.ic_local_account)
IvyIconScaled(
icon = R.drawable.ic_local_account,
iconScale = IconScale.M
)

Spacer(Modifier.width(12.dp))

Expand Down Expand Up @@ -956,19 +966,31 @@ private fun SettingsPrimaryButton(
hasShadow: Boolean = false,
backgroundGradient: Gradient = Gradient.solid(UI.colors.medium),
textColor: Color = White,
customIconPadding: Dp? = null,
onClick: () -> Unit
) {
SettingsButtonRow(
hasShadow = hasShadow,
backgroundGradient = backgroundGradient,
onClick = onClick
) {
Spacer(Modifier.width(16.dp))
Spacer(Modifier.width(12.dp))

IvyIcon(
icon = icon,
tint = textColor
)
if (customIconPadding != null) {
IvyIconScaled(
icon = icon,
tint = textColor,
iconScale = IconScale.M,
padding = customIconPadding
)
} else {
IvyIconScaled(
icon = icon,
tint = textColor,
iconScale = IconScale.M,
padding = 0.dp
)
}

Spacer(Modifier.width(8.dp))

Expand Down Expand Up @@ -1027,8 +1049,9 @@ private fun AccountCardButton(
) {
Spacer(Modifier.width(12.dp))

IvyIcon(
icon = icon
IvyIconScaled(
icon = icon,
iconScale = IconScale.M
)

Spacer(Modifier.width(4.dp))
Expand Down Expand Up @@ -1065,7 +1088,10 @@ private fun CurrencyButton(
) {
Spacer(Modifier.width(20.dp))

IvyIcon(icon = R.drawable.ic_currency)
IvyIconScaled(
icon = R.drawable.ic_currency,
iconScale = IconScale.M
)

Spacer(Modifier.width(8.dp))

Expand All @@ -1090,7 +1116,10 @@ private fun CurrencyButton(

Spacer(Modifier.height(4.dp))

IvyIcon(icon = R.drawable.ic_arrow_right)
IvyIconScaled(
icon = R.drawable.ic_arrow_right,
iconScale = IconScale.M
)

Spacer(Modifier.width(24.dp))
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,21 @@
package com.ivy.design.l1_buildingBlocks

import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.ivy.design.l0_system.UI
import com.ivy.design.utils.thenWhen

@Composable
fun IvyIcon(
Expand All @@ -21,4 +30,42 @@ fun IvyIcon(
contentDescription = contentDescription,
tint = tint
)
}

@Composable
fun IvyIconScaled(
modifier: Modifier = Modifier,
@DrawableRes icon: Int,
tint: Color = UI.colors.pureInverse,
iconScale: IconScale,
padding: Dp = when (iconScale) {
IconScale.S -> 4.dp
IconScale.M -> 4.dp
IconScale.L -> 4.dp
},
contentDescription: String = "icon"
) {
Image(
modifier = modifier
.thenWhen {
when (iconScale) {
IconScale.L ->
this.size(64.dp)
IconScale.M ->
this.size(48.dp)
IconScale.S ->
this.size(32.dp)
}
}
.padding(all = padding),
painter = painterResource(id = icon),
colorFilter = ColorFilter.tint(tint),
alignment = Alignment.Center,
contentScale = ContentScale.Fit,
contentDescription = contentDescription
)
}

enum class IconScale {
S, M, L
}

0 comments on commit 46b3a71

Please sign in to comment.