n/futokb
1
0
Fork 0
mirror of https://gitlab.futo.org/keyboard/latinime.git synced 2024-09-28 14:54:30 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make new ThemeScreen for selecting theme

Browse Source
This commit is contained in:
Aleksandras Kostarevas 2023-09-04 16:54:19 +03:00
parent dc342f33a6
commit 94c606718d
13 changed files with 242 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
java/res/values/strings-uix.xml
View File

@ -5,7 +5,8 @@
<string name="amoled_dark_theme_name">AMOLED Dark Purple</string>
<string name="classic_material_dark_theme_name">AOSP Material Dark</string>
<string name="voice_input_theme_name">Voice Input Theme</string>
<string name="classic_material_light_theme_name">AOSP Material Light</string>
<string name="voice_input_theme_name">FUTO VI Theme</string>
<string name="dynamic_system_theme_name">Dynamic System</string>
<string name="dynamic_light_theme_name">Dynamic Light</string>

9
java/src/org/futo/inputmethod/latin/LatinIME.kt
View File

@ -179,6 +179,13 @@ class LatinIME : InputMethodService(), LifecycleOwner, ViewModelStoreOwner, Save
if(currColors.differsFrom(nextColors)) {
updateDrawableProvider(nextColors)
recreateKeyboard()
}
}
deferGetSetting(THEME_KEY) { key ->
if(key != activeThemeOption?.key) {
ThemeOptions[key]?.let { updateTheme(it) }
}
}
}
@ -305,7 +312,7 @@ class LatinIME : InputMethodService(), LifecycleOwner, ViewModelStoreOwner, Save
}
private fun returnBackToMainKeyboardViewFromAction() {
assert(currWindowActionWindow != null)
if(currWindowActionWindow == null) return
currWindowActionWindow!!.close()

5
java/src/org/futo/inputmethod/latin/uix/Settings.kt
View File

@ -59,7 +59,10 @@ fun <T> LifecycleOwner.deferGetSetting(key: Preferences.Key<T>, default: T, onOb
return lifecycleScope.launch {
withContext(Dispatchers.Default) {
val value = context.getSetting(key, default)
onObtained(value)
withContext(Dispatchers.Main) {
onObtained(value)
}
}
}
}

2
java/src/org/futo/inputmethod/latin/uix/settings/SettingsNavigator.kt
View File

@ -7,6 +7,7 @@ import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import org.futo.inputmethod.latin.uix.settings.pages.HomeScreen
import org.futo.inputmethod.latin.uix.settings.pages.PredictiveTextScreen
import org.futo.inputmethod.latin.uix.settings.pages.ThemeScreen
import org.futo.inputmethod.latin.uix.settings.pages.TypingScreen
import org.futo.inputmethod.latin.uix.settings.pages.VoiceInputScreen
@ -22,5 +23,6 @@ fun SettingsNavigator(
composable("predictiveText") { PredictiveTextScreen(navController) }
composable("typing") { TypingScreen(navController) }
composable("voiceInput") { VoiceInputScreen(navController) }
composable("themes") { ThemeScreen(navController) }
}
}

2
java/src/org/futo/inputmethod/latin/uix/settings/pages/Home.kt
View File

@ -55,7 +55,7 @@ fun HomeScreen(navController: NavHostController = rememberNavController()) {
NavigationItem(
title = "Theme",
style = NavigationItemStyle.HomeTertiary,
navigate = { /* TODO */ },
navigate = { navController.navigate("themes") },
icon = painterResource(id = R.drawable.eye)
)

28
java/src/org/futo/inputmethod/latin/uix/settings/pages/ThemeScreen.kt Normal file
View File

@ -0,0 +1,28 @@
package org.futo.inputmethod.latin.uix.settings.pages
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import org.futo.inputmethod.latin.uix.THEME_KEY
import org.futo.inputmethod.latin.uix.settings.ScreenTitle
import org.futo.inputmethod.latin.uix.settings.useDataStore
import org.futo.inputmethod.latin.uix.theme.selector.ThemePicker
@Preview
@Composable
fun ThemeScreen(navController: NavHostController = rememberNavController()) {
val (theme, setTheme) = useDataStore(THEME_KEY.key, THEME_KEY.default)
val context = LocalContext.current
Column(modifier = Modifier.fillMaxSize()) {
ScreenTitle("Theme", showBack = true, navController)
ThemePicker {
setTheme(it.key)
}
}
}

20
java/src/org/futo/inputmethod/latin/uix/theme/Theme.kt
View File

@ -1,6 +1,7 @@
package org.futo.inputmethod.latin.uix.theme
import android.app.Activity
import android.content.Context
import android.os.Build
import android.view.WindowManager
import androidx.compose.material3.ColorScheme
@ -11,6 +12,7 @@ import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
@ -47,18 +49,22 @@ val DarkColorScheme = darkColorScheme(
onSurfaceVariant = Slate300
)
fun applyWindowColors(context: Context, backgroundColor: Color) {
val window = (context as Activity).window
val color = backgroundColor.copy(alpha = 0.75f).toArgb()
window.statusBarColor = color
window.navigationBarColor = color
window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)
}
@Composable
fun StatusBarColorSetter() {
val backgroundColor = MaterialTheme.colorScheme.background
val context = LocalContext.current
LaunchedEffect(backgroundColor) {
val window = (context as Activity).window
val color = backgroundColor.copy(alpha = 0.75f).toArgb()
window.statusBarColor = color
window.navigationBarColor = color
window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)
applyWindowColors(context, backgroundColor)
}
}

7
java/src/org/futo/inputmethod/latin/uix/theme/ThemeOptions.kt
View File

@ -5,6 +5,7 @@ import androidx.annotation.StringRes
import androidx.compose.material3.ColorScheme
import org.futo.inputmethod.latin.uix.theme.presets.AMOLEDDarkPurple
import org.futo.inputmethod.latin.uix.theme.presets.ClassicMaterialDark
import org.futo.inputmethod.latin.uix.theme.presets.ClassicMaterialLight
import org.futo.inputmethod.latin.uix.theme.presets.DynamicDarkTheme
import org.futo.inputmethod.latin.uix.theme.presets.DynamicLightTheme
import org.futo.inputmethod.latin.uix.theme.presets.DynamicSystemTheme
@ -24,16 +25,18 @@ val ThemeOptions = hashMapOf(
DynamicLightTheme.key to DynamicLightTheme,
ClassicMaterialDark.key to ClassicMaterialDark,
ClassicMaterialLight.key to ClassicMaterialLight,
VoiceInputTheme.key to VoiceInputTheme,
AMOLEDDarkPurple.key to AMOLEDDarkPurple,
)
val ThemeOptionKeys = arrayOf(
DynamicSystemTheme.key,
VoiceInputTheme.key,
DynamicDarkTheme.key,
DynamicLightTheme.key,
DynamicSystemTheme.key,
ClassicMaterialDark.key,
VoiceInputTheme.key,
ClassicMaterialLight.key,
AMOLEDDarkPurple.key,
)

9
java/src/org/futo/inputmethod/latin/uix/theme/presets/AMOLEDDarkPurple.kt
View File

@ -1,9 +1,12 @@
package org.futo.inputmethod.latin.uix.theme.presets
import androidx.compose.material3.darkColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import org.futo.inputmethod.latin.R
import org.futo.inputmethod.latin.uix.theme.ThemeOption
import org.futo.inputmethod.latin.uix.theme.selector.ThemePreview
private val md_theme_dark_primary = Color(0xFFD0BCFF)
private val md_theme_dark_onPrimary = Color(0xFF381E72)
@ -75,4 +78,10 @@ val AMOLEDDarkPurple = ThemeOption(
available = { true }
) {
colorScheme
}
@Composable
@Preview
private fun PreviewTheme() {
ThemePreview(AMOLEDDarkPurple)
}

33
java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialDark.kt
View File

@ -20,6 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.futo.inputmethod.latin.R
import org.futo.inputmethod.latin.uix.theme.ThemeOption
import org.futo.inputmethod.latin.uix.theme.selector.ThemePreview
private val md_theme_dark_primary = Color(0xFF80cbc4)
@ -28,11 +29,11 @@ private val md_theme_dark_primaryContainer = Color(0xFF34434B)
private val md_theme_dark_onPrimaryContainer = Color(0xFFF0FFFE)
private val md_theme_dark_secondary = Color(0xFF80cbc4)
private val md_theme_dark_onSecondary = Color(0xFFFFFFFF)
private val md_theme_dark_secondaryContainer = Color(0xFF34434B)
private val md_theme_dark_secondaryContainer = Color(0xFF416152)
private val md_theme_dark_onSecondaryContainer = Color(0xFFFFFFFF)
private val md_theme_dark_tertiary = Color(0xFF3582A2)
private val md_theme_dark_onTertiary = Color(0xFFFFFFFF)
private val md_theme_dark_tertiaryContainer = Color(0xFF004D64)
private val md_theme_dark_tertiaryContainer = Color(0xFF17516D)
private val md_theme_dark_onTertiaryContainer = Color(0xFFBDE9FF)
private val md_theme_dark_error = Color(0xFFFFB4AB)
private val md_theme_dark_errorContainer = Color(0xFF93000A)
@ -97,31 +98,5 @@ val ClassicMaterialDark = ThemeOption(
@Composable
@Preview
private fun PreviewTheme() {
MaterialTheme(colorScheme) {
Column(modifier = Modifier.fillMaxSize()) {
Spacer(modifier = Modifier.weight(1.5f))
Surface(color = MaterialTheme.colorScheme.background, modifier = Modifier
.fillMaxWidth()
.height(48.dp)) {
}
Surface(color = MaterialTheme.colorScheme.surface, modifier = Modifier
.fillMaxWidth()
.weight(1.0f)) {
Box(modifier = Modifier.padding(16.dp)) {
Surface(
color = MaterialTheme.colorScheme.primary, modifier = Modifier
.align(
Alignment.BottomEnd
)
.height(32.dp)
.width(48.dp),
shape = RoundedCornerShape(8.dp)
) {
}
}
}
}
}
ThemePreview(ClassicMaterialDark)
}

104
java/src/org/futo/inputmethod/latin/uix/theme/presets/ClassicMaterialLight.kt Normal file
View File

@ -0,0 +1,104 @@
package org.futo.inputmethod.latin.uix.theme.presets
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.futo.inputmethod.latin.R
import org.futo.inputmethod.latin.uix.theme.ThemeOption
import org.futo.inputmethod.latin.uix.theme.selector.ThemePreview
val md_theme_light_primary = Color(0xFF4db6ac)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFCCE8E4)
val md_theme_light_onPrimaryContainer = Color(0xFF00201D)
val md_theme_light_secondary = Color(0xFF4A6360)
val md_theme_light_onSecondary = Color(0xFFFFFFFF)
val md_theme_light_secondaryContainer = Color(0xFFD8E8CC)
val md_theme_light_onSecondaryContainer = Color(0xFF051F1D)
val md_theme_light_tertiary = Color(0xFF47617A)
val md_theme_light_onTertiary = Color(0xFFFFFFFF)
val md_theme_light_tertiaryContainer = Color(0xFFCEEBFF)
val md_theme_light_onTertiaryContainer = Color(0xFF001D33)
val md_theme_light_error = Color(0xFFBA1A1A)
val md_theme_light_errorContainer = Color(0xFFFFDAD6)
val md_theme_light_onError = Color(0xFFFFFFFF)
val md_theme_light_onErrorContainer = Color(0xFF410002)
val md_theme_light_background = Color(0xFFe4e7e9)
val md_theme_light_onBackground = Color(0xFF191C1C)
val md_theme_light_surface = Color(0xFFeceff1)
val md_theme_light_onSurface = Color(0xFF191C1C)
val md_theme_light_surfaceVariant = Color(0xFFDAE5E2)
val md_theme_light_onSurfaceVariant = Color(0xFF3F4947)
val md_theme_light_outline = Color(0xFF9EA2A7)
val md_theme_light_inverseOnSurface = Color(0xFFEFF1F0)
val md_theme_light_inverseSurface = Color(0xFF2D3130)
val md_theme_light_inversePrimary = Color(0xFF50DBCE)
val md_theme_light_shadow = Color(0xFF000000)
val md_theme_light_surfaceTint = Color(0xFF006A63)
val md_theme_light_outlineVariant = Color(0xFFBEC9C6)
val md_theme_light_scrim = Color(0xFF000000)
private val colorScheme = lightColorScheme(
primary = md_theme_light_primary,
onPrimary = md_theme_light_onPrimary,
primaryContainer = md_theme_light_primaryContainer,
onPrimaryContainer = md_theme_light_onPrimaryContainer,
secondary = md_theme_light_secondary,
onSecondary = md_theme_light_onSecondary,
secondaryContainer = md_theme_light_secondaryContainer,
onSecondaryContainer = md_theme_light_onSecondaryContainer,
tertiary = md_theme_light_tertiary,
onTertiary = md_theme_light_onTertiary,
tertiaryContainer = md_theme_light_tertiaryContainer,
onTertiaryContainer = md_theme_light_onTertiaryContainer,
error = md_theme_light_error,
errorContainer = md_theme_light_errorContainer,
onError = md_theme_light_onError,
onErrorContainer = md_theme_light_onErrorContainer,
background = md_theme_light_background,
onBackground = md_theme_light_onBackground,
surface = md_theme_light_surface,
onSurface = md_theme_light_onSurface,
surfaceVariant = md_theme_light_surfaceVariant,
onSurfaceVariant = md_theme_light_onSurfaceVariant,
outline = md_theme_light_outline,
inverseOnSurface = md_theme_light_inverseOnSurface,
inverseSurface = md_theme_light_inverseSurface,
inversePrimary = md_theme_light_inversePrimary,
surfaceTint = md_theme_light_surfaceTint,
outlineVariant = md_theme_light_outlineVariant,
scrim = md_theme_light_scrim,
)
val ClassicMaterialLight = ThemeOption(
dynamic = false,
key = "ClassicMaterialLight",
name = R.string.classic_material_light_theme_name,
available = { true }
) {
colorScheme
}
@Composable
@Preview
private fun PreviewTheme() {
ThemePreview(ClassicMaterialLight)
}

9
java/src/org/futo/inputmethod/latin/uix/theme/presets/VoiceInputTheme.kt
View File

@ -1,8 +1,11 @@
package org.futo.inputmethod.latin.uix.theme.presets
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import org.futo.inputmethod.latin.R
import org.futo.inputmethod.latin.uix.theme.DarkColorScheme
import org.futo.inputmethod.latin.uix.theme.ThemeOption
import org.futo.inputmethod.latin.uix.theme.selector.ThemePreview
val VoiceInputTheme = ThemeOption(
dynamic = false,
@ -11,4 +14,10 @@ val VoiceInputTheme = ThemeOption(
available = { true }
) {
DarkColorScheme
}
@Composable
@Preview
private fun PreviewTheme() {
ThemePreview(VoiceInputTheme)
}

58
java/src/org/futo/inputmethod/latin/uix/theme/selector/ThemePicker.kt
View File

@ -1,5 +1,6 @@
package org.futo.inputmethod.latin.uix.theme.selector
import android.widget.Toast
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
@ -9,10 +10,14 @@ 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.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
@ -27,7 +32,8 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.futo.inputmethod.latin.uix.differsFrom
import org.futo.inputmethod.latin.uix.THEME_KEY
import org.futo.inputmethod.latin.uix.settings.useDataStore
import org.futo.inputmethod.latin.uix.theme.ThemeOption
import org.futo.inputmethod.latin.uix.theme.ThemeOptionKeys
import org.futo.inputmethod.latin.uix.theme.ThemeOptions
@ -37,14 +43,14 @@ import org.futo.inputmethod.latin.uix.theme.presets.AMOLEDDarkPurple
import org.futo.inputmethod.latin.uix.theme.presets.ClassicMaterialDark
import org.futo.inputmethod.latin.uix.theme.presets.VoiceInputTheme
// TODO: For Dynamic System we need to show the user that it switches between light/dark
@Composable
fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) {
fun ThemePreview(theme: ThemeOption, isSelected: Boolean = false, onClick: () -> Unit = { }) {
val context = LocalContext.current
val colors = remember { theme.obtainColors(context) }
val currColors = MaterialTheme.colorScheme
val isSelected = !colors.differsFrom(currColors)
val borderWidth = if (isSelected) {
2.dp
} else {
@ -76,6 +82,7 @@ fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) {
shape = keyboardShape
) {
Box(modifier = Modifier.fillMaxSize()) {
// Theme name and action bar
Text(
text = stringResource(theme.name),
textAlign = TextAlign.Center,
@ -87,11 +94,14 @@ fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) {
color = textColor,
style = Typography.labelSmall
)
// Keyboard contents
Box(
modifier = Modifier
.fillMaxSize()
.padding(8.dp)
) {
// Spacebar
Surface(
modifier = Modifier
.fillMaxWidth(0.5f)
@ -101,6 +111,7 @@ fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) {
shape = RoundedCornerShape(12.dp)
) { }
// Enter key
Surface(
modifier = Modifier
.width(24.dp)
@ -115,10 +126,40 @@ fun ThemePreview(theme: ThemeOption, onClick: () -> Unit) {
}
}
@Composable
fun AddCustomThemeButton(onClick: () -> Unit = { }) {
val context = LocalContext.current
val currColors = MaterialTheme.colorScheme
val keyboardShape = RoundedCornerShape(8.dp)
Surface(
modifier = Modifier
.padding(12.dp)
.width(172.dp)
.height(128.dp)
.clickable { onClick() },
color = currColors.surfaceVariant,
shape = keyboardShape
) {
Box(modifier = Modifier.fillMaxSize()) {
Icon(
Icons.Default.Add, contentDescription = "", modifier = Modifier
.size(48.dp)
.align(
Alignment.Center
)
)
}
}
}
@Composable
fun ThemePicker(onSelected: (ThemeOption) -> Unit) {
val context = LocalContext.current
val currentTheme = useDataStore(THEME_KEY.key, "").value
val isInspecting = LocalInspectionMode.current
val availableThemeOptions = remember {
ThemeOptionKeys.mapNotNull { key ->
@ -140,15 +181,22 @@ fun ThemePicker(onSelected: (ThemeOption) -> Unit) {
items(availableThemeOptions.count()) {
val themeOption = availableThemeOptions[it].second
ThemePreview(themeOption) {
ThemePreview(themeOption, isSelected = themeOption.key == currentTheme) {
onSelected(themeOption)
}
}
item {
AddCustomThemeButton {
// TODO: Custom themes
val toast = Toast.makeText(context, "Custom themes coming eventually", Toast.LENGTH_SHORT)
toast.show()
}
}
}
}
@Preview
@Composable
private fun ThemePickerPreview() {