Skip to content

Commit

Permalink
Scroll progress on wear OS app (#705)
Browse files Browse the repository at this point in the history
**Background**

Now we not display progress indicator

**Changes**

Use progress indicator

**Test plan**

Go to Key Screen and some another Column

---------

Co-authored-by: Nikita Kulikov <[email protected]>
  • Loading branch information
Programistich and LionZXY authored Oct 2, 2023
1 parent 58bccb1 commit cbc2895
Show file tree
Hide file tree
Showing 8 changed files with 87 additions and 104 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
- [FIX] Fix wearos font issue
- [FIX] New mehanism emulate in Wear OS
- [FIX] New button texts on fap errors dialog
- [FIX] Scroll progress on wear OS app
- [FIX] Bold Text in github link and app action
- [FIX] Remove Control from Options
- [FIX] Deprecated detekt rules
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import android.os.Vibrator
import androidx.core.content.ContextCompat
import com.flipperdevices.core.ktx.android.vibrateCompat

private const val MAX_NAME_LENGTH = 22
private const val MAX_NAME_LENGTH = 21
private const val MAX_NOTE_LENGTH = 1024
private const val VIBRATOR_TIME_MS = 500L

Expand Down
1 change: 1 addition & 0 deletions components/wearable/core/ui/components/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ android.namespace = "com.flipperdevices.wearable.core.ui.components"

dependencies {
implementation(projects.components.core.ui.theme)
implementation(projects.components.core.ui.ktx)

// Compose
implementation(libs.compose.ui)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
package com.flipperdevices.wearable.core.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Button
import androidx.wear.compose.material.ButtonDefaults
import androidx.wear.compose.material.Text
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

Expand All @@ -29,19 +33,18 @@ fun ComposableFlipperButton(
textStyle: TextStyle = TextStyle(),
cornerRoundSize: Dp = 30.dp
) {
Button(
Box(
modifier = modifier
.clip(RoundedCornerShape(size = cornerRoundSize)),
onClick = onClick,
colors = ButtonDefaults.primaryButtonColors(
backgroundColor = LocalPallet.current.accentSecond,
contentColor = LocalPallet.current.onFlipperButton
)
.clip(RoundedCornerShape(size = cornerRoundSize))
.clickableRipple(onClick = onClick)
.background(LocalPallet.current.accentSecond),
contentAlignment = Alignment.Center
) {
Text(
modifier = Modifier.padding(textPadding),
text = text,
style = LocalTypography.current.buttonB16.merge(textStyle)
style = LocalTypography.current.buttonB16.merge(textStyle),
color = LocalPallet.current.onFlipperButton
)
}
}
Expand All @@ -52,7 +55,9 @@ fun ComposableFlipperButton(
)
@Composable
private fun ComposableFlipperButtonPreview() {
Column {
ComposableFlipperButton(text = "Test")
FlipperThemeInternal {
Column {
ComposableFlipperButton(text = "Tesвыавыаываывавыавыаываываt")
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
Expand All @@ -16,6 +14,12 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.input.rotary.onRotaryScrollEvent
import androidx.wear.compose.foundation.lazy.AutoCenteringParams
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.ScalingLazyListScope
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.PositionIndicator
import androidx.wear.compose.material.Scaffold
import com.google.android.horologist.compose.layout.fillMaxRectangle
import kotlinx.coroutines.launch

Expand All @@ -24,25 +28,52 @@ fun ComposableWearOsScrollableColumn(
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit
) {
val columnScrollState = rememberScrollState()
ComposableWearOsScalingLazyColumn(
modifier = modifier,
autoCentering = null
) {
item(content = {
Column(
modifier = Modifier.fillMaxRectangle(),
content = content,
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
)
})
}
}

@Composable
fun ComposableWearOsScalingLazyColumn(
modifier: Modifier = Modifier,
autoCentering: AutoCenteringParams? = AutoCenteringParams(),
content: ScalingLazyListScope.() -> Unit
) {
val scalingLazyListState = rememberScalingLazyListState()
val coroutineScope = rememberCoroutineScope()
val focusRequester = remember { FocusRequester() }
Column(
modifier
.verticalScroll(columnScrollState)
.fillMaxRectangle()
.onRotaryScrollEvent {
coroutineScope.launch {
columnScrollState.scrollBy(it.verticalScrollPixels)

Scaffold(
modifier = modifier,
positionIndicator = { PositionIndicator(scalingLazyListState = scalingLazyListState) }
) {
ScalingLazyColumn(
modifier = Modifier
.onRotaryScrollEvent {
coroutineScope.launch {
scalingLazyListState.scrollBy(it.verticalScrollPixels)
}
true
}
true
}
.focusRequester(focusRequester)
.focusable(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
content = content
)
.focusRequester(focusRequester)
.focusable(),
state = scalingLazyListState,
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.Center,
content = content,
autoCentering = autoCentering
)
}

LaunchedEffect(Unit) {
focusRequester.requestFocus()
Expand Down
Original file line number Diff line number Diff line change
@@ -1,65 +1,36 @@
package com.flipperdevices.wearable.sync.wear.impl.composable

import androidx.compose.foundation.focusable
import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.input.rotary.onRotaryScrollEvent
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Text
import com.flipperdevices.core.ui.theme.LocalTypography
import com.flipperdevices.wearable.core.ui.components.ComposableFlipperButton
import com.flipperdevices.wearable.core.ui.components.ComposableWearOsScrollableColumn
import com.flipperdevices.wearable.sync.wear.impl.R
import com.google.android.horologist.compose.layout.fillMaxRectangle
import kotlinx.coroutines.launch

@Composable
fun ComposableFindPhone(
onInstall: () -> Unit,
modifier: Modifier = Modifier,
) {
val columnScrollState = rememberScrollState()
val coroutineScope = rememberCoroutineScope()
val focusRequester = remember { FocusRequester() }

Column(
modifier = modifier
.verticalScroll(columnScrollState)
.fillMaxRectangle()
.onRotaryScrollEvent {
coroutineScope.launch {
columnScrollState.scrollBy(it.verticalScrollPixels)
}
true
}
.focusRequester(focusRequester)
.focusable(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
ComposableWearOsScrollableColumn(modifier) {
Text(
text = stringResource(id = R.string.phone_missing),
style = LocalTypography.current.bodyM14
)
ComposableFlipperButton(
modifier = Modifier.padding(top = 16.dp),
modifier = Modifier.fillMaxWidth().padding(top = 4.dp),
textPadding = PaddingValues(
vertical = 12.dp,
horizontal = 20.dp
),
text = stringResource(R.string.install_app),
onClick = onInstall
)
}
LaunchedEffect(Unit) {
focusRequester.requestFocus()
}
}
Original file line number Diff line number Diff line change
@@ -1,41 +1,32 @@
package com.flipperdevices.wearable.sync.wear.impl.composable

import androidx.compose.foundation.Image
import androidx.compose.foundation.focusable
import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.input.rotary.onRotaryScrollEvent
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.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.items
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.CircularProgressIndicator
import androidx.wear.compose.material.Text
import com.flipperdevices.core.ui.theme.LocalTypography
import com.flipperdevices.wearable.core.ui.components.ComposableWearOsScalingLazyColumn
import com.flipperdevices.wearable.core.ui.components.ComposableWearOsScrollableColumn
import com.flipperdevices.wearable.sync.wear.impl.R
import com.flipperdevices.wearable.sync.wear.impl.model.FlipperWearKey
import com.flipperdevices.wearable.sync.wear.impl.model.KeysListState
import com.flipperdevices.wearable.sync.wear.impl.viewmodel.KeysListViewModel
import kotlinx.collections.immutable.ImmutableList
import kotlinx.coroutines.launch
import tangle.viewmodel.compose.tangleViewModel
import com.flipperdevices.core.ui.res.R as DesignSystem

Expand Down Expand Up @@ -93,25 +84,9 @@ private fun ComposableKeysListInternal(
keys: ImmutableList<FlipperWearKey>,
onKeyOpen: (FlipperWearKey) -> Unit
) {
val columnScrollState = rememberScalingLazyListState()
val coroutineScope = rememberCoroutineScope()
val focusRequester = remember { FocusRequester() }

val favoritesKeys = remember(keys) { keys.filter { it.isFavorites }.sortedBy { it.path.path } }
val otherKeys = remember(keys) { keys.filterNot { it.isFavorites }.sortedBy { it.path.path } }
ScalingLazyColumn(
modifier = Modifier
.onRotaryScrollEvent {
coroutineScope.launch {
columnScrollState.scrollBy(it.verticalScrollPixels)
}
true
}
.focusRequester(focusRequester)
.focusable(),
state = columnScrollState,
horizontalAlignment = Alignment.Start
) {
ComposableWearOsScalingLazyColumn {
if (favoritesKeys.isNotEmpty()) {
item {
ComposableKeysListCategory(
Expand All @@ -131,8 +106,4 @@ private fun ComposableKeysListInternal(
ComposableKeysListElement(it) { onKeyOpen(it) }
}
}

LaunchedEffect(Unit) {
focusRequester.requestFocus()
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
Expand All @@ -32,7 +33,7 @@ fun ComposableKeysListCategory(
@DrawableRes iconId: Int? = null
) {
Row(
modifier = modifier,
modifier = modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
val iconModifier = Modifier
Expand Down Expand Up @@ -65,9 +66,11 @@ fun ComposableKeysListElement(
val type = flipperWearKey.path.path.keyType
val icon = type?.icon ?: DesignSystem.drawable.ic_fileformat_unknown
Row(
modifier = modifier.clickable(
onClick = onClick
),
modifier = modifier
.fillMaxWidth()
.clickable(
onClick = onClick
),
verticalAlignment = Alignment.CenterVertically
) {
Box(
Expand Down

0 comments on commit cbc2895

Please sign in to comment.