Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rework Preview for a better rendering in the IDE.

Browse source
This commit is contained in:
Benoit Marty 2023-01-27 10:19:17 +01:00 • committed by Benoit Marty
parent e3fed8b4f5
commit 9d32b05fbb
32 changed files with 452 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

2
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ColorUtil.kt
View file

@ -25,6 +25,6 @@ fun Boolean.toEnabledColor(): Color {
return if (this) {
ElementTheme.colors.primary
} else {
ElementTheme.colors.secondary
ElementTheme.colors.primary.copy(alpha = 0.40f)
}
}

4
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt
View file

@ -32,6 +32,7 @@ import androidx.compose.ui.platform.LocalUriHandler
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.TextLayoutResult
import androidx.compose.ui.text.TextStyle
import io.element.android.libraries.designsystem.theme.ElementTheme
import kotlinx.collections.immutable.ImmutableMap
import kotlinx.collections.immutable.persistentMapOf
@ -83,6 +84,7 @@ fun ClickableLinkText(
onTextLayout = {
layoutResult.value = it
},
inlineContent = inlineContent
inlineContent = inlineContent,
color = ElementTheme.colors.primary,
)
}

17
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/LabelledCheckbox.kt
View file

@ -23,6 +23,9 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ElementCheckbox
@Composable
@ -42,13 +45,23 @@ fun LabelledCheckbox(
onCheckedChange = onCheckedChange,
enabled = enabled,
)
Text(text = text)
Text(
text = text,
color = ElementTheme.colors.primary,
)
}
}
@Preview
@Composable
fun LabelledCheckboxPreview() {
fun LabelledCheckboxLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun LabelledCheckboxDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
LabelledCheckbox(
checked = true,
text = "Some text",

13
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt
View file

@ -30,6 +30,8 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ElementCircularProgressIndicator
@ -69,8 +71,15 @@ fun ProgressDialog(
}
}
@Composable
@Preview
fun ProgressDialogPreview() {
@Composable
fun ProgressDialogLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun ProgressDialogDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
ProgressDialog(text = "test dialog content")
}

11
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt
View file

@ -34,6 +34,8 @@ import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import io.element.android.libraries.designsystem.AvatarGradientEnd
import io.element.android.libraries.designsystem.AvatarGradientStart
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import timber.log.Timber
@Composable
@ -97,6 +99,13 @@ private fun InitialsAvatar(
@Preview
@Composable
fun InitialsAvatarPreview() {
fun AvatarLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun AvatarDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
Avatar(AvatarData(name = "A"))
}

13
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ConfirmationDialog.kt
View file

@ -32,6 +32,8 @@ import androidx.compose.ui.res.stringResource
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.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ElementButton
import io.element.android.libraries.ui.strings.R as StringR
@ -113,9 +115,16 @@ fun ConfirmationDialog(
)
}
@Composable
@Preview
fun ConfirmationDialogPreview() {
@Composable
fun ConfirmationDialogLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun ConfirmationDialogDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
ConfirmationDialog(
title = "Title",
content = "Content",

13
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialog.kt
View file

@ -31,6 +31,8 @@ import androidx.compose.ui.res.stringResource
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.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ElementButton
import io.element.android.libraries.ui.strings.R as StringR
@ -82,9 +84,16 @@ fun ErrorDialog(
)
}
@Composable
@Preview
fun ErrorDialogPreview() {
@Composable
fun ErrorDialogLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun ErrorDialogDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
ErrorDialog(
content = "Content",
)

33
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceCategory.kt
View file

@ -20,12 +20,17 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Announcement
import androidx.compose.material.icons.filled.BugReport
import androidx.compose.material3.Divider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
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.ElementTheme
@Composable
@ -52,14 +57,32 @@ fun PreferenceCategory(
}
}
@Composable
@Preview
fun PreferenceCategoryPreview() {
@Composable
fun PreferenceCategoryLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun PreferenceCategoryDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
PreferenceCategory(
title = "Category title",
) {
PreferenceTextPreview()
PreferenceSwitchPreview()
PreferenceSlidePreview()
PreferenceText(
title = "Title",
icon = Icons.Default.BugReport,
)
PreferenceSwitch(
title = "Switch",
icon = Icons.Default.Announcement,
isChecked = true
)
PreferenceSlide(
title = "Slide",
summary = "Summary",
value = 0.75F
)
}
}

34
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceScreen.kt
View file

@ -28,7 +28,9 @@ import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Announcement
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.BugReport
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
@ -40,6 +42,8 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.components.ElementScaffold
import io.element.android.libraries.designsystem.theme.components.ElementTopAppBar
@ -110,12 +114,36 @@ fun PreferenceTopAppBar(
)
}
@Composable
@Preview
fun PreferenceScreenPreview() {
@Composable
fun PreferenceViewLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun PreferenceViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
PreferenceView(
title = "Preference screen"
) {
PreferenceCategoryPreview()
PreferenceCategory(
title = "Category title",
) {
PreferenceText(
title = "Title",
icon = Icons.Default.BugReport,
)
PreferenceSwitch(
title = "Switch",
icon = Icons.Default.Announcement,
isChecked = true
)
PreferenceSlide(
title = "Slide",
summary = "Summary",
value = 0.75F
)
}
}
}

13
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSlide.kt
View file

@ -30,6 +30,8 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ElementSlider
import io.element.android.libraries.designsystem.toEnabledColor
@ -84,9 +86,16 @@ fun PreferenceSlide(
}
}
@Composable
@Preview
fun PreferenceSlidePreview() {
@Composable
fun PreferenceSlideLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun PreferenceSlideDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
PreferenceSlide(
title = "Slide",
summary = "Summary",

14
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSwitch.kt
View file

@ -31,6 +31,8 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ElementCheckbox
import io.element.android.libraries.designsystem.toEnabledColor
@ -75,12 +77,20 @@ fun PreferenceSwitch(
}
}
@Composable
@Preview
fun PreferenceSwitchPreview() {
@Composable
fun PreferenceSwitchLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun PreferenceSwitchDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
PreferenceSwitch(
title = "Switch",
icon = Icons.Default.Announcement,
enabled = true,
isChecked = true
)
}

16
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt
View file

@ -31,6 +31,8 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
@Composable
@ -57,15 +59,23 @@ fun PreferenceText(
.weight(1f)
.padding(end = preferencePaddingEnd),
style = ElementTheme.typography.bodyLarge,
text = title
text = title,
color = ElementTheme.colors.primary,
)
}
}
}
@Composable
@Preview
fun PreferenceTextPreview() {
@Composable
fun PreferenceTextLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun PreferenceTextDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
PreferenceText(
title = "Title",
icon = Icons.Default.BugReport,

65
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/ElementPreview.kt Normal file
View file

@ -0,0 +1,65 @@
/*
* 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.preview
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import io.element.android.libraries.designsystem.theme.ElementTheme
@Composable
fun ElementPreviewLight(
showBackground: Boolean = true,
content: @Composable () -> Unit
) {
ElementPreview(
darkTheme = false,
showBackground = showBackground,
content = content
)
}
@Composable
fun ElementPreviewDark(
showBackground: Boolean = true,
content: @Composable () -> Unit
) {
ElementPreview(
darkTheme = true,
showBackground = showBackground,
content = content
)
}
@Composable
private fun ElementPreview(
darkTheme: Boolean,
showBackground: Boolean,
content: @Composable () -> Unit
) {
ElementTheme(darkTheme = darkTheme) {
if (showBackground) {
Box(modifier = Modifier.background(ElementTheme.colors.background)) {
content()
}
} else {
content()
}
}
}

25
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt
View file

@ -35,6 +35,8 @@ import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.matrix.core.UserId
import io.element.android.libraries.matrix.ui.model.MatrixUser
@ -64,8 +66,9 @@ fun MatrixUserHeader(
fontWeight = FontWeight.SemiBold,
text = matrixUser.getBestName(),
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
overflow = TextOverflow.Ellipsis,
color = ElementTheme.colors.primary,
)
// Id
if (matrixUser.username.isNullOrEmpty().not()) {
Spacer(modifier = Modifier.height(4.dp))
@ -82,7 +85,14 @@ fun MatrixUserHeader(
@Preview
@Composable
fun MatrixUserHeaderPreview() {
fun MatrixUserHeaderLightPreview() = ElementPreviewLight { ContentToPreview1() }
@Preview
@Composable
fun MatrixUserHeaderDarkPreview() = ElementPreviewDark { ContentToPreview1() }
@Composable
private fun ContentToPreview1() {
MatrixUserHeader(
MatrixUser(
id = UserId("@alice:server.org"),
@ -94,7 +104,14 @@ fun MatrixUserHeaderPreview() {
@Preview
@Composable
fun MatrixUserHeaderNoUsernamePreview() {
fun MatrixUserHeaderNoUserNameLightPreview() = ElementPreviewLight { ContentToPreview2() }
@Preview
@Composable
fun MatrixUserHeaderNoUserNameDarkPreview() = ElementPreviewDark { ContentToPreview2() }
@Composable
private fun ContentToPreview2() {
MatrixUserHeader(
MatrixUser(
id = UserId("@alice:server.org"),

14
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt
View file

@ -34,6 +34,8 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.matrix.core.UserId
import io.element.android.libraries.matrix.ui.model.MatrixUser
@ -68,7 +70,8 @@ fun MatrixUserRow(
fontWeight = FontWeight.SemiBold,
text = matrixUser.getBestName(),
maxLines = 1,
overflow = TextOverflow.Ellipsis
overflow = TextOverflow.Ellipsis,
color = ElementTheme.colors.primary,
)
// Id
if (matrixUser.username.isNullOrEmpty().not()) {
@ -86,7 +89,14 @@ fun MatrixUserRow(
@Preview
@Composable
fun MatrixUserRowPreview() {
fun MatrixUserRowLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun MatrixUserRowDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
MatrixUserRow(
MatrixUser(
id = UserId("@alice:server.org"),

1
libraries/textcomposer/build.gradle.kts
View file

@ -35,6 +35,7 @@ dependencies {
implementation(projects.libraries.androidutils)
implementation(projects.libraries.core)
implementation(projects.libraries.matrix)
implementation(projects.libraries.designsystem)
implementation(libs.wysiwyg)
implementation(libs.androidx.constraintlayout)
implementation("com.google.android.material:material:1.7.0")

15
libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
View file

@ -33,6 +33,9 @@ import androidx.compose.ui.unit.sp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.core.view.isInvisible
import androidx.core.view.isVisible
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.ui.strings.R as StringR
@Composable
@ -123,7 +126,8 @@ private fun FakeComposer(
.align(Alignment.Center),
textAlign = TextAlign.Center,
text = "Composer Preview",
fontSize = 20.sp
fontSize = 20.sp,
color = ElementTheme.colors.secondary,
)
}
}
@ -145,7 +149,14 @@ private fun MessageComposerView.setup(isDarkMode: Boolean, composerMode: Message
@Preview
@Composable
fun TextComposerPreview() {
fun TextComposerLightPreview() = ElementPreviewLight { ContentToPreview() }
@Preview
@Composable
fun TextComposerDarkPreview() = ElementPreviewDark { ContentToPreview() }
@Composable
private fun ContentToPreview() {
TextComposer(
onSendMessage = {},
fullscreen = false,