Skip to content

Commit

Permalink
Initial design system, home screen UI propertype.
Browse files Browse the repository at this point in the history
  • Loading branch information
ychescale9 committed Nov 24, 2023
1 parent 7352541 commit cdfc1dd
Show file tree
Hide file tree
Showing 40 changed files with 1,426 additions and 66 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@ import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.toArgb
import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
import dagger.hilt.android.AndroidEntryPoint
import io.github.reactivecircus.kstreamlined.android.theme.KSTheme
import io.github.reactivecircus.kstreamlined.android.designsystem.foundation.KSTheme
import io.github.reactivecircus.kstreamlined.android.feature.home.HomeScreen

@AndroidEntryPoint
class KSActivity : ComponentActivity() {
Expand All @@ -28,15 +27,12 @@ class KSActivity : ComponentActivity() {
setContent {
KSTheme {
val darkTheme = isSystemInDarkTheme()
val navigationBarColor = MaterialTheme.colorScheme.background.toArgb()
val navigationBarColor = KSTheme.colorScheme.background.toArgb()
LaunchedEffect(darkTheme) {
window.navigationBarColor = navigationBarColor
}

Surface(
modifier = Modifier.fillMaxSize(),
) {
}
HomeScreen(modifier = Modifier.navigationBarsPadding())
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ object AppModule {
fun imageLoader(@ApplicationContext context: Context): ImageLoader {
return ImageLoader.Builder(context)
.crossfade(enable = true)
// TODO default drawables for fallback, error, placeholder
// only enable hardware bitmaps on API 28+. See: https://github.com/coil-kt/coil/issues/159
.allowHardware(enable = Build.VERSION.SDK_INT >= Build.VERSION_CODES.P)
.build()
Expand Down

This file was deleted.

27 changes: 27 additions & 0 deletions android/common-ui/feed/build.gradle.kts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
plugins {
id("kstreamlined.android.library")
id("kstreamlined.android.library.compose")
}

android {
namespace = "io.github.reactivecircus.kstreamlined.android.common.ui.feed"
buildFeatures {
androidResources = true
}
}

androidComponents {
beforeVariants {
@Suppress("UnstableApiUsage")
it.androidTest.enable = false
}
}

dependencies {
implementation(project(":designsystem"))
implementation(project(":kmp:model"))

// Compose
implementation(libs.androidx.compose.foundation)
implementation(libs.androidx.compose.ui.tooling)
}
2 changes: 2 additions & 0 deletions android/common-ui/feed/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest />
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
package io.github.reactivecircus.kstreamlined.android.common.ui.feed

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
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.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import io.github.reactivecircus.kstreamlined.android.designsystem.ThemePreviews
import io.github.reactivecircus.kstreamlined.android.designsystem.component.IconButton
import io.github.reactivecircus.kstreamlined.android.designsystem.component.Surface
import io.github.reactivecircus.kstreamlined.android.designsystem.component.Text
import io.github.reactivecircus.kstreamlined.android.designsystem.foundation.KSTheme
import io.github.reactivecircus.kstreamlined.android.designsystem.foundation.icon.BookmarkAdd
import io.github.reactivecircus.kstreamlined.android.designsystem.foundation.icon.BookmarkFill
import io.github.reactivecircus.kstreamlined.android.designsystem.foundation.icon.KSIcons
import io.github.reactivecircus.kstreamlined.kmp.model.feed.FeedItem

@Composable
public fun KotlinWeeklyCard(
item: FeedItem.KotlinWeekly,
onItemClick: (FeedItem.KotlinWeekly) -> Unit,
onSaveButtonClick: (FeedItem.KotlinWeekly) -> Unit,
modifier: Modifier = Modifier,
) {
Surface(
onClick = { onItemClick(item) },
modifier = modifier.fillMaxWidth(),
shape = RoundedCornerShape(16.dp),
color = KSTheme.colorScheme.primary,
contentColor = KSTheme.colorScheme.onPrimary,
elevation = 4.dp,
) {
Row(
modifier = Modifier.padding(vertical = 24.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Column(
modifier = Modifier
.weight(1f)
.padding(start = 16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
Text(
text = item.title,
style = KSTheme.typography.titleLarge,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
Text(
text = item.publishTime,
style = KSTheme.typography.bodyMedium,
)
}
IconButton(
if (item.savedForLater) {
KSIcons.BookmarkFill
} else {
KSIcons.BookmarkAdd
},
contentDescription = null,
onClick = { onSaveButtonClick(item) },
modifier = Modifier.padding(end = 8.dp),
)
}
}
}

@Composable
@ThemePreviews
private fun PreviewKotlinWeeklyCard_unsaved() {
KSTheme {
Surface {
KotlinWeeklyCard(
item = FeedItem.KotlinWeekly(
id = "1",
title = "Kotlin Weekly #381",
publishTime = "Moments ago",
contentUrl = "contentUrl",
savedForLater = false,
),
onItemClick = {},
onSaveButtonClick = {},
modifier = Modifier.padding(24.dp),
)
}
}
}

@Composable
@ThemePreviews
private fun PreviewKotlinWeeklyCard_saved() {
KSTheme {
Surface {
KotlinWeeklyCard(
item = FeedItem.KotlinWeekly(
id = "1",
title = "Kotlin Weekly #381",
publishTime = "3 hours ago",
contentUrl = "contentUrl",
savedForLater = true,
),
onItemClick = {},
onSaveButtonClick = {},
modifier = Modifier.padding(24.dp),
)
}
}
}
3 changes: 1 addition & 2 deletions android/designsystem/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,5 @@ dependencies {
// Compose
implementation(libs.androidx.compose.material3)
implementation(libs.androidx.compose.foundation)
debugImplementation(libs.androidx.compose.ui.tooling)
implementation(libs.androidx.compose.ui.toolingPreview)
implementation(libs.androidx.compose.ui.tooling)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
package io.github.reactivecircus.kstreamlined.android.designsystem

import android.content.res.Configuration
import androidx.compose.ui.tooling.preview.Preview

@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Light")
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark")
public annotation class ThemePreviews
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
package io.github.reactivecircus.kstreamlined.android.designsystem.component

import androidx.compose.runtime.Composable
import androidx.compose.runtime.NonRestartableComposable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.github.reactivecircus.kstreamlined.android.designsystem.foundation.KSTheme
import androidx.compose.material3.HorizontalDivider as MaterialHorizontalDivider
import androidx.compose.material3.VerticalDivider as MaterialVerticalDivider

@Composable
@NonRestartableComposable
public fun HorizontalDivider(
modifier: Modifier = Modifier,
thickness: Dp = 1.dp,
color: Color = KSTheme.colorScheme.outline,
) {
MaterialHorizontalDivider(
modifier = modifier,
thickness = thickness,
color = color,
)
}

@Composable
@NonRestartableComposable
public fun VerticalDivider(
modifier: Modifier = Modifier,
thickness: Dp = 1.dp,
color: Color = KSTheme.colorScheme.outline,
) {
MaterialVerticalDivider(
modifier = modifier,
thickness = thickness,
color = color,
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*
* Copyright (c) 2022 Woolworths. All rights reserved.
*/

package io.github.reactivecircus.kstreamlined.android.designsystem.component

import androidx.compose.runtime.Composable
import androidx.compose.runtime.NonRestartableComposable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import io.github.reactivecircus.kstreamlined.android.designsystem.foundation.color.LocalContentColor
import androidx.compose.material3.Icon as MaterialIcon

@Composable
@NonRestartableComposable
public fun Icon(
imageVector: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current,
) {
MaterialIcon(
imageVector = imageVector,
contentDescription = contentDescription,
modifier = modifier,
tint = tint,
)
}
Loading

0 comments on commit cdfc1dd

Please sign in to comment.