Create Atom and Molecule for RoomPreview screens

2024-04-17 23:32:59 +02:00
parent 46d7235ac2
commit 1a9f6da1bc
6 changed files with 173 additions and 88 deletions
--- a/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt
+++ b/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt
@@ -16,30 +16,25 @@

 package io.element.android.features.joinroom.impl

-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 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.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
-import io.element.android.compound.theme.ElementTheme
-import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.atomic.atoms.PlaceholderAtom
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonRowMolecule
+import io.element.android.libraries.designsystem.atomic.atoms.RoomPreviewDescriptionAtom
+import io.element.android.libraries.designsystem.atomic.molecules.RoomPreviewMembersCountMolecule
 import io.element.android.libraries.designsystem.atomic.organisms.RoomPreviewOrganism
+import io.element.android.libraries.designsystem.atomic.atoms.RoomPreviewSubtitleAtom
+import io.element.android.libraries.designsystem.atomic.atoms.RoomPreviewTitleAtom
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
@@ -47,7 +42,6 @@ import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.ButtonSize
-import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.OutlinedButton
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
@@ -158,17 +152,17 @@ private fun JoinRoomContent(
                    Avatar(contentState.avatarData(AvatarSize.RoomHeader))
                },
                title = {
-                    Title(contentState.computedTitle)
+                    RoomPreviewTitleAtom(contentState.computedTitle)
                },
                subtitle = {
-                    Subtitle(contentState.computedSubtitle)
+                    RoomPreviewSubtitleAtom(contentState.computedSubtitle)
                },
                description = {
-                    Description(contentState.topic ?: "")
+                    RoomPreviewDescriptionAtom(contentState.topic ?: "")
                },
                memberCount = {
                    if (contentState.showMemberCount) {
-                        MembersCount(memberCount = contentState.numberOfMembers ?: 0)
+                        RoomPreviewMembersCountMolecule(memberCount = contentState.numberOfMembers ?: 0)
                    }
                }
            )
@@ -180,10 +174,10 @@ private fun JoinRoomContent(
                    PlaceholderAtom(width = AvatarSize.RoomHeader.dp, height = AvatarSize.RoomHeader.dp)
                },
                title = {
-                    Title(stringResource(R.string.screen_join_room_title_no_preview))
+                    RoomPreviewTitleAtom(stringResource(R.string.screen_join_room_title_no_preview))
                },
                subtitle = {
-                    Subtitle(stringResource(R.string.screen_join_room_subtitle_no_preview))
+                    RoomPreviewSubtitleAtom(stringResource(R.string.screen_join_room_subtitle_no_preview))
                },
            )
        }
@@ -210,7 +204,7 @@ private fun JoinRoomContent(
                title = {
                    when (contentState.roomIdOrAlias) {
                        is RoomIdOrAlias.Alias -> {
-                            Title(contentState.roomIdOrAlias.identifier)
+                            RoomPreviewTitleAtom(contentState.roomIdOrAlias.identifier)
                        }
                        is RoomIdOrAlias.Id -> {
                            PlaceholderAtom(width = 200.dp, height = 22.dp)
@@ -229,64 +223,6 @@ private fun JoinRoomContent(
    }
 }

-@Composable
-private fun Title(title: String, modifier: Modifier = Modifier) {
-    Text(
-        modifier = modifier,
-        text = title,
-        style = ElementTheme.typography.fontHeadingMdBold,
-        textAlign = TextAlign.Center,
-        color = ElementTheme.colors.textPrimary,
-    )
-}
-
-@Composable
-private fun Subtitle(subtitle: String, modifier: Modifier = Modifier) {
-    Text(
-        modifier = modifier,
-        text = subtitle,
-        style = ElementTheme.typography.fontBodyLgRegular,
-        textAlign = TextAlign.Center,
-        color = ElementTheme.colors.textSecondary,
-    )
-}
-
-@Composable
-private fun Description(description: String, modifier: Modifier = Modifier) {
-    Text(
-        modifier = modifier,
-        text = description,
-        style = ElementTheme.typography.fontBodySmRegular,
-        textAlign = TextAlign.Center,
-        color = ElementTheme.colors.textSecondary,
-        maxLines = 3,
-        overflow = TextOverflow.Ellipsis,
-    )
-}
-
-@Composable
-private fun MembersCount(memberCount: Long) {
-    Row(
-        modifier = Modifier
-            .background(color = ElementTheme.colors.bgSubtleSecondary, shape = CircleShape)
-            .widthIn(min = 48.dp)
-            .padding(all = 2.dp),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(4.dp)
-    ) {
-        Icon(
-            imageVector = CompoundIcons.UserProfile(),
-            contentDescription = null,
-            tint = ElementTheme.colors.iconSecondary,
-        )
-        Text(
-            text = "$memberCount",
-            style = ElementTheme.typography.fontBodySmMedium,
-            color = ElementTheme.colors.textSecondary,
-        )
-    }
-}
-
@OptIn(ExperimentalMaterial3Api::class)
@Composable
 private fun JoinRoomTopBar(
--- a/features/roomaliasresolver/impl/src/main/kotlin/io/element/android/features/roomaliasresolver/impl/RoomAliasResolverView.kt
+++ b/features/roomaliasresolver/impl/src/main/kotlin/io/element/android/features/roomaliasresolver/impl/RoomAliasResolverView.kt
@@ -32,9 +32,9 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
-import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.designsystem.atomic.atoms.PlaceholderAtom
+import io.element.android.libraries.designsystem.atomic.atoms.RoomPreviewTitleAtom
 import io.element.android.libraries.designsystem.atomic.organisms.RoomPreviewOrganism
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
@@ -119,9 +119,9 @@ private fun RoomAliasResolverContent(
            PlaceholderAtom(width = AvatarSize.RoomHeader.dp, height = AvatarSize.RoomHeader.dp)
        },
        title = {
+            RoomPreviewTitleAtom(state.roomAlias.value)
        },
        subtitle = {
-            Title(state.roomAlias.value)
        },
        description = {
            if (state.resolveState.isFailure()) {
@@ -137,17 +137,6 @@ private fun RoomAliasResolverContent(
    )
 }

-@Composable
-private fun Title(title: String, modifier: Modifier = Modifier) {
-    Text(
-        modifier = modifier,
-        text = title,
-        style = ElementTheme.typography.fontHeadingMdBold,
-        textAlign = TextAlign.Center,
-        color = ElementTheme.colors.textPrimary,
-    )
-}
-
@OptIn(ExperimentalMaterial3Api::class)
@Composable
 private fun RoomAliasResolverTopBar(
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoomPreviewDescriptionAtom.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoomPreviewDescriptionAtom.kt
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2024 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.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.theme.components.Text
+
+@Composable
+fun RoomPreviewDescriptionAtom(description: String, modifier: Modifier = Modifier) {
+    Text(
+        modifier = modifier,
+        text = description,
+        style = ElementTheme.typography.fontBodySmRegular,
+        textAlign = TextAlign.Center,
+        color = ElementTheme.colors.textSecondary,
+        maxLines = 3,
+        overflow = TextOverflow.Ellipsis,
+    )
+}
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoomPreviewSubtitleAtom.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoomPreviewSubtitleAtom.kt
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2024 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.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.theme.components.Text
+
+@Composable
+fun RoomPreviewSubtitleAtom(subtitle: String, modifier: Modifier = Modifier) {
+    Text(
+        modifier = modifier,
+        text = subtitle,
+        style = ElementTheme.typography.fontBodyLgRegular,
+        textAlign = TextAlign.Center,
+        color = ElementTheme.colors.textSecondary,
+    )
+}
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoomPreviewTitleAtom.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoomPreviewTitleAtom.kt
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2024 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.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.theme.components.Text
+
+@Composable
+fun RoomPreviewTitleAtom(title: String, modifier: Modifier = Modifier) {
+    Text(
+        modifier = modifier,
+        text = title,
+        style = ElementTheme.typography.fontHeadingMdBold,
+        textAlign = TextAlign.Center,
+        color = ElementTheme.colors.textPrimary,
+    )
+}
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/RoomPreviewMembersCountMolecule.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/RoomPreviewMembersCountMolecule.kt
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2024 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.molecules
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.Text
+
+@Composable
+fun RoomPreviewMembersCountMolecule(memberCount: Long) {
+    Row(
+        modifier = Modifier
+            .background(color = ElementTheme.colors.bgSubtleSecondary, shape = CircleShape)
+            .widthIn(min = 48.dp)
+            .padding(all = 2.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp)
+    ) {
+        Icon(
+            imageVector = CompoundIcons.UserProfile(),
+            contentDescription = null,
+            tint = ElementTheme.colors.iconSecondary,
+        )
+        Text(
+            text = "$memberCount",
+            style = ElementTheme.typography.fontBodySmMedium,
+            color = ElementTheme.colors.textSecondary,
+        )
+    }
+}