From 32dff0d7528c46a5266c55677a20cf7aecb5bb63 Mon Sep 17 00:00:00 2001 From: Dany Bouca Nova Date: Wed, 22 Mar 2023 00:35:27 +0100 Subject: [PATCH 1/4] Task/aa 2579 create closetopappbar and fix color (#186) * [Button][Preview] - Make preview private * [TopAppBar] - Create GrapesTopAppBarCloseIcon and fix title color * [GrapesTopAppBar] - Add navigation icon tint --- .../grapes/compose/appbar/GrapesTopAppBar.kt | 27 +++++++++++++++++++ .../src/main/res/drawable/ic_close.xml | 9 +++++++ .../src/main/res/values/grapes_strings.xml | 3 ++- 3 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 library-compose/src/main/res/drawable/ic_close.xml diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBar.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBar.kt index 0a2c2f49..ad9ae034 100644 --- a/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBar.kt +++ b/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBar.kt @@ -25,6 +25,7 @@ import com.spendesk.grapes.compose.theme.GrapesTheme * @since 28/12/2022, Wed **/ +// TODO: Create a parameter handling colors = GrapesTopAppBarDefaults.colors() @Composable fun GrapesTopAppBar( title: @Composable () -> Unit, @@ -51,6 +52,7 @@ fun GrapesTopAppBarTitle( Text( modifier = modifier, text = title, + color = GrapesTheme.colors.mainComplementary, maxLines = 2, overflow = TextOverflow.Ellipsis, style = GrapesTheme.typography.titleL, @@ -97,6 +99,19 @@ fun GrapesTopAppBarBackIcon( modifier = modifier.size(24.dp), imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_back), contentDescription = stringResource(id = R.string.grapes_top_app_bar_back_icon_description), + tint = GrapesTheme.colors.mainComplementary + ) +} + +@Composable +fun GrapesTopAppBarCloseIcon( + modifier: Modifier = Modifier, +) { + Icon( + modifier = modifier.size(24.dp), + imageVector = ImageVector.vectorResource(R.drawable.ic_close), + contentDescription = stringResource(id = R.string.grapes_top_app_bar_close_icon_description), + tint = GrapesTheme.colors.mainComplementary ) } @@ -108,6 +123,7 @@ fun GrapesTopAppBarMoreIcon( modifier = modifier.size(24.dp), imageVector = ImageVector.vectorResource(R.drawable.ic_more_vertical), contentDescription = stringResource(id = R.string.grapes_top_app_bar_more_icon_description), + tint = GrapesTheme.colors.mainComplementary ) } @@ -154,6 +170,17 @@ fun GrapesSimpleTopAppBarPreview() { }, ) + GrapesTopAppBar( + modifier = Modifier.fillMaxWidth(), + title = { GrapesTopAppBarTitle(title = "Top app bar title") }, + navigationIcon = { + GrapesTopAppBarIconButton( + icon = { GrapesTopAppBarCloseIcon() }, + onClick = { Log.i("GrapesTopAppBar", "navigationIcon click") } + ) + }, + ) + GrapesTopAppBar( modifier = Modifier .fillMaxWidth(), diff --git a/library-compose/src/main/res/drawable/ic_close.xml b/library-compose/src/main/res/drawable/ic_close.xml new file mode 100644 index 00000000..2271c971 --- /dev/null +++ b/library-compose/src/main/res/drawable/ic_close.xml @@ -0,0 +1,9 @@ + + + diff --git a/library-compose/src/main/res/values/grapes_strings.xml b/library-compose/src/main/res/values/grapes_strings.xml index 23150102..283602e9 100644 --- a/library-compose/src/main/res/values/grapes_strings.xml +++ b/library-compose/src/main/res/values/grapes_strings.xml @@ -1,6 +1,7 @@ + Back + Close More - From ea1b1d481448019ffd8cc54262704c1c029550ad Mon Sep 17 00:00:00 2001 From: Jean-Philippe <112860634+jpbarbaud@users.noreply.github.com> Date: Wed, 22 Mar 2023 16:44:49 +0100 Subject: [PATCH 2/4] feat(compose) Add bucket slot for headline --- .../grapes/compose/bucket/GrapesBucket.kt | 30 ++++++++++++++++++- .../compose/bucket/GrapesBucketHeadline.kt | 2 +- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucket.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucket.kt index 0fc5996b..c7652b31 100644 --- a/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucket.kt +++ b/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucket.kt @@ -28,13 +28,25 @@ fun GrapesBucket( onActionClicked: (() -> Unit)? = null, content: @Composable (() -> Unit)? = null ) { - GrapesBucketCore( + GrapesBucket( modifier = modifier, headline = { GrapesBucketHeadline(title = title, action = action, actionColor = actionColor, onActionClicked = onActionClicked) }, content = content ) } +@Composable +fun GrapesBucket( + modifier: Modifier = Modifier, + headline: @Composable () -> Unit, + content: @Composable (() -> Unit)? = null +) { + GrapesBucketCore( + modifier = modifier, + headline = headline, + content = content, + ) +} // region internal @Composable @@ -86,6 +98,22 @@ private fun GrapesBucketPreview() { modifier = Modifier.padding(12.dp), title = "Grapes Bucket Container Title" ) + + GrapesBucket( + modifier = Modifier.padding(12.dp), + headline = { + GrapesBucketHeadline( + modifier = Modifier.background(Color.Yellow), + title = "Bucket de Rick Astley", + action = "Remove", + actionColor = GrapesTheme.colors.mainAlertNormal) + } + ) { + Column { + Text(text = "Line 1") + Text(text = "Line 2") + } + } } } } diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketHeadline.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketHeadline.kt index cda5f3f6..a73254e7 100644 --- a/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketHeadline.kt +++ b/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketHeadline.kt @@ -24,7 +24,7 @@ import com.spendesk.grapes.compose.theme.GrapesTheme * @since : 06/03/2023, Mon **/ @Composable -internal fun GrapesBucketHeadline( +fun GrapesBucketHeadline( title: String, modifier: Modifier = Modifier, action: String? = null, From 39223e18e0facf76ff83c80c1a9f01f96d6e1b54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9lian=20CLERC?= Date: Wed, 22 Mar 2023 17:00:18 +0100 Subject: [PATCH 3/4] Add `isEnabled` property to grapes select component (#181) --- .../grapes/compose/select/GrapesSelect.kt | 50 ++++++++++++++----- 1 file changed, 38 insertions(+), 12 deletions(-) diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/select/GrapesSelect.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/select/GrapesSelect.kt index 2ee0f4ae..49f40638 100644 --- a/library-compose/src/main/java/com/spendesk/grapes/compose/select/GrapesSelect.kt +++ b/library-compose/src/main/java/com/spendesk/grapes/compose/select/GrapesSelect.kt @@ -1,19 +1,22 @@ package com.spendesk.grapes.compose.select import androidx.compose.animation.animateContentSize +import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.animateIntAsState import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.ArrowDropDown import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExposedDropdownMenuBox -import androidx.compose.material3.ExposedDropdownMenuDefaults +import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -22,6 +25,8 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.rotate +import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.spendesk.grapes.compose.theme.GrapesTheme @@ -42,13 +47,14 @@ fun GrapesSelect( entries: List, onItemSelected: (SelectEntry) -> Unit, placeHolder: String, - modifier: Modifier = Modifier + modifier: Modifier = Modifier, + isEnabled: Boolean = true ) { var isExpanded by remember { mutableStateOf(false) } ExposedDropdownMenuBox( expanded = isExpanded, - onExpandedChange = { isExpanded = !isExpanded }, + onExpandedChange = { if (isEnabled) isExpanded = !isExpanded }, modifier = modifier ) { Select( @@ -56,7 +62,8 @@ fun GrapesSelect( label = selectedEntry?.label ?: placeHolder, modifier = Modifier .menuAnchor() - .animateContentSize() + .animateContentSize(), + isEnabled = isEnabled ) ExposedDropdownMenu( @@ -79,25 +86,43 @@ fun GrapesSelect( @OptIn(ExperimentalMaterial3Api::class) @Composable -private fun Select(isExpanded: Boolean, label: String, modifier: Modifier = Modifier) { +private fun Select( + isExpanded: Boolean, + label: String, + modifier: Modifier = Modifier, + isEnabled: Boolean = true +) { val radiusSize by animateIntAsState(targetValue = if (isExpanded) 0 else 50, label = "Radius percentage animation") + val itemColor = if (isEnabled) GrapesTheme.colors.mainWhite else GrapesTheme.colors.mainNeutralLighter + val contentColor = if (isEnabled) GrapesTheme.colors.mainComplementary else GrapesTheme.colors.mainNeutralDark + Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.paddingLarge), modifier = modifier - .background(GrapesTheme.colors.mainWhite, shape = RoundedCornerShape(50, 50, radiusSize, radiusSize)) + .background(itemColor, shape = RoundedCornerShape(50, 50, radiusSize, radiusSize)) .border(1.dp, GrapesTheme.colors.mainPrimaryLighter, shape = RoundedCornerShape(50, 50, radiusSize, radiusSize)) .padding(horizontal = GrapesTheme.dimensions.paddingLarge, vertical = GrapesTheme.dimensions.paddingMedium) ) { - Text(text = label, style = GrapesTheme.typography.titleS) + Text(text = label, style = GrapesTheme.typography.titleS, color = contentColor) - ExposedDropdownMenuDefaults.TrailingIcon( - expanded = isExpanded - ) + GrapesSelectIcon(expanded = isExpanded, tint = contentColor) } } +@Composable +private fun GrapesSelectIcon(expanded: Boolean, tint: Color) { + val rotation by animateFloatAsState(targetValue = if (expanded) 180f else 0f, label = "Rotation angle animation") + + Icon( + Icons.Filled.ArrowDropDown, + null, + Modifier.rotate(rotation), + tint = tint + ) +} + @Preview @Composable private fun GrapesSelectorPreview() { @@ -109,8 +134,9 @@ private fun GrapesSelectorPreview() { } GrapesTheme { - Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { + Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) { GrapesSelect(selectedValue, values, onItemSelected = { selectedValue = it }, placeHolder = "Select Value") + GrapesSelect(selectedValue, values, onItemSelected = { selectedValue = it }, placeHolder = "Select Value", isEnabled = false) } } } From 164ef1c805c38c9cd85774eb89ec5876ac9c816e Mon Sep 17 00:00:00 2001 From: Jean-Philippe <112860634+jpbarbaud@users.noreply.github.com> Date: Wed, 22 Mar 2023 17:01:41 +0100 Subject: [PATCH 4/4] build(version) bump grapes version to 1.7.1 --- build.gradle | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build.gradle b/build.gradle index 7836b313..2581e1f7 100644 --- a/build.gradle +++ b/build.gradle @@ -2,7 +2,7 @@ buildscript { ext { - grapes_version = '1.7.0' + grapes_version = '1.7.1' kotlin_version = '1.7.10' firebase_app_distribution_version = '2.1.2'