From bef4e94174bfc03dbb046c8133b078be224e5ea1 Mon Sep 17 00:00:00 2001 From: M00NJ Date: Sat, 15 Jul 2023 19:40:06 +0200 Subject: [PATCH 1/5] - Added corner radius to alarm card - Added corner radius to timer card - Added padding to clock card - Reduced spacer between main clock and time zone cards to the same value as padding - Set padding to the same values in all tabs --- .../main/java/com/bnyro/clock/ui/components/AlarmRow.kt | 3 ++- .../main/java/com/bnyro/clock/ui/screens/ClockScreen.kt | 6 +++--- .../main/java/com/bnyro/clock/ui/screens/TimerScreen.kt | 7 +++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/src/main/java/com/bnyro/clock/ui/components/AlarmRow.kt b/app/src/main/java/com/bnyro/clock/ui/components/AlarmRow.kt index 3cfb6750..7cafab5d 100644 --- a/app/src/main/java/com/bnyro/clock/ui/components/AlarmRow.kt +++ b/app/src/main/java/com/bnyro/clock/ui/components/AlarmRow.kt @@ -51,7 +51,8 @@ fun AlarmRow(alarm: Alarm, alarmModel: AlarmModel) { } ElevatedCard( - modifier = Modifier.padding(horizontal = 10.dp, vertical = 5.dp) + modifier = Modifier.padding(horizontal = 12.dp, vertical = 6.dp), + shape = RoundedCornerShape(20.dp) ) { var expanded by remember { mutableStateOf(false) diff --git a/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt b/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt index 2e99312e..e459e42d 100644 --- a/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt +++ b/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt @@ -40,7 +40,7 @@ fun ClockScreen(clockModel: ClockModel) { val scrollState = rememberScrollState() Column( modifier = Modifier - .padding(horizontal = 10.dp) + .padding(horizontal = 12.dp, vertical = 6.dp) .verticalScroll(scrollState) ) { ElevatedCard( @@ -65,7 +65,7 @@ fun ClockScreen(clockModel: ClockModel) { } } - Spacer(modifier = Modifier.height(10.dp)) + Spacer(modifier = Modifier.height(6.dp)) val zones = clockModel.selectedTimeZones.distinct() val sortedZones = when (clockModel.sortOrder) { @@ -82,7 +82,7 @@ fun ClockScreen(clockModel: ClockModel) { ElevatedCard( modifier = Modifier .fillMaxWidth() - .padding(vertical = 5.dp), + .padding(vertical = 6.dp), shape = RoundedCornerShape(20.dp) ) { Column( diff --git a/app/src/main/java/com/bnyro/clock/ui/screens/TimerScreen.kt b/app/src/main/java/com/bnyro/clock/ui/screens/TimerScreen.kt index 3f5d1cd6..cf70cb75 100644 --- a/app/src/main/java/com/bnyro/clock/ui/screens/TimerScreen.kt +++ b/app/src/main/java/com/bnyro/clock/ui/screens/TimerScreen.kt @@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.itemsIndexed +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add import androidx.compose.material.icons.filled.Edit @@ -167,10 +168,8 @@ fun TimerScreen(timerModel: TimerModel) { } ElevatedCard( - modifier = Modifier.padding( - horizontal = 8.dp, - vertical = 4.dp - ) + modifier = Modifier.padding(horizontal = 12.dp, vertical = 6.dp), + shape = RoundedCornerShape(20.dp) ) { Row( modifier = Modifier.padding( From f82dce65a54eecd2c93b988e0fe2c397773356a9 Mon Sep 17 00:00:00 2001 From: M00NJ Date: Sun, 16 Jul 2023 08:51:42 +0200 Subject: [PATCH 2/5] Forgot to change this line --- app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt b/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt index e459e42d..b77f4c0e 100644 --- a/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt +++ b/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt @@ -162,7 +162,7 @@ fun ClockScreen(clockModel: ClockModel) { items(filteredZones) { Row( - modifier = Modifier.fillMaxWidth().padding(vertical = 5.dp), + modifier = Modifier.fillMaxWidth().padding(vertical = 6.dp), verticalAlignment = Alignment.CenterVertically ) { var checked by remember { From 222f0ee92b4bdecbf05ca647a697e60d0729c5c3 Mon Sep 17 00:00:00 2001 From: M00NJ Date: Sun, 16 Jul 2023 11:09:03 +0200 Subject: [PATCH 3/5] Fixed floating action button sitting higher in stopwatch tab --- app/src/main/java/com/bnyro/clock/ui/screens/StopwatchScreen.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/main/java/com/bnyro/clock/ui/screens/StopwatchScreen.kt b/app/src/main/java/com/bnyro/clock/ui/screens/StopwatchScreen.kt index 9b0a37ea..be070fec 100644 --- a/app/src/main/java/com/bnyro/clock/ui/screens/StopwatchScreen.kt +++ b/app/src/main/java/com/bnyro/clock/ui/screens/StopwatchScreen.kt @@ -95,7 +95,7 @@ fun StopwatchScreen(stopwatchModel: StopwatchModel) { } Row( modifier = Modifier - .padding(bottom = 24.dp), + .padding(bottom = 16.dp), horizontalArrangement = Arrangement.Center ) { AnimatedVisibility(stopwatchModel.scheduledObject.state.value == WatchState.RUNNING) { From a516900e37d39bd0f2d985c50663ad3fe0423ba1 Mon Sep 17 00:00:00 2001 From: M00NJ Date: Mon, 17 Jul 2023 13:32:50 +0200 Subject: [PATCH 4/5] UI fixes and improvements --- .../bnyro/clock/ui/components/NumberKeypad.kt | 35 +++++++++++-------- .../java/com/bnyro/clock/ui/nav/NavRoutes.kt | 6 ++-- .../com/bnyro/clock/ui/screens/ClockScreen.kt | 7 ++-- .../bnyro/clock/ui/screens/StopwatchScreen.kt | 17 ++++----- 4 files changed, 35 insertions(+), 30 deletions(-) diff --git a/app/src/main/java/com/bnyro/clock/ui/components/NumberKeypad.kt b/app/src/main/java/com/bnyro/clock/ui/components/NumberKeypad.kt index be9df31f..fcb19684 100644 --- a/app/src/main/java/com/bnyro/clock/ui/components/NumberKeypad.kt +++ b/app/src/main/java/com/bnyro/clock/ui/components/NumberKeypad.kt @@ -10,9 +10,11 @@ import androidx.compose.material.icons.filled.Backspace import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text +import androidx.compose.material3.surfaceColorAtElevation import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalView import androidx.compose.ui.res.stringResource @@ -32,6 +34,7 @@ fun NumberKeypad( val buttonSize = (screenHeight / 8).dp val buttonSpacing = 6.dp + val buttonColor = MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp) Column( verticalArrangement = Arrangement.spacedBy(buttonSpacing) @@ -39,29 +42,29 @@ fun NumberKeypad( Row( horizontalArrangement = Arrangement.spacedBy(buttonSpacing) ) { - Button(number = "1", buttonSize, onOperation) - Button(number = "2", buttonSize, onOperation) - Button(number = "3", buttonSize, onOperation) + Button(number = "1", buttonSize, buttonColor, onOperation) + Button(number = "2", buttonSize, buttonColor, onOperation) + Button(number = "3", buttonSize, buttonColor, onOperation) } Row( horizontalArrangement = Arrangement.spacedBy(buttonSpacing) ) { - Button(number = "4", buttonSize, onOperation) - Button(number = "5", buttonSize, onOperation) - Button(number = "6", buttonSize, onOperation) + Button(number = "4", buttonSize, buttonColor, onOperation) + Button(number = "5", buttonSize, buttonColor, onOperation) + Button(number = "6", buttonSize, buttonColor, onOperation) } Row( horizontalArrangement = Arrangement.spacedBy(buttonSpacing) ) { - Button(number = "7", buttonSize, onOperation) - Button(number = "8", buttonSize, onOperation) - Button(number = "9", buttonSize, onOperation) + Button(number = "7", buttonSize, buttonColor, onOperation) + Button(number = "8", buttonSize, buttonColor, onOperation) + Button(number = "9", buttonSize, buttonColor, onOperation) } Row( horizontalArrangement = Arrangement.spacedBy(buttonSpacing) ) { - Button(number = "00", buttonSize, onOperation) - Button(number = "0", buttonSize, onOperation) + Button(number = "00", buttonSize, buttonColor, onOperation) + Button(number = "0", buttonSize, buttonColor, onOperation) SingleElementButton( onClick = { coroutineScope.launch { @@ -77,13 +80,13 @@ fun NumberKeypad( onOperation(NumberKeypadOperation.Clear) }, - color = MaterialTheme.colorScheme.primaryContainer, + color = MaterialTheme.colorScheme.secondaryContainer, modifier = Modifier.size(buttonSize) ) { Icon( imageVector = Icons.Default.Backspace, contentDescription = stringResource(R.string.delete), - tint = MaterialTheme.colorScheme.onPrimaryContainer + tint = MaterialTheme.colorScheme.onSecondaryContainer ) } } @@ -94,6 +97,7 @@ fun NumberKeypad( fun Button( number: String, buttonSize: Dp, + buttonColor: Color, onOperation: (NumberKeypadOperation) -> Unit ) { val view = LocalView.current @@ -107,12 +111,13 @@ fun Button( onOperation(NumberKeypadOperation.AddNumber(number)) }, - modifier = Modifier.size(buttonSize) + modifier = Modifier.size(buttonSize), + color = buttonColor ) { Text( text = number, color = MaterialTheme.colorScheme.onSurface, - fontSize = MaterialTheme.typography.headlineLarge.fontSize + fontSize = MaterialTheme.typography.displaySmall.fontSize ) } } diff --git a/app/src/main/java/com/bnyro/clock/ui/nav/NavRoutes.kt b/app/src/main/java/com/bnyro/clock/ui/nav/NavRoutes.kt index 233eb595..cd9f8508 100644 --- a/app/src/main/java/com/bnyro/clock/ui/nav/NavRoutes.kt +++ b/app/src/main/java/com/bnyro/clock/ui/nav/NavRoutes.kt @@ -6,7 +6,7 @@ import androidx.compose.material.icons.filled.Alarm import androidx.compose.material.icons.filled.AvTimer import androidx.compose.material.icons.filled.Schedule import androidx.compose.material.icons.filled.Settings -import androidx.compose.material.icons.filled.Timer +import androidx.compose.material.icons.outlined.Timer import androidx.compose.ui.graphics.vector.ImageVector import com.bnyro.clock.R @@ -17,7 +17,7 @@ sealed class NavRoutes( ) { object Clock : NavRoutes("clock", R.string.clock, Icons.Default.Schedule) object Alarm : NavRoutes("alarm", R.string.alarm, Icons.Default.Alarm) - object Timer : NavRoutes("timer", R.string.timer, Icons.Default.Timer) - object Stopwatch : NavRoutes("stopwatch", R.string.stopwatch, Icons.Default.AvTimer) + object Timer : NavRoutes("timer", R.string.timer, Icons.Default.AvTimer) + object Stopwatch : NavRoutes("stopwatch", R.string.stopwatch, Icons.Outlined.Timer) object Settings : NavRoutes("settings", R.string.settings, Icons.Default.Settings) } diff --git a/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt b/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt index b77f4c0e..5c17766d 100644 --- a/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt +++ b/app/src/main/java/com/bnyro/clock/ui/screens/ClockScreen.kt @@ -50,13 +50,12 @@ fun ClockScreen(clockModel: ClockModel) { ) { Column( modifier = Modifier - .padding(horizontal = 25.dp, vertical = 30.dp) + .padding(horizontal = 28.dp, vertical = 28.dp) ) { val (date, time) = TimeHelper.formatDateTime(clockModel.currentDate) Text( text = time, - style = MaterialTheme.typography.headlineLarge, - fontSize = 40.sp + style = MaterialTheme.typography.displayMedium ) Text( text = date, @@ -87,7 +86,7 @@ fun ClockScreen(clockModel: ClockModel) { ) { Column( modifier = Modifier - .padding(horizontal = 25.dp, vertical = 20.dp) + .padding(horizontal = 24.dp, vertical = 24.dp) ) { Text( text = timeZone.displayName.uppercase(), diff --git a/app/src/main/java/com/bnyro/clock/ui/screens/StopwatchScreen.kt b/app/src/main/java/com/bnyro/clock/ui/screens/StopwatchScreen.kt index be070fec..b8fce13b 100644 --- a/app/src/main/java/com/bnyro/clock/ui/screens/StopwatchScreen.kt +++ b/app/src/main/java/com/bnyro/clock/ui/screens/StopwatchScreen.kt @@ -45,8 +45,8 @@ fun StopwatchScreen(stopwatchModel: StopwatchModel) { ) { Box( modifier = Modifier - .size(250.dp) - .border(2.dp, MaterialTheme.colorScheme.outlineVariant, CircleShape), + .size(320.dp) + .border(8.dp, MaterialTheme.colorScheme.surfaceVariant, CircleShape), contentAlignment = Alignment.Center ) { Row( @@ -58,16 +58,17 @@ fun StopwatchScreen(stopwatchModel: StopwatchModel) { Text( text = minutes.toString(), - style = MaterialTheme.typography.headlineLarge + style = MaterialTheme.typography.displayLarge ) - Spacer(modifier = Modifier.width(5.dp)) + Spacer(modifier = Modifier.width(6.dp)) Text( text = seconds.addZero(), - style = MaterialTheme.typography.headlineLarge + style = MaterialTheme.typography.displayLarge ) - Spacer(modifier = Modifier.width(5.dp)) + Spacer(modifier = Modifier.width(6.dp)) Text( - text = hundreds.addZero() + text = hundreds.addZero(), + style = MaterialTheme.typography.headlineMedium ) } } @@ -84,7 +85,7 @@ fun StopwatchScreen(stopwatchModel: StopwatchModel) { Row( modifier = Modifier .fillMaxWidth(0.6f) - .padding(vertical = 5.dp), + .padding(vertical = 6.dp), horizontalArrangement = Arrangement.SpaceBetween ) { Text("#${index + 1}") From 87f619e5fc20dd1a26ec2e92fefdd6dcb1cc4397 Mon Sep 17 00:00:00 2001 From: M00NJ Date: Mon, 17 Jul 2023 13:32:50 +0200 Subject: [PATCH 5/5] Add material colors to keypad the right way --- .idea/gradle.xml | 2 +- .../bnyro/clock/ui/components/NumberKeypad.kt | 27 +++++++++---------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/.idea/gradle.xml b/.idea/gradle.xml index a0de2a15..ae388c2a 100644 --- a/.idea/gradle.xml +++ b/.idea/gradle.xml @@ -7,7 +7,7 @@