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

Jump to bottom

style(components): migrate switch component to md3 and improve interaction page #663

Merged
merged 1 commit into from
Mar 26, 2024
Merged

style(components): migrate switch component to md3 and improve interaction page #663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
93 changes: 7 additions & 86 deletions app/src/main/java/me/ash/reader/ui/component/base/RYSwitch.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,101 +8,22 @@

package me.ash.reader.ui.component.base

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.Switch
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import me.ash.reader.ui.theme.palette.LocalTonalPalettes
import me.ash.reader.ui.theme.palette.onDark

// TODO: ripple & swipe
@Composable
fun RYSwitch(
modifier: Modifier = Modifier,
activated: Boolean,
enable: Boolean = true,
onClick: (() -> Unit)? = null,
) {
val tonalPalettes = LocalTonalPalettes.current

Surface(
modifier = modifier
.size(56.dp, 28.dp)
.alpha(if (enable) 1f else 0.5f),
shape = CircleShape,
color = animateColorAsState(
if (activated) (tonalPalettes primary 40) onDark (tonalPalettes secondary 50)
else (tonalPalettes neutralVariant 50) onDark (tonalPalettes neutral 30)
).value
) {
Box(
modifier = Modifier.fillMaxSize()
then if (onClick != null) Modifier.clickable { onClick() } else Modifier
) {
Surface(
modifier = Modifier
.size(20.dp)
.align(Alignment.CenterStart)
.offset(x = animateDpAsState(if (activated) 32.dp else 4.dp).value),
shape = CircleShape,
color = animateColorAsState(
if (activated) tonalPalettes primary 90
else (tonalPalettes neutralVariant 70) onDark (tonalPalettes neutral 60)
).value
) {}
}
}
}

// TODO: inactivated colors
@Composable
fun SwitchHeadline(
activated: Boolean,
onClick: () -> Unit,
title: String,
modifier: Modifier = Modifier,
) {
val tonalPalettes = LocalTonalPalettes.current

Surface(
modifier = modifier,
color = Color.Unspecified,
contentColor = tonalPalettes neutral 10,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.clip(RoundedCornerShape(24.dp))
.background(tonalPalettes primary 90)
.clickable { onClick() }
.padding(20.dp, 24.dp),
verticalAlignment = Alignment.CenterVertically
) {
Column(modifier = Modifier.weight(1f)) {
Text(
text = title,
maxLines = 2,
style = MaterialTheme.typography.titleLarge.copy(fontSize = 20.sp)
)
}
Box(Modifier.padding(start = 20.dp)) {
RYSwitch(activated = activated)
}
}
}
Switch(
modifier = modifier.clickable { onClick?.invoke() },
checked = activated,
enabled = enable,
onCheckedChange = { onClick?.invoke() },
)
}
40 changes: 35 additions & 5 deletions app/src/main/java/me/ash/reader/ui/page/settings/color/reading/ReadingStylePage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,32 @@ import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsBottomHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.rounded.ArrowBack
import androidx.compose.material.icons.outlined.Image
import androidx.compose.material.icons.outlined.Movie
import androidx.compose.material.icons.automirrored.rounded.ArrowBack
import androidx.compose.material.icons.rounded.Segment
import androidx.compose.material.icons.rounded.Title
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.runtime.Composable
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.draw.clip
Expand All @@ -26,9 +40,24 @@ import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import me.ash.reader.R
import me.ash.reader.infrastructure.preference.*
import me.ash.reader.infrastructure.preference.LocalPullToSwitchArticle
import me.ash.reader.infrastructure.preference.LocalReadingAutoHideToolbar
import me.ash.reader.infrastructure.preference.LocalReadingDarkTheme
import me.ash.reader.infrastructure.preference.LocalReadingFonts
import me.ash.reader.infrastructure.preference.LocalReadingPageTonalElevation
import me.ash.reader.infrastructure.preference.LocalReadingTheme
import me.ash.reader.infrastructure.preference.ReadingFontsPreference
import me.ash.reader.infrastructure.preference.ReadingPageTonalElevationPreference
import me.ash.reader.infrastructure.preference.ReadingThemePreference
import me.ash.reader.infrastructure.preference.not
import me.ash.reader.ui.component.ReadingThemePrev
import me.ash.reader.ui.component.base.*
import me.ash.reader.ui.component.base.DisplayText
import me.ash.reader.ui.component.base.FeedbackIconButton
import me.ash.reader.ui.component.base.RYScaffold
import me.ash.reader.ui.component.base.RYSwitch
import me.ash.reader.ui.component.base.RadioDialog
import me.ash.reader.ui.component.base.RadioDialogOption
import me.ash.reader.ui.component.base.Subtitle
import me.ash.reader.ui.ext.ExternalFonts
import me.ash.reader.ui.page.common.RouteName
import me.ash.reader.ui.page.settings.SettingItem
Expand Down Expand Up @@ -171,6 +200,7 @@ fun ReadingStylePage(
enabled = false,
onClick = {},
) {}

SettingItem(
title = stringResource(id = R.string.pull_to_switch_article),
onClick = { pullToSwitchArticle.toggle(context, scope) }) {
Expand Down
14 changes: 10 additions & 4 deletions app/src/main/java/me/ash/reader/ui/page/settings/interaction/InteractionPage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,37 +108,40 @@ fun InteractionPage(
initialFilterDialogVisible = true
},
) {}
Spacer(modifier = Modifier.height(24.dp))

Subtitle(
modifier = Modifier.padding(horizontal = 24.dp),
text = stringResource(R.string.article_list),
)

SettingItem(
title = stringResource(R.string.swipe_to_start),
desc = swipeToStartAction.desc,
onClick = {
swipeStartDialogVisible = true
},
) {}

SettingItem(
title = stringResource(R.string.swipe_to_end),
desc = swipeToEndAction.desc,
onClick = {
swipeEndDialogVisible = true
},
) {}
Spacer(modifier = Modifier.height(24.dp))

Subtitle(
modifier = Modifier.padding(horizontal = 24.dp),
text = stringResource(R.string.reading_page),
)

SettingItem(
title = stringResource(id = R.string.pull_to_switch_article),
onClick = { pullToSwitchArticle.toggle(context, scope) }) {
RYSwitch(activated = pullToSwitchArticle.value)
RYSwitch(activated = pullToSwitchArticle.value) {
pullToSwitchArticle.toggle(context, scope)
}
}
Spacer(modifier = Modifier.height(24.dp))

Subtitle(
modifier = Modifier.padding(horizontal = 24.dp),
Expand All @@ -162,6 +165,8 @@ fun InteractionPage(
}
},
) {}
Spacer(modifier = Modifier.height(24.dp))

Subtitle(
modifier = Modifier.padding(horizontal = 24.dp),
text = stringResource(R.string.share),
Expand All @@ -173,6 +178,7 @@ fun InteractionPage(
sharedContentDialogVisible = true
},
) {}
Spacer(modifier = Modifier.height(24.dp))
}
item {
Spacer(modifier = Modifier.height(24.dp))
Expand Down
Loading