Skip to content

Commit

Permalink
Merge pull request #45 from zurdus/top-app-bar
Browse files Browse the repository at this point in the history
Introduce TopAppBar component
  • Loading branch information
hrach authored Nov 2, 2021
2 parents 885650c + d75035b commit 0124fdb
Show file tree
Hide file tree
Showing 8 changed files with 152 additions and 208 deletions.
17 changes: 2 additions & 15 deletions catalog/src/main/java/kiwi/orbit/compose/catalog/Screen.kt
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,14 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.google.accompanist.insets.LocalWindowInsets
import com.google.accompanist.insets.rememberInsetsPaddingValues
import kiwi.orbit.compose.catalog.components.Scaffold
import kiwi.orbit.compose.catalog.components.TopAppBar
import kiwi.orbit.compose.ui.OrbitTheme
import kiwi.orbit.compose.ui.controls.Icon
import kiwi.orbit.compose.ui.controls.IconButton
import kiwi.orbit.compose.ui.controls.Text
import kiwi.orbit.compose.ui.controls.TopAppBar

@Composable
fun Screen(
Expand All @@ -28,16 +24,7 @@ fun Screen(
topBar = {
TopAppBar(
title = { Text(text = title) },
contentPadding = rememberInsetsPaddingValues(
insets = LocalWindowInsets.current.statusBars,
),
navigationIcon = {
IconButton(
onClick = onUpClick,
) {
Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = null)
}
},
onBack = onUpClick,
)
},
content = {
Expand Down
187 changes: 0 additions & 187 deletions catalog/src/main/java/kiwi/orbit/compose/catalog/components/AppBar.kt

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,16 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import com.google.accompanist.insets.LocalWindowInsets
import com.google.accompanist.insets.navigationBarsPadding
import com.google.accompanist.insets.rememberInsetsPaddingValues
import kiwi.orbit.compose.catalog.MainActions
import kiwi.orbit.compose.catalog.components.Scaffold
import kiwi.orbit.compose.catalog.components.TopAppBar
import kiwi.orbit.compose.icons.Icons
import kiwi.orbit.compose.ui.OrbitTheme
import kiwi.orbit.compose.ui.controls.Card
import kiwi.orbit.compose.ui.controls.Icon
import kiwi.orbit.compose.ui.controls.IconButton
import kiwi.orbit.compose.ui.controls.Text
import kiwi.orbit.compose.ui.controls.TopAppBar
import androidx.compose.material.icons.Icons.Rounded as MaterialIcons

@Composable
Expand Down Expand Up @@ -72,9 +70,6 @@ fun MainScreen(
topBar = {
TopAppBar(
title = { Text("Orbit Compose Catalog") },
contentPadding = rememberInsetsPaddingValues(
insets = LocalWindowInsets.current.statusBars,
),
actions = {
IconButton(onClick = onToggleTheme) {
Icon(MaterialIcons.BrightnessMedium, contentDescription = null)
Expand Down
5 changes: 5 additions & 0 deletions ui/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,12 @@ dependencies {
implementation(projects.icons)

implementation(libs.kotlin.stdlib)

implementation(libs.accompanist.insets)
implementation(libs.accompanist.insetsUi)

implementation(libs.androidx.core)

implementation(libs.compose.runtime)
implementation(libs.compose.foundation)
implementation(libs.compose.materialRipple)
Expand Down
119 changes: 119 additions & 0 deletions ui/src/main/java/kiwi/orbit/compose/ui/controls/TopAppBar.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
package kiwi.orbit.compose.ui.controls

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.RowScope
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTag
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.google.accompanist.insets.LocalWindowInsets
import com.google.accompanist.insets.rememberInsetsPaddingValues
import kiwi.orbit.compose.ui.OrbitTheme
import kiwi.orbit.compose.ui.R
import kiwi.orbit.compose.ui.foundation.ContentEmphasis
import kiwi.orbit.compose.ui.foundation.LocalContentEmphasis
import kiwi.orbit.compose.ui.foundation.ProvideMergedTextStyle
import kiwi.orbit.compose.ui.foundation.contentColorFor
import com.google.accompanist.insets.ui.TopAppBar as AccompanistTopAppBar

@Composable
public fun TopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable (() -> Unit)? = null,
actions: @Composable RowScope.() -> Unit = {},
backgroundColor: Color = OrbitTheme.colors.surface.main,
contentColor: Color = contentColorFor(backgroundColor),
elevation: Dp = 2.dp,
) {
AccompanistTopAppBar(
title = {
ProvideMergedTextStyle(
value = OrbitTheme.typography.title2.copy(
fontSize = 20.sp,
letterSpacing = 0.15.sp,
fontWeight = FontWeight.Medium,
)
) {
CompositionLocalProvider(
LocalContentEmphasis provides ContentEmphasis.Normal
) {
Box(
Modifier.semantics(mergeDescendants = true) {
testTag = TopAppBarSemantics.TitleTag
}
) {
title()
}
}
}
},
modifier = modifier.testTag(TopAppBarSemantics.Tag),
navigationIcon = if (navigationIcon != null) {
{
CompositionLocalProvider(
LocalContentEmphasis provides ContentEmphasis.Normal
) {
navigationIcon.invoke()
}
}
} else null,
contentPadding = rememberInsetsPaddingValues(
insets = LocalWindowInsets.current.systemBars,
applyBottom = false
),
actions = actions,
backgroundColor = backgroundColor,
contentColor = contentColor,
elevation = elevation,
)
}

@Composable
public fun TopAppBar(
title: @Composable () -> Unit,
onBack: () -> Unit,
modifier: Modifier = Modifier,
actions: @Composable RowScope.() -> Unit = {},
) {
TopAppBar(
title = title,
modifier = modifier,
navigationIcon = {
IconButton(
onClick = { onBack() },
) {
Icon(
getBackArrowIcon(),
contentDescription = stringResource(R.string.orbit_cd_navigate_up),
)
}
},
actions = actions,
)
}

@Composable
private fun getBackArrowIcon(): Painter {
val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
return painterResource(
if (isRtl) R.drawable.ic_appbar_arrow_right else R.drawable.ic_appbar_arrow_left
)
}

public object TopAppBarSemantics {
public const val Tag: String = "top_app_bar"
public const val TitleTag: String = "title"
}
9 changes: 9 additions & 0 deletions ui/src/main/res/drawable/ic_appbar_arrow_left.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M22,12C22,11.448 21.552,11 21,11L5.83,11L10.71,6.12C11.102,5.728 11.101,5.093 10.708,4.703C10.316,4.314 9.685,4.315 9.295,4.705L2.707,11.293C2.317,11.683 2.317,12.317 2.707,12.707L9.295,19.295C9.684,19.684 10.316,19.684 10.705,19.295C11.095,18.905 11.095,18.274 10.706,17.885L5.83,13L21,13C21.552,13 22,12.552 22,12Z" />
</vector>
Loading

0 comments on commit 0124fdb

Please sign in to comment.