feat(ui): change clock font and use tabular numbers

Closes: #98
This commit is contained in:
Nishant Mishra
2025-10-31 10:33:43 +05:30
parent 32fbefd3a0
commit c380116299
7 changed files with 51 additions and 32 deletions

View File

@@ -52,7 +52,6 @@ import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalView import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.platform.LocalWindowInfo import androidx.compose.ui.platform.LocalWindowInfo
import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.Density
@@ -65,7 +64,7 @@ import androidx.core.view.WindowInsetsCompat
import androidx.core.view.WindowInsetsControllerCompat import androidx.core.view.WindowInsetsControllerCompat
import androidx.navigation3.ui.LocalNavAnimatedContentScope import androidx.navigation3.ui.LocalNavAnimatedContentScope
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
import org.nsh07.pomodoro.ui.theme.AppFonts.openRundeClock import org.nsh07.pomodoro.ui.theme.AppFonts.interClock
import org.nsh07.pomodoro.ui.theme.TomatoTheme import org.nsh07.pomodoro.ui.theme.TomatoTheme
import org.nsh07.pomodoro.ui.timerScreen.TimerScreen import org.nsh07.pomodoro.ui.timerScreen.TimerScreen
import org.nsh07.pomodoro.ui.timerScreen.viewModel.TimerMode import org.nsh07.pomodoro.ui.timerScreen.viewModel.TimerMode
@@ -249,10 +248,10 @@ fun SharedTransitionScope.AlwaysOnDisplay(
Text( Text(
text = timerState.timeStr, text = timerState.timeStr,
style = TextStyle( style = TextStyle(
fontFamily = openRundeClock, fontFamily = interClock,
fontWeight = FontWeight.Bold,
fontSize = 56.sp, fontSize = 56.sp,
letterSpacing = (-2).sp letterSpacing = (-2).sp,
fontFeatureSettings = "tnum"
), ),
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
color = onSurface, color = onSurface,

View File

@@ -34,13 +34,12 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import org.nsh07.pomodoro.ui.theme.AppFonts.openRundeClock import org.nsh07.pomodoro.ui.theme.AppFonts.interClock
import org.nsh07.pomodoro.ui.theme.CustomColors.listItemColors import org.nsh07.pomodoro.ui.theme.CustomColors.listItemColors
@OptIn(ExperimentalMaterial3ExpressiveApi::class) @OptIn(ExperimentalMaterial3ExpressiveApi::class)
@@ -61,8 +60,7 @@ fun MinuteInputField(
imeAction = imeAction imeAction = imeAction
), ),
textStyle = TextStyle( textStyle = TextStyle(
fontFamily = openRundeClock, fontFamily = interClock,
fontWeight = FontWeight.Bold,
fontSize = 57.sp, fontSize = 57.sp,
letterSpacing = (-2).sp, letterSpacing = (-2).sp,
color = colorScheme.onSurfaceVariant, color = colorScheme.onSurfaceVariant,

View File

@@ -1,8 +1,18 @@
/* /*
* Copyright (c) 2025 Nishant Mishra * Copyright (c) 2025 Nishant Mishra
* *
* You should have received a copy of the GNU General Public License * This file is part of Tomato - a minimalist pomodoro timer for Android.
* along with this program. If not, see <https://www.gnu.org/licenses/>. *
* Tomato is free software: you can redistribute it and/or modify it under the terms of the GNU
* General Public License as published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* Tomato is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
* the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with Tomato.
* If not, see <https://www.gnu.org/licenses/>.
*/ */
package org.nsh07.pomodoro.ui.statsScreen package org.nsh07.pomodoro.ui.statsScreen
@@ -65,7 +75,7 @@ import org.nsh07.pomodoro.BuildConfig
import org.nsh07.pomodoro.R import org.nsh07.pomodoro.R
import org.nsh07.pomodoro.data.Stat import org.nsh07.pomodoro.data.Stat
import org.nsh07.pomodoro.ui.statsScreen.viewModel.StatsViewModel import org.nsh07.pomodoro.ui.statsScreen.viewModel.StatsViewModel
import org.nsh07.pomodoro.ui.theme.AppFonts.openRundeClock import org.nsh07.pomodoro.ui.theme.AppFonts.interClock
import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTopBar import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTopBar
import org.nsh07.pomodoro.ui.theme.TomatoTheme import org.nsh07.pomodoro.ui.theme.TomatoTheme
import org.nsh07.pomodoro.utils.millisecondsToHoursMinutes import org.nsh07.pomodoro.utils.millisecondsToHoursMinutes
@@ -209,7 +219,7 @@ fun StatsScreen(
millisecondsToHoursMinutes(todayStat?.totalFocusTime() ?: 0) millisecondsToHoursMinutes(todayStat?.totalFocusTime() ?: 0)
}, },
style = typography.displaySmall, style = typography.displaySmall,
fontFamily = openRundeClock, fontFamily = interClock,
color = colorScheme.onPrimaryContainer, color = colorScheme.onPrimaryContainer,
maxLines = 1, maxLines = 1,
autoSize = TextAutoSize.StepBased(maxFontSize = typography.displaySmall.fontSize) autoSize = TextAutoSize.StepBased(maxFontSize = typography.displaySmall.fontSize)
@@ -236,7 +246,7 @@ fun StatsScreen(
millisecondsToHoursMinutes(todayStat?.breakTime ?: 0) millisecondsToHoursMinutes(todayStat?.breakTime ?: 0)
}, },
style = typography.displaySmall, style = typography.displaySmall,
fontFamily = openRundeClock, fontFamily = interClock,
color = colorScheme.onTertiaryContainer, color = colorScheme.onTertiaryContainer,
maxLines = 1, maxLines = 1,
autoSize = TextAutoSize.StepBased(maxFontSize = typography.displaySmall.fontSize) autoSize = TextAutoSize.StepBased(maxFontSize = typography.displaySmall.fontSize)
@@ -270,7 +280,7 @@ fun StatsScreen(
} }
), ),
style = typography.displaySmall, style = typography.displaySmall,
fontFamily = openRundeClock fontFamily = interClock
) )
Text( Text(
stringResource(R.string.focus_per_day_avg), stringResource(R.string.focus_per_day_avg),
@@ -346,7 +356,7 @@ fun StatsScreen(
} }
), ),
style = typography.displaySmall, style = typography.displaySmall,
fontFamily = openRundeClock fontFamily = interClock
) )
Text( Text(
text = stringResource(R.string.focus_per_day_avg), text = stringResource(R.string.focus_per_day_avg),
@@ -423,7 +433,7 @@ fun StatsScreen(
} }
), ),
style = typography.displaySmall, style = typography.displaySmall,
fontFamily = openRundeClock fontFamily = interClock
) )
Text( Text(
text = stringResource(R.string.focus_per_day_avg), text = stringResource(R.string.focus_per_day_avg),

View File

@@ -1,8 +1,18 @@
/* /*
* Copyright (c) 2025 Nishant Mishra * Copyright (c) 2025 Nishant Mishra
* *
* You should have received a copy of the GNU General Public License * This file is part of Tomato - a minimalist pomodoro timer for Android.
* along with this program. If not, see <https://www.gnu.org/licenses/>. *
* Tomato is free software: you can redistribute it and/or modify it under the terms of the GNU
* General Public License as published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* Tomato is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
* the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with Tomato.
* If not, see <https://www.gnu.org/licenses/>.
*/ */
package org.nsh07.pomodoro.ui.theme package org.nsh07.pomodoro.ui.theme
@@ -12,6 +22,7 @@ import androidx.compose.ui.text.ExperimentalTextApi
import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontVariation import androidx.compose.ui.text.font.FontVariation
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
@@ -48,12 +59,17 @@ val Typography = Typography(
) )
) )
@OptIn(ExperimentalTextApi::class)
object AppFonts { object AppFonts {
val openRundeClock = FontFamily( val interClock = FontFamily(
Font(R.font.open_runde_bold_clock_only, FontWeight.Bold) Font(
R.font.inter_variable, variationSettings = FontVariation.Settings(
FontWeight.Bold,
FontStyle.Italic
)
)
) )
@OptIn(ExperimentalTextApi::class)
val robotoFlexTopBar = FontFamily( val robotoFlexTopBar = FontFamily(
Font( Font(
R.font.roboto_flex_variable, R.font.roboto_flex_variable,
@@ -73,7 +89,6 @@ object AppFonts {
) )
) )
@OptIn(ExperimentalTextApi::class)
val robotoFlexHeadline = FontFamily( val robotoFlexHeadline = FontFamily(
Font( Font(
R.font.roboto_flex_variable, R.font.roboto_flex_variable,
@@ -85,7 +100,6 @@ object AppFonts {
) )
) )
@OptIn(ExperimentalTextApi::class)
val robotoFlexTitle = FontFamily( val robotoFlexTitle = FontFamily(
Font( Font(
R.font.roboto_flex_variable, R.font.roboto_flex_variable,

View File

@@ -87,7 +87,6 @@ import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Devices import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
@@ -95,7 +94,7 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import androidx.navigation3.ui.LocalNavAnimatedContentScope import androidx.navigation3.ui.LocalNavAnimatedContentScope
import org.nsh07.pomodoro.R import org.nsh07.pomodoro.R
import org.nsh07.pomodoro.ui.theme.AppFonts.openRundeClock import org.nsh07.pomodoro.ui.theme.AppFonts.interClock
import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTopBar import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTopBar
import org.nsh07.pomodoro.ui.theme.TomatoTheme import org.nsh07.pomodoro.ui.theme.TomatoTheme
import org.nsh07.pomodoro.ui.timerScreen.viewModel.TimerAction import org.nsh07.pomodoro.ui.timerScreen.viewModel.TimerAction
@@ -283,10 +282,10 @@ fun SharedTransitionScope.TimerScreen(
Text( Text(
text = timerState.timeStr, text = timerState.timeStr,
style = TextStyle( style = TextStyle(
fontFamily = openRundeClock, fontFamily = interClock,
fontWeight = FontWeight.Bold,
fontSize = 72.sp, fontSize = 72.sp,
letterSpacing = (-2).sp letterSpacing = (-2).sp,
fontFeatureSettings = "tnum"
), ),
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
maxLines = 1, maxLines = 1,
@@ -308,7 +307,7 @@ fun SharedTransitionScope.TimerScreen(
timerState.currentFocusCount, timerState.currentFocusCount,
timerState.totalFocusCount timerState.totalFocusCount
), ),
fontFamily = openRundeClock, fontFamily = interClock,
style = typography.titleLarge, style = typography.titleLarge,
color = colorScheme.outline color = colorScheme.outline
) )
@@ -498,8 +497,7 @@ fun SharedTransitionScope.TimerScreen(
Text( Text(
it, it,
style = TextStyle( style = TextStyle(
fontFamily = openRundeClock, fontFamily = interClock,
fontWeight = FontWeight.Bold,
fontSize = 22.sp, fontSize = 22.sp,
lineHeight = 28.sp, lineHeight = 28.sp,
color = if (timerState.nextTimerMode == TimerMode.FOCUS) colorScheme.primary else colorScheme.tertiary, color = if (timerState.nextTimerMode == TimerMode.FOCUS) colorScheme.primary else colorScheme.tertiary,

Binary file not shown.