Skip to content

Commit

Permalink
Add horizontal layout to ClockView
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxkeppeler
maxkeppeler committed Jan 22, 2023
1 parent abd6bc3 commit 61e9f66
Show file tree
Hide file tree
Showing 4 changed files with 175 additions and 36 deletions.
42 changes: 40 additions & 2 deletions clock/src/main/java/com/maxkeppeler/sheets/clock/ClockView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,14 @@

package com.maxkeppeler.sheets.clock

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.*
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.unit.dp
import com.maxkeppeker.sheets.core.models.base.Header
import com.maxkeppeker.sheets.core.models.base.SheetState
import com.maxkeppeker.sheets.core.models.base.StateHandler
Expand All @@ -28,7 +33,9 @@ import com.maxkeppeker.sheets.core.views.base.FrameBase
import com.maxkeppeler.sheets.clock.models.ClockConfig
import com.maxkeppeler.sheets.clock.models.ClockSelection
import com.maxkeppeler.sheets.clock.views.KeyboardComponent
import com.maxkeppeler.sheets.clock.views.TimeValueComponent
import com.maxkeppeler.sheets.clock.views.LandscapeTimeValueComponent
import com.maxkeppeler.sheets.clock.views.PortraitTimeValueComponent
import com.maxkeppeler.sheets.core.R

/**
* Clock view for the use-case to to select a clock time.
Expand All @@ -52,7 +59,10 @@ fun ClockView(
FrameBase(
header = header,
content = {
TimeValueComponent(
PortraitTimeValueComponent(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = dimensionResource(R.dimen.scd_normal_100)),
unitValues = clockState.timeTextValues,
isAm = clockState.isAm,
is24hourFormat = clockState.is24HourFormat,
Expand All @@ -61,7 +71,35 @@ fun ClockView(
onGroupClick = clockState::onValueGroupClick,
onAm = clockState::onChange12HourFormatValue,
)

KeyboardComponent(
modifier = Modifier.weight(1f, false),
config = config,
keys = clockState.keys,
disabledKeys = clockState.disabledKeys,
onEnterValue = clockState::onEnterValue,
onPrevAction = clockState::onPrevAction,
onNextAction = clockState::onNextAction
)
},
contentLandscape = {
LandscapeTimeValueComponent(
modifier = Modifier
.wrapContentWidth()
.weight(1f, true),
verticalArrangement = Arrangement.Center,
unitValues = clockState.timeTextValues,
isAm = clockState.isAm,
is24hourFormat = clockState.is24HourFormat,
valueIndex = clockState.valueIndex.value,
groupIndex = clockState.groupIndex.value,
onGroupClick = clockState::onValueGroupClick,
onAm = clockState::onChange12HourFormatValue,
)
Spacer(modifier = Modifier.width(16.dp))
KeyboardComponent(
modifier = Modifier.weight(1f, true),
orientation = Orientation.Horizontal,
config = config,
keys = clockState.keys,
disabledKeys = clockState.disabledKeys,
Expand Down
34 changes: 23 additions & 11 deletions clock/src/main/java/com/maxkeppeler/sheets/clock/views/KeyItemComponent.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,10 @@ import androidx.compose.animation.core.tween
import androidx.compose.foundation.LocalIndication
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
Expand All @@ -40,6 +38,8 @@ import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.maxkeppeker.sheets.core.utils.TestTags
import com.maxkeppeker.sheets.core.utils.testTags
import com.maxkeppeler.sheets.clock.R
Expand All @@ -61,6 +61,7 @@ internal fun KeyItemComponent(
config: ClockConfig,
key: String,
disabled: Boolean = false,
orientation: Orientation = Orientation.Vertical,
onEnterValue: (Int) -> Unit,
onPrevAction: () -> Unit,
onNextAction: () -> Unit,
Expand All @@ -85,7 +86,8 @@ internal fun KeyItemComponent(
Row(
modifier = Modifier
.testTags(TestTags.KEYBOARD_KEY, key)
.aspectRatio(1f)
.aspectRatio(1f, true)
.sizeIn(minHeight = 35.dp, minWidth = 35.dp, maxWidth = 42.dp, maxHeight = 42.dp)
.alpha(if (disabled) Constants.KEYBOARD_ALPHA_ITEM_DISABLED else Constants.KEYBOARD_ALPHA_ITEM_ENABLED)
.clip(RoundedCornerShape(animatedCornerRadius.value))
.background(
Expand All @@ -107,18 +109,28 @@ internal fun KeyItemComponent(
verticalAlignment = Alignment.CenterVertically
) {
if (isActionNext || isActionPrev) {
val size = dimensionResource(RC.dimen.scd_size_175)
Icon(
modifier = Modifier
.size(dimensionResource(RC.dimen.scd_size_175)),
modifier = Modifier.size(size),
imageVector = if (isActionNext) config.icons.ChevronRight else config.icons.ChevronLeft,
contentDescription = stringResource(if (isActionNext) R.string.scd_clock_dialog_next_value else R.string.scd_clock_dialog_previous_value),
tint = MaterialTheme.colorScheme.secondary
)
} else {
Text(
text = key,
style = MaterialTheme.typography.headlineLarge.copy(fontWeight = FontWeight.Bold)
)
Box(contentAlignment = Alignment.Center) {
Text(
text = key,
style = when(orientation) {
Orientation.Vertical -> MaterialTheme.typography.headlineLarge.copy(
fontWeight = FontWeight.Bold
)
Orientation.Horizontal -> MaterialTheme.typography.headlineSmall.copy(
fontWeight = FontWeight.Bold
)
},
textAlign = TextAlign.Center,
)
}
}
}
}
31 changes: 14 additions & 17 deletions clock/src/main/java/com/maxkeppeler/sheets/clock/views/KeyboardComponent.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,13 @@
package com.maxkeppeler.sheets.clock.views


import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.unit.dp
import com.maxkeppeker.sheets.core.views.Grid
import com.maxkeppeler.sheets.clock.models.ClockConfig
import com.maxkeppeler.sheets.clock.utils.Constants
import com.maxkeppeler.sheets.core.R as RC

/**
* The keyboard component that is used to input the clock time.
Expand All @@ -39,31 +35,32 @@ import com.maxkeppeler.sheets.core.R as RC
*/
@Composable
internal fun KeyboardComponent(
modifier: Modifier,
config: ClockConfig,
keys: List<String>,
orientation: Orientation = Orientation.Vertical,
disabledKeys: List<String>,
onEnterValue: (Int) -> Unit,
onPrevAction: () -> Unit,
onNextAction: () -> Unit
) {
LazyVerticalGrid(
modifier = Modifier
.fillMaxWidth(),
columns = GridCells.Fixed(Constants.KEYBOARD_COLUMNS),
userScrollEnabled = false,
horizontalArrangement = Arrangement.spacedBy(dimensionResource(RC.dimen.scd_small_100)),
verticalArrangement = Arrangement.spacedBy(dimensionResource(RC.dimen.scd_small_100))
) {
items(keys) { key ->
Grid(
modifier = modifier,
items = keys,
columns = Constants.KEYBOARD_COLUMNS,
rowSpacing = 8.dp,
columnSpacing = 8.dp,
itemView = { key ->
val disabled = disabledKeys.contains(key)
KeyItemComponent(
config = config,
key = key,
orientation = orientation,
disabled = disabled,
onNextAction = onNextAction,
onPrevAction = onPrevAction,
onEnterValue = onEnterValue
)
}
}
)
}
104 changes: 98 additions & 6 deletions clock/src/main/java/com/maxkeppeler/sheets/clock/views/TimeValueComponent.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ import com.maxkeppeler.sheets.clock.R
import com.maxkeppeler.sheets.core.R as RC

@Composable
internal fun TimeValueComponent(
internal fun PortraitTimeValueComponent(
modifier: Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
valueIndex: Int,
groupIndex: Int,
unitValues: List<StringBuilder>,
Expand All @@ -52,10 +54,9 @@ internal fun TimeValueComponent(
) {

Column(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = dimensionResource(RC.dimen.scd_normal_100)),
horizontalAlignment = Alignment.CenterHorizontally
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = verticalArrangement,
) {

Row(
Expand Down Expand Up @@ -102,7 +103,6 @@ internal fun TimeValueComponent(
)
}
}

}
if (!is24hourFormat) {
Row(
Expand All @@ -125,4 +125,96 @@ internal fun TimeValueComponent(
}
}
}
}


@Composable
internal fun LandscapeTimeValueComponent(
modifier: Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
valueIndex: Int,
groupIndex: Int,
unitValues: List<StringBuilder>,
is24hourFormat: Boolean,
isAm: Boolean,
onGroupClick: (Int) -> Unit,
onAm: (Boolean) -> Unit,
) {

Column(
modifier = modifier,
horizontalAlignment = Alignment.Start,
verticalArrangement = verticalArrangement,
) {

val labels = listOf("Hours", "Minutes", "Seconds")

Column(
modifier = Modifier
.wrapContentWidth(),
verticalArrangement = Arrangement.Center
) {

unitValues.forEachIndexed { currentGroupIndex, value ->

Row(
verticalAlignment = Alignment.CenterVertically
) {

val textStyle =
MaterialTheme.typography.displaySmall.copy(fontWeight = FontWeight.Bold)

Text(
modifier = Modifier
.wrapContentSize()
.clip(MaterialTheme.shapes.medium)
.background(if (currentGroupIndex == groupIndex) MaterialTheme.colorScheme.secondaryContainer else Color.Transparent)
.clickable { onGroupClick.invoke(currentGroupIndex) }
.padding(horizontal = dimensionResource(RC.dimen.scd_small_75)),
text = buildAnnotatedString {
val values = value.toString().toCharArray()
val selectedStyle = SpanStyle(
color = MaterialTheme.colorScheme.primary,
)
values.forEachIndexed { currentValueIndex, value ->
val selected = currentGroupIndex == groupIndex
&& currentValueIndex == valueIndex
if (selected) withStyle(selectedStyle) { append(value) }
else append(value)
}
},
style = textStyle
)
Spacer(modifier = Modifier.width(dimensionResource(RC.dimen.scd_small_150)))

Text(
text = labels[currentGroupIndex],
style = MaterialTheme.typography.labelSmall,
)


}
}
}
if (!is24hourFormat) {
Row(
Modifier
.padding(top = dimensionResource(RC.dimen.scd_small_100)),
verticalAlignment = Alignment.CenterVertically
) {
TimeTypeItemComponent(
modifier = Modifier.testTags(TestTags.CLOCK_12_HOUR_FORMAT, 0),
selected = isAm,
onClick = { onAm.invoke(true) },
text = stringResource(id = R.string.scd_clock_dialog_am),
)
TimeTypeItemComponent(
modifier = Modifier.testTags(TestTags.CLOCK_12_HOUR_FORMAT, 1),
selected = !isAm,
onClick = { onAm.invoke(false) },
text = stringResource(id = R.string.scd_clock_dialog_pm),
)
}
}
}
}

0 comments on commit 61e9f66

Please sign in to comment.