Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use material3 for Compose views #460

Merged
merged 9 commits into from
Feb 13, 2024
Merged

Use material3 for Compose views #460

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
109bdae
Start using material 3 in Compose
stevenzeck Jan 31, 2024
1cd0f8f
Fix lint errors
stevenzeck Feb 3, 2024
84e2c07
Merge branch 'develop' into material3
stevenzeck Feb 3, 2024
f134249
Merge branch 'develop' into material3
mickael-menu Feb 5, 2024
b8b1947
Lint
mickael-menu Feb 5, 2024
797ba21
Use Group for Item
stevenzeck Feb 13, 2024
aeda9a9
Wrap around a Surface
stevenzeck Feb 13, 2024
c65e9c3
Create and user new EmphasisProvider
stevenzeck Feb 13, 2024
9a48958
Merge branch 'develop' into material3
stevenzeck Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion gradle/libs.versions.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ timber = "5.0.1"


[libraries]
accompanist-themeadapter-material = { group = "com.google.accompanist", name = "accompanist-themeadapter-material", version.ref = "accompanist" }

androidx-activity-ktx = { group = "androidx.activity", name = "activity-ktx", version.ref = "androidx-activity" }
androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "androidx-appcompat" }
Expand Down
2 changes: 0 additions & 2 deletions test-app/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,6 @@ dependencies {
// Only required if you want to support PDF files using PDFium.
implementation(project(":readium:adapters:pdfium"))

implementation(libs.accompanist.themeadapter.material)

implementation(libs.androidx.activity.ktx)
implementation(libs.androidx.appcompat)
implementation(libs.androidx.browser)
Expand Down
10 changes: 5 additions & 5 deletions test-app/src/main/java/org/readium/r2/testapp/reader/preferences/UserPreferences.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
package org.readium.r2.testapp.reader.preferences

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
Expand Down Expand Up @@ -63,7 +63,8 @@ private fun <P : Configurable.Preferences<P>, E : PreferencesEditor<P>> UserPref
Text(
text = title,
textAlign = TextAlign.Center,
style = MaterialTheme.typography.h6,
style = MaterialTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.onSurface,
mickael-menu marked this conversation as resolved.
Show resolved Hide resolved
modifier = Modifier
.fillMaxWidth()
)
Expand Down Expand Up @@ -611,15 +612,14 @@ private fun PresetsMenuButton(

for (preset in presets) {
DropdownMenuItem(
text = { Text(preset.title) },
onClick = {
dismiss()
clear()
preset.apply()
commit()
}
) {
Text(preset.title)
}
)
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions test-app/src/main/java/org/readium/r2/testapp/reader/tts/TtsControls.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.material.Card
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
Expand Down
31 changes: 23 additions & 8 deletions test-app/src/main/java/org/readium/r2/testapp/shared/views/Group.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,36 @@

package org.readium.r2.testapp.shared.views

import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ProvideTextStyle
import androidx.compose.runtime.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight

/**
* Sets the emphasis (alpha) of a group of [Composable] views.
*/
@Composable
fun Group(lowEmphasis: Boolean = false, enabled: Boolean = true, content: @Composable () -> Unit) {
val alpha = when {
!enabled -> ContentAlpha.disabled
lowEmphasis -> ContentAlpha.medium
else -> ContentAlpha.high
val contentColor = when {
!enabled -> 0.38f
mickael-menu marked this conversation as resolved.
Show resolved Hide resolved
else -> 1.0f
}
val fontWeight = when {
!lowEmphasis -> FontWeight.Normal
else -> FontWeight.Bold
}

CompositionLocalProvider(LocalContentAlpha provides alpha, content = content)
CompositionLocalProvider(
value = LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(
alpha = contentColor
),
content = {
ProvideTextStyle(value = TextStyle(fontWeight = fontWeight)) {
content()
}
}
)
}
46 changes: 25 additions & 21 deletions test-app/src/main/java/org/readium/r2/testapp/shared/views/Preferences.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,18 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.Backspace
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Backspace
import androidx.compose.material.icons.filled.Palette
import androidx.compose.material.icons.filled.Remove
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.luminance
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
Expand Down Expand Up @@ -90,7 +91,7 @@ private fun <T> ButtonGroupItem(
) { option ->
Text(
text = formatValue(option),
style = MaterialTheme.typography.caption
style = MaterialTheme.typography.labelMedium
)
}
}
Expand Down Expand Up @@ -139,19 +140,18 @@ private fun <T> MenuItem(
text = {
Text(
text = formatValue(value),
style = MaterialTheme.typography.caption
style = MaterialTheme.typography.labelMedium
)
}
) { dismiss ->
for (aValue in values) {
DropdownMenuItem(
text = { Text(formatValue(aValue)) },
onClick = {
dismiss()
onValueChanged(aValue)
}
) {
Text(formatValue(aValue))
}
)
}
}
}
Expand Down Expand Up @@ -308,7 +308,7 @@ private fun ColorItem(

OutlinedButton(
onClick = { isPicking = true },
colors = ButtonDefaults.buttonColors(backgroundColor = color)
colors = ButtonDefaults.buttonColors(containerColor = color)
) {
if (noValueSelected) {
Icon(
Expand Down Expand Up @@ -367,7 +367,6 @@ fun LanguageItem(
)
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun Item(
title: String,
Expand All @@ -383,19 +382,26 @@ private fun Item(
} else {
Modifier
},
text = {
val alpha = if (isActive) 1.0f else ContentAlpha.disabled
CompositionLocalProvider(LocalContentAlpha provides alpha) {
Text(title)
headlineContent = {
val alphaForText = if (isActive) 1.0f else 0.38f
mickael-menu marked this conversation as resolved.
Show resolved Hide resolved
CompositionLocalProvider(
LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(
alpha = alphaForText
)
) {
Text(
text = title,
fontWeight = FontWeight.Normal
)
}
},
trailing = {
trailingContent = {
Row {
content()

IconButton(onClick = onClear ?: {}, enabled = onClear != null) {
Icon(
Icons.Default.Backspace,
Icons.AutoMirrored.Filled.Backspace,
mickael-menu marked this conversation as resolved.
Show resolved Hide resolved
contentDescription = "Clear"
)
}
Expand Down Expand Up @@ -427,7 +433,6 @@ fun <T> SelectorListItem(
* A Material [ListItem] displaying a dropdown menu to select a value. The current value is
* displayed on the right.
*/
@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun <T> SelectorListItem(
title: String,
Expand All @@ -445,12 +450,12 @@ private fun <T> SelectorListItem(
.clickable(enabled = enabled) {
isExpanded = true
},
text = {
headlineContent = {
Group(enabled = enabled) {
Text(title)
}
},
trailing = {
trailingContent = {
Group(enabled = enabled) {
Text(formatValue(selection))
}
Expand All @@ -461,13 +466,12 @@ private fun <T> SelectorListItem(
) {
for (value in values) {
DropdownMenuItem(
text = { Text(formatValue(value)) },
onClick = {
onSelected(value)
dismiss()
}
) {
Text(formatValue(value))
}
)
}
}
}
Expand Down
25 changes: 21 additions & 4 deletions test-app/src/main/java/org/readium/r2/testapp/utils/compose/AppTheme.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,33 @@

package org.readium.r2.testapp.utils.compose

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import com.google.accompanist.themeadapter.material.MdcTheme
import androidx.compose.ui.platform.LocalContext

/**
* Setup the Compose app-wide theme.
*/
@Composable
fun AppTheme(content: @Composable () -> Unit) {
MdcTheme(
setDefaultFontFamily = true,
fun AppTheme(useDarkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
val colors = when {
Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
when {
useDarkTheme -> dynamicDarkColorScheme(LocalContext.current)
else -> dynamicLightColorScheme(LocalContext.current)
}
}
useDarkTheme -> lightColorScheme()
else -> darkColorScheme()
}
MaterialTheme(
colorScheme = colors,
content = content
)
}
4 changes: 2 additions & 2 deletions test-app/src/main/java/org/readium/r2/testapp/utils/compose/DropdownMenuButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ package org.readium.r2.testapp.utils.compose

import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.RowScope
import androidx.compose.material.DropdownMenu
import androidx.compose.material.OutlinedButton
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.OutlinedButton
import androidx.compose.runtime.*

@Composable
Expand Down
24 changes: 12 additions & 12 deletions test-app/src/main/java/org/readium/r2/testapp/utils/compose/ToggleButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ package org.readium.r2.testapp.utils.compose

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.MaterialTheme
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Text
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.compositeOver
import androidx.compose.ui.tooling.preview.Preview
Expand Down Expand Up @@ -55,22 +55,22 @@ fun ToggleButton(
enabled = enabled,
content = content,
colors = ButtonDefaults.outlinedButtonColors(
contentColor = MaterialTheme.colors.onBackground,
backgroundColor = when {
contentColor = MaterialTheme.colorScheme.onBackground,
containerColor = when {
selected ->
MaterialTheme.colors.onBackground
MaterialTheme.colorScheme.onBackground
.copy(alpha = 0.15f)
.compositeOver(MaterialTheme.colors.background)
.compositeOver(MaterialTheme.colorScheme.background)
active ->
MaterialTheme.colors.onBackground
MaterialTheme.colorScheme.onBackground
.copy(alpha = 0.05f)
.compositeOver(MaterialTheme.colors.background)
else -> MaterialTheme.colors.surface
.compositeOver(MaterialTheme.colorScheme.background)
else -> MaterialTheme.colorScheme.surface
}
),
elevation =
if (selected) {
ButtonDefaults.elevation(defaultElevation = 2.dp)
ButtonDefaults.buttonElevation(defaultElevation = 2.dp)
} else {
null
}
Expand Down
Loading