From fb09991793298dc390f10caffbfb671d7e156eab Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Wed, 21 Jun 2023 18:09:06 +0200 Subject: [PATCH] Create UnreadIndicatorAtom with preview. --- .../impl/components/InviteSummaryRow.kt | 37 +++++------ .../features/roomlist/impl/RoomListView.kt | 12 +--- .../impl/components/RoomSummaryRow.kt | 14 ++--- .../atomic/atoms/UnreadIndicatorAtom.kt | 62 +++++++++++++++++++ 4 files changed, 84 insertions(+), 41 deletions(-) create mode 100644 libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/UnreadIndicatorAtom.kt diff --git a/features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/components/InviteSummaryRow.kt b/features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/components/InviteSummaryRow.kt index b1a7873010..12da8616df 100644 --- a/features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/components/InviteSummaryRow.kt +++ b/features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/components/InviteSummaryRow.kt @@ -16,7 +16,6 @@ package io.element.android.features.invitelist.impl.components -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -28,14 +27,11 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width -import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource @@ -52,6 +48,7 @@ import io.element.android.features.invitelist.impl.model.InviteListInviteSummary import io.element.android.features.invitelist.impl.model.InviteListInviteSummaryProvider import io.element.android.features.invitelist.impl.model.InviteSender import io.element.android.libraries.designsystem.ElementTextStyles +import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom import io.element.android.libraries.designsystem.components.avatar.Avatar import io.element.android.libraries.designsystem.components.avatar.AvatarSize import io.element.android.libraries.designsystem.preview.ElementPreviewDark @@ -74,8 +71,8 @@ internal fun InviteSummaryRow( ) { Box( modifier = modifier - .fillMaxWidth() - .heightIn(min = minHeight) + .fillMaxWidth() + .heightIn(min = minHeight) ) { DefaultInviteSummaryRow( invite = invite, @@ -93,9 +90,9 @@ internal fun DefaultInviteSummaryRow( ) { Row( modifier = Modifier - .fillMaxWidth() - .padding(16.dp) - .height(IntrinsicSize.Min), + .fillMaxWidth() + .padding(16.dp) + .height(IntrinsicSize.Min), verticalAlignment = Alignment.Top ) { Avatar( @@ -104,9 +101,9 @@ internal fun DefaultInviteSummaryRow( Column( modifier = Modifier - .padding(start = 16.dp, end = 4.dp) - .alignByBaseline() - .weight(1f) + .padding(start = 16.dp, end = 4.dp) + .alignByBaseline() + .weight(1f) ) { val bonusPadding = if (invite.isNew) 12.dp else 0.dp @@ -145,7 +142,9 @@ internal fun DefaultInviteSummaryRow( OutlinedButton( content = { Text(stringResource(CommonStrings.action_decline), style = ElementTextStyles.Button) }, onClick = onDeclineClicked, - modifier = Modifier.weight(1f).heightIn(max = 36.dp), + modifier = Modifier + .weight(1f) + .heightIn(max = 36.dp), contentPadding = PaddingValues(horizontal = 24.dp, vertical = 0.dp), ) @@ -154,20 +153,16 @@ internal fun DefaultInviteSummaryRow( Button( content = { Text(stringResource(CommonStrings.action_accept), style = ElementTextStyles.Button) }, onClick = onAcceptClicked, - modifier = Modifier.weight(1f).heightIn(max = 36.dp), + modifier = Modifier + .weight(1f) + .heightIn(max = 36.dp), contentPadding = PaddingValues(horizontal = 24.dp, vertical = 0.dp), ) } } val unreadIndicatorColor = if (invite.isNew) MaterialTheme.roomListUnreadIndicator() else Color.Transparent - - Box( - modifier = Modifier - .size(12.dp) - .clip(CircleShape) - .background(unreadIndicatorColor) - ) + UnreadIndicatorAtom(color = unreadIndicatorColor) } } diff --git a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt index 544f114625..6c803aedc3 100644 --- a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt +++ b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt @@ -28,12 +28,10 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.lazy.rememberLazyListState -import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Snackbar @@ -46,7 +44,6 @@ import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.input.nestedscroll.NestedScrollConnection import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.res.stringResource @@ -64,6 +61,7 @@ import io.element.android.features.roomlist.impl.components.RoomListTopBar import io.element.android.features.roomlist.impl.components.RoomSummaryRow import io.element.android.features.roomlist.impl.model.RoomListRoomSummary import io.element.android.features.roomlist.impl.search.RoomListSearchResultView +import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom import io.element.android.libraries.designsystem.preview.ElementPreviewDark import io.element.android.libraries.designsystem.preview.ElementPreviewLight import io.element.android.libraries.designsystem.theme.components.Divider @@ -71,7 +69,6 @@ import io.element.android.libraries.designsystem.theme.components.FloatingAction import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Scaffold import io.element.android.libraries.designsystem.theme.components.Text -import io.element.android.libraries.designsystem.theme.roomListUnreadIndicator import io.element.android.libraries.designsystem.utils.LogCompositions import io.element.android.libraries.designsystem.utils.rememberSnackbarHostState import io.element.android.libraries.matrix.api.core.RoomId @@ -275,12 +272,7 @@ private fun InvitesEntryPointView( if (state.invitesState == InvitesState.NewInvites) { Spacer(Modifier.width(8.dp)) - Box( - modifier = Modifier - .size(12.dp) - .clip(CircleShape) - .background(MaterialTheme.roomListUnreadIndicator()) - ) + UnreadIndicatorAtom() } } } diff --git a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt index ce08311e33..e7601132e4 100644 --- a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt +++ b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt @@ -17,10 +17,8 @@ package io.element.android.features.roomlist.impl.components import androidx.compose.foundation.ExperimentalFoundationApi -import androidx.compose.foundation.background import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row @@ -29,7 +27,6 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.ripple.rememberRipple import androidx.compose.material3.MaterialTheme @@ -37,7 +34,6 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.geometry.Rect import androidx.compose.ui.geometry.Size import androidx.compose.ui.graphics.Color @@ -57,6 +53,7 @@ import com.google.accompanist.placeholder.material.placeholder import io.element.android.features.roomlist.impl.model.RoomListRoomSummary import io.element.android.features.roomlist.impl.model.RoomListRoomSummaryProvider import io.element.android.libraries.core.extensions.orEmpty +import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAtom import io.element.android.libraries.designsystem.components.avatar.Avatar import io.element.android.libraries.designsystem.preview.ElementPreviewDark import io.element.android.libraries.designsystem.preview.ElementPreviewLight @@ -182,12 +179,9 @@ private fun RowScope.LastMessageAndIndicatorRow(room: RoomListRoomSummary) { // Unread val unreadIndicatorColor = if (room.hasUnread) MaterialTheme.roomListUnreadIndicator() else Color.Transparent - Box( - modifier = Modifier - .padding(top = 3.dp) - .size(12.dp) - .clip(CircleShape) - .background(unreadIndicatorColor), + UnreadIndicatorAtom( + modifier = Modifier.padding(top = 3.dp), + color = unreadIndicatorColor, ) } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/UnreadIndicatorAtom.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/UnreadIndicatorAtom.kt new file mode 100644 index 0000000000..dd3db3913a --- /dev/null +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/UnreadIndicatorAtom.kt @@ -0,0 +1,62 @@ +/* + * Copyright (c) 2023 New Vector Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package io.element.android.libraries.designsystem.atomic.atoms + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight +import io.element.android.libraries.designsystem.theme.roomListUnreadIndicator + +@Composable +fun UnreadIndicatorAtom( + modifier: Modifier = Modifier, + size: Dp = 12.dp, + color: Color = MaterialTheme.roomListUnreadIndicator(), +) { + Box( + modifier = modifier + .size(size) + .clip(CircleShape) + .background(color) + ) +} + +@Preview +@Composable +internal fun UnreadIndicatorAtomLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun UnreadIndicatorAtomDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + UnreadIndicatorAtom() +}