From 2697826a5a4c13b83e54c9bf1129c1506f4f72a1 Mon Sep 17 00:00:00 2001 From: odaridavid Date: Sun, 10 Mar 2024 01:24:22 +0100 Subject: [PATCH] follow a design system approach for components and values --- README.md | 78 ++++++++++++++++--- .../weatherapp/common/AndroidExtensions.kt | 2 +- .../designsystem/{theme => }/Theme.kt | 22 +++++- .../designsystem/{theme => atom}/Color.kt | 2 +- .../designsystem/atom/Dimensions.kt | 22 ++++++ .../designsystem/{theme => atom}/Shape.kt | 2 +- .../designsystem/{theme => atom}/Type.kt | 4 +- .../designsystem/{ => molecule}/Buttons.kt | 10 +-- .../designsystem/{ => molecule}/Image.kt | 7 +- .../designsystem/{ => molecule}/Text.kt | 24 +++--- .../designsystem/{ => organism}/Dialogs.kt | 13 +++- .../designsystem/{ => organism}/NavBars.kt | 19 +++-- .../designsystem/{ => organism}/Row.kt | 14 ++-- .../{ => templates}/InfoScreens.kt | 12 +-- .../{ => templates}/ProgressScreens.kt | 11 ++- .../odaridavid/weatherapp/ui/MainActivity.kt | 10 +-- .../weatherapp/ui/about/AboutScreen.kt | 2 +- .../weatherapp/ui/home/HomeScreen.kt | 38 ++++----- .../weatherapp/ui/settings/SettingsScreen.kt | 16 ++-- 19 files changed, 210 insertions(+), 98 deletions(-) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{theme => }/Theme.kt (50%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{theme => atom}/Color.kt (75%) create mode 100644 app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Dimensions.kt rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{theme => atom}/Shape.kt (86%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{theme => atom}/Type.kt (97%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{ => molecule}/Buttons.kt (83%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{ => molecule}/Image.kt (84%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{ => molecule}/Text.kt (81%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{ => organism}/Dialogs.kt (89%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{ => organism}/NavBars.kt (72%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{ => organism}/Row.kt (73%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{ => templates}/InfoScreens.kt (72%) rename app/src/main/java/com/github/odaridavid/weatherapp/designsystem/{ => templates}/ProgressScreens.kt (64%) diff --git a/README.md b/README.md index 4920c95..fdd9228 100644 --- a/README.md +++ b/README.md @@ -79,11 +79,11 @@ The folders are split into 4 boundaries: the screen state a bit more predictable and it's easier to scan through what actions are possible from a given screen. - The screen state e.g ```HomeScreenViewState``` is also modelled as a class with immutable - properties and makes state management way easier by reducing the state whenever their is a new - update received. - Some design patterns that can be seen here are the Observer pattern when consuming the flow -> - state flows in the composables and provides a reactive app. +The screen state e.g ```HomeScreenViewState``` is also modelled as a class with immutable +properties and makes state management way easier by reducing the state whenever their is a new +update received. +Some design patterns that can be seen here are the Observer pattern when consuming the flow -> +state flows in the composables and provides a reactive app. ![Add flow diagram here](/docs/MVI.png) @@ -91,9 +91,9 @@ The folders are split into 4 boundaries:
Testing - The data layer is unit tested by mocking out external dependencies and the ui layer on the - viewmodels, an integration test is written that makes use of fake,so as to mimic the real scenario - as much as possible over using mocks, which would also turn it to a unit test. +The data layer is unit tested by mocking out external dependencies and the ui layer on the +viewmodels, an integration test is written that makes use of fake,so as to mimic the real scenario +as much as possible over using mocks, which would also turn it to a unit test.
# Other Stuff 📦 @@ -119,9 +119,65 @@ dependency updates and running code quality checks ,defined in the `.github/work *Design System* -``` -TBD -``` +Under the `designsystem` package ,it follows a tiered approach to styling the app i.e +
+Atoms (Smallest Components) +Typography: +Define font styles, sizes, and weights for headers, paragraphs, and other text elements. + +Color Palette: +Establish a color palette with primary, secondary, and accent colors. Specify their usage in +different contexts. + +Icons: +Design a set of basic icons that represent common actions or concepts. Ensure consistency in style +and sizing. + +Buttons: +Create button styles with variations for primary, secondary, and tertiary actions. Include states +like hover and disabled. + +Input Fields: +Design consistent styles for text inputs, checkboxes, radio buttons, and other form elements. +
+
+Molecules (Simple Components) +Form Elements: +Combine atoms to create complete form components. Ensure consistency in spacing and alignment. + +Cards: +Combine text, images, and buttons to create card components. Define variations for different use cases. + +Badges: +Assemble icons and text to create badge components for notifications or status indicators. + +Avatars: +Design avatar components for user profiles, incorporating images or initials. +
+
+Organisms (Complex Components) +Navigation Bars: +Create a consistent navigation bar design that includes menus, icons, and navigation elements. + +Headers and Footers: +Define headers and footers with appropriate spacing, logos, and navigation links. + +Lists: +Assemble atoms and molecules to create list components, incorporating variations like simple lists, +detailed lists, and nested lists. + +Modals: +Design modal components for overlays or pop-ups, ensuring consistency in styles and behavior. +
+
+Templates (Page-Level Structures) +Page Layouts: +Establish consistent layouts for different types of pages (e.g., home page, product page, settings +page). + +Grid Systems: +Define grid systems that ensure alignment and consistency across various screen sizes. +
*Performance* diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/common/AndroidExtensions.kt b/app/src/main/java/com/github/odaridavid/weatherapp/common/AndroidExtensions.kt index 3866257..97d9e83 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/common/AndroidExtensions.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/common/AndroidExtensions.kt @@ -12,7 +12,7 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.core.content.ContextCompat -import com.github.odaridavid.weatherapp.designsystem.PermissionRationaleDialog +import com.github.odaridavid.weatherapp.designsystem.organism.PermissionRationaleDialog import java.util.Locale private const val NO_OF_ADDRESSES = 1 diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Theme.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Theme.kt similarity index 50% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Theme.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Theme.kt index fa9f5f0..a3b427c 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Theme.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Theme.kt @@ -1,4 +1,4 @@ -package com.github.odaridavid.weatherapp.designsystem.theme +package com.github.odaridavid.weatherapp.designsystem import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material.MaterialTheme @@ -6,6 +6,16 @@ import androidx.compose.material.darkColors import androidx.compose.material.lightColors import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color +import com.github.odaridavid.weatherapp.designsystem.atom.Dimensions +import com.github.odaridavid.weatherapp.designsystem.atom.LocalDimens +import com.github.odaridavid.weatherapp.designsystem.atom.LocalWeight +import com.github.odaridavid.weatherapp.designsystem.atom.Weight +import com.github.odaridavid.weatherapp.designsystem.atom.pink200 +import com.github.odaridavid.weatherapp.designsystem.atom.pink500 +import com.github.odaridavid.weatherapp.designsystem.atom.pink600 +import com.github.odaridavid.weatherapp.designsystem.atom.pinkDarkPrimary +import com.github.odaridavid.weatherapp.designsystem.atom.shapes +import com.github.odaridavid.weatherapp.designsystem.atom.typography private val LightColorPalette = lightColors( primary = pink500, @@ -36,3 +46,13 @@ fun WeatherAppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Compos content = content ) } + +object WeatherAppTheme { + val dimens: Dimensions + @Composable + get() = LocalDimens.current + + val weight: Weight + @Composable + get() = LocalWeight.current +} diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Color.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Color.kt similarity index 75% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Color.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Color.kt index 0151afb..df54387 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Color.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Color.kt @@ -1,4 +1,4 @@ -package com.github.odaridavid.weatherapp.designsystem.theme +package com.github.odaridavid.weatherapp.designsystem.atom import androidx.compose.ui.graphics.Color diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Dimensions.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Dimensions.kt new file mode 100644 index 0000000..f612e38 --- /dev/null +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Dimensions.kt @@ -0,0 +1,22 @@ +package com.github.odaridavid.weatherapp.designsystem.atom + +import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.unit.dp + +object Dimensions { + val none = 0.dp + val extraSmall = 4.dp + val small = 8.dp + val medium = 16.dp + val large = 24.dp + val extraLarge = 32.dp +} + +object Weight{ + val none = 0f + val half = 0.5f + val full = 1f +} + +val LocalDimens = staticCompositionLocalOf { Dimensions } +val LocalWeight = staticCompositionLocalOf { Weight } \ No newline at end of file diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Shape.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Shape.kt similarity index 86% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Shape.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Shape.kt index b74ca7c..ba53bb5 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Shape.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Shape.kt @@ -1,4 +1,4 @@ -package com.github.odaridavid.weatherapp.designsystem.theme +package com.github.odaridavid.weatherapp.designsystem.atom import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Shapes diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Type.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Type.kt similarity index 97% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Type.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Type.kt index f6250b9..8604c32 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/theme/Type.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/atom/Type.kt @@ -1,7 +1,7 @@ -package com.github.odaridavid.weatherapp.designsystem.theme +package com.github.odaridavid.weatherapp.designsystem.atom -import androidx.compose.ui.text.TextStyle import androidx.compose.material.Typography +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.Font import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Buttons.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/molecule/Buttons.kt similarity index 83% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Buttons.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/molecule/Buttons.kt index 0db75ca..d398b2f 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Buttons.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/molecule/Buttons.kt @@ -1,9 +1,7 @@ -package com.github.odaridavid.weatherapp.designsystem +package com.github.odaridavid.weatherapp.designsystem.molecule import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.selection.selectable import androidx.compose.material.Button import androidx.compose.material.ButtonDefaults @@ -14,8 +12,8 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource -import androidx.compose.ui.unit.dp import com.github.odaridavid.weatherapp.R +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme @Composable fun ConfirmButton( @@ -44,7 +42,7 @@ fun SettingOptionRadioButton( ) { Row( Modifier - .padding(16.dp) + .padding(WeatherAppTheme.dimens.medium) .selectable( selected = (text == selectedOption), onClick = { onOptionSelected(text) } @@ -55,6 +53,6 @@ fun SettingOptionRadioButton( selected = (text == selectedOption), onClick = null ) - Body(text = text, modifier = Modifier.padding(start = 8.dp)) + Body(text = text, modifier = Modifier.padding(start = WeatherAppTheme.dimens.small)) } } diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Image.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/molecule/Image.kt similarity index 84% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Image.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/molecule/Image.kt index bbca138..cd3d24a 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Image.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/molecule/Image.kt @@ -1,4 +1,4 @@ -package com.github.odaridavid.weatherapp.designsystem +package com.github.odaridavid.weatherapp.designsystem.molecule import androidx.compose.foundation.Image import androidx.compose.foundation.clickable @@ -9,6 +9,9 @@ import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.unit.dp import coil.compose.AsyncImage +// todo check with 48 +private val ICON_SIZE = 40.dp + @Composable fun WeatherIcon(iconUrl: String, contentDescription: String, modifier: Modifier = Modifier) { AsyncImage( @@ -29,7 +32,7 @@ fun IconWithAction( painter = painter, contentDescription = contentDescription, modifier = modifier - .defaultMinSize(40.dp) + .defaultMinSize(ICON_SIZE) .clickable { onClicked() } ) } diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Text.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/molecule/Text.kt similarity index 81% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Text.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/molecule/Text.kt index 3fc1f3d..c5fcce0 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Text.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/molecule/Text.kt @@ -1,4 +1,4 @@ -package com.github.odaridavid.weatherapp.designsystem +package com.github.odaridavid.weatherapp.designsystem.molecule import androidx.annotation.StringRes import androidx.compose.foundation.layout.Column @@ -13,9 +13,8 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.unit.dp import com.github.odaridavid.weatherapp.R -import com.github.odaridavid.weatherapp.core.model.Temperature +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme @Composable fun ErrorTextWithAction( @@ -31,7 +30,7 @@ fun ErrorTextWithAction( Button( onClick = { onTryAgainClicked() }, modifier = Modifier - .padding(16.dp) + .padding(WeatherAppTheme.dimens.medium) .align(Alignment.CenterHorizontally) ) { Text( @@ -44,7 +43,7 @@ fun ErrorTextWithAction( } @Composable -fun Headline(text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified) { +fun Headline(text: String, modifier: Modifier = Modifier) { Text( text = text, modifier = modifier, @@ -57,8 +56,8 @@ fun TemperatureHeadline(temperature: String, modifier: Modifier = Modifier) { Headline( text = temperature, modifier = modifier - .padding(horizontal = 16.dp) - .padding(vertical = 8.dp) + .padding(horizontal = WeatherAppTheme.dimens.medium) + .padding(vertical = WeatherAppTheme.dimens.small) ) } @@ -67,7 +66,10 @@ fun Subtitle(text: String, modifier: Modifier = Modifier, color: Color = Color.U Text( text = text, style = MaterialTheme.typography.subtitle1, - modifier = modifier.padding(horizontal = 16.dp, vertical = 8.dp), + modifier = modifier.padding( + horizontal = WeatherAppTheme.dimens.medium, + vertical = WeatherAppTheme.dimens.small + ), color = color ) } @@ -102,7 +104,7 @@ fun Body(text: String, modifier: Modifier = Modifier, color: Color = Color.Unspe fun Temperature(text: String) { Body( text = text, - modifier = Modifier.padding(4.dp) + modifier = Modifier.padding(WeatherAppTheme.dimens.extraSmall) ) } @@ -110,7 +112,7 @@ fun Temperature(text: String) { fun ForecastedTime(text: String, modifier: Modifier = Modifier) { Body( text = text, - modifier = modifier.padding(4.dp) + modifier = modifier.padding(WeatherAppTheme.dimens.extraSmall) ) } @@ -131,7 +133,7 @@ fun VersionInfoText(versionInfo: String, modifier: Modifier) { text = versionInfo, modifier = modifier .fillMaxWidth() - .padding(16.dp), + .padding(WeatherAppTheme.dimens.medium), textAlign = TextAlign.Center ) } diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Dialogs.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/organism/Dialogs.kt similarity index 89% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Dialogs.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/organism/Dialogs.kt index 7a4d14d..b8b9c67 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Dialogs.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/organism/Dialogs.kt @@ -1,4 +1,4 @@ -package com.github.odaridavid.weatherapp.designsystem +package com.github.odaridavid.weatherapp.designsystem.organism import android.Manifest import androidx.activity.result.ActivityResultLauncher @@ -25,6 +25,13 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Dialog import androidx.constraintlayout.compose.ConstraintLayout import com.github.odaridavid.weatherapp.R +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme +import com.github.odaridavid.weatherapp.designsystem.molecule.ConfirmButton +import com.github.odaridavid.weatherapp.designsystem.molecule.SettingOptionRadioButton + +// TODO Adapt per screen +private val SETTING_DIALOG_MAX_HEIGHT = 200.dp +private val SETTING_DIALOG_MIN_HEIGHT = 0.dp @Composable fun PermissionRationaleDialog( @@ -80,7 +87,7 @@ fun SettingOptionsDialog( val (dialog, confirmButton) = createRefs() LazyColumn( modifier = Modifier - .heightIn(0.dp, 200.dp) + .heightIn(SETTING_DIALOG_MIN_HEIGHT, SETTING_DIALOG_MAX_HEIGHT) .fillMaxWidth() .constrainAs(dialog) { top.linkTo(parent.top, margin = 16.dp) @@ -106,7 +113,7 @@ fun SettingOptionsDialog( Spacer(modifier = Modifier.weight(1f)) ConfirmButton( modifier = Modifier - .padding(16.dp), + .padding(WeatherAppTheme.dimens.medium), onClick = { onConfirm() } diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/NavBars.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/organism/NavBars.kt similarity index 72% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/NavBars.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/organism/NavBars.kt index 4bed173..780dd14 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/NavBars.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/organism/NavBars.kt @@ -1,4 +1,4 @@ -package com.github.odaridavid.weatherapp.designsystem +package com.github.odaridavid.weatherapp.designsystem.organism import androidx.compose.foundation.Image import androidx.compose.foundation.clickable @@ -17,37 +17,42 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import com.github.odaridavid.weatherapp.R +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme +import com.github.odaridavid.weatherapp.designsystem.molecule.IconWithAction +import com.github.odaridavid.weatherapp.designsystem.molecule.MenuHeadline + +private val ICON_SIZE = 40.dp @Composable fun HomeTopBar(cityName: String, onSettingClicked: () -> Unit) { Row( modifier = Modifier - .padding(16.dp) + .padding(WeatherAppTheme.dimens.medium) .fillMaxWidth() ) { Text( text = cityName, style = MaterialTheme.typography.h5 ) - Spacer(modifier = Modifier.weight(1.0f)) + Spacer(modifier = Modifier.weight(WeatherAppTheme.weight.full)) Image( painter = painterResource(id = if (isSystemInDarkTheme()) R.drawable.ic_settings_dark else R.drawable.ic_settings), contentDescription = stringResource(R.string.home_content_description_setting_icon), modifier = Modifier - .defaultMinSize(40.dp) + .defaultMinSize(ICON_SIZE) .clickable { onSettingClicked() } - .padding(8.dp) + .padding(WeatherAppTheme.dimens.small) ) } } @Composable fun TopNavigationBar(onBackButtonClicked: () -> Unit, title: String) { - Row(modifier = Modifier.padding(16.dp)) { + Row(modifier = Modifier.padding(WeatherAppTheme.dimens.medium)) { IconWithAction( painter = painterResource(id = R.drawable.ic_arrow_back), contentDescription = stringResource(R.string.back_button_content_description_icon), - modifier = Modifier.padding(8.dp), + modifier = Modifier.padding(WeatherAppTheme.dimens.small), onClicked = { onBackButtonClicked() } ) diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Row.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/organism/Row.kt similarity index 73% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Row.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/organism/Row.kt index d33f964..d2eb59f 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/Row.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/organism/Row.kt @@ -1,4 +1,4 @@ -package com.github.odaridavid.weatherapp.designsystem +package com.github.odaridavid.weatherapp.designsystem.organism import androidx.annotation.DrawableRes import androidx.compose.foundation.Image @@ -12,7 +12,7 @@ import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource -import androidx.compose.ui.unit.dp +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme @Composable fun SettingOptionRow( @@ -27,25 +27,25 @@ fun SettingOptionRow( modifier = modifier .fillMaxWidth() .clickable { onOptionClicked() } - .padding(16.dp) + .padding(WeatherAppTheme.dimens.medium) ) { Image( painter = painterResource(id = optionIcon), contentDescription = optionIconContentDescription, - modifier = Modifier.padding(8.dp) + modifier = Modifier.padding(WeatherAppTheme.dimens.small) ) Text( text = optionLabel, style = MaterialTheme.typography.subtitle1, - modifier = Modifier.padding(8.dp) + modifier = Modifier.padding(WeatherAppTheme.dimens.small) ) - Spacer(modifier = Modifier.weight(1.0f)) + Spacer(modifier = Modifier.weight(WeatherAppTheme.weight.full)) optionValue?.let { Text( text = it, style = MaterialTheme.typography.body1, - modifier = Modifier.padding(8.dp) + modifier = Modifier.padding(WeatherAppTheme.dimens.small) ) } } diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/InfoScreens.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/templates/InfoScreens.kt similarity index 72% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/InfoScreens.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/templates/InfoScreens.kt index 47f3d93..65284cb 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/InfoScreens.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/templates/InfoScreens.kt @@ -1,4 +1,4 @@ -package com.github.odaridavid.weatherapp.designsystem +package com.github.odaridavid.weatherapp.designsystem.templates import androidx.annotation.StringRes import androidx.compose.foundation.layout.Column @@ -10,24 +10,24 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource -import androidx.compose.ui.unit.dp import com.github.odaridavid.weatherapp.R +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme @Composable fun InfoScreen(@StringRes message: Int) { Column( modifier = Modifier .fillMaxWidth() - .padding(16.dp) + .padding(WeatherAppTheme.dimens.medium) ) { - Spacer(modifier = Modifier.weight(0.5f)) + Spacer(modifier = Modifier.weight(WeatherAppTheme.weight.half)) Text( text = stringResource(message), modifier = Modifier - .padding(16.dp) + .padding(WeatherAppTheme.dimens.medium) .align(Alignment.CenterHorizontally) ) - Spacer(modifier = Modifier.weight(0.5f)) + Spacer(modifier = Modifier.weight(WeatherAppTheme.weight.half)) } } diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/ProgressScreens.kt b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/templates/ProgressScreens.kt similarity index 64% rename from app/src/main/java/com/github/odaridavid/weatherapp/designsystem/ProgressScreens.kt rename to app/src/main/java/com/github/odaridavid/weatherapp/designsystem/templates/ProgressScreens.kt index 1ccd142..58e90fe 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/ProgressScreens.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/designsystem/templates/ProgressScreens.kt @@ -1,25 +1,24 @@ -package com.github.odaridavid.weatherapp.designsystem +package com.github.odaridavid.weatherapp.designsystem.templates import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.CircularProgressIndicator import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme @Composable fun LoadingScreen() { Column(modifier = Modifier.fillMaxSize()) { - Spacer(modifier = Modifier.weight(1.0f)) + Spacer(modifier = Modifier.weight(WeatherAppTheme.weight.full)) CircularProgressIndicator( modifier = Modifier - .padding(16.dp) + .padding(WeatherAppTheme.dimens.medium) .align(Alignment.CenterHorizontally) ) - Spacer(modifier = Modifier.weight(1.0f)) + Spacer(modifier = Modifier.weight(WeatherAppTheme.weight.full)) } } diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/ui/MainActivity.kt b/app/src/main/java/com/github/odaridavid/weatherapp/ui/MainActivity.kt index 58c1f4b..d9549b3 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/ui/MainActivity.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/ui/MainActivity.kt @@ -21,11 +21,11 @@ import com.github.odaridavid.weatherapp.MainViewState import com.github.odaridavid.weatherapp.common.CheckForPermissions import com.github.odaridavid.weatherapp.common.OnPermissionDenied import com.github.odaridavid.weatherapp.common.createLocationRequest -import com.github.odaridavid.weatherapp.designsystem.EnableLocationSettingScreen -import com.github.odaridavid.weatherapp.designsystem.LoadingScreen -import com.github.odaridavid.weatherapp.designsystem.RequiresPermissionsScreen -import com.github.odaridavid.weatherapp.designsystem.UpdateDialog -import com.github.odaridavid.weatherapp.designsystem.theme.WeatherAppTheme +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme +import com.github.odaridavid.weatherapp.designsystem.organism.UpdateDialog +import com.github.odaridavid.weatherapp.designsystem.templates.EnableLocationSettingScreen +import com.github.odaridavid.weatherapp.designsystem.templates.LoadingScreen +import com.github.odaridavid.weatherapp.designsystem.templates.RequiresPermissionsScreen import com.github.odaridavid.weatherapp.ui.update.UpdateManager import com.google.android.gms.location.FusedLocationProviderClient import com.google.android.gms.location.LocationServices diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/ui/about/AboutScreen.kt b/app/src/main/java/com/github/odaridavid/weatherapp/ui/about/AboutScreen.kt index f134c71..fc4e308 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/ui/about/AboutScreen.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/ui/about/AboutScreen.kt @@ -6,7 +6,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import com.github.odaridavid.weatherapp.R -import com.github.odaridavid.weatherapp.designsystem.TopNavigationBar +import com.github.odaridavid.weatherapp.designsystem.organism.TopNavigationBar import com.mikepenz.aboutlibraries.ui.compose.m3.LibrariesContainer @Composable diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/ui/home/HomeScreen.kt b/app/src/main/java/com/github/odaridavid/weatherapp/ui/home/HomeScreen.kt index 7ed6adb..64b1229 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/ui/home/HomeScreen.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/ui/home/HomeScreen.kt @@ -17,20 +17,20 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource -import androidx.compose.ui.unit.dp import com.github.odaridavid.weatherapp.R import com.github.odaridavid.weatherapp.common.getCityName import com.github.odaridavid.weatherapp.core.model.CurrentWeather import com.github.odaridavid.weatherapp.core.model.DailyWeather import com.github.odaridavid.weatherapp.core.model.HourlyWeather -import com.github.odaridavid.weatherapp.designsystem.ErrorTextWithAction -import com.github.odaridavid.weatherapp.designsystem.ForecastedTime -import com.github.odaridavid.weatherapp.designsystem.LoadingScreen -import com.github.odaridavid.weatherapp.designsystem.Subtitle -import com.github.odaridavid.weatherapp.designsystem.Temperature -import com.github.odaridavid.weatherapp.designsystem.TemperatureHeadline -import com.github.odaridavid.weatherapp.designsystem.HomeTopBar -import com.github.odaridavid.weatherapp.designsystem.WeatherIcon +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme +import com.github.odaridavid.weatherapp.designsystem.molecule.ErrorTextWithAction +import com.github.odaridavid.weatherapp.designsystem.molecule.ForecastedTime +import com.github.odaridavid.weatherapp.designsystem.molecule.Subtitle +import com.github.odaridavid.weatherapp.designsystem.molecule.Temperature +import com.github.odaridavid.weatherapp.designsystem.molecule.TemperatureHeadline +import com.github.odaridavid.weatherapp.designsystem.molecule.WeatherIcon +import com.github.odaridavid.weatherapp.designsystem.organism.HomeTopBar +import com.github.odaridavid.weatherapp.designsystem.templates.LoadingScreen @Composable fun HomeScreen( @@ -73,14 +73,14 @@ fun HomeScreen( @Composable private fun ColumnScope.ErrorScreen(errorMsgId: Int, onTryAgainClicked: () -> Unit) { - Spacer(modifier = Modifier.weight(0.5f)) + Spacer(modifier = Modifier.weight(WeatherAppTheme.weight.half)) ErrorTextWithAction( errorMessageId = errorMsgId, - modifier = Modifier.padding(16.dp) + modifier = Modifier.padding(WeatherAppTheme.dimens.medium) ) { onTryAgainClicked() } - Spacer(modifier = Modifier.Companion.weight(0.5f)) + Spacer(modifier = Modifier.Companion.weight(WeatherAppTheme.weight.half)) } @Composable @@ -105,7 +105,7 @@ private fun CurrentWeatherWidget(currentWeather: CurrentWeather) { private fun HourlyWeatherWidget(hourlyWeatherList: List) { Subtitle(text = stringResource(id = R.string.home_today_forecast_title)) - LazyRow(modifier = Modifier.padding(16.dp)) { + LazyRow(modifier = Modifier.padding(WeatherAppTheme.dimens.medium)) { items(hourlyWeatherList) { hourlyWeather -> HourlyWeatherRow( hourlyWeather = hourlyWeather, @@ -122,12 +122,12 @@ private fun HourlyWeatherRow(hourlyWeather: HourlyWeather, modifier: Modifier) { iconUrl = hourlyWeather.weather.first().icon, contentDescription = hourlyWeather.weather.first().description, modifier = Modifier - .padding(4.dp) + .padding(WeatherAppTheme.dimens.extraSmall) .align(Alignment.CenterVertically), ) Column( modifier = Modifier - .padding(4.dp) + .padding(WeatherAppTheme.dimens.extraSmall) .align(Alignment.CenterVertically) ) { Temperature(text = hourlyWeather.temperature) @@ -141,7 +141,7 @@ private fun HourlyWeatherRow(hourlyWeather: HourlyWeather, modifier: Modifier) { private fun DailyWeatherWidget(dailyWeatherList: List) { Subtitle(text = stringResource(id = R.string.home_weekly_forecast_title)) - LazyColumn(modifier = Modifier.padding(16.dp)) { + LazyColumn(modifier = Modifier.padding(WeatherAppTheme.dimens.medium)) { items(dailyWeatherList) { dailyWeather -> DailyWeatherRow(dailyWeather = dailyWeather, modifier = Modifier.animateItemPlacement()) } @@ -152,14 +152,14 @@ private fun DailyWeatherWidget(dailyWeatherList: List) { private fun DailyWeatherRow(dailyWeather: DailyWeather, modifier: Modifier) { Row( modifier = modifier - .padding(8.dp) + .padding(WeatherAppTheme.dimens.small) .fillMaxWidth() ) { WeatherIcon( iconUrl = dailyWeather.weather.first().icon, contentDescription = dailyWeather.weather.first().description, modifier = Modifier - .padding(4.dp) + .padding(WeatherAppTheme.dimens.extraSmall) .align(Alignment.CenterVertically), ) ForecastedTime( @@ -167,7 +167,7 @@ private fun DailyWeatherRow(dailyWeather: DailyWeather, modifier: Modifier) { modifier = Modifier .align(Alignment.CenterVertically) ) - Spacer(modifier = Modifier.weight(1.0f)) + Spacer(modifier = Modifier.weight(WeatherAppTheme.weight.full)) Column(modifier = Modifier.align(Alignment.CenterVertically)) { Temperature( text = stringResource( diff --git a/app/src/main/java/com/github/odaridavid/weatherapp/ui/settings/SettingsScreen.kt b/app/src/main/java/com/github/odaridavid/weatherapp/ui/settings/SettingsScreen.kt index 0dad5a8..8f29e2d 100644 --- a/app/src/main/java/com/github/odaridavid/weatherapp/ui/settings/SettingsScreen.kt +++ b/app/src/main/java/com/github/odaridavid/weatherapp/ui/settings/SettingsScreen.kt @@ -10,13 +10,13 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource -import androidx.compose.ui.unit.dp import com.github.odaridavid.weatherapp.R -import com.github.odaridavid.weatherapp.designsystem.SettingOptionRadioButton -import com.github.odaridavid.weatherapp.designsystem.SettingOptionRow -import com.github.odaridavid.weatherapp.designsystem.SettingOptionsDialog -import com.github.odaridavid.weatherapp.designsystem.TopNavigationBar -import com.github.odaridavid.weatherapp.designsystem.VersionInfoText +import com.github.odaridavid.weatherapp.designsystem.WeatherAppTheme +import com.github.odaridavid.weatherapp.designsystem.molecule.SettingOptionRadioButton +import com.github.odaridavid.weatherapp.designsystem.molecule.VersionInfoText +import com.github.odaridavid.weatherapp.designsystem.organism.SettingOptionRow +import com.github.odaridavid.weatherapp.designsystem.organism.SettingOptionsDialog +import com.github.odaridavid.weatherapp.designsystem.organism.TopNavigationBar @Composable fun SettingsScreen( @@ -128,13 +128,13 @@ fun SettingsScreen( onAboutClicked() } - Spacer(modifier = Modifier.weight(1.0f)) + Spacer(modifier = Modifier.weight(WeatherAppTheme.weight.full)) VersionInfoText( versionInfo = state.versionInfo, modifier = Modifier .fillMaxWidth() - .padding(16.dp) + .padding(WeatherAppTheme.dimens.medium) .align(Alignment.CenterHorizontally), ) }