Add digital clock variants:

- Outlined
- Material You
- OnePlus

Close #563, #422

Co-authored-by: elia vandini  <103252381+eliavandini@users.noreply.github.com>

app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/clock/ClockWidget.kt

@@ -1,7 +1,6 @@
 package de.mm20.launcher2.ui.launcher.widgets.clock
 
 import androidx.compose.animation.AnimatedContent
-import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -22,19 +21,15 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Alarm
 import androidx.compose.material.icons.rounded.AutoAwesome
 import androidx.compose.material.icons.rounded.BatteryFull
-import androidx.compose.material.icons.rounded.ChevronLeft
-import androidx.compose.material.icons.rounded.ChevronRight
 import androidx.compose.material.icons.rounded.DarkMode
 import androidx.compose.material.icons.rounded.Height
 import androidx.compose.material.icons.rounded.HorizontalSplit
 import androidx.compose.material.icons.rounded.LightMode
 import androidx.compose.material.icons.rounded.MusicNote
 import androidx.compose.material.icons.rounded.Star
-import androidx.compose.material.icons.rounded.Style
 import androidx.compose.material.icons.rounded.Today
 import androidx.compose.material.icons.rounded.Tune
 import androidx.compose.material.icons.rounded.VerticalSplit
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -46,7 +41,6 @@ import androidx.compose.material3.SegmentedButtonDefaults
 import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
@@ -54,14 +48,12 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 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.platform.LocalContext
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -79,10 +71,8 @@ import de.mm20.launcher2.ui.launcher.widgets.clock.clocks.DigitalClock1
 import de.mm20.launcher2.ui.launcher.widgets.clock.clocks.DigitalClock2
 import de.mm20.launcher2.ui.launcher.widgets.clock.clocks.OrbitClock
 import de.mm20.launcher2.ui.launcher.widgets.clock.parts.PartProvider
-import de.mm20.launcher2.ui.locals.LocalDarkTheme
 import de.mm20.launcher2.ui.locals.LocalPreferDarkContentOverWallpaper
 import de.mm20.launcher2.ui.settings.clockwidget.ClockWidgetSettingsScreenVM
-import kotlinx.coroutines.launch
 
 @Composable
 fun ClockWidget(
@@ -251,7 +241,11 @@ fun Clock(
 ) {
     val time = LocalTime.current
     when (style) {
-        ClockStyle.DigitalClock1 -> DigitalClock1(time, layout)
+        ClockStyle.DigitalClock1,
+        ClockStyle.DigitalClock1_Outlined,
+        ClockStyle.DigitalClock1_MDY,
+        ClockStyle.DigitalClock1_OnePlus -> DigitalClock1(time, layout, style)
+
         ClockStyle.DigitalClock2 -> DigitalClock2(time, layout)
         ClockStyle.BinaryClock -> BinaryClock(time, layout)
         ClockStyle.AnalogClock -> AnalogClock(time, layout)
@@ -344,9 +338,13 @@ fun ConfigureClockWidgetSheet(
             }
 
             if (color != null && layout != null) {
-                WatchFaceSelector(layout = layout!!, colors = color!!, selected = style, onSelect = {
+                WatchFaceSelector(
-                    viewModel.setClockStyle(it)
+                    layout = layout!!,
-                })
+                    colors = color!!,
+                    selected = style,
+                    onSelect = {
+                        viewModel.setClockStyle(it)
+                    })
             }
 
             SingleChoiceSegmentedButtonRow(

app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/clock/WatchFaceSelector.kt

@@ -75,6 +75,9 @@ fun WatchFaceSelector(
             val styles = remember {
                 sortedMapOf(
                     ClockStyle.DigitalClock1 to 0,
+                    ClockStyle.DigitalClock1_Outlined to 0,
+                    ClockStyle.DigitalClock1_MDY to 0,
+                    ClockStyle.DigitalClock1_OnePlus to 0,
                     ClockStyle.DigitalClock2 to 1,
                     ClockStyle.AnalogClock to 2,
                     ClockStyle.OrbitClock to 3,
@@ -252,7 +255,10 @@ fun WatchFaceSelector(
 
 fun getClockstyleName(context: Context, style: ClockStyle): String {
     return when (style) {
-        ClockStyle.DigitalClock1 -> "Bold"
+        ClockStyle.DigitalClock1,
+        ClockStyle.DigitalClock1_Outlined,
+        ClockStyle.DigitalClock1_MDY,
+        ClockStyle.DigitalClock1_OnePlus -> "Bold"
         ClockStyle.DigitalClock2 -> "Simple"
         ClockStyle.OrbitClock -> "Orbit"
         ClockStyle.BinaryClock -> "Binary"
@@ -270,6 +276,9 @@ fun getVariantName(context: Context, style: ClockStyle): String {
         ClockStyle.BinaryClock,
         ClockStyle.AnalogClock,
         ClockStyle.EmptyClock -> "Standard"
+        ClockStyle.DigitalClock1_Outlined -> "Outlined"
+        ClockStyle.DigitalClock1_MDY -> "Material You"
+        ClockStyle.DigitalClock1_OnePlus -> "OnePlus"
 
         ClockStyle.UNRECOGNIZED -> ""
     }

app/ui/src/main/java/de/mm20/launcher2/ui/launcher/widgets/clock/clocks/DigitalClock1.kt

@@ -2,24 +2,36 @@ package de.mm20.launcher2.ui.launcher.widgets.clock.clocks
 
 import android.text.format.DateFormat
 import androidx.compose.foundation.layout.offset
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.DrawStyle
+import androidx.compose.ui.graphics.drawscope.Fill
+import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
 import de.mm20.launcher2.preferences.Settings
+import de.mm20.launcher2.preferences.Settings.ClockWidgetSettings.ClockStyle
+import de.mm20.launcher2.ui.ktx.toPixels
+import de.mm20.launcher2.ui.locals.LocalDarkTheme
 import java.text.SimpleDateFormat
 import java.util.*
 
 @Composable
 fun DigitalClock1(
     time: Long,
-    layout: Settings.ClockWidgetSettings.ClockWidgetLayout
+    layout: Settings.ClockWidgetSettings.ClockWidgetLayout,
+    variant: ClockStyle = ClockStyle.DigitalClock1,
 ) {
     val verticalLayout = layout == Settings.ClockWidgetSettings.ClockWidgetLayout.Vertical
     val format = SimpleDateFormat(
@@ -30,14 +42,51 @@ fun DigitalClock1(
         },
         Locale.getDefault()
     )
-    Text(
+
-        modifier = Modifier.offset(0.dp, if (verticalLayout) 16.dp else 0.dp),
+    val formattedString = format.format(time)
-        text = format.format(time),
+
-        style = MaterialTheme.typography.displayLarge.copy(
+    val textStyle = MaterialTheme.typography.displayLarge.copy(
-            fontSize = if (verticalLayout) 100.sp else 48.sp,
+        fontSize = if (verticalLayout) 100.sp else 48.sp,
-            fontWeight = FontWeight.Black,
+        fontWeight = FontWeight.Black,
-            textAlign = TextAlign.Center,
+        textAlign = TextAlign.Center,
-            lineHeight = 0.8.em,
+        lineHeight = 0.8.em,
+        drawStyle = if (variant == ClockStyle.DigitalClock1_Outlined) Stroke(width = 2.dp.toPixels()) else Fill,
+        color = if (variant == ClockStyle.DigitalClock1_MDY) {
+            if (LocalContentColor.current == Color.White) {
+                if (LocalDarkTheme.current) MaterialTheme.colorScheme.onPrimaryContainer
+                else MaterialTheme.colorScheme.primaryContainer
+            } else {
+                if (LocalDarkTheme.current) MaterialTheme.colorScheme.primaryContainer
+                else MaterialTheme.colorScheme.primary
+            }
+        } else LocalContentColor.current
+    )
+
+    val modifier = Modifier.offset(0.dp, if (verticalLayout) 16.dp else 0.dp)
+
+    if (variant == ClockStyle.DigitalClock1_OnePlus) {
+        val hour = formattedString.substring(0, 2)
+        Text(
+            modifier = modifier,
+            text = buildAnnotatedString {
+                hour.forEach {
+                    if (it == '1') {
+                        withStyle(style = SpanStyle(color = Color(0xFFC41442))) {
+                            append(it)
+                        }
+                    } else {
+                        append(it)
+                    }
+                }
+                append(formattedString.substring(2))
+            },
+            style = textStyle
         )
+        return
+    }
+    Text(
+        modifier = modifier,
+        text = formattedString,
+        style = textStyle,
     )
 }

core/preferences/src/main/proto/settings.proto

@@ -126,6 +126,9 @@ message Settings {
       BinaryClock = 2;
       AnalogClock = 3;
       EmptyClock = 4;
+      DigitalClock1_MDY = 6;
+      DigitalClock1_Outlined = 7;
+      DigitalClock1_OnePlus = 8;
     }
     ClockStyle clock_style = 2;
     bool date_part = 3;