Fix open button layout

flipperdevices · Sep 19, 2023 · f772dc2 · f772dc2
1 parent 0bd2594
commit f772dc2
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 18 deletions.
diff --git a/...rdevices/faphub/installation/button/impl/composable/buttons/ComposableFapOpeningButton.kt b/...rdevices/faphub/installation/button/impl/composable/buttons/ComposableFapOpeningButton.kt
@@ -17,25 +17,21 @@ 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.sp
+import com.flipperdevices.core.ui.ktx.elements.animatedDots
 import com.flipperdevices.core.ui.ktx.sweep.animatedRotatableBrush
 import com.flipperdevices.core.ui.theme.FlipperThemeInternal
 import com.flipperdevices.core.ui.theme.LocalPallet
 import com.flipperdevices.core.ui.theme.LocalTypography
 import com.flipperdevices.faphub.installation.button.api.FapButtonSize
 import com.flipperdevices.faphub.installation.button.impl.R
 
-private const val PROGRESS_BAR_SIZE = 4
+private const val PROGRESS_BAR_SIZE = 3
 
 @Composable
 internal fun ComposableFapOpeningButton(
     fapButtonSize: FapButtonSize,
     modifier: Modifier = Modifier,
 ) {
-    val text = when (fapButtonSize) {
-        FapButtonSize.COMPACTED -> stringResource(R.string.faphub_installation_open)
-        FapButtonSize.LARGE -> stringResource(R.string.faphub_installation_open_long)
-    }
-
     val progressColor = LocalPallet.current.fapHubOpenAppProgress
     val buttonColor = LocalPallet.current.fapHubOpenAppEnable
 
@@ -59,18 +55,18 @@ internal fun ComposableFapOpeningButton(
             .background(buttonProgressBackground)
             .padding(PROGRESS_BAR_SIZE.dp)
             .clip(buttonClip)
-            .background(buttonColor),
+            .background(LocalPallet.current.background),
         contentAlignment = Alignment.Center
     ) {
         Text(
             modifier = Modifier.padding(vertical = 4.dp),
-            text = text,
+            text = stringResource(R.string.faphub_installation_opening) + animatedDots(),
             textAlign = TextAlign.Center,
             style = LocalTypography.current.fapHubButtonText.copy(
                 fontSize = fapButtonSize.textSizeSp.sp
             ),
             maxLines = 1,
-            color = LocalPallet.current.onFapHubInstallButton
+            color = buttonColor
         )
     }
 }

diff --git a/...perdevices/faphub/installation/button/impl/composable/elements/ComposableFlipperButton.kt b/...perdevices/faphub/installation/button/impl/composable/elements/ComposableFlipperButton.kt
@@ -1,7 +1,9 @@
 package com.flipperdevices.faphub.installation.button.impl.composable.elements
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
@@ -12,13 +14,17 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+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.sp
 import com.flipperdevices.core.ui.ktx.clickableRipple
+import com.flipperdevices.core.ui.theme.FlipperThemeInternal
 import com.flipperdevices.core.ui.theme.LocalPallet
 import com.flipperdevices.core.ui.theme.LocalTypography
 import com.flipperdevices.faphub.installation.button.api.FapButtonSize
+import com.flipperdevices.faphub.installation.button.impl.R
 
 @Composable
 fun ComposableFlipperButton(
@@ -29,8 +35,7 @@ fun ComposableFlipperButton(
     onClick: (() -> Unit)? = null,
 ) {
     var buttonModifier = modifier
-        .clip(RoundedCornerShape(6.dp))
-        .background(color)
+        .border(2.dp, color, RoundedCornerShape(6.dp))
     if (onClick != null) {
         buttonModifier = buttonModifier
             .clickableRipple(onClick = onClick)
@@ -52,7 +57,27 @@ fun ComposableFlipperButton(
                 fontSize = fapButtonSize.textSizeSp.sp
             ),
             maxLines = 1,
-            color = LocalPallet.current.onFapHubInstallButton
+            color = color
         )
     }
 }
+
+
+@Preview(
+    showBackground = true,
+    showSystemUi = true
+)
+@Composable
+private fun ComposableFlipperButtonPreview() {
+    FlipperThemeInternal {
+        Box {
+            ComposableFlipperButton(
+                modifier = Modifier.fillMaxWidth(),
+                text = stringResource(R.string.faphub_installation_install),
+                color = LocalPallet.current.accent,
+                fapButtonSize = FapButtonSize.LARGE,
+                onClick = { }
+            )
+        }
+    }
+}
diff --git a/...ices/faphub/installation/button/impl/composable/elements/ComposableInProgressFapButton.kt b/...ices/faphub/installation/button/impl/composable/elements/ComposableInProgressFapButton.kt
@@ -100,11 +100,10 @@ private fun ComposableInProgressFapButtonInternal(
         modifier = buttonModifier
             .height(fapButtonSize.heightDp.dp)
             .clip(RoundedCornerShape(6.dp))
-            .background(color.copy(alpha = 0.5f))
-            .border(3.dp, color, RoundedCornerShape(6.dp)),
+            .border(2.dp, color, RoundedCornerShape(6.dp)),
         contentAlignment = Alignment.Center
     ) {
-        ComposableProgressRow(percent, color)
+        ComposableProgressRow(percent, accentColor = color.copy(alpha = 0.3f))
         Text(
             modifier = Modifier.padding(vertical = 4.dp),
             text = percent.roundPercentToString(),
@@ -113,7 +112,7 @@ private fun ComposableInProgressFapButtonInternal(
                 fontSize = fapButtonSize.textSizeSp.sp
             ),
             maxLines = 1,
-            color = LocalPallet.current.onFapHubInstallButton
+            color = color
         )
     }
 }

diff --git a/components/faphub/installation/button/impl/src/main/res/values/strings.xml b/components/faphub/installation/button/impl/src/main/res/values/strings.xml
@@ -3,7 +3,7 @@
     <string name="faphub_installation_install">INSTALL</string>
     <string name="faphub_installation_installed">INSTALLED</string>
     <string name="faphub_installation_open">OPEN</string>
-    <string name="faphub_installation_open_long">OPEN ON FLIPPER</string>
+    <string name="faphub_installation_opening">OPENING</string>
     <string name="faphub_installation_update">UPDATE</string>
     <string name="faphub_installation_canceling">Canceling</string>
     <string name="faphub_installation_cancel_desc">Cancel</string>

diff --git a/...l/src/main/java/com/flipperdevices/faphub/target/impl/api/FlipperTargetProviderApiImpl.kt b/...l/src/main/java/com/flipperdevices/faphub/target/impl/api/FlipperTargetProviderApiImpl.kt
@@ -1,5 +1,6 @@
 package com.flipperdevices.faphub.target.impl.api
 
+import com.flipperdevices.bridge.api.manager.ktx.state.ConnectionState
 import com.flipperdevices.bridge.service.api.provider.FlipperServiceProvider
 import com.flipperdevices.core.di.AppGraph
 import com.flipperdevices.core.log.LogTagProvider
@@ -47,9 +48,13 @@ class FlipperTargetProviderApiImpl @Inject constructor(
             serviceApi.flipperVersionApi.getVersionInformationFlow()
         ) { connectionState, version ->
             if (!connectionState.isConnected) {
-                targetFlow.emit(FlipperTarget.NotConnected)
+                when (connectionState) {
+                    is ConnectionState.Disconnected -> targetFlow.emit(FlipperTarget.NotConnected)
+                    else -> targetFlow.emit(null)
+                }
                 return@combine
             }
+            targetFlow.emit(null)
             info { "Receive version $version" }
             val sdkVersion = fetcher.getSdkApi(serviceApi.requestApi, version)
             info { "Sdk version is $sdkVersion" }