Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: improve enrollment dialog (WPB-4372) #2610

Merged
merged 14 commits into from
Jan 23, 2024
Merged

feat: improve enrollment dialog (WPB-4372) #2610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
fbcbf9d
chore: update localization strings via Crowdin
AndroidBob Jan 17, 2024
13c92c1
chore: kalium ref
yamilmedina Jan 17, 2024
fe4ff52
chore: extract to preview
yamilmedina Jan 17, 2024
0017b08
chore: extract to elements in lazy list
yamilmedina Jan 18, 2024
9de028e
chore: refactor to have content param as scrollable in dialogs
yamilmedina Jan 18, 2024
545b39b
Merge branch 'develop' into feat/improve-enrollment-dialog
yamilmedina Jan 18, 2024
e71f917
chore: refactor to have content param as scrollable in dialogs
yamilmedina Jan 18, 2024
e26e07c
chore: stickyheader for text
yamilmedina Jan 19, 2024
35c60ba
Merge branch 'release/candidate' into feat/improve-enrollment-dialog
yamilmedina Jan 23, 2024
49c551c
chore: refactor dialog, extracted sections
yamilmedina Jan 23, 2024
deb15dd
chore: refactor dialog, extracted sections
yamilmedina Jan 23, 2024
304650e
chore: final design adj
yamilmedina Jan 23, 2024
4296840
chore: detekt
yamilmedina Jan 23, 2024
5fa1469
Merge branch 'release/candidate' into feat/improve-enrollment-dialog
yamilmedina Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions app/src/main/kotlin/com/wire/android/ui/WireActivityDialogs.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,8 +219,7 @@ fun CustomBackendDialog(
) {
if (globalAppState.customBackendDialog != null) {
CustomServerDialog(
serverLinksTitle = globalAppState.customBackendDialog.serverLinks.title,
serverLinksApi = globalAppState.customBackendDialog.serverLinks.api,
serverLinks = globalAppState.customBackendDialog.serverLinks,
onDismiss = onDismiss,
onConfirm = onConfirm
)
Expand Down
59 changes: 42 additions & 17 deletions app/src/main/kotlin/com/wire/android/ui/authentication/ServerTitle.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,11 @@ import com.wire.android.ui.common.WireDialogButtonType
import com.wire.android.ui.common.clickable
import com.wire.android.ui.common.colorsScheme
import com.wire.android.ui.common.dimensions
import com.wire.android.ui.theme.WireTheme
import com.wire.android.ui.theme.wireColorScheme
import com.wire.android.ui.theme.wireDimensions
import com.wire.android.ui.theme.wireTypography
import com.wire.android.util.ui.PreviewMultipleThemes
import com.wire.android.util.ui.stringWithStyledArgs
import com.wire.kalium.logic.configuration.server.ServerConfig
import java.net.URL
Expand Down Expand Up @@ -93,24 +95,47 @@ fun ServerTitle(
)

if (serverFullDetailsDialogState) {
WireDialog(
title = stringResource(id = R.string.server_details_dialog_title),
text = LocalContext.current.resources.stringWithStyledArgs(
R.string.server_details_dialog_body,
MaterialTheme.wireTypography.body02,
MaterialTheme.wireTypography.body02,
normalColor = colorsScheme().secondaryText,
argsColor = colorsScheme().onBackground,
serverLinks.title,
serverLinks.api
),
onDismiss = { serverFullDetailsDialogState = false },
optionButton1Properties = WireDialogButtonProperties(
stringResource(id = R.string.label_ok),
onClick = { serverFullDetailsDialogState = false },
type = WireDialogButtonType.Primary
)
ServerEnrollmentDialogContent(
serverLinks = serverLinks,
onClick = { serverFullDetailsDialogState = false },
onDismiss = { serverFullDetailsDialogState = false }
)
}
}
}

@Composable
private fun ServerEnrollmentDialogContent(
serverLinks: ServerConfig.Links,
onDismiss: () -> Unit,
onClick: () -> Unit,
) {
WireDialog(
title = stringResource(id = R.string.server_details_dialog_title),
text = LocalContext.current.resources.stringWithStyledArgs(
R.string.server_details_dialog_body,
MaterialTheme.wireTypography.body02,
MaterialTheme.wireTypography.body02,
normalColor = colorsScheme().secondaryText,
argsColor = colorsScheme().onBackground,
serverLinks.title,
serverLinks.api
),
onDismiss = onDismiss,
optionButton1Properties = WireDialogButtonProperties(
stringResource(id = R.string.label_ok),
onClick = onClick,
type = WireDialogButtonType.Primary
)
)
}

@PreviewMultipleThemes
@Composable
fun PreviewServerEnrollmentDialog() = WireTheme {
ServerEnrollmentDialogContent(
serverLinks = ServerConfig.DEFAULT,
onClick = { },
onDismiss = { }
)
}
3 changes: 1 addition & 2 deletions app/src/main/kotlin/com/wire/android/ui/authentication/login/sso/LoginSSOScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,8 +142,7 @@ private fun LoginSSOContent(

if (loginState.customServerDialogState != null) {
CustomServerDialog(
serverLinksTitle = loginState.customServerDialogState.serverLinks.title,
serverLinksApi = loginState.customServerDialogState.serverLinks.api,
serverLinks = loginState.customServerDialogState.serverLinks,
onDismiss = onCustomServerDialogDismiss,
onConfirm = onCustomServerDialogConfirm
)
Expand Down
118 changes: 69 additions & 49 deletions app/src/main/kotlin/com/wire/android/ui/common/WireDialog.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,29 +188,25 @@ private fun WireDialogContent(
.padding(contentPadding),
horizontalAlignment = if (centerContent) Alignment.CenterHorizontally else Alignment.Start
) {
Row(verticalAlignment = Alignment.CenterVertically) {
Text(
text = title,
style = MaterialTheme.wireTypography.title02,
)
if (titleLoading) {
WireCircularProgressIndicator(progressColor = MaterialTheme.wireColorScheme.onBackground)
}
}
text?.let {
LazyColumn(
modifier = Modifier
.weight(1f, fill = false)
.fillMaxWidth()
) {
// Title
TitleDialogSection(title, titleLoading)

// Dynamic sized body content
LazyColumn(
modifier = Modifier
.weight(1f, fill = false)
.padding(
top = MaterialTheme.wireDimensions.dialogTextsSpacing,
bottom = MaterialTheme.wireDimensions.dialogTextsSpacing
)
.fillMaxWidth()
) {
text?.let {
item {
ClickableText(
text = text,
style = MaterialTheme.wireTypography.body01,
modifier = Modifier.padding(
top = MaterialTheme.wireDimensions.dialogTextsSpacing,
bottom = MaterialTheme.wireDimensions.dialogTextsSpacing,
),
modifier = Modifier.padding(bottom = MaterialTheme.wireDimensions.dialogTextsSpacing),
onClick = { offset ->
text.getStringAnnotations(
tag = MarkdownConstants.TAG_URL,
Expand All @@ -221,42 +217,66 @@ private fun WireDialogContent(
)
}
}
}
content?.let {
Box {
it.invoke()
}
}

val containsAnyButton = dismissButtonProperties != null || optionButton1Properties != null || optionButton2Properties != null
val dialogButtonsSpacing = if (containsAnyButton) dimensions().dialogButtonsSpacing else dimensions().spacing0x
if (buttonsHorizontalAlignment) {
Row(Modifier.padding(top = dialogButtonsSpacing)) {
dismissButtonProperties.getButton(Modifier.weight(1f))
if (dismissButtonProperties != null) {
Spacer(Modifier.width(dialogButtonsSpacing))
}
optionButton1Properties.getButton(Modifier.weight(1f))
if (optionButton2Properties != null) {
Spacer(Modifier.width(dialogButtonsSpacing))
content?.let {
item {
Box {
it.invoke()
}
}
optionButton2Properties.getButton(Modifier.weight(1f))
}
} else {
Column(Modifier.padding(top = dialogButtonsSpacing)) {
optionButton1Properties.getButton()
}

if (optionButton2Properties != null) {
Spacer(Modifier.height(dialogButtonsSpacing))
}
optionButton2Properties.getButton()
// Buttons actions
DialogButtonsSection(dismissButtonProperties, optionButton1Properties, optionButton2Properties, buttonsHorizontalAlignment)
}
}
}

if (dismissButtonProperties != null) {
Spacer(Modifier.height(dialogButtonsSpacing))
}
dismissButtonProperties.getButton()
}
@Composable
private fun TitleDialogSection(title: String, titleLoading: Boolean) {
Row(verticalAlignment = Alignment.CenterVertically) {
Text(text = title, style = MaterialTheme.wireTypography.title02)
if (titleLoading) {
WireCircularProgressIndicator(progressColor = MaterialTheme.wireColorScheme.onBackground)
}
}
}

@Composable
private fun DialogButtonsSection(
dismissButtonProperties: WireDialogButtonProperties?,
optionButton1Properties: WireDialogButtonProperties?,
optionButton2Properties: WireDialogButtonProperties?,
buttonsHorizontalAlignment: Boolean
) {
val containsAnyButton = dismissButtonProperties != null || optionButton1Properties != null || optionButton2Properties != null
val dialogButtonsSpacing = if (containsAnyButton) dimensions().dialogButtonsSpacing else dimensions().spacing0x
if (buttonsHorizontalAlignment) {
Row(Modifier.padding(top = dialogButtonsSpacing)) {
dismissButtonProperties.getButton(Modifier.weight(1f))
if (dismissButtonProperties != null) {
Spacer(Modifier.width(dialogButtonsSpacing))
}
optionButton1Properties.getButton(Modifier.weight(1f))
if (optionButton2Properties != null) {
Spacer(Modifier.width(dialogButtonsSpacing))
}
optionButton2Properties.getButton(Modifier.weight(1f))
}
} else {
Column(Modifier.padding(top = dialogButtonsSpacing)) {
optionButton1Properties.getButton()

if (optionButton2Properties != null) {
Spacer(Modifier.height(dialogButtonsSpacing))
}
optionButton2Properties.getButton()

if (dismissButtonProperties != null) {
Spacer(Modifier.height(dialogButtonsSpacing))
}
dismissButtonProperties.getButton()
}
}
}
Expand Down
119 changes: 104 additions & 15 deletions app/src/main/kotlin/com/wire/android/ui/common/dialogs/CustomServerDialog.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,40 +18,46 @@

package com.wire.android.ui.common.dialogs

import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextDecoration
import com.wire.android.R
import com.wire.android.ui.common.WireDialog
import com.wire.android.ui.common.WireDialogButtonProperties
import com.wire.android.ui.common.WireDialogButtonType
import com.wire.android.ui.common.button.WireButtonState
import com.wire.android.ui.common.colorsScheme
import com.wire.android.ui.common.dimensions
import com.wire.android.ui.common.spacers.VerticalSpace
import com.wire.android.ui.common.wireDialogPropertiesBuilder
import com.wire.android.ui.theme.WireTheme
import com.wire.android.ui.theme.wireTypography
import com.wire.android.util.ui.stringWithStyledArgs
import com.wire.android.util.ui.PreviewMultipleThemes
import com.wire.kalium.logic.configuration.server.ServerConfig

@Composable
internal fun CustomServerDialog(
serverLinksTitle: String,
serverLinksApi: String,
serverLinks: ServerConfig.Links,
onDismiss: () -> Unit,
onConfirm: () -> Unit
) {
var showDetails by remember { mutableStateOf(false) }
WireDialog(
title = stringResource(R.string.custom_backend_dialog_title),
text = LocalContext.current.resources.stringWithStyledArgs(
R.string.custom_backend_dialog_body,
MaterialTheme.wireTypography.body01,
MaterialTheme.wireTypography.body02,
colorsScheme().onBackground,
colorsScheme().onBackground,
serverLinksTitle,
serverLinksApi
),

text = stringResource(R.string.custom_backend_dialog_body),
buttonsHorizontalAlignment = true,
properties = wireDialogPropertiesBuilder(
dismissOnBackPress = false,
Expand All @@ -69,8 +75,91 @@ internal fun CustomServerDialog(
type = WireDialogButtonType.Primary,
state =
WireButtonState.Default
)
),
content = {
Column {
CustomServerPropertyInfo(
title = stringResource(id = R.string.custom_backend_dialog_body_backend_name),
value = serverLinks.title
)
CustomServerPropertyInfo(
title = stringResource(id = R.string.custom_backend_dialog_body_backend_api),
value = serverLinks.api
)
if (showDetails) {
CustomServerPropertyInfo(
title = stringResource(id = R.string.custom_backend_dialog_body_backend_websocket),
value = serverLinks.webSocket
)
CustomServerPropertyInfo(
title = stringResource(id = R.string.custom_backend_dialog_body_backend_blacklist),
value = serverLinks.blackList
)
CustomServerPropertyInfo(
title = stringResource(id = R.string.custom_backend_dialog_body_backend_teams),
value = serverLinks.teams
)
CustomServerPropertyInfo(
title = stringResource(id = R.string.custom_backend_dialog_body_backend_accounts),
value = serverLinks.accounts
)
CustomServerPropertyInfo(
title = stringResource(id = R.string.custom_backend_dialog_body_backend_website),
value = serverLinks.website
)
}
Column(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = dimensions().spacing8x)
) {
Text(
text = stringResource(id = if (showDetails) R.string.label_hide_details else R.string.label_show_details),
style = MaterialTheme.wireTypography.body02.copy(
textDecoration = TextDecoration.Underline,
color = MaterialTheme.colorScheme.primary
),
modifier = Modifier
.align(Alignment.Start)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null,
onClick = { showDetails = !showDetails }
)
)
}
}
}
)
}

@Composable
private fun CustomServerPropertyInfo(
title: String,
value: String
) {
Text(
text = title,
style = MaterialTheme.wireTypography.body01,
color = colorsScheme().onBackground,
)
VerticalSpace.x4()
Text(
text = value,
style = MaterialTheme.wireTypography.body02,
color = colorsScheme().onBackground,
)
VerticalSpace.x16()
}

data class CustomServerDialogState(val serverLinks: ServerConfig.Links)

@PreviewMultipleThemes
@Composable
fun PreviewCustomServerDialog() = WireTheme {
CustomServerDialog(
serverLinks = ServerConfig.DEFAULT,
onConfirm = { },
onDismiss = { }
)
}