Statistics screen preview
parent
11022d0d04
commit
529bdcd82f
SSH Key Fingerprint:
SHA256:wH6spYepK/A5erBh7ZyAnr1ru9H4eaMVBEuiw6DSpxI
@ -0,0 +1,171 @@
|
||||
package org.xtimms.tokusho.sections.stats
|
||||
|
||||
import androidx.compose.foundation.Canvas
|
||||
import androidx.compose.foundation.isSystemInDarkTheme
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.calculateEndPadding
|
||||
import androidx.compose.foundation.layout.calculateStartPadding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Path
|
||||
import androidx.compose.ui.graphics.drawscope.Fill
|
||||
import androidx.compose.ui.platform.LocalConfiguration
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.LayoutDirection
|
||||
import androidx.compose.ui.unit.dp
|
||||
import org.koitharu.kotatsu.parsers.model.MangaChapter
|
||||
import org.koitharu.kotatsu.parsers.model.MangaSource
|
||||
import org.xtimms.shiki.ui.theme.colorMax
|
||||
import org.xtimms.shiki.ui.theme.colorMin
|
||||
import org.xtimms.tokusho.ui.theme.TokushoTheme
|
||||
import org.xtimms.tokusho.utils.material.combineColors
|
||||
import org.xtimms.tokusho.utils.material.harmonize
|
||||
import org.xtimms.tokusho.utils.material.toPalette
|
||||
import kotlin.math.abs
|
||||
|
||||
@Composable
|
||||
fun ChaptersChart(
|
||||
modifier: Modifier = Modifier,
|
||||
chapters: List<MangaChapter>,
|
||||
chartPadding: PaddingValues = PaddingValues(0.dp),
|
||||
) {
|
||||
|
||||
val harmonizeColorMax = if (isSystemInDarkTheme()) {
|
||||
toPalette(harmonize(colorMax)).onContainer
|
||||
} else {
|
||||
toPalette(harmonize(colorMax)).main
|
||||
}
|
||||
val harmonizeColorMin = if (isSystemInDarkTheme()) {
|
||||
toPalette(harmonize(colorMin)).onContainer
|
||||
} else {
|
||||
toPalette(harmonize(colorMin)).main
|
||||
}
|
||||
|
||||
val colors = listOf(
|
||||
harmonizeColorMax,
|
||||
harmonize(designColor = combineColors(harmonizeColorMax, harmonizeColorMin, 0.5f)),
|
||||
harmonizeColorMin
|
||||
)
|
||||
|
||||
val minSpentValue = 6
|
||||
val maxSpentValue = 17
|
||||
val range = maxSpentValue - minSpentValue
|
||||
|
||||
val localDensity = LocalDensity.current
|
||||
|
||||
val layoutDirection = when (LocalConfiguration.current.layoutDirection) {
|
||||
0 -> LayoutDirection.Rtl
|
||||
1 -> LayoutDirection.Ltr
|
||||
else -> LayoutDirection.Rtl
|
||||
}
|
||||
|
||||
val topOffset = with(localDensity) { chartPadding.calculateTopPadding().toPx() }
|
||||
val bottomOffset = with(localDensity) { chartPadding.calculateBottomPadding().toPx() }
|
||||
val startOffset =
|
||||
with(localDensity) { chartPadding.calculateStartPadding(layoutDirection).toPx() }
|
||||
val endOffset = with(localDensity) { chartPadding.calculateEndPadding(layoutDirection).toPx() }
|
||||
|
||||
val (indexMarked, firstShowIndex, lastShowIndex) = Triple(1, 0, 5)
|
||||
|
||||
Canvas(modifier = modifier) {
|
||||
val width = this.size.width
|
||||
val height = this.size.height
|
||||
val heightWithPaddings = height - topOffset - bottomOffset
|
||||
val widthWithPaddings = width - startOffset - endOffset
|
||||
val size = 5.toFloat().coerceAtLeast(1f)
|
||||
|
||||
val trianglePath = Path().let {
|
||||
var lastY = 0f
|
||||
|
||||
chapters.subList(firstShowIndex, lastShowIndex).forEachIndexed { index, read ->
|
||||
val scale = if (range == 0) {
|
||||
0.5f
|
||||
} else {
|
||||
5.minus(minSpentValue).div(2).toFloat()
|
||||
}
|
||||
|
||||
if (index == 0) {
|
||||
lastY = topOffset + heightWithPaddings * (1 - scale)
|
||||
it.moveTo(
|
||||
0f,
|
||||
lastY
|
||||
)
|
||||
}
|
||||
|
||||
it.cubicTo(
|
||||
startOffset + widthWithPaddings * ((index - 0.5f).coerceAtLeast(0f) / size),
|
||||
lastY,
|
||||
startOffset + widthWithPaddings * ((index - 0.5f).coerceAtLeast(0f) / size),
|
||||
topOffset + heightWithPaddings * (1 - scale),
|
||||
startOffset + widthWithPaddings * (index / size),
|
||||
topOffset + heightWithPaddings * (1 - scale),
|
||||
)
|
||||
|
||||
lastY = topOffset + heightWithPaddings * (1 - scale)
|
||||
}
|
||||
|
||||
it.lineTo(width, lastY)
|
||||
|
||||
it.lineTo(width, height)
|
||||
it.lineTo(0f, height)
|
||||
|
||||
it
|
||||
}
|
||||
|
||||
val chartColors = colors.mapIndexed { index, color ->
|
||||
color.copy(alpha = 0.3f - abs(0.5f - (index / (colors.size - 1))) * 0.25f)
|
||||
}
|
||||
|
||||
drawPath(
|
||||
path = trianglePath,
|
||||
Brush.verticalGradient(colors = chartColors),
|
||||
style = Fill
|
||||
)
|
||||
|
||||
val scale = 0.5f
|
||||
|
||||
val color = combineColors(
|
||||
harmonizeColorMin,
|
||||
harmonizeColorMax,
|
||||
scale,
|
||||
)
|
||||
|
||||
val x = startOffset + widthWithPaddings * ((indexMarked - firstShowIndex) / size)
|
||||
val y = topOffset + heightWithPaddings * (1 - scale)
|
||||
|
||||
drawCircle(
|
||||
color = color.copy(0.2f),
|
||||
radius = with(localDensity) { 8.dp.toPx() },
|
||||
center = Offset(x, y)
|
||||
)
|
||||
|
||||
drawCircle(
|
||||
color = color,
|
||||
radius = with(localDensity) { 3.dp.toPx() },
|
||||
center = Offset(x, y)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun PreviewChart() {
|
||||
TokushoTheme {
|
||||
ChaptersChart(
|
||||
modifier = Modifier.size(100.dp),
|
||||
chapters = listOf(
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY)
|
||||
),
|
||||
chartPadding = PaddingValues(vertical = 16.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,113 @@
|
||||
package org.xtimms.tokusho.sections.stats
|
||||
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.automirrored.outlined.Label
|
||||
import androidx.compose.material.icons.outlined.Label
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.unit.dp
|
||||
import org.koitharu.kotatsu.parsers.model.MangaChapter
|
||||
import org.koitharu.kotatsu.parsers.model.MangaSource
|
||||
import org.xtimms.shiki.ui.theme.colorMax
|
||||
import org.xtimms.shiki.ui.theme.colorMin
|
||||
import org.xtimms.tokusho.R
|
||||
import org.xtimms.tokusho.utils.material.combineColors
|
||||
import org.xtimms.tokusho.utils.material.harmonize
|
||||
import org.xtimms.tokusho.utils.material.toPalette
|
||||
import java.math.BigDecimal
|
||||
|
||||
@Composable
|
||||
fun MinMaxReadCard(
|
||||
modifier: Modifier = Modifier,
|
||||
isMin: Boolean,
|
||||
) {
|
||||
|
||||
val context = LocalContext.current
|
||||
|
||||
val minValue = 5
|
||||
val maxValue = 8
|
||||
val currValue = 7
|
||||
|
||||
val harmonizedColor = toPalette(
|
||||
harmonize(
|
||||
combineColors(
|
||||
colorMin,
|
||||
colorMax,
|
||||
if ((maxValue - minValue) == 0) {
|
||||
if (isMin) 0f else 1f
|
||||
} else if (maxValue != 0) {
|
||||
((currValue - minValue) / (maxValue - minValue)).toFloat()
|
||||
} else {
|
||||
0f
|
||||
},
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
StatsCard(
|
||||
modifier = modifier,
|
||||
value = "313",
|
||||
label = stringResource(if (isMin) R.string.min_chapters_read else R.string.max_chapters_read),
|
||||
valueFontSize = MaterialTheme.typography.titleLarge.fontSize,
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = harmonizedColor.container,
|
||||
contentColor = harmonizedColor.onContainer,
|
||||
),
|
||||
content = {
|
||||
Spacer(modifier = Modifier.height(6.dp))
|
||||
|
||||
Text(
|
||||
text = "-",
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
fontWeight = MaterialTheme.typography.bodyLarge.fontWeight
|
||||
)
|
||||
|
||||
Row(
|
||||
modifier = Modifier.padding(top = 4.dp)
|
||||
) {
|
||||
Icon(
|
||||
modifier = Modifier
|
||||
.padding(top = 2.dp)
|
||||
.size(16.dp),
|
||||
imageVector = Icons.AutoMirrored.Outlined.Label,
|
||||
contentDescription = null,
|
||||
)
|
||||
Spacer(modifier = Modifier.width(6.dp))
|
||||
Text(
|
||||
text = "Test",
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
fontWeight = MaterialTheme.typography.bodyLarge.fontWeight
|
||||
)
|
||||
}
|
||||
},
|
||||
backdropContent = {
|
||||
ChaptersChart(
|
||||
modifier = Modifier
|
||||
.fillMaxHeight()
|
||||
.fillMaxWidth(),
|
||||
chapters = listOf(
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
|
||||
MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY)
|
||||
)
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,258 @@
|
||||
package org.xtimms.tokusho.sections.stats
|
||||
|
||||
import androidx.compose.foundation.Canvas
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.ColumnScope
|
||||
import androidx.compose.foundation.layout.IntrinsicSize
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.CardColors
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.LocalContentColor
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Path
|
||||
import androidx.compose.ui.graphics.SolidColor
|
||||
import androidx.compose.ui.graphics.drawscope.Fill
|
||||
import androidx.compose.ui.layout.Layout
|
||||
import androidx.compose.ui.layout.MeasurePolicy
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.Density
|
||||
import androidx.compose.ui.unit.TextUnit
|
||||
import androidx.compose.ui.unit.TextUnitType
|
||||
import androidx.compose.ui.unit.dp
|
||||
import org.xtimms.tokusho.ui.theme.TokushoTheme
|
||||
|
||||
@Composable
|
||||
fun TimeCard(
|
||||
modifier: Modifier = Modifier,
|
||||
colors: CardColors = CardDefaults.cardColors(),
|
||||
contentPadding: PaddingValues = PaddingValues(vertical = 16.dp, horizontal = 24.dp)
|
||||
) {
|
||||
val context = LocalContext.current
|
||||
|
||||
StatsCard(
|
||||
modifier = modifier.fillMaxWidth(),
|
||||
contentPadding = contentPadding,
|
||||
label = "Test",
|
||||
value = "330 days",
|
||||
valueFontSize = MaterialTheme.typography.displaySmall.fontSize,
|
||||
colors = colors,
|
||||
content = {
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
Layout(
|
||||
modifier = Modifier.height(IntrinsicSize.Min),
|
||||
measurePolicy = growByMiddleChildRowMeasurePolicy(LocalDensity.current),
|
||||
content = {
|
||||
Column {
|
||||
Text(
|
||||
text = "01.01.1970",
|
||||
softWrap = false,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
fontWeight = MaterialTheme.typography.bodyLarge.fontWeight,
|
||||
)
|
||||
}
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
) {
|
||||
Arrow(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 8.dp)
|
||||
.fillMaxHeight()
|
||||
)
|
||||
}
|
||||
|
||||
Column(horizontalAlignment = Alignment.End) {
|
||||
Text(
|
||||
text = "01.01.1970",
|
||||
softWrap = false,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
fontWeight = MaterialTheme.typography.bodyLarge.fontWeight
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun StatsCard(
|
||||
modifier: Modifier = Modifier,
|
||||
value: String,
|
||||
label: String,
|
||||
contentPadding: PaddingValues = PaddingValues(vertical = 16.dp, horizontal = 24.dp),
|
||||
colors: CardColors = CardDefaults.cardColors(),
|
||||
valueFontSize: TextUnit = MaterialTheme.typography.titleLarge.fontSize,
|
||||
content: @Composable ColumnScope.() -> Unit = { },
|
||||
backdropContent: @Composable () -> Unit = { },
|
||||
) {
|
||||
Card(
|
||||
modifier = modifier,
|
||||
shape = MaterialTheme.shapes.extraLarge,
|
||||
colors = colors
|
||||
) {
|
||||
val textColor = LocalContentColor.current
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.fillMaxHeight()
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxHeight()
|
||||
.fillMaxWidth()
|
||||
) {
|
||||
backdropContent()
|
||||
}
|
||||
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(contentPadding)
|
||||
) {
|
||||
Text(
|
||||
text = value,
|
||||
style = MaterialTheme.typography.displayLarge,
|
||||
fontSize = valueFontSize,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
softWrap = false,
|
||||
lineHeight = TextUnit(0.2f, TextUnitType.Em)
|
||||
)
|
||||
Text(
|
||||
text = label,
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = textColor.copy(alpha = 0.6f),
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
softWrap = false,
|
||||
)
|
||||
Spacer(modifier = Modifier.height(4.dp))
|
||||
|
||||
CompositionLocalProvider(
|
||||
LocalContentColor provides textColor
|
||||
) {
|
||||
Column(
|
||||
content = content
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun Arrow(
|
||||
modifier: Modifier = Modifier,
|
||||
tint: Color = LocalContentColor.current,
|
||||
) {
|
||||
Canvas(modifier = modifier) {
|
||||
val width = this.size.width
|
||||
val height = this.size.height
|
||||
val heightHalf = height / 2
|
||||
|
||||
val thickness = 6
|
||||
val thicknessHalf = thickness / 2
|
||||
|
||||
val trianglePath = Path().let {
|
||||
it.moveTo(11f, heightHalf - thicknessHalf)
|
||||
it.lineTo(width - 22.4f, heightHalf - thicknessHalf)
|
||||
it.lineTo(width - 37.4f, heightHalf - 18)
|
||||
it.lineTo(width - 33, heightHalf - 22.4f)
|
||||
it.lineTo(width - 10.5f, heightHalf)
|
||||
it.lineTo(width - 33, heightHalf + 22.4f)
|
||||
it.lineTo(width - 37.4f, heightHalf + 18)
|
||||
it.lineTo(width - 22.4f, heightHalf + thicknessHalf)
|
||||
it.lineTo(width - 22.4f, heightHalf + thicknessHalf)
|
||||
it.lineTo(11f, heightHalf + thicknessHalf)
|
||||
|
||||
it.close()
|
||||
|
||||
it
|
||||
}
|
||||
|
||||
drawPath(
|
||||
path = trianglePath,
|
||||
SolidColor(tint),
|
||||
style = Fill
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
fun growByMiddleChildRowMeasurePolicy(localDensity: Density) =
|
||||
MeasurePolicy { measurables, constraints ->
|
||||
val minMiddleWidth = with(localDensity) { (24 + 32).dp.toPx().toInt() }
|
||||
|
||||
val first = measurables[0]
|
||||
.measure(
|
||||
constraints.copy(
|
||||
maxWidth = (constraints.maxWidth - minMiddleWidth) / 2
|
||||
)
|
||||
)
|
||||
val last = measurables[2]
|
||||
.measure(
|
||||
constraints.copy(
|
||||
maxWidth = (constraints.maxWidth - minMiddleWidth) / 2
|
||||
)
|
||||
)
|
||||
|
||||
val height = listOf(first, last).minOf { it.height }
|
||||
|
||||
layout(constraints.maxWidth, height) {
|
||||
first.placeRelative(0, 0, 0f)
|
||||
|
||||
val middleWidth =
|
||||
(constraints.maxWidth - first.width - last.width).coerceAtLeast(minMiddleWidth)
|
||||
|
||||
val middle = measurables[1]
|
||||
.measure(
|
||||
constraints.copy(
|
||||
maxWidth = middleWidth,
|
||||
minWidth = middleWidth,
|
||||
)
|
||||
)
|
||||
|
||||
middle.placeRelative(first.width, 0, 0f)
|
||||
|
||||
last.placeRelative(constraints.maxWidth - last.width, 0, 0f)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun TimeCardPreview() {
|
||||
TokushoTheme {
|
||||
TimeCard(
|
||||
modifier = Modifier.height(IntrinsicSize.Min),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun StatsCardPreview() {
|
||||
TokushoTheme {
|
||||
StatsCard(
|
||||
value = "value",
|
||||
label = "label"
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,230 @@
|
||||
package org.xtimms.tokusho.sections.stats
|
||||
|
||||
import androidx.compose.animation.core.RepeatMode
|
||||
import androidx.compose.animation.core.animateFloat
|
||||
import androidx.compose.animation.core.infiniteRepeatable
|
||||
import androidx.compose.animation.core.rememberInfiniteTransition
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.IntrinsicSize
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.WindowInsets
|
||||
import androidx.compose.foundation.layout.absoluteOffset
|
||||
import androidx.compose.foundation.layout.asPaddingValues
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.heightIn
|
||||
import androidx.compose.foundation.layout.navigationBars
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.requiredSize
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.automirrored.outlined.ArrowForward
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.rotate
|
||||
import androidx.compose.ui.layout.onGloballyPositioned
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.zIndex
|
||||
import org.koitharu.kotatsu.parsers.model.MangaChapter
|
||||
import org.koitharu.kotatsu.parsers.model.MangaSource
|
||||
import org.xtimms.tokusho.LocalBottomSheetScrollState
|
||||
import org.xtimms.tokusho.LocalWindowInsets
|
||||
import org.xtimms.tokusho.R
|
||||
import org.xtimms.tokusho.sections.stats.categories.CategoriesChart
|
||||
import org.xtimms.tokusho.ui.theme.TokushoTheme
|
||||
import org.xtimms.tokusho.utils.material.combineColors
|
||||
|
||||
data class Size(val width: Dp, val height: Dp)
|
||||
|
||||
const val STATS_DESTINATION = "stats"
|
||||
|
||||
@Composable
|
||||
fun StatsView(
|
||||
navigateBack: () -> Unit,
|
||||
) {
|
||||
|
||||
val localDensity = LocalDensity.current
|
||||
val localBottomSheetScrollState = LocalBottomSheetScrollState.current
|
||||
|
||||
val scrollState = rememberScrollState()
|
||||
val scroll = with(localDensity) { scrollState.value.toDp() }
|
||||
|
||||
val navigationBarHeight =
|
||||
LocalWindowInsets.current.calculateBottomPadding().coerceAtLeast(16.dp)
|
||||
|
||||
Surface(Modifier.height(IntrinsicSize.Min)) {
|
||||
Column(
|
||||
modifier = Modifier.verticalScroll(scrollState)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(horizontal = 16.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
) {
|
||||
var headerSize by remember { mutableStateOf(Size(0.dp, 0.dp)) }
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(top = localBottomSheetScrollState.topPadding.coerceAtLeast(36.dp))
|
||||
.onGloballyPositioned {
|
||||
headerSize = Size(
|
||||
width = with(localDensity) { it.size.width.toDp() },
|
||||
height = with(localDensity) { it.size.height.toDp() }
|
||||
)
|
||||
},
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
val halfWidth = headerSize.width / 2
|
||||
val halfHeight = headerSize.height / 2
|
||||
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(horizontal = 16.dp)
|
||||
.absoluteOffset(y = scroll * 0.25f),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
) {
|
||||
Spacer(Modifier.height(36.dp))
|
||||
Text(
|
||||
text = stringResource(R.string.reading_based_stats),
|
||||
style = MaterialTheme.typography.headlineLarge,
|
||||
textAlign = TextAlign.Center,
|
||||
)
|
||||
Spacer(Modifier.height(8.dp))
|
||||
Text(
|
||||
text = stringResource(id = R.string.reading_based_stats_desc),
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
Spacer(Modifier.height(64.dp))
|
||||
}
|
||||
|
||||
val starColor1 = combineColors(
|
||||
MaterialTheme.colorScheme.secondaryContainer,
|
||||
MaterialTheme.colorScheme.surface,
|
||||
0.5f,
|
||||
)
|
||||
|
||||
val starColor2 = combineColors(
|
||||
MaterialTheme.colorScheme.primaryContainer,
|
||||
MaterialTheme.colorScheme.surface,
|
||||
0.5f,
|
||||
)
|
||||
|
||||
val angleStar1 by rememberInfiniteTransition("angleStar1").animateFloat(
|
||||
label = "angleStar1",
|
||||
initialValue = -20f,
|
||||
targetValue = 20f,
|
||||
animationSpec = infiniteRepeatable(tween(5000), RepeatMode.Reverse)
|
||||
)
|
||||
|
||||
val angleStar2 by rememberInfiniteTransition("angleStar2").animateFloat(
|
||||
label = "angleStar2",
|
||||
initialValue = -50f,
|
||||
targetValue = 50f,
|
||||
animationSpec = infiniteRepeatable(tween(9000), RepeatMode.Reverse)
|
||||
)
|
||||
|
||||
Icon(
|
||||
modifier = Modifier
|
||||
.requiredSize(256.dp)
|
||||
.absoluteOffset(
|
||||
x = halfWidth * 0.7f,
|
||||
y = -halfHeight * 0.6f + scroll * 0.35f
|
||||
)
|
||||
.rotate(angleStar1)
|
||||
.zIndex(-1f),
|
||||
painter = painterResource(R.drawable.shape_soft_star_1),
|
||||
tint = starColor1,
|
||||
contentDescription = null,
|
||||
)
|
||||
Icon(
|
||||
modifier = Modifier
|
||||
.requiredSize(256.dp)
|
||||
.absoluteOffset(
|
||||
x = -halfWidth * 0.7f,
|
||||
y = halfHeight * 0.6f + scroll * 0.6f
|
||||
)
|
||||
.rotate(angleStar2)
|
||||
.zIndex(-1f),
|
||||
painter = painterResource(R.drawable.shape_soft_star_2),
|
||||
tint = starColor2,
|
||||
contentDescription = null,
|
||||
)
|
||||
}
|
||||
Column(Modifier.fillMaxWidth()) {
|
||||
TimeCard()
|
||||
Spacer(modifier = Modifier.height(1000.dp))
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(
|
||||
Modifier
|
||||
.height(60.dp + navigationBarHeight)
|
||||
.fillMaxWidth())
|
||||
}
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(
|
||||
bottom = WindowInsets.navigationBars
|
||||
.asPaddingValues()
|
||||
.calculateBottomPadding()
|
||||
),
|
||||
contentAlignment = Alignment.BottomCenter,
|
||||
) {
|
||||
Button(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.heightIn(60.dp)
|
||||
.padding(horizontal = 16.dp),
|
||||
onClick = {
|
||||
navigateBack()
|
||||
}
|
||||
) {
|
||||
Text(
|
||||
text = stringResource(R.string.got_it),
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
)
|
||||
Spacer(Modifier.width(8.dp))
|
||||
Icon(
|
||||
imageVector = Icons.AutoMirrored.Outlined.ArrowForward,
|
||||
contentDescription = null,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun Preview() {
|
||||
TokushoTheme {
|
||||
StatsView(
|
||||
navigateBack = { }
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
package org.xtimms.tokusho.sections.stats.categories
|
||||
|
||||
import androidx.compose.foundation.isSystemInDarkTheme
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.ExperimentalLayoutApi
|
||||
import androidx.compose.foundation.layout.FlowRow
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.unit.dp
|
||||
import org.xtimms.tokusho.utils.material.combineColors
|
||||
import org.xtimms.tokusho.utils.material.harmonizeWithColor
|
||||
import org.xtimms.tokusho.utils.material.toPalette
|
||||
|
||||
var baseColors = listOf(
|
||||
Color(0xFFF86BAE),
|
||||
Color(0xFFF36FFF),
|
||||
Color(0xFFAB96FF),
|
||||
Color(0xFF5FC7E7),
|
||||
Color(0xFF75E584),
|
||||
Color(0xFFFFD386),
|
||||
Color(0xFFEF7564),
|
||||
)
|
||||
|
||||
@OptIn(ExperimentalLayoutApi::class)
|
||||
@Composable
|
||||
fun CategoriesChart(
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
|
||||
val isNightMode = isSystemInDarkTheme()
|
||||
|
||||
val colors = baseColors.map {
|
||||
toPalette(
|
||||
color = harmonizeWithColor(
|
||||
designColor = it,
|
||||
sourceColor = MaterialTheme.colorScheme.primary
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
Card(
|
||||
modifier = modifier,
|
||||
shape = RoundedCornerShape(22.dp),
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = combineColors(
|
||||
MaterialTheme.colorScheme.surface,
|
||||
MaterialTheme.colorScheme.surfaceVariant,
|
||||
angle = 0.3f,
|
||||
),
|
||||
)
|
||||
) {
|
||||
Box {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(16.dp),
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
) {
|
||||
DonutChart(
|
||||
modifier = Modifier
|
||||
.padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = 8.dp)
|
||||
.size(64.dp),
|
||||
items = emptyList(),
|
||||
)
|
||||
FlowRow(Modifier.padding(4.dp, 4.dp)) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
package org.xtimms.tokusho.sections.stats.categories
|
||||
|
||||
import androidx.compose.foundation.Canvas
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.calculateEndPadding
|
||||
import androidx.compose.foundation.layout.calculateStartPadding
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.geometry.Size
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.StrokeCap
|
||||
import androidx.compose.ui.graphics.drawscope.Stroke
|
||||
import androidx.compose.ui.platform.LocalConfiguration
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.unit.LayoutDirection
|
||||
import androidx.compose.ui.unit.dp
|
||||
import org.xtimms.tokusho.core.model.ShelfCategory
|
||||
|
||||
@Composable
|
||||
fun DonutChart(
|
||||
modifier: Modifier = Modifier,
|
||||
items: List<ShelfCategory>,
|
||||
chartPadding: PaddingValues = PaddingValues(0.dp),
|
||||
) {
|
||||
val localDensity = LocalDensity.current
|
||||
|
||||
val layoutDirection = when (LocalConfiguration.current.layoutDirection) {
|
||||
0 -> LayoutDirection.Rtl
|
||||
1 -> LayoutDirection.Ltr
|
||||
else -> LayoutDirection.Rtl
|
||||
}
|
||||
val topOffset = with(localDensity) { chartPadding.calculateTopPadding().toPx() }
|
||||
val bottomOffset = with(localDensity) { chartPadding.calculateBottomPadding().toPx() }
|
||||
val startOffset =
|
||||
with(localDensity) { chartPadding.calculateStartPadding(layoutDirection).toPx() }
|
||||
val endOffset = with(localDensity) { chartPadding.calculateEndPadding(layoutDirection).toPx() }
|
||||
|
||||
Canvas(modifier = modifier) {
|
||||
val width = this.size.width
|
||||
val height = this.size.height
|
||||
val heightWithPaddings = height - topOffset - bottomOffset
|
||||
val widthWithPaddings = width - startOffset - endOffset
|
||||
|
||||
val total = items.map { it.id }.reduce { acc, next -> acc + next }
|
||||
var offset = 0f
|
||||
|
||||
val gap = 0f
|
||||
val halfGap = gap / 2f
|
||||
val strokeWidth = 28f
|
||||
val halfStrokeWidth = strokeWidth / 2f
|
||||
val minSweepAngle = 28f
|
||||
val offsetAngle = -90f
|
||||
|
||||
items.forEachIndexed { index, tag ->
|
||||
drawArc(
|
||||
Color.Black,
|
||||
startAngle = offset + halfGap + offsetAngle,
|
||||
sweepAngle = 36 - gap,
|
||||
useCenter = false,
|
||||
topLeft = Offset(startOffset + halfStrokeWidth, topOffset + halfStrokeWidth),
|
||||
size = Size(widthWithPaddings - strokeWidth, heightWithPaddings - strokeWidth),
|
||||
style = Stroke(
|
||||
width = strokeWidth,
|
||||
cap = StrokeCap.Butt
|
||||
),
|
||||
)
|
||||
|
||||
offset += 50
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
package org.xtimms.tokusho.sections.stats.categories
|
||||
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.text.font.FontStyle
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.unit.dp
|
||||
import org.xtimms.tokusho.utils.material.HarmonizedColorPalette
|
||||
import java.math.BigDecimal
|
||||
|
||||
@Composable
|
||||
fun TagAmount(
|
||||
modifier: Modifier = Modifier,
|
||||
value: String,
|
||||
amount: BigDecimal = BigDecimal.ZERO,
|
||||
isSpecial: Boolean = false,
|
||||
palette: HarmonizedColorPalette? = null,
|
||||
) {
|
||||
val context = LocalContext.current
|
||||
|
||||
Surface(
|
||||
shape = CircleShape,
|
||||
color = palette?.main ?: MaterialTheme.colorScheme.surface,
|
||||
contentColor = palette?.onSurface ?: MaterialTheme.colorScheme.onSurface,
|
||||
modifier = modifier,
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Text(
|
||||
text = value,
|
||||
softWrap = false,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
style = MaterialTheme.typography.bodyMedium.copy(
|
||||
fontStyle = if (isSpecial) FontStyle.Italic else FontStyle.Normal,
|
||||
),
|
||||
)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Text(
|
||||
text = "56",
|
||||
softWrap = false,
|
||||
style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.W900),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
package org.xtimms.tokusho.ui.harmonize.blend;
|
||||
|
||||
import org.xtimms.tokusho.ui.harmonize.hct.Cam16;
|
||||
import org.xtimms.tokusho.ui.harmonize.hct.Hct;
|
||||
import org.xtimms.tokusho.ui.harmonize.utils.ColorUtils;
|
||||
import org.xtimms.tokusho.ui.harmonize.utils.MathUtils;
|
||||
|
||||
/** Functions for blending in HCT and CAM16. */
|
||||
public class Blend {
|
||||
private Blend() {}
|
||||
|
||||
/**
|
||||
* Blend the design color's HCT hue towards the key color's HCT hue, in a way that leaves the
|
||||
* original color recognizable and recognizably shifted towards the key color.
|
||||
*
|
||||
* @param designColor ARGB representation of an arbitrary color.
|
||||
* @param sourceColor ARGB representation of the main theme color.
|
||||
* @return The design color with a hue shifted towards the system's color, a slightly
|
||||
* warmer/cooler variant of the design color's hue.
|
||||
*/
|
||||
public static int harmonize(int designColor, int sourceColor) {
|
||||
Hct fromHct = Hct.fromInt(designColor);
|
||||
Hct toHct = Hct.fromInt(sourceColor);
|
||||
double differenceDegrees = MathUtils.differenceDegrees(fromHct.getHue(), toHct.getHue());
|
||||
double rotationDegrees = Math.min(differenceDegrees * 0.5, 15.0);
|
||||
double outputHue =
|
||||
MathUtils.sanitizeDegreesDouble(
|
||||
fromHct.getHue()
|
||||
+ rotationDegrees * MathUtils.rotationDirection(fromHct.getHue(), toHct.getHue()));
|
||||
return Hct.from(outputHue, fromHct.getChroma(), fromHct.getTone()).toInt();
|
||||
}
|
||||
|
||||
/**
|
||||
* Blends hue from one color into another. The chroma and tone of the original color are
|
||||
* maintained.
|
||||
*
|
||||
* @param from ARGB representation of color
|
||||
* @param to ARGB representation of color
|
||||
* @param amount how much blending to perform; 0.0 >= and <= 1.0
|
||||
* @return from, with a hue blended towards to. Chroma and tone are constant.
|
||||
*/
|
||||
public static int hctHue(int from, int to, double amount) {
|
||||
int ucs = cam16Ucs(from, to, amount);
|
||||
Cam16 ucsCam = Cam16.fromInt(ucs);
|
||||
Cam16 fromCam = Cam16.fromInt(from);
|
||||
Hct blended = Hct.from(ucsCam.getHue(), fromCam.getChroma(), ColorUtils.lstarFromArgb(from));
|
||||
return blended.toInt();
|
||||
}
|
||||
|
||||
/**
|
||||
* Blend in CAM16-UCS space.
|
||||
*
|
||||
* @param from ARGB representation of color
|
||||
* @param to ARGB representation of color
|
||||
* @param amount how much blending to perform; 0.0 >= and <= 1.0
|
||||
* @return from, blended towards to. Hue, chroma, and tone will change.
|
||||
*/
|
||||
public static int cam16Ucs(int from, int to, double amount) {
|
||||
Cam16 fromCam = Cam16.fromInt(from);
|
||||
Cam16 toCam = Cam16.fromInt(to);
|
||||
double fromJ = fromCam.getJstar();
|
||||
double fromA = fromCam.getAstar();
|
||||
double fromB = fromCam.getBstar();
|
||||
double toJ = toCam.getJstar();
|
||||
double toA = toCam.getAstar();
|
||||
double toB = toCam.getBstar();
|
||||
double jstar = fromJ + (toJ - fromJ) * amount;
|
||||
double astar = fromA + (toA - fromA) * amount;
|
||||
double bstar = fromB + (toB - fromB) * amount;
|
||||
return Cam16.fromUcs(jstar, astar, bstar).toInt();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
package org.xtimms.tokusho.utils.material
|
||||
|
||||
import androidx.compose.foundation.isSystemInDarkTheme
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.toArgb
|
||||
import org.xtimms.tokusho.ui.harmonize.blend.Blend
|
||||
import org.xtimms.tokusho.ui.harmonize.palettes.CorePalette
|
||||
import kotlin.math.ceil
|
||||
import kotlin.math.floor
|
||||
|
||||
fun combineColors(colorA: Color, colorB: Color, angle: Float = 0.5F): Color {
|
||||
val colorAPart = (1F - angle) * 2
|
||||
val colorBPart = angle * 2
|
||||
|
||||
return Color(
|
||||
red = (colorA.red * colorAPart + colorB.red * colorBPart) / 2,
|
||||
green = (colorA.green * colorAPart + colorB.green * colorBPart) / 2,
|
||||
blue = (colorA.blue * colorAPart + colorB.blue * colorBPart) / 2,
|
||||
)
|
||||
}
|
||||
|
||||
fun combineColors(colors: List<Color>, angle: Float = 0.5F): Color {
|
||||
val approximateIndex = (colors.size - 1) * angle
|
||||
val colorA = colors[floor(approximateIndex).toInt()]
|
||||
val colorB = colors[ceil(approximateIndex).toInt()]
|
||||
|
||||
return combineColors(colorA, colorB, approximateIndex - floor(approximateIndex))
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun harmonize(designColor: Color, sourceColor: Color = MaterialTheme.colorScheme.primary): Color {
|
||||
return harmonizeWithColor(designColor, sourceColor)
|
||||
}
|
||||
|
||||
fun harmonizeWithColor(designColor: Color, sourceColor: Color): Color {
|
||||
return Color(Blend.harmonize(designColor.toArgb(), sourceColor.toArgb()))
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun toPalette(color: Color, darkTheme: Boolean = isSystemInDarkTheme()): HarmonizedColorPalette {
|
||||
return toPaletteWithTheme(color, darkTheme)
|
||||
}
|
||||
|
||||
fun toPaletteWithTheme(color: Color, darkTheme: Boolean): HarmonizedColorPalette {
|
||||
return if (darkTheme) {
|
||||
darkFromCorePalette(color)
|
||||
} else {
|
||||
lightFromCorePalette(color)
|
||||
}
|
||||
}
|
||||
|
||||
data class HarmonizedColorPalette(
|
||||
val main: Color,
|
||||
val onMain: Color,
|
||||
val container: Color,
|
||||
val onContainer: Color,
|
||||
val surface: Color,
|
||||
val onSurface: Color,
|
||||
val surfaceVariant: Color,
|
||||
val onSurfaceVariant: Color,
|
||||
)
|
||||
|
||||
fun lightFromCorePalette(color: Color): HarmonizedColorPalette {
|
||||
val contentOfPalette = CorePalette.contentOf(color.toArgb())
|
||||
val ofPalette = CorePalette.of(color.toArgb())
|
||||
|
||||
return HarmonizedColorPalette(
|
||||
main = Color(ofPalette.seed.toInt()),
|
||||
onMain = Color(contentOfPalette.a1.tone(10)),
|
||||
container = Color(ofPalette.a1.tone(90)),
|
||||
onContainer = Color(contentOfPalette.a1.tone(10)),
|
||||
surface = Color(ofPalette.n1.tone(99)),
|
||||
onSurface = Color(contentOfPalette.n1.tone(10)),
|
||||
surfaceVariant = Color(ofPalette.n1.tone(90)),
|
||||
onSurfaceVariant = Color(contentOfPalette.n1.tone(30)),
|
||||
)
|
||||
}
|
||||
|
||||
private fun darkFromCorePalette(color: Color): HarmonizedColorPalette {
|
||||
val contentOfPalette = CorePalette.contentOf(color.toArgb())
|
||||
val ofPalette = CorePalette.of(color.toArgb())
|
||||
|
||||
return HarmonizedColorPalette(
|
||||
main = Color(ofPalette.a1.tone(40)),
|
||||
onMain = Color(contentOfPalette.a1.tone(30)),
|
||||
container = Color(ofPalette.a1.tone(30)),
|
||||
onContainer = Color(contentOfPalette.a1.tone(90)),
|
||||
surface = Color(ofPalette.n1.tone(10)),
|
||||
onSurface = Color(contentOfPalette.n1.tone(90)),
|
||||
surfaceVariant = Color(ofPalette.n1.tone(30)),
|
||||
onSurfaceVariant = Color(contentOfPalette.n1.tone(80)),
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="200dp"
|
||||
android:height="200dp"
|
||||
android:viewportWidth="200"
|
||||
android:viewportHeight="200">
|
||||
<path
|
||||
android:pathData="M74.4,24.8c10.3,-21 40.3,-21 50.7,0a28.2,28.2 0,0 0,27.2 15.7,28.2 28.2,0 0,1 25.3,43.9 28,28 0,0 0,0 31.4c13,19.5 -2,45.5 -25.3,43.9a28.2,28.2 0,0 0,-27.2 15.7,28.2 28.2,0 0,1 -50.7,0 28.2,28.2 0,0 0,-27.2 -15.7,28.2 28.2,0 0,1 -25.3,-43.9c6.3,-9.5 6.3,-22 0,-31.4a28.2,28.2 0,0 1,25.3 -43.9,28 28,0 0,0 27.2,-15.7Z"
|
||||
android:fillColor="#000"/>
|
||||
</vector>
|
||||
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="200dp"
|
||||
android:height="200dp"
|
||||
android:viewportWidth="200"
|
||||
android:viewportHeight="200">
|
||||
<path
|
||||
android:pathData="M80.8,25.2c10.7,-11 28.3,-11 39,0a27.2,27.2 0,0 0,19.7 8.2A27.2,27.2 0,0 1,167.1 61c0,7.4 2.9,14.6 8.2,19.8 11,10.7 11,28.3 0,39a27.2,27.2 0,0 0,-8.2 19.7,27.2 27.2,0 0,1 -27.6,27.6c-7.4,0 -14.6,2.9 -19.8,8.2a27.2,27.2 0,0 1,-39 0,27.2 27.2,0 0,0 -19.7,-8.2 27.2,27.2 0,0 1,-27.6 -27.6c0.1,-7.4 -2.9,-14.6 -8.2,-19.8a27.2,27.2 0,0 1,0 -39A27.2,27.2 0,0 0,33.4 61,27.2 27.2,0 0,1 61,33.4c7.4,0.1 14.6,-2.9 19.8,-8.2Z"
|
||||
android:fillColor="#000"/>
|
||||
</vector>
|
||||
Loading…
Reference in New Issue