improve update page

This commit is contained in:
AmirHossein Abdolmotallebi 2024-12-26 17:56:47 +03:30
parent 94316e7aa9
commit a4c0995760

View File

@ -1,5 +1,7 @@
package com.abdownloadmanager.desktop.pages.updater package com.abdownloadmanager.desktop.pages.updater
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.*
import androidx.compose.foundation.* import androidx.compose.foundation.*
import com.abdownloadmanager.desktop.ui.customwindow.WindowIcon import com.abdownloadmanager.desktop.ui.customwindow.WindowIcon
import com.abdownloadmanager.desktop.ui.customwindow.WindowTitle import com.abdownloadmanager.desktop.ui.customwindow.WindowTitle
@ -11,17 +13,18 @@ import com.abdownloadmanager.utils.compose.WithContentAlpha
import com.abdownloadmanager.desktop.utils.div import com.abdownloadmanager.desktop.utils.div
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import com.abdownloadmanager.desktop.ui.widget.Text import com.abdownloadmanager.desktop.ui.widget.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember 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.draw.BlurredEdgeTreatment import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.blur import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.abdownloadmanager.desktop.ui.theme.myMarkdownColors import com.abdownloadmanager.desktop.ui.theme.myMarkdownColors
import com.abdownloadmanager.desktop.ui.theme.myMarkdownTypography import com.abdownloadmanager.desktop.ui.theme.myMarkdownTypography
@ -41,6 +44,7 @@ fun NewUpdatePage(
) { ) {
WindowTitle(myStringResource(Res.string.update_updater)) WindowTitle(myStringResource(Res.string.update_updater))
WindowIcon(MyIcons.refresh) WindowIcon(MyIcons.refresh)
val contentHorizontalPadding = 16.dp
Box { Box {
BackgroundEffects() BackgroundEffects()
Column( Column(
@ -49,44 +53,46 @@ fun NewUpdatePage(
) { ) {
Column( Column(
Modifier Modifier
.padding(horizontal = 16.dp)
.padding( .padding(
bottom = 16.dp,
top = 8.dp top = 8.dp
) )
.weight(1f) .weight(1f)
) { ) {
Row(verticalAlignment = Alignment.CenterVertically) { Column(
Text( Modifier
text = myStringResource(Res.string.update_available), .padding(horizontal = contentHorizontalPadding)
fontSize = myTextSizes.xl, ) {
fontWeight = FontWeight.Bold Row(verticalAlignment = Alignment.CenterVertically) {
) Text(
Spacer(Modifier.width(8.dp)) text = myStringResource(Res.string.update_available),
Text( fontSize = myTextSizes.xl,
text = myStringResource( fontWeight = FontWeight.Bold
Res.string.version_n, Res.string.version_n_createArgs( )
newVersionInfo.version.toString() Spacer(Modifier.width(8.dp))
) Text(
), text = myStringResource(
fontSize = myTextSizes.xl, Res.string.version_n, Res.string.version_n_createArgs(
fontWeight = FontWeight.Bold, newVersionInfo.version.toString()
color = myColors.success, )
) ),
} fontSize = myTextSizes.xl,
Spacer(Modifier.height(8.dp)) fontWeight = FontWeight.Bold,
WithContentAlpha(0.8f) { color = myColors.success,
)
}
Spacer(Modifier.height(8.dp))
Text( Text(
text = myStringResource(Res.string.update_available_suggest_to_to_update), text = myStringResource(Res.string.update_available_suggest_to_to_update),
fontSize = myTextSizes.base, fontSize = myTextSizes.base,
) )
Spacer(Modifier.height(8.dp))
} }
Spacer(Modifier.height(8.dp))
RenderChangeLog( RenderChangeLog(
Modifier Modifier
.fillMaxWidth() .fillMaxWidth()
.weight(1f), .weight(1f),
newVersionInfo.changeLog newVersionInfo.changeLog,
horizontalPadding = contentHorizontalPadding,
) )
} }
Actions( Actions(
@ -143,7 +149,6 @@ fun Actions(modifier: Modifier, update: () -> Unit, cancel: () -> Unit) {
Row( Row(
Modifier Modifier
.fillMaxWidth() .fillMaxWidth()
.background(myColors.surface / 0.5f)
.padding(horizontal = 16.dp) .padding(horizontal = 16.dp)
.padding(vertical = 16.dp), .padding(vertical = 16.dp),
horizontalArrangement = Arrangement.End horizontalArrangement = Arrangement.End
@ -197,7 +202,11 @@ fun CancelButton(
} }
@Composable @Composable
private fun RenderChangeLog(modifier: Modifier, changeLog: String) { private fun RenderChangeLog(
modifier: Modifier,
changeLog: String,
horizontalPadding: Dp,
) {
val trimmedChangelog = remember { val trimmedChangelog = remember {
changeLog changeLog
.lines() .lines()
@ -207,43 +216,71 @@ private fun RenderChangeLog(modifier: Modifier, changeLog: String) {
Column(modifier) { Column(modifier) {
Text( Text(
text = myStringResource(Res.string.update_release_notes), text = myStringResource(Res.string.update_release_notes),
modifier = Modifier.padding(horizontal = horizontalPadding),
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
fontSize = myTextSizes.lg, fontSize = myTextSizes.lg,
) )
Spacer(Modifier.height(8.dp)) Spacer(Modifier.height(8.dp))
val shape = RoundedCornerShape(6.dp) Column(
val scrollState = rememberScrollState() Modifier.background(myColors.surface / 75)
val scrollbarAdapter = rememberScrollbarAdapter(scrollState)
Row(
Modifier
.fillMaxSize()
.clip(shape)
.border(1.dp, myColors.onBackground / 0.05f, shape)
.background(myColors.surface / 75)
) { ) {
Markdown( val transition = rememberInfiniteTransition()
modifier = Modifier val topBorderColors = listOf(
.weight(1f) myColors.primary to myColors.secondaryVariant,
.verticalScroll(scrollState) myColors.secondary to myColors.primaryVariant,
.padding(8.dp), myColors.primaryVariant to myColors.secondary,
content = trimmedChangelog, myColors.secondaryVariant to myColors.primary,
colors = myMarkdownColors(),
typography = myMarkdownTypography()
) )
if (scrollbarAdapter.needScroll()) { val animatedTopBorderColors = topBorderColors.map {
VerticalScrollbar( transition.animateColor(
modifier = Modifier it.first, it.second, infiniteRepeatable(
.fillMaxHeight() animation = tween(durationMillis = 3000, easing = LinearEasing),
.padding( repeatMode = RepeatMode.Reverse
vertical = 4.dp, )
horizontal = 4.dp
),
style = LocalScrollbarStyle.current.copy(
thickness = 8.dp
),
adapter = scrollbarAdapter
) )
} }
Spacer(
Modifier.fillMaxWidth()
.height(2.dp)
.background(
Brush.horizontalGradient(
animatedTopBorderColors.map { it.value }
)
)
)
val scrollState = rememberScrollState()
val scrollbarAdapter = rememberScrollbarAdapter(scrollState)
Row(
Modifier
.fillMaxSize()
) {
Markdown(
modifier = Modifier
.weight(1f)
.verticalScroll(scrollState)
.padding(
horizontal = horizontalPadding,
vertical = 8.dp
),
content = trimmedChangelog,
colors = myMarkdownColors(),
typography = myMarkdownTypography()
)
if (scrollbarAdapter.needScroll()) {
VerticalScrollbar(
modifier = Modifier
.fillMaxHeight()
.padding(
vertical = 4.dp,
horizontal = 4.dp
),
style = LocalScrollbarStyle.current.copy(
thickness = 6.dp
),
adapter = scrollbarAdapter
)
}
}
} }
} }
} }