Implement clock styles

i18n/src/main/res/values-de/strings.xml

@@ -413,6 +413,8 @@
     <string name="preference_about_license">Diese App ist freie Software.</string>
     <string name="preference_about_license_summary">Lizenziert unter der GNU General Public License 3.0</string>
     <string name="feature_not_available">Diese Funktion ist in dieser Version von %1$s nicht verfügbar.</string>
+    <string name="preference_category_clock_widget">Uhr</string>
+    <string name="preference_clock_widget_style">Uhrenstil</string>
     <plurals name="calendar_widget_running_events">
         <item quantity="one">+%1$d laufender Termin aus vergangenen Tagen</item>
         <item quantity="other">+%1$d laufende Termine aus vergangenen Tagen</item>

i18n/src/main/res/values/strings.xml

@@ -451,4 +451,6 @@
     <string name="preference_about_license">This app is free software.</string>
     <string name="preference_about_license_summary">Licensed under the GNU General Public License 3.0</string>
     <string name="feature_not_available">This feature is not available in this version of %1$s</string>
+    <string name="preference_category_clock_widget">Clock</string>
+    <string name="preference_clock_widget_style">Clock style</string>
 </resources>

preferences/src/main/proto/settings.proto

@@ -34,6 +34,13 @@ message Settings {
     bool light_nav_bar = 3;
     bool dim_wallpaper = 4;
     bool app_start_animation = 5;
+
+    enum ClockStyle {
+      Digital = 0;
+      Analog = 1;
+      Binary = 2;
+    }
+    ClockStyle clock_style = 8;
   }
   AppearanceSettings appearance = 1;
 

ui/src/main/java/de/mm20/launcher2/ui/activity/ComposeActivity.kt

@@ -108,6 +108,9 @@ class ComposeActivity : AppCompatActivity() {
                             composable("settings/appearance/colors") {
                                 SettingsColorsScreen()
                             }
+                            composable("settings/appearance/clock") {
+                                SettingsClockScreen()
+                            }
                             composable(
                                 "settings/license?library={libraryName}",
                                 arguments = listOf(navArgument("libraryName") {

ui/src/main/java/de/mm20/launcher2/ui/component/Clocks.kt

@@ -101,7 +101,8 @@ fun AnalogClock(time: Long) {
             .padding(bottom = 24.dp)
             .size(156.dp),
         shape = CircleShape,
-        color = bgColor
+        color = bgColor,
+        elevation = 8.dp
     ) {
         Box(
             modifier = Modifier.fillMaxSize()

ui/src/main/java/de/mm20/launcher2/ui/screens/settings/SettingsAppearanceScreen.kt

@@ -44,9 +44,21 @@ fun SettingsAppearanceScreen() {
                         }
                     }
                 )
-                Preference(title = stringResource(id = R.string.preference_screen_colors), onClick = {
+                Preference(
-                    navController?.navigate("settings/appearance/colors")
+                    title = stringResource(id = R.string.preference_screen_colors),
-                })
+                    onClick = {
+                        navController?.navigate("settings/appearance/colors")
+                    })
+            }
+        }
+        item {
+            PreferenceCategory(title = stringResource(id = R.string.preference_category_clock_widget)) {
+                Preference(
+                    title = stringResource(id = R.string.preference_clock_widget_style),
+                    onClick = {
+                        navController?.navigate("settings/appearance/clock")
+                    }
+                )
             }
         }
     }

ui/src/main/java/de/mm20/launcher2/ui/screens/settings/SettingsClockScreen.kt

@@ -0,0 +1,97 @@
+package de.mm20.launcher2.ui.screens.settings
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.RadioButtonChecked
+import androidx.compose.material.icons.rounded.RadioButtonUnchecked
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.datastore.core.DataStore
+import de.mm20.launcher2.preferences.Settings
+import de.mm20.launcher2.preferences.Settings.AppearanceSettings.ClockStyle
+import de.mm20.launcher2.preferences.dataStore
+import de.mm20.launcher2.ui.R
+import de.mm20.launcher2.ui.component.AnalogClock
+import de.mm20.launcher2.ui.component.BinaryClock
+import de.mm20.launcher2.ui.component.DigitalClock
+import de.mm20.launcher2.ui.component.preferences.Preference
+import de.mm20.launcher2.ui.component.preferences.PreferenceCategory
+import de.mm20.launcher2.ui.component.preferences.PreferenceScreen
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.launch
+
+@Composable
+fun SettingsClockScreen() {
+    val dataStore = LocalContext.current.dataStore
+    val scope = rememberCoroutineScope()
+    val selectedClock by remember { dataStore.data.map { it.appearance.clockStyle } }.collectAsState(
+        initial = ClockStyle.Digital
+    )
+    val time = System.currentTimeMillis()
+    PreferenceScreen(title = stringResource(id = R.string.preference_clock_widget_style)) {
+        item {
+            ClockPreview(selected = selectedClock == ClockStyle.Digital, onClick = {
+                scope.launch {
+                    updateClock(dataStore, ClockStyle.Digital)
+                }
+            }) {
+                DigitalClock(time)
+            }
+        }
+        item {
+            ClockPreview(selected = selectedClock == ClockStyle.Analog, onClick = {
+                scope.launch {
+                    updateClock(dataStore, ClockStyle.Analog)
+                }
+            }) {
+                AnalogClock(time)
+            }
+        }
+        item {
+            ClockPreview(selected = selectedClock == ClockStyle.Binary, onClick = {
+                scope.launch {
+                    updateClock(dataStore, ClockStyle.Binary)
+                }
+            }) {
+                BinaryClock(time)
+            }
+        }
+    }
+}
+
+private suspend fun updateClock(dataStore: DataStore<Settings>, clockStyle: ClockStyle) {
+    dataStore.updateData {
+        it.toBuilder()
+            .setAppearance(it.appearance.toBuilder().setClockStyle(clockStyle))
+            .build()
+    }
+}
+
+@Composable
+private fun ClockPreview(
+    selected: Boolean,
+    onClick: () -> Unit,
+    clock: @Composable () -> Unit
+) {
+    PreferenceCategory {
+        Preference(
+            title = "",
+            icon = if (selected) Icons.Rounded.RadioButtonChecked else Icons.Rounded.RadioButtonUnchecked,
+            controls = {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center
+                ) {
+                    clock()
+                }
+            },
+            onClick = onClick
+        )
+    }
+}

ui/src/main/java/de/mm20/launcher2/ui/widget/ClockWidget.kt

@@ -15,10 +15,15 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import com.google.accompanist.insets.LocalWindowInsets
-import de.mm20.launcher2.ui.locals.LocalWindowSize
+import de.mm20.launcher2.preferences.Settings.AppearanceSettings.ClockStyle
+import de.mm20.launcher2.preferences.dataStore
+import de.mm20.launcher2.ui.component.AnalogClock
+import de.mm20.launcher2.ui.component.BinaryClock
 import de.mm20.launcher2.ui.component.DigitalClock
 import de.mm20.launcher2.ui.ktx.toDp
+import de.mm20.launcher2.ui.locals.LocalWindowSize
 import de.mm20.launcher2.ui.widget.parts.DatePart
+import kotlinx.coroutines.flow.map
 
 @Composable
 fun ClockWidget(
@@ -55,6 +60,10 @@ fun ClockWidget(
 fun Clock(transparentBackground: Boolean) {
     var time by remember { mutableStateOf(System.currentTimeMillis()) }
     val context = LocalContext.current
+    val dataStore = context.dataStore
+    val clockStyle by remember { dataStore.data.map { it.appearance.clockStyle } }.collectAsState(
+        initial = ClockStyle.Digital
+    )
 
     DisposableEffect(null) {
         val receiver = object : BroadcastReceiver() {
@@ -72,7 +81,17 @@ fun Clock(transparentBackground: Boolean) {
         }
     }
 
-    DigitalClock(time)
+    when (clockStyle) {
+        ClockStyle.Analog -> {
+            AnalogClock(time = time)
+        }
+        ClockStyle.Binary -> {
+            BinaryClock(time = time)
+        }
+        else -> {
+            DigitalClock(time = time)
+        }
+    }
 }
 
 @Composable