From 0768e62a365cc7ac232521dd4d33a5a16f770169 Mon Sep 17 00:00:00 2001 From: Iamlooker Date: Sun, 10 Apr 2022 17:37:30 +0530 Subject: [PATCH] New Install Button { TODO try adding progress in button } --- .../ui/compose/components/InstallButton.kt | 64 +++++++++++++++++++ .../pages/app_detail/components/Header.kt | 17 ++++- .../ui/compose/utils/InstallButtonState.kt | 31 +++++++++ 3 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 src/main/kotlin/com/looker/droidify/ui/compose/components/InstallButton.kt create mode 100644 src/main/kotlin/com/looker/droidify/ui/compose/utils/InstallButtonState.kt diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/components/InstallButton.kt b/src/main/kotlin/com/looker/droidify/ui/compose/components/InstallButton.kt new file mode 100644 index 00000000..2b37474a --- /dev/null +++ b/src/main/kotlin/com/looker/droidify/ui/compose/components/InstallButton.kt @@ -0,0 +1,64 @@ +package com.looker.droidify.ui.compose.components + +import androidx.compose.animation.* +import androidx.compose.foundation.layout.* +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.rounded.Close +import androidx.compose.material.icons.rounded.Download +import androidx.compose.material.icons.rounded.Launch +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.ElevatedButton +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.unit.dp +import com.looker.droidify.ui.compose.utils.ButtonStates +import com.looker.droidify.ui.compose.utils.ButtonWork +import com.looker.droidify.ui.compose.utils.Cancelable + +@OptIn(ExperimentalAnimationApi::class) +@Composable +fun InstallButton( + modifier: Modifier = Modifier, + buttonState: ButtonStates, + onClick: (ButtonStates) -> Unit +) { + ElevatedButton( + modifier = modifier, + onClick = { onClick(buttonState) } + ) { + AnimatedContent( + targetState = buttonState, + transitionSpec = { + when (targetState) { + is Cancelable -> { + slideInVertically { height -> height } + fadeIn() with + slideOutVertically { height -> -height } + fadeOut() + } + is ButtonWork -> { + slideInVertically { height -> -height } + fadeIn() with + slideOutVertically { height -> height } + fadeOut() + } + }.using(SizeTransform(clip = false)) + } + ) { + Row( + Modifier + .defaultMinSize( + minWidth = ButtonDefaults.MinWidth, + minHeight = ButtonDefaults.MinHeight + ) + .padding(ButtonDefaults.ContentPadding), + horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically + ) { + Icon(imageVector = it.icon, contentDescription = null) + Spacer(modifier = Modifier.width(8.dp)) + Text(text = it.text) + } + } + } +} \ No newline at end of file diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/Header.kt b/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/Header.kt index 7ed99a87..252a83d8 100644 --- a/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/Header.kt +++ b/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/Header.kt @@ -7,15 +7,16 @@ import androidx.compose.material3.LinearProgressIndicator import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text -import androidx.compose.runtime.Composable +import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import com.looker.droidify.R +import com.looker.droidify.ui.compose.components.InstallButton import com.looker.droidify.ui.compose.theme.LocalShapes -import com.looker.droidify.ui.compose.utils.NetworkImage +import com.looker.droidify.ui.compose.utils.* import com.looker.droidify.utility.extension.text.formatSize @Composable @@ -48,6 +49,18 @@ fun Header( appDev = appDev ) DownloadProgress(totalSize = 69420) + var buttonState by remember { mutableStateOf(Connecting) } + + InstallButton(buttonState = buttonState) { + buttonState = when (it) { + Connecting -> Download + Download -> Downloading + Downloading -> Install + Install -> Installing + Installing -> Launch + Launch -> Connecting + } + } } } } diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/utils/InstallButtonState.kt b/src/main/kotlin/com/looker/droidify/ui/compose/utils/InstallButtonState.kt new file mode 100644 index 00000000..6cc59369 --- /dev/null +++ b/src/main/kotlin/com/looker/droidify/ui/compose/utils/InstallButtonState.kt @@ -0,0 +1,31 @@ +package com.looker.droidify.ui.compose.utils + +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.rounded.Close +import androidx.compose.material.icons.rounded.Download +import androidx.compose.material.icons.rounded.Launch +import androidx.compose.ui.graphics.vector.ImageVector + +sealed interface ButtonStates { + val icon: ImageVector + val text: String +} + +sealed class Cancelable( + override val text: String, + override val icon: ImageVector = Icons.Rounded.Close +) : ButtonStates + +object Connecting : Cancelable("Connecting") +object Downloading : Cancelable("Downloading") +object Installing : Cancelable("Installing") + + +sealed class ButtonWork( + override val text: String, + override val icon: ImageVector = Icons.Rounded.Download +) : ButtonStates + +object Download : ButtonWork("Download") +object Install : ButtonWork("Install") +object Launch : ButtonWork("Launch", Icons.Rounded.Launch) \ No newline at end of file