From 7c5199120e457fff163aebcad47c12ba0ffbef4a Mon Sep 17 00:00:00 2001 From: Yiqun Zhang Date: Wed, 29 Nov 2023 23:54:23 +0800 Subject: [PATCH] :lipstick: Additional basic settings --- .../kotlin/com/clipevery/ui/SettingsUI.kt | 49 +++++++++- .../com/clipevery/ui/ThemeSegmentedControl.kt | 91 +++++++++++++++++++ .../desktopMain/resources/i18n/en.properties | 6 ++ .../desktopMain/resources/i18n/es.properties | 6 ++ .../desktopMain/resources/i18n/jp.properties | 6 ++ .../desktopMain/resources/i18n/zh.properties | 6 ++ 6 files changed, 162 insertions(+), 2 deletions(-) create mode 100644 composeApp/src/commonMain/kotlin/com/clipevery/ui/ThemeSegmentedControl.kt diff --git a/composeApp/src/commonMain/kotlin/com/clipevery/ui/SettingsUI.kt b/composeApp/src/commonMain/kotlin/com/clipevery/ui/SettingsUI.kt index 6a8c36d59..fb99d5d76 100644 --- a/composeApp/src/commonMain/kotlin/com/clipevery/ui/SettingsUI.kt +++ b/composeApp/src/commonMain/kotlin/com/clipevery/ui/SettingsUI.kt @@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Icon +import androidx.compose.material.Switch import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -57,7 +58,7 @@ fun SettingsUI(currentPage: MutableState) { @Composable fun SettingsContentUI(currentPage: MutableState) { val current = LocalKoinApplication.current - val copywriter by remember { mutableStateOf(current.koin.get()) } + val copywriter = current.koin.get() var hasBeenClicked by remember { mutableStateOf(false) } var showMoreLanguage by remember { mutableStateOf(false) } @@ -88,7 +89,7 @@ fun SettingsContentUI(currentPage: MutableState) { Column(modifier = Modifier.fillMaxSize()) { - Row(modifier = Modifier.fillMaxWidth().padding(25.dp, 10.dp, 0.dp, 10.dp), + Row(modifier = Modifier.fillMaxWidth().padding(25.dp, 5.dp, 0.dp, 5.dp), verticalAlignment = Alignment.CenterVertically) { Text(text = "${copywriter.getText("Language")}:", fontSize = 14.sp, @@ -162,6 +163,50 @@ fun SettingsContentUI(currentPage: MutableState) { } } } + + Row(modifier = Modifier.fillMaxWidth().padding(25.dp, 5.dp, 0.dp, 5.dp), + verticalAlignment = Alignment.CenterVertically) { + Text(text = "${copywriter.getText("Theme")}:", + fontSize = 14.sp, + fontFamily = FontFamily.SansSerif, + style = TextStyle(fontWeight = FontWeight.Light)) + Row(Modifier.padding(5.dp, 0.dp, 0.dp, 0.dp)) { + ThemeSegmentedControl() + } + } + + Row(modifier = Modifier.fillMaxWidth().height(40.dp).padding(20.dp, 5.dp, 0.dp, 5.dp), + verticalAlignment = Alignment.CenterVertically) { + var isChecked by remember { mutableStateOf(false) } + // TODO: Boot_start_up + Switch( + checked = isChecked, + onCheckedChange = { isChecked = it } + ) + + Text(text = copywriter.getText("Boot_start_up"), + fontSize = 14.sp, + fontFamily = FontFamily.SansSerif, + style = TextStyle(fontWeight = FontWeight.Light)) + } + + Row(modifier = Modifier.fillMaxWidth().height(40.dp).padding(20.dp, 5.dp, 0.dp, 5.dp), + verticalAlignment = Alignment.CenterVertically) { + var isChecked by remember { mutableStateOf(false) } + // TODO: AutomaticUpdate + Switch( + checked = isChecked, + onCheckedChange = { isChecked = it } + ) + + Text(text = copywriter.getText("AutomaticUpdate"), + fontSize = 14.sp, + fontFamily = FontFamily.SansSerif, + style = TextStyle(fontWeight = FontWeight.Light)) + } + + Spacer(modifier = Modifier.height(10.dp)) + SettingsItemUI("Network") { Row(modifier = Modifier.fillMaxWidth().padding(16.dp)) { Text( diff --git a/composeApp/src/commonMain/kotlin/com/clipevery/ui/ThemeSegmentedControl.kt b/composeApp/src/commonMain/kotlin/com/clipevery/ui/ThemeSegmentedControl.kt new file mode 100644 index 000000000..8656038cb --- /dev/null +++ b/composeApp/src/commonMain/kotlin/com/clipevery/ui/ThemeSegmentedControl.kt @@ -0,0 +1,91 @@ +package com.clipevery.ui + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Button +import androidx.compose.material.ButtonDefaults +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.clipevery.LocalKoinApplication +import com.clipevery.i18n.GlobalCopywriter + +@Composable +fun ThemeSegmentedControl() { + val current = LocalKoinApplication.current + val copywriter = current.koin.get() + val selectedOption = remember { mutableStateOf("System") } + + Row(verticalAlignment = Alignment.CenterVertically) { + // Light Button + Button( + modifier = Modifier.height(28.dp), + onClick = { selectedOption.value = "Light" }, + // Apply the shape only to the left side for the first button + shape = RoundedCornerShape(topStart = 4.dp, bottomStart = 4.dp, topEnd = 0.dp, bottomEnd = 0.dp), + // Change the background and content colors based on selection + colors = if (selectedOption.value == "Light") ButtonDefaults.buttonColors(backgroundColor = Color(0xff1672ff)) + else ButtonDefaults.buttonColors(backgroundColor = Color.White), + border = BorderStroke(1.dp, Color(0xFFAFCBE1)), + contentPadding = PaddingValues(horizontal = 8.dp, vertical = 0.dp), + elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp, hoveredElevation = 0.dp, focusedElevation = 0.dp) + ) { + Text(copywriter.getText("Light"), + fontSize = 14.sp, + fontFamily = FontFamily.SansSerif, + style = TextStyle(fontWeight = FontWeight.Light), + color = if (selectedOption.value == "Light") Color.White else Color.Black) + } + + // System Button + Button( + modifier = Modifier.height(28.dp).offset(x = (-1).dp), + onClick = { selectedOption.value = "System" }, + // No shape for the middle button to keep it rectangular + shape = RoundedCornerShape(0.dp), + colors = if (selectedOption.value == "System") ButtonDefaults.buttonColors(backgroundColor = Color(0xff1672ff)) + else ButtonDefaults.buttonColors(backgroundColor = Color.White), + border = BorderStroke(1.dp, Color(0xFFAFCBE1)), + contentPadding = PaddingValues(horizontal = 8.dp, vertical = 0.dp), + elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp, hoveredElevation = 0.dp, focusedElevation = 0.dp) + ) { + Text(copywriter.getText("System"), + fontSize = 14.sp, + fontFamily = FontFamily.SansSerif, + style = TextStyle(fontWeight = FontWeight.Light), + color = if (selectedOption.value == "System") Color.White else Color.Black) + } + + // Dark Button + Button( + modifier = Modifier.height(28.dp).offset(x = (-2).dp), + onClick = { selectedOption.value = "Dark" }, + // Apply the shape only to the right side for the last button + shape = RoundedCornerShape(topStart = 0.dp, bottomStart = 0.dp, topEnd = 4.dp, bottomEnd = 4.dp), + colors = if (selectedOption.value == "Dark") ButtonDefaults.buttonColors(backgroundColor = Color(0xff1672ff)) + else ButtonDefaults.buttonColors(backgroundColor = Color.White), + border = BorderStroke(1.dp, Color(0xFFAFCBE1)), + contentPadding = PaddingValues(horizontal = 8.dp, vertical = 0.dp), + elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp, hoveredElevation = 0.dp, focusedElevation = 0.dp) + ) { + Text(copywriter.getText("Dark"), + fontSize = 14.sp, + fontFamily = FontFamily.SansSerif, + style = TextStyle(fontWeight = FontWeight.Light), + color = if (selectedOption.value == "Dark") Color.White else Color.Black) + } + } +} diff --git a/composeApp/src/desktopMain/resources/i18n/en.properties b/composeApp/src/desktopMain/resources/i18n/en.properties index 628b4b8e0..4b920cf8a 100644 --- a/composeApp/src/desktopMain/resources/i18n/en.properties +++ b/composeApp/src/desktopMain/resources/i18n/en.properties @@ -9,6 +9,12 @@ FQA=FQA↗ Quit=Quit Return=Return Language=Language +Theme=Theme +Light=Light +System=System +Dark=Dark +Boot_start_up=Boot start up +AutomaticUpdate=Automatic update CurrentLanguage=English Network=Network Store=Store \ No newline at end of file diff --git a/composeApp/src/desktopMain/resources/i18n/es.properties b/composeApp/src/desktopMain/resources/i18n/es.properties index 4c4972f77..acc4accba 100644 --- a/composeApp/src/desktopMain/resources/i18n/es.properties +++ b/composeApp/src/desktopMain/resources/i18n/es.properties @@ -9,6 +9,12 @@ FQA=Preguntas frecuentes↗ Quit=Salir Return=Volver Language=Idioma +Theme=Tema +Light=Claro +System=Sistema +Dark=Oscuro +Boot_start_up=Inicio de arranque +AutomaticUpdate=Actualización automática CurrentLanguage=Español Network=Red Store=Tienda \ No newline at end of file diff --git a/composeApp/src/desktopMain/resources/i18n/jp.properties b/composeApp/src/desktopMain/resources/i18n/jp.properties index 294978f80..029b4fe4a 100644 --- a/composeApp/src/desktopMain/resources/i18n/jp.properties +++ b/composeApp/src/desktopMain/resources/i18n/jp.properties @@ -9,6 +9,12 @@ FQA=よくある問題↗ Quit=終了 Return=戻る Language=言語 +Theme=テーマ +Light=明色 +System=システム +Dark=暗い +Boot_start_up=起動時に開始 +AutomaticUpdate=自動更新 CurrentLanguage=日本語 Network=ネットワーク Store=ストア \ No newline at end of file diff --git a/composeApp/src/desktopMain/resources/i18n/zh.properties b/composeApp/src/desktopMain/resources/i18n/zh.properties index 74bfb171b..7502feacd 100644 --- a/composeApp/src/desktopMain/resources/i18n/zh.properties +++ b/composeApp/src/desktopMain/resources/i18n/zh.properties @@ -9,6 +9,12 @@ FQA=常见问题↗ Quit=退出 Return=返回 Language=语言 +Theme=主题 +Light=浅色 +System=系统 +Dark=深色 +Boot_start_up=开机启动 +AutomaticUpdate=自动更新 CurrentLanguage=简体中文 Network=网络 Store=存储 \ No newline at end of file