fix(android): update widget with a more usable UI

This commit is contained in:
Harsh Shandilya 2023-09-23 01:17:16 +05:30
parent be0f46371e
commit c6739487a4
3 changed files with 127 additions and 11 deletions

View file

@ -7,41 +7,73 @@
package dev.msfjarvis.claw.android.glance package dev.msfjarvis.claw.android.glance
import android.content.Context import android.content.Context
import android.os.Build
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.ui.unit.dp
import androidx.glance.GlanceId import androidx.glance.GlanceId
import androidx.glance.GlanceModifier import androidx.glance.GlanceModifier
import androidx.glance.GlanceTheme
import androidx.glance.appwidget.GlanceAppWidget import androidx.glance.appwidget.GlanceAppWidget
import androidx.glance.appwidget.appWidgetBackground
import androidx.glance.appwidget.lazy.LazyColumn import androidx.glance.appwidget.lazy.LazyColumn
import androidx.glance.appwidget.lazy.items import androidx.glance.appwidget.lazy.items
import androidx.glance.appwidget.provideContent import androidx.glance.appwidget.provideContent
import androidx.glance.background
import androidx.glance.layout.Alignment import androidx.glance.layout.Alignment
import androidx.glance.layout.fillMaxSize import androidx.glance.layout.fillMaxSize
import androidx.glance.layout.padding
import androidx.glance.material3.ColorProviders
import androidx.glance.text.Text import androidx.glance.text.Text
import androidx.glance.text.TextStyle import androidx.glance.text.TextStyle
import dev.msfjarvis.claw.common.theme.DarkThemeColors
import dev.msfjarvis.claw.common.theme.LightThemeColors
import dev.msfjarvis.claw.database.local.SavedPost import dev.msfjarvis.claw.database.local.SavedPost
import java.time.Month import kotlinx.collections.immutable.persistentListOf
import kotlinx.collections.immutable.ImmutableMap
import kotlinx.collections.immutable.persistentMapOf
import kotlinx.coroutines.flow.Flow import kotlinx.coroutines.flow.Flow
class SavedPostsWidget( class SavedPostsWidget(
private val savedPosts: Flow<ImmutableMap<Month, List<SavedPost>>>, private val savedPosts: Flow<List<SavedPost>>,
) : GlanceAppWidget() { ) : GlanceAppWidget() {
override suspend fun provideGlance(context: Context, id: GlanceId) { override suspend fun provideGlance(context: Context, id: GlanceId) {
provideContent { MyContent() } provideContent {
GlanceTheme(
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) GlanceTheme.colors
else ColorProviders(light = LightThemeColors, dark = DarkThemeColors)
) {
WidgetHost()
}
}
} }
@Composable @Composable
private fun MyContent() { private fun WidgetHost() {
val posts by savedPosts.collectAsState(persistentMapOf()) val posts by savedPosts.collectAsState(persistentListOf())
LazyColumn( LazyColumn(
modifier = GlanceModifier.fillMaxSize(), modifier =
GlanceModifier.fillMaxSize()
.background(GlanceTheme.colors.background)
.appWidgetBackground(),
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
items(posts.values.flatten()) { post -> Text(post.title, style = TextStyle()) } item {
val style = MaterialTheme.typography.titleLarge
Text(
text = "Saved posts",
style =
TextStyle(
color = GlanceTheme.colors.onBackground,
fontSize = style.fontSize,
fontWeight = style.fontWeight.toGlance(),
fontStyle = style.fontStyle.toGlance(),
),
modifier = GlanceModifier.padding(vertical = 8.dp),
)
}
items(posts) { post -> WidgetListEntry(post = post) }
} }
} }
} }

View file

@ -0,0 +1,84 @@
/*
* Copyright © 2023 Harsh Shandilya.
* Use of this source code is governed by an MIT-style
* license that can be found in the LICENSE file or at
* https://opensource.org/licenses/MIT.
*/
package dev.msfjarvis.claw.android.glance
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.font.FontStyle as UIFontStyle
import androidx.compose.ui.text.font.FontWeight as UIFontWeight
import androidx.compose.ui.unit.dp
import androidx.glance.GlanceComposable
import androidx.glance.GlanceModifier
import androidx.glance.GlanceTheme
import androidx.glance.action.ActionParameters.Key
import androidx.glance.action.actionParametersOf
import androidx.glance.action.actionStartActivity
import androidx.glance.action.clickable
import androidx.glance.appwidget.cornerRadius
import androidx.glance.background
import androidx.glance.layout.Alignment
import androidx.glance.layout.Column
import androidx.glance.layout.fillMaxWidth
import androidx.glance.layout.padding
import androidx.glance.text.FontStyle
import androidx.glance.text.FontWeight
import androidx.glance.text.Text
import androidx.glance.text.TextStyle
import dev.msfjarvis.claw.android.MainActivity
import dev.msfjarvis.claw.android.MainActivity.Companion.NAVIGATION_KEY
import dev.msfjarvis.claw.database.local.SavedPost
private val destinationKey = Key<String>(NAVIGATION_KEY)
@Composable
@GlanceComposable
fun WidgetListEntry(
post: SavedPost,
modifier: GlanceModifier = GlanceModifier,
) {
val titleStyle = MaterialTheme.typography.titleMedium
Column(
verticalAlignment = Alignment.CenterVertically,
modifier =
modifier
.fillMaxWidth()
.background(GlanceTheme.colors.surfaceVariant)
.cornerRadius(8.dp)
.clickable(
actionStartActivity<MainActivity>(actionParametersOf(destinationKey to post.shortId))
),
) {
Text(
text = post.title,
modifier = GlanceModifier.padding(horizontal = 4.dp, vertical = 4.dp),
style =
TextStyle(
color = GlanceTheme.colors.onSurfaceVariant,
fontSize = titleStyle.fontSize,
fontWeight = titleStyle.fontWeight.toGlance(),
fontStyle = titleStyle.fontStyle.toGlance(),
)
)
}
}
fun UIFontWeight?.toGlance(): FontWeight? {
return when (this) {
UIFontWeight.Normal -> FontWeight.Normal
UIFontWeight.Medium -> FontWeight.Medium
UIFontWeight.Bold -> FontWeight.Bold
else -> null
}
}
fun UIFontStyle?.toGlance(): FontStyle? {
return when (this) {
UIFontStyle.Normal -> FontStyle.Normal
UIFontStyle.Italic -> FontStyle.Italic
else -> null
}
}

View file

@ -19,7 +19,7 @@ import androidx.compose.runtime.ProvidedValue
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import com.halilibo.richtext.ui.material3.SetupMaterial3RichText import com.halilibo.richtext.ui.material3.SetupMaterial3RichText
private val LightThemeColors = val LightThemeColors =
lightColorScheme( lightColorScheme(
primary = md_theme_light_primary, primary = md_theme_light_primary,
onPrimary = md_theme_light_onPrimary, onPrimary = md_theme_light_onPrimary,
@ -48,7 +48,7 @@ private val LightThemeColors =
inverseSurface = md_theme_light_inverseSurface, inverseSurface = md_theme_light_inverseSurface,
) )
private val DarkThemeColors = val DarkThemeColors =
darkColorScheme( darkColorScheme(
primary = md_theme_dark_primary, primary = md_theme_dark_primary,
onPrimary = md_theme_dark_onPrimary, onPrimary = md_theme_dark_onPrimary,