mirror of
https://github.com/Aviortheking/Neo-Store.git
synced 2025-04-23 19:32:16 +00:00
Update: ReleaseItem's logic & layout
This commit is contained in:
parent
1807fc6614
commit
9b6d811f07
@ -13,7 +13,8 @@ import com.looker.droidify.utility.SampleData
|
|||||||
fun ReleaseItemPreview() {
|
fun ReleaseItemPreview() {
|
||||||
AppTheme(blackTheme = false) {
|
AppTheme(blackTheme = false) {
|
||||||
ReleaseItem(
|
ReleaseItem(
|
||||||
release = SampleData.demoRelease
|
release = SampleData.demoRelease,
|
||||||
|
repository = SampleData.demoRepository
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,15 +1,34 @@
|
|||||||
package com.looker.droidify.ui.compose.pages.app_detail.components
|
package com.looker.droidify.ui.compose.pages.app_detail.components
|
||||||
|
|
||||||
|
import android.os.Build
|
||||||
import androidx.compose.animation.AnimatedVisibility
|
import androidx.compose.animation.AnimatedVisibility
|
||||||
import androidx.compose.animation.core.animateDpAsState
|
import androidx.compose.animation.core.animateDpAsState
|
||||||
import androidx.compose.animation.fadeIn
|
import androidx.compose.animation.fadeIn
|
||||||
import androidx.compose.animation.fadeOut
|
import androidx.compose.animation.fadeOut
|
||||||
import androidx.compose.foundation.background
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.*
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.Row
|
||||||
|
import androidx.compose.foundation.layout.RowScope
|
||||||
|
import androidx.compose.foundation.layout.Spacer
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.layout.height
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.width
|
||||||
|
import androidx.compose.foundation.layout.wrapContentHeight
|
||||||
import androidx.compose.material.icons.Icons
|
import androidx.compose.material.icons.Icons
|
||||||
import androidx.compose.material.icons.rounded.Download
|
import androidx.compose.material.icons.rounded.Download
|
||||||
import androidx.compose.material3.*
|
import androidx.compose.material3.Icon
|
||||||
import androidx.compose.runtime.*
|
import androidx.compose.material3.IconButton
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.Shapes
|
||||||
|
import androidx.compose.material3.Surface
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.LaunchedEffect
|
||||||
|
import androidx.compose.runtime.getValue
|
||||||
|
import androidx.compose.runtime.mutableStateOf
|
||||||
|
import androidx.compose.runtime.remember
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.Color
|
import androidx.compose.ui.graphics.Color
|
||||||
@ -17,18 +36,30 @@ import androidx.compose.ui.res.stringResource
|
|||||||
import androidx.compose.ui.unit.Dp
|
import androidx.compose.ui.unit.Dp
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import com.looker.droidify.R
|
import com.looker.droidify.R
|
||||||
|
import com.looker.droidify.RELEASE_STATE_INSTALLED
|
||||||
|
import com.looker.droidify.RELEASE_STATE_NONE
|
||||||
|
import com.looker.droidify.RELEASE_STATE_SUGGESTED
|
||||||
import com.looker.droidify.database.entity.Release
|
import com.looker.droidify.database.entity.Release
|
||||||
|
import com.looker.droidify.database.entity.Repository
|
||||||
|
import com.looker.droidify.utility.extension.android.Android
|
||||||
import com.looker.droidify.utility.extension.text.formatSize
|
import com.looker.droidify.utility.extension.text.formatSize
|
||||||
|
import java.time.Instant
|
||||||
|
import java.time.LocalDateTime
|
||||||
|
import java.time.format.DateTimeFormatter
|
||||||
|
import java.time.format.FormatStyle
|
||||||
|
import java.util.*
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun ReleaseItem(
|
fun ReleaseItem(
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
isSuggested: Boolean = false,
|
|
||||||
isInstalled: Boolean = false,
|
|
||||||
release: Release,
|
release: Release,
|
||||||
|
repository: Repository,
|
||||||
|
releaseState: Int = RELEASE_STATE_NONE,
|
||||||
onDownloadClick: (Release) -> Unit = {}
|
onDownloadClick: (Release) -> Unit = {}
|
||||||
) {
|
) {
|
||||||
val currentRelease by remember { mutableStateOf(release) }
|
val currentRelease by remember { mutableStateOf(release) }
|
||||||
|
val isInstalled = releaseState == RELEASE_STATE_INSTALLED
|
||||||
|
val isSuggested = releaseState == RELEASE_STATE_SUGGESTED
|
||||||
val highlight by animateDpAsState(targetValue = if (isSuggested or isInstalled) 8.dp else 0.dp)
|
val highlight by animateDpAsState(targetValue = if (isSuggested or isInstalled) 8.dp else 0.dp)
|
||||||
|
|
||||||
Surface(
|
Surface(
|
||||||
@ -40,6 +71,7 @@ fun ReleaseItem(
|
|||||||
) {
|
) {
|
||||||
ReleaseItemContent(
|
ReleaseItemContent(
|
||||||
release = currentRelease,
|
release = currentRelease,
|
||||||
|
repository = repository,
|
||||||
isSuggested = isSuggested,
|
isSuggested = isSuggested,
|
||||||
isInstalled = isInstalled,
|
isInstalled = isInstalled,
|
||||||
onDownloadClick = onDownloadClick
|
onDownloadClick = onDownloadClick
|
||||||
@ -50,9 +82,10 @@ fun ReleaseItem(
|
|||||||
@Composable
|
@Composable
|
||||||
fun ReleaseItemContent(
|
fun ReleaseItemContent(
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
|
release: Release,
|
||||||
|
repository: Repository,
|
||||||
isSuggested: Boolean = false,
|
isSuggested: Boolean = false,
|
||||||
isInstalled: Boolean = false,
|
isInstalled: Boolean = false,
|
||||||
release: Release,
|
|
||||||
onDownloadClick: (Release) -> Unit = {}
|
onDownloadClick: (Release) -> Unit = {}
|
||||||
) {
|
) {
|
||||||
Row(
|
Row(
|
||||||
@ -66,15 +99,22 @@ fun ReleaseItemContent(
|
|||||||
contentDescription = "Download this version"
|
contentDescription = "Download this version"
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Box(
|
Column(
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
.height(74.dp)
|
.height(76.dp)
|
||||||
.fillMaxWidth()
|
.fillMaxWidth(),
|
||||||
|
verticalArrangement = Arrangement.Center,
|
||||||
|
horizontalAlignment = Alignment.Start
|
||||||
) {
|
) {
|
||||||
ReleaseTitleWithBadge(
|
ReleaseTitleWithBadge(
|
||||||
modifier = Modifier.align(Alignment.CenterStart),
|
modifier = Modifier.weight(1f, true),
|
||||||
version = release.version,
|
version = release.version,
|
||||||
repository = release.targetSdkVersion.toString()
|
added = if (Android.sdk(Build.VERSION_CODES.O)) {
|
||||||
|
LocalDateTime.ofInstant(
|
||||||
|
Instant.ofEpochMilli(release.added),
|
||||||
|
TimeZone.getDefault().toZoneId()
|
||||||
|
).format(DateTimeFormatter.ofLocalizedDate(FormatStyle.SHORT))
|
||||||
|
} else ""
|
||||||
) {
|
) {
|
||||||
AnimatedVisibility(
|
AnimatedVisibility(
|
||||||
visible = isSuggested or isInstalled,
|
visible = isSuggested or isInstalled,
|
||||||
@ -84,7 +124,7 @@ fun ReleaseItemContent(
|
|||||||
val badgeText = remember { mutableStateOf(R.string.suggested) }
|
val badgeText = remember { mutableStateOf(R.string.suggested) }
|
||||||
LaunchedEffect(isInstalled, isSuggested) {
|
LaunchedEffect(isInstalled, isSuggested) {
|
||||||
badgeText.value =
|
badgeText.value =
|
||||||
if (isSuggested && isInstalled) R.string.installed else R.string.suggested
|
if (isInstalled) R.string.installed else R.string.suggested
|
||||||
}
|
}
|
||||||
ReleaseBadge(
|
ReleaseBadge(
|
||||||
modifier = Modifier.padding(top = 8.dp),
|
modifier = Modifier.padding(top = 8.dp),
|
||||||
@ -92,11 +132,12 @@ fun ReleaseItemContent(
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ReleaseItemEndText(
|
ReleaseItemBottomText(
|
||||||
modifier = Modifier.align(Alignment.CenterEnd),
|
modifier = Modifier.weight(1.2f, true),
|
||||||
title = release.added.toString(),
|
repository = repository.name,
|
||||||
subtitle = release.size.formatSize()
|
size = release.size.formatSize()
|
||||||
)
|
)
|
||||||
|
Spacer(modifier = Modifier.width(Dp.Hairline))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -105,45 +146,38 @@ fun ReleaseItemContent(
|
|||||||
fun ReleaseTitleWithBadge(
|
fun ReleaseTitleWithBadge(
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
version: String,
|
version: String,
|
||||||
repository: String,
|
added: String,
|
||||||
badges: @Composable RowScope.() -> Unit = {}
|
badges: @Composable RowScope.() -> Unit = {}
|
||||||
) {
|
) {
|
||||||
Row(
|
Row(
|
||||||
verticalAlignment = Alignment.Top,
|
modifier = modifier,
|
||||||
horizontalArrangement = Arrangement.spacedBy(16.dp)
|
horizontalArrangement = Arrangement.spacedBy(12.dp),
|
||||||
|
verticalAlignment = Alignment.Bottom
|
||||||
) {
|
) {
|
||||||
Column(
|
Text(text = version, style = MaterialTheme.typography.titleMedium)
|
||||||
modifier = modifier.fillMaxHeight(),
|
|
||||||
verticalArrangement = Arrangement.SpaceEvenly,
|
|
||||||
horizontalAlignment = Alignment.Start
|
|
||||||
) {
|
|
||||||
Spacer(modifier = Modifier.width(Dp.Hairline))
|
|
||||||
Text(text = version, style = MaterialTheme.typography.titleMedium)
|
|
||||||
Text(
|
|
||||||
text = stringResource(id = R.string.provided_by_FORMAT, repository),
|
|
||||||
style = MaterialTheme.typography.labelMedium
|
|
||||||
)
|
|
||||||
Spacer(modifier = Modifier.width(Dp.Hairline))
|
|
||||||
}
|
|
||||||
badges()
|
badges()
|
||||||
|
Spacer(Modifier.weight(1f))
|
||||||
|
Text(text = added, style = MaterialTheme.typography.bodySmall)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun ReleaseItemEndText(
|
fun ReleaseItemBottomText(
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
title: String,
|
repository: String,
|
||||||
subtitle: String
|
size: String
|
||||||
) {
|
) {
|
||||||
Column(
|
Row(
|
||||||
modifier = modifier.fillMaxHeight(),
|
modifier = modifier,
|
||||||
verticalArrangement = Arrangement.SpaceBetween,
|
horizontalArrangement = Arrangement.spacedBy(12.dp),
|
||||||
horizontalAlignment = Alignment.Start
|
verticalAlignment = Alignment.CenterVertically
|
||||||
) {
|
) {
|
||||||
Spacer(modifier = Modifier.width(Dp.Hairline))
|
Text(
|
||||||
Text(text = title, style = MaterialTheme.typography.bodySmall)
|
text = stringResource(id = R.string.provided_by_FORMAT, repository),
|
||||||
Text(text = subtitle, style = MaterialTheme.typography.labelSmall)
|
style = MaterialTheme.typography.labelMedium
|
||||||
Spacer(modifier = Modifier.width(Dp.Hairline))
|
)
|
||||||
|
Spacer(Modifier.weight(1f))
|
||||||
|
Text(text = size, style = MaterialTheme.typography.labelSmall)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -157,9 +191,9 @@ fun ReleaseBadge(
|
|||||||
Surface(
|
Surface(
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
.background(color, Shapes.Full)
|
.background(color, Shapes.Full)
|
||||||
.padding(8.dp),
|
.padding(6.dp, 2.dp),
|
||||||
color = color
|
color = color
|
||||||
) {
|
) {
|
||||||
Text(text = text, color = onColor)
|
Text(text = text, color = onColor, style = MaterialTheme.typography.labelMedium)
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user