Update Widget to use Scaffold and TitleBar

Author: vincent-paing

app/src/main/java/dev/aungkyawpaing/ccdroidx/feature/widget/DashboardWidget.kt

@@ -22,20 +22,18 @@ import androidx.glance.appwidget.GlanceAppWidgetReceiver
 import androidx.glance.appwidget.SizeMode
 import androidx.glance.appwidget.action.ActionCallback
 import androidx.glance.appwidget.action.actionRunCallback
+import androidx.glance.appwidget.components.Scaffold
+import androidx.glance.appwidget.components.TitleBar
 import androidx.glance.appwidget.cornerRadius
 import androidx.glance.appwidget.lazy.LazyColumn
 import androidx.glance.appwidget.lazy.items
 import androidx.glance.appwidget.provideContent
 import androidx.glance.background
-import androidx.glance.layout.Alignment
 import androidx.glance.layout.Box
 import androidx.glance.layout.Column
-import androidx.glance.layout.Row
-import androidx.glance.layout.fillMaxSize
 import androidx.glance.layout.fillMaxWidth
 import androidx.glance.layout.height
 import androidx.glance.layout.padding
-import androidx.glance.layout.size
 import androidx.glance.semantics.semantics
 import androidx.glance.semantics.testTag
 import androidx.glance.text.FontWeight
@@ -71,45 +69,27 @@ fun DashboardWidgetContent(failingProjects: List<Project>) {
   val context = LocalContext.current
 
   GlanceTheme {
-    Column(
-      modifier = GlanceModifier
-        .fillMaxSize()
-        .background(GlanceTheme.colors.background)
-    ) {
-
-      Row(
-        modifier = GlanceModifier
-          .fillMaxWidth()
-          .background(GlanceTheme.colors.primary)
-          .clickable(onClick = actionStartActivity(MainActivity::class.java)),
-        verticalAlignment = Alignment.CenterVertically
-      ) {
-        val title = if (failingProjects.isEmpty()) {
-          context.getString(R.string.dashboard_widget_title_green)
-        } else {
-          context.getString(R.string.dashboard_widget_title_red, failingProjects.size.toString())
-        }
-        val titleStyle = TextStyle(
-          color = GlanceTheme.colors.onPrimary,
-          fontSize = TextUnit(16.0f, TextUnitType.Sp),
-          fontWeight = FontWeight.Medium,
-        )
-        Image(
-          provider = ImageProvider(R.drawable.ic_refresh_24),
-          contentDescription = context.getString(R.string.menu_item_sync_project_status),
-          colorFilter = ColorFilter.tint(GlanceTheme.colors.onPrimary),
-          modifier = GlanceModifier.defaultWeight().size(48.dp).padding(12.dp)
-            .clickable(onClick = actionRunCallback<WidgetRefreshAction>())
-        )
-
-        Text(
-          text = title,
-          style = titleStyle,
-          modifier = GlanceModifier.fillMaxWidth()
-        )
-      }
-
-      LazyColumn(modifier = GlanceModifier.padding(8.dp)) {
+    Scaffold(
+      modifier = GlanceModifier.background(GlanceTheme.colors.widgetBackground),
+      titleBar = {
+        TitleBar(
+          startIcon = ImageProvider(R.drawable.ic_notification),
+          iconColor = GlanceTheme.colors.primary,
+          title = if (failingProjects.isEmpty()) {
+            context.getString(R.string.dashboard_widget_title_green)
+          } else {
+            context.getString(R.string.dashboard_widget_title_red, failingProjects.size.toString())
+          },
+          actions = {
+            Image(
+              provider = ImageProvider(R.drawable.ic_refresh_24),
+              contentDescription = context.getString(R.string.menu_item_sync_project_status),
+              colorFilter = ColorFilter.tint(GlanceTheme.colors.onSurface),
+              modifier = GlanceModifier.clickable(onClick = actionRunCallback<WidgetRefreshAction>())
+            )
+          })
+      }) {
+      LazyColumn {
         items(failingProjects) { project ->
           Column {
             Box(

app/src/main/java/dev/aungkyawpaing/ccdroidx/feature/widget/DashboardWidgetPreview.kt

@@ -21,6 +21,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -38,39 +39,46 @@ fun DashboardWidgetPreview() {
   Mdc3Theme {
     Column(
       modifier = Modifier
-        .size(150.dp, 225.dp)
-        .background(MaterialTheme.colorScheme.background)
+        .size(150.dp, 200.dp)
+        .background(MaterialTheme.colorScheme.surface, RoundedCornerShape(8.dp))
     ) {
 
       Row(
         modifier = Modifier
-          .fillMaxWidth()
-          .background(MaterialTheme.colorScheme.primary),
+          .fillMaxWidth(),
         verticalAlignment = Alignment.CenterVertically
       ) {
         val title = "2 Red"
         Image(
-          Icons.Filled.Refresh,
+          painterResource(id = R.drawable.ic_notification),
           null,
-          colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onPrimary),
+          colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
           modifier = Modifier
-            .size(48.dp)
-            .padding(12.dp)
+            .size(36.dp)
+            .padding(8.dp)
         )
 
         Text(
           "3 Red",
-          style = MaterialTheme.typography.titleMedium,
-          color = MaterialTheme.colorScheme.onPrimary
+          style = MaterialTheme.typography.titleSmall,
+          color = MaterialTheme.colorScheme.onSurface,
+          modifier = Modifier.weight(1.0f)
+        )
+
+        Image(
+          Icons.Filled.Refresh,
+          null,
+          colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurface),
+          modifier = Modifier
+            .size(36.dp)
+            .padding(8.dp)
         )
       }
 
       val exampleProjects = listOf(
-        "lisan/al-giab",
-        "anakin/sky-walker",
-        "answer/to-be-rich-is",
-        "ccdroidx/ccdroidx-pipeline",
-        "you-cant/see-this"
+        "failing/project",
+        "shown/here",
+        "just/glance"
       )
 
       LazyColumn(

app/src/main/res/drawable/dashboard_widget_preview.png

@@ -2,9 +2,9 @@
     android:description="@string/dashboard_widget_description"
     android:initialLayout="@layout/glance_default_loading_layout"
     android:minWidth="100dp"
-    android:minHeight="150dp"
+    android:minHeight="120dp"
     android:previewImage="@drawable/dashboard_widget_preview"
     android:resizeMode="horizontal|vertical"
     android:targetCellWidth="2"
-    android:targetCellHeight="3"
+    android:targetCellHeight="2"
     android:widgetCategory="home_screen" />