Lemmy/Raccoon
1
0
Fork 0
mirror of https://github.com/LiveFastEatTrashRaccoon/RaccoonForLemmy.git synced 2025-02-09 12:58:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

feature: choose custom color for theme

Browse Source
This commit is contained in:
Diego Beraldin 2023-10-15 21:38:46 +02:00
parent e569468fa6
commit 5cb195eb56
9 changed files with 247 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/drawer/ModalDrawerContent.kt
View File

@ -390,7 +390,7 @@ private fun ChangeInstanceDialog(
) {
Text(
text = stringResource(MR.strings.dialog_title_change_instance),
style = MaterialTheme.typography.titleLarge
style = MaterialTheme.typography.titleLarge,
)
TextField(
colors = TextFieldDefaults.colors(

68
core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ColorBottomSheet.kt
View File

@ -1,5 +1,6 @@
package com.github.diegoberaldin.raccoonforlemmy.core.commonui.modals
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
@ -12,13 +13,19 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ChevronRight
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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.unit.dp
import cafe.adriel.voyager.core.screen.Screen
import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
@ -26,6 +33,7 @@ import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
import com.github.diegoberaldin.raccoonforlemmy.core.commonui.components.BottomSheetHandle
import com.github.diegoberaldin.raccoonforlemmy.core.notifications.NotificationCenterContractKeys
import com.github.diegoberaldin.raccoonforlemmy.core.notifications.di.getNotificationCenter
import com.github.diegoberaldin.raccoonforlemmy.core.persistence.di.getSettingsRepository
import com.github.diegoberaldin.raccoonforlemmy.core.utils.onClick
import com.github.diegoberaldin.raccoonforlemmy.resources.MR
import dev.icerock.moko.resources.compose.stringResource
@ -36,6 +44,8 @@ class ColorBottomSheet : Screen {
override fun Content() {
val bottomSheetNavigator = LocalBottomSheetNavigator.current
val notificationCenter = remember { getNotificationCenter() }
var customPickerDialogOpened by remember { mutableStateOf(false) }
val settingsRepository = remember { getSettingsRepository() }
Column(
modifier = Modifier.padding(
top = Spacing.s,
@ -57,6 +67,7 @@ class ColorBottomSheet : Screen {
color = MaterialTheme.colorScheme.onBackground,
)
}
val customText = stringResource(MR.strings.settings_color_custom)
val values: List<Pair<Color?, String>> = listOf(
Color(0xFF001F7D) to stringResource(MR.strings.settings_color_blue),
Color(0xFF36B3B3) to stringResource(MR.strings.settings_color_aquamarine),
@ -67,6 +78,7 @@ class ColorBottomSheet : Screen {
Color(0xFFFC0FC0) to stringResource(MR.strings.settings_color_pink),
Color(0xFF303B47) to stringResource(MR.strings.settings_color_gray),
Color(0xFFd7d7d7) to stringResource(MR.strings.settings_color_white),
null to customText,
null to stringResource(MR.strings.button_reset),
)
Column(
@ -74,32 +86,68 @@ class ColorBottomSheet : Screen {
verticalArrangement = Arrangement.spacedBy(Spacing.xxxs),
) {
for (value in values) {
val text = value.second
val isChooseCustom = text == customText
Row(
modifier = Modifier.padding(
horizontal = Spacing.s,
vertical = Spacing.s,
).fillMaxWidth().onClick {
notificationCenter.getObserver(NotificationCenterContractKeys.ChangeColor)
?.also {
it.invoke(value.first ?: Unit)
}
bottomSheetNavigator.hide()
if (!isChooseCustom) {
notificationCenter.getObserver(NotificationCenterContractKeys.ChangeColor)
?.also {
it.invoke(value.first ?: Unit)
}
bottomSheetNavigator.hide()
} else {
customPickerDialogOpened = true
}
},
) {
Text(
text = value.second,
text = text,
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onBackground,
)
Spacer(modifier = Modifier.weight(1f))
Box(
modifier = Modifier.size(36.dp).background(
color = value.first ?: Color.Transparent, shape = CircleShape
if (!isChooseCustom) {
Box(
modifier = Modifier
.size(36.dp)
.background(
color = value.first ?: Color.Transparent,
shape = CircleShape
)
)
)
} else {
Image(
imageVector = Icons.Default.ChevronRight,
contentDescription = null,
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onBackground),
)
}
}
}
}
}
if (customPickerDialogOpened) {
val current =
settingsRepository.currentSettings.value.customSeedColor?.let { Color(it) }
ColorPickerDialog(
initialValue = current ?: MaterialTheme.colorScheme.primary,
onClose = {
customPickerDialogOpened = false
},
onSubmit = { color ->
notificationCenter.getObserver(NotificationCenterContractKeys.ChangeColor)
?.also {
it.invoke(color)
}
bottomSheetNavigator.hide()
}
)
}
}
}

158
core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/modals/ColorPickerDialog.kt Normal file
View File

@ -0,0 +1,158 @@
package com.github.diegoberaldin.raccoonforlemmy.core.commonui.modals
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.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.CornerSize
import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
import com.github.diegoberaldin.raccoonforlemmy.core.utils.StringUtils.toHexDigit
import com.github.diegoberaldin.raccoonforlemmy.resources.MR
import dev.icerock.moko.resources.compose.stringResource
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ColorPickerDialog(
initialValue: Color = Color.Black,
onClose: (() -> Unit)? = null,
onSubmit: ((Color) -> Unit)? = null,
) {
var currentColor by remember { mutableStateOf(initialValue) }
AlertDialog(
onDismissRequest = {
onClose?.invoke()
},
) {
Column(
modifier = Modifier
.background(color = MaterialTheme.colorScheme.surface)
.padding(Spacing.s),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(Spacing.xxs),
) {
Text(
text = stringResource(MR.strings.settings_color_dialog_title),
style = MaterialTheme.typography.titleLarge,
color = MaterialTheme.colorScheme.onBackground,
)
Spacer(modifier = Modifier.height(Spacing.xs))
Box(
modifier = Modifier
.background(
color = currentColor,
shape = RoundedCornerShape(CornerSize.m),
)
.fillMaxWidth()
.height(100.dp)
)
val alpha = (currentColor.alpha * 255).toInt().toHexDigit()
val red = (currentColor.red * 255).toInt().toHexDigit()
val green = (currentColor.green * 255).toInt().toHexDigit()
val blue = (currentColor.blue * 255).toInt().toHexDigit()
Text(
text = "#$alpha$red$green$blue",
style = MaterialTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.onBackground,
)
Spacer(modifier = Modifier.height(Spacing.s))
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(Spacing.s),
) {
Text(
text = stringResource(MR.strings.settings_color_dialog_alpha),
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onBackground,
)
Slider(
value = currentColor.alpha,
onValueChange = {
currentColor = currentColor.copy(alpha = it)
},
)
}
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(Spacing.xs),
) {
Text(
text = stringResource(MR.strings.settings_color_dialog_red),
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onBackground,
)
Slider(
value = currentColor.red,
onValueChange = {
currentColor = currentColor.copy(red = it)
}
)
}
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(Spacing.s),
) {
Text(
text = stringResource(MR.strings.settings_color_dialog_green),
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onBackground,
)
Slider(
value = currentColor.green,
onValueChange = {
currentColor = currentColor.copy(green = it)
}
)
}
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(Spacing.s),
) {
Text(
text = stringResource(MR.strings.settings_color_dialog_blue),
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onBackground,
)
Slider(
value = currentColor.blue,
onValueChange = {
currentColor = currentColor.copy(blue = it)
}
)
}
Spacer(modifier = Modifier.height(Spacing.xs))
Button(
modifier = Modifier.align(Alignment.CenterHorizontally),
onClick = {
if (initialValue != currentColor) {
onSubmit?.invoke(currentColor)
}
},
) {
Text(text = stringResource(MR.strings.button_confirm))
}
}
}
}

2
core-utils/src/androidMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/utils/StringUtils.kt
View File

@ -4,4 +4,6 @@ import android.util.Patterns
actual object StringUtils {
actual fun String.isValidUrl(): Boolean = Patterns.WEB_URL.matcher(this).matches()
actual fun Int.toHexDigit(): String = String.format("%02X", this)
}

1
core-utils/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/utils/StringUtils.kt
View File

@ -2,4 +2,5 @@ package com.github.diegoberaldin.raccoonforlemmy.core.utils
expect object StringUtils {
fun String.isValidUrl(): Boolean
fun Int.toHexDigit(): String
}

6
core-utils/src/iosMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/utils/StringUtils.kt
View File

@ -1,8 +1,14 @@
package com.github.diegoberaldin.raccoonforlemmy.core.utils
import platform.Foundation.NSString
import platform.Foundation.NSURL
import platform.Foundation.stringWithFormat
actual object StringUtils {
actual fun String.isValidUrl(): Boolean = NSURL.URLWithString(this) != null
actual fun Int.toHexDigit(): String {
return NSString.stringWithFormat("%02X", this)
}
}

7
resources/src/commonMain/resources/MR/base/strings.xml
View File

@ -128,6 +128,7 @@
<string name="settings_color_pink">Shocking pink</string>
<string name="settings_color_gray">Concrete</string>
<string name="settings_color_white">Ice</string>
<string name="settings_color_custom">Custom</string>
<string name="settings_enable_crash_report">Enable crash reporting</string>
<string name="settings_separate_up_and_downvotes">Separate upvotes / downvotes</string>
<string name="settings_auto_load_images">Automatically load images</string>
@ -137,6 +138,12 @@
<string name="settings_section_nsfw">NSFW</string>
<string name="settings_section_debug">Debug</string>
<string name="settings_color_dialog_title">Pick a color</string>
<string name="settings_color_dialog_alpha">A</string>
<string name="settings_color_dialog_red">R</string>
<string name="settings_color_dialog_green">G</string>
<string name="settings_color_dialog_blue">B</string>
<string name="community_detail_info">Community info</string>
<string name="community_detail_instance_info">Instance details</string>
<string name="community_detail_block">Block</string>

7
resources/src/commonMain/resources/MR/es/strings.xml
View File

@ -125,6 +125,7 @@
<string name="settings_color_pink">Rosa chillón</string>
<string name="settings_color_gray">Hormigón</string>
<string name="settings_color_white">Hielo</string>
<string name="settings_color_custom">Personalizado</string>
<string name="settings_enable_crash_report">Activar notificación de accidentes</string>
<string name="settings_separate_up_and_downvotes">Distinguir votos positivos / negativos
</string>
@ -135,6 +136,12 @@
<string name="settings_section_nsfw">NSFW</string>
<string name="settings_section_debug">Debug</string>
<string name="settings_color_dialog_title">Elegir un color</string>
<string name="settings_color_dialog_alpha">A</string>
<string name="settings_color_dialog_red">R</string>
<string name="settings_color_dialog_green">G</string>
<string name="settings_color_dialog_blue">B</string>
<string name="community_detail_info">Info comunidad</string>
<string name="community_detail_instance_info">Detalles instancia</string>
<string name="community_detail_block">Bloquear</string>

7
resources/src/commonMain/resources/MR/it/strings.xml
View File

@ -126,6 +126,7 @@
<string name="settings_color_pink">Rosa shocking</string>
<string name="settings_color_gray">Cemento</string>
<string name="settings_color_white">Ghiaccio</string>
<string name="settings_color_custom">Personalizzato</string>
<string name="settings_enable_crash_report">Abilitare segnalazioni di crash</string>
<string name="settings_separate_up_and_downvotes">Distingui voti positivi / negativi</string>
<string name="settings_auto_load_images">Carica immagini automaticamente</string>
@ -135,6 +136,12 @@
<string name="settings_section_nsfw">NSFW</string>
<string name="settings_section_debug">Debug</string>
<string name="settings_color_dialog_title">Seleziona un colore</string>
<string name="settings_color_dialog_alpha">A</string>
<string name="settings_color_dialog_red">R</string>
<string name="settings_color_dialog_green">G</string>
<string name="settings_color_dialog_blue">B</string>
<string name="community_detail_info">Info comunità</string>
<string name="community_detail_instance_info">Dettagli istanza</string>
<string name="instance_detail_title">Istanza: %1$s</string>