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

Feature/compose cleanup #1543

Merged
merged 24 commits into from
Jul 18, 2024
Merged

Feature/compose cleanup #1543

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
d4e3c58
Moving color files
ThomasSession Jul 10, 2024
2194d0d
Moving theme classes into their own package
ThomasSession Jul 10, 2024
ce0308e
Only obtain new theme when required
ThomasSession Jul 11, 2024
e45ee13
Merge branch 'dev' into feature/compose-cleanup
ThomasSession Jul 11, 2024
1466897
UI Tweaks
ThomasSession Jul 11, 2024
127ac1c
matching figma
ThomasSession Jul 11, 2024
666a04c
Merge branch 'pr/1451' into feature/compose-cleanup
ThomasSession Jul 11, 2024
af1c39b
Matching signature across buttons
ThomasSession Jul 12, 2024
5061d37
Dialogs do not have a 'x' button by default
ThomasSession Jul 12, 2024
f8e238c
Updated typography
ThomasSession Jul 12, 2024
c9c715b
Centered text in control messages
ThomasSession Jul 14, 2024
facbee9
Fixing new color access for action items
ThomasSession Jul 15, 2024
bb630fc
renaming spacing to be more general
ThomasSession Jul 15, 2024
166d0e8
Unifying dimensions and rectifying design inconsistencies
ThomasSession Jul 15, 2024
779d740
Rounded corners for the new conversation sheet
ThomasSession Jul 15, 2024
98e9d8a
Rounding sheets corners
ThomasSession Jul 15, 2024
e193105
Spacing fixes and UI consolidating
ThomasSession Jul 15, 2024
a1fe1f1
Disappearing messages tweaks
ThomasSession Jul 15, 2024
aabfb47
Cleaning up spaces
ThomasSession Jul 15, 2024
a84ba25
Migrating to Material3
ThomasSession Jul 15, 2024
78110a4
Fixing UI issues found
ThomasSession Jul 16, 2024
d9407a1
PR feedbacks
ThomasSession Jul 16, 2024
a524933
Merge branch 'pr/1451' into feature/compose-cleanup
ThomasSession Jul 17, 2024
ef5fd14
Merge branch 'dev' into feature/compose-cleanup
Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,7 @@ dependencies {
implementation "androidx.compose.ui:ui-tooling:$composeVersion"
implementation "androidx.compose.runtime:runtime-livedata:$composeVersion"
implementation "androidx.compose.foundation:foundation-layout:$composeVersion"
implementation "androidx.compose.material:material:$composeVersion"
implementation "androidx.compose.material3:material3:1.2.1"
androidTestImplementation "androidx.compose.ui:ui-test-junit4-android:$composeVersion"
debugImplementation "androidx.compose.ui:ui-test-manifest:$composeVersion"

Expand Down
4 changes: 2 additions & 2 deletions app/src/main/java/org/thoughtcrime/securesms/SessionDialogBuilder.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,14 +114,14 @@ class SessionDialogBuilder(val context: Context) {
options,
) { dialog, it -> onSelect(it); dialog.dismiss() }

fun destructiveButton(
fun dangerButton(
@StringRes text: Int,
@StringRes contentDescription: Int = text,
listener: () -> Unit = {}
) = button(
text,
contentDescription,
R.style.Widget_Session_Button_Dialog_DestructiveText,
R.style.Widget_Session_Button_Dialog_DangerText,
) { listener() }

fun okButton(listener: (() -> Unit) = {}) = button(android.R.string.ok) { listener() }
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/java/org/thoughtcrime/securesms/components/menu/ActionItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ package org.thoughtcrime.securesms.components.menu

import android.content.Context
import androidx.annotation.AttrRes
import androidx.annotation.ColorRes
import androidx.annotation.ColorInt

/**
* Represents an action to be rendered
Expand All @@ -13,5 +13,5 @@ data class ActionItem(
val action: Runnable,
val contentDescription: Int? = null,
val subtitle: ((Context) -> CharSequence?)? = null,
@ColorRes val color: Int? = null,
@ColorInt val color: Int? = null,
bemusementpark marked this conversation as resolved.
Show resolved Hide resolved
)
2 changes: 1 addition & 1 deletion app/src/main/java/org/thoughtcrime/securesms/components/menu/ContextMenuList.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ class ContextMenuList(recyclerView: RecyclerView, onItemClick: () -> Unit) {

override fun bind(model: DisplayItem) {
val item = model.item
val color = item.color?.let { ContextCompat.getColor(context, it) }
val color = item.color

if (item.iconRes > 0) {
val typedValue = TypedValue()
Expand Down
3 changes: 1 addition & 2 deletions ...java/org/thoughtcrime/securesms/conversation/disappearingmessages/DisappearingMessages.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import org.session.libsession.utilities.ExpirationUtil
import org.session.libsession.utilities.SSKEnvironment.MessageExpirationManagerProtocol
import org.session.libsession.utilities.TextSecurePreferences
import org.session.libsession.utilities.getExpirationTypeDisplayValue
import org.thoughtcrime.securesms.database.ThreadDatabase
import org.thoughtcrime.securesms.database.model.MessageRecord
import org.thoughtcrime.securesms.showSessionDialog
import org.thoughtcrime.securesms.util.ConfigurationMessageUtilities
Expand Down Expand Up @@ -57,7 +56,7 @@ class DisappearingMessages @Inject constructor(
context.getExpirationTypeDisplayValue(message.isNotDisappearAfterRead)
)
})
destructiveButton(
dangerButton(
text = if (message.expiresIn == 0L) R.string.dialog_disappearing_messages_follow_setting_confirm else R.string.dialog_disappearing_messages_follow_setting_set,
contentDescription = if (message.expiresIn == 0L) R.string.AccessibilityId_confirm else R.string.AccessibilityId_set_button
) {
Expand Down
32 changes: 20 additions & 12 deletions ...a/org/thoughtcrime/securesms/conversation/disappearingmessages/ui/DisappearingMessages.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ package org.thoughtcrime.securesms.conversation.disappearingmessages.ui
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Text
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
Expand All @@ -18,15 +20,15 @@ import androidx.compose.ui.unit.dp
import network.loki.messenger.R
import network.loki.messenger.libsession_util.util.ExpiryMode
import org.thoughtcrime.securesms.ui.Callbacks
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.theme.LocalDimensions
import org.thoughtcrime.securesms.ui.NoOpCallbacks
import org.thoughtcrime.securesms.ui.OptionsCard
import org.thoughtcrime.securesms.ui.RadioOption
import org.thoughtcrime.securesms.ui.color.LocalColors
import org.thoughtcrime.securesms.ui.theme.LocalColors
import org.thoughtcrime.securesms.ui.components.SlimOutlineButton
import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.extraSmall
import org.thoughtcrime.securesms.ui.fadingEdges
import org.thoughtcrime.securesms.ui.theme.LocalType

typealias ExpiryCallbacks = Callbacks<ExpiryMode>
typealias ExpiryRadioOption = RadioOption<ExpiryMode>
Expand All @@ -39,26 +41,32 @@ fun DisappearingMessages(
) {
val scrollState = rememberScrollState()

Column(modifier = modifier.padding(horizontal = LocalDimensions.current.margin)) {
Column(modifier = modifier.padding(horizontal = LocalDimensions.current.spacing)) {
Box(modifier = Modifier.weight(1f)) {
Column(
modifier = Modifier
.padding(bottom = 20.dp)
.padding(vertical = LocalDimensions.current.spacing)
.verticalScroll(scrollState)
.fadingEdges(scrollState),
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallItemSpacing)
) {
state.cards.forEach {
OptionsCard(it, callbacks)
state.cards.forEachIndexed { index, option ->
OptionsCard(option, callbacks)

// add spacing if not the last item
if(index != state.cards.lastIndex){
Spacer(modifier = Modifier.height(LocalDimensions.current.spacing))
bemusementpark marked this conversation as resolved.
Show resolved Hide resolved
}
Comment on lines +52 to +58
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
state.cards.forEachIndexed { index, option ->
OptionsCard(option, callbacks)
// add spacing if not the last item
if(index != state.cards.lastIndex){
Spacer(modifier = Modifier.height(LocalDimensions.current.spacing))
}
state.cards.forEachIndexed { index, option ->
if (index != 0) {
Spacer(modifier = Modifier.height(LocalDimensions.current.spacing))
}
OptionsCard(option, callbacks)

}

if (state.showGroupFooter) Text(
text = stringResource(R.string.activity_disappearing_messages_group_footer),
style = extraSmall,
style = LocalType.current.extraSmall,
fontWeight = FontWeight(400),
color = LocalColors.current.textSecondary,
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth()
modifier = Modifier
.fillMaxWidth()
.padding(top = LocalDimensions.current.xsSpacing)
)
}
}
Expand All @@ -68,7 +76,7 @@ fun DisappearingMessages(
modifier = Modifier
.contentDescription(R.string.AccessibilityId_set_button)
.align(Alignment.CenterHorizontally)
.padding(bottom = 20.dp),
.padding(bottom = LocalDimensions.current.spacing),
onClick = callbacks::onSetClick
)
}
Expand Down
8 changes: 4 additions & 4 deletions ...houghtcrime/securesms/conversation/disappearingmessages/ui/DisappearingMessagesPreview.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ import androidx.compose.ui.unit.dp
import network.loki.messenger.libsession_util.util.ExpiryMode
import org.thoughtcrime.securesms.conversation.disappearingmessages.ExpiryType
import org.thoughtcrime.securesms.conversation.disappearingmessages.State
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.color.Colors
import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
import org.thoughtcrime.securesms.ui.theme.PreviewTheme
import org.thoughtcrime.securesms.ui.theme.ThemeColors
import org.thoughtcrime.securesms.ui.theme.SessionColorsParameterProvider

@Preview(widthDp = 450, heightDp = 700)
@Composable
Expand Down Expand Up @@ -51,7 +51,7 @@ class StatePreviewParameterProvider : PreviewParameterProvider<State> {
@Preview
@Composable
fun PreviewThemes(
@PreviewParameter(SessionColorsParameterProvider::class) colors: Colors
@PreviewParameter(SessionColorsParameterProvider::class) colors: ThemeColors
) {
PreviewTheme(colors) {
DisappearingMessages(
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/java/org/thoughtcrime/securesms/conversation/disappearingmessages/ui/UiState.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import network.loki.messenger.libsession_util.util.ExpiryMode
import org.thoughtcrime.securesms.ui.GetString
import org.thoughtcrime.securesms.ui.RadioOption

typealias ExpiryOptionsCard = OptionsCard<ExpiryMode>
typealias ExpiryOptionsCard = OptionsCardData<ExpiryMode>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool, maybe suffix the typealias too?


data class UiState(
val cards: List<ExpiryOptionsCard> = emptyList(),
Expand All @@ -23,7 +23,7 @@ data class UiState(
)
}

data class OptionsCard<T>(
data class OptionsCardData<T>(
val title: GetString,
val options: List<RadioOption<T>>
) {
Expand Down
39 changes: 21 additions & 18 deletions app/src/main/java/org/thoughtcrime/securesms/conversation/start/home/StartConversation.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
Expand All @@ -21,23 +22,25 @@ import org.thoughtcrime.securesms.conversation.start.NullStartConversationDelega
import org.thoughtcrime.securesms.conversation.start.StartConversationDelegate
import org.thoughtcrime.securesms.ui.Divider
import org.thoughtcrime.securesms.ui.ItemButton
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
import org.thoughtcrime.securesms.ui.color.Colors
import org.thoughtcrime.securesms.ui.color.LocalColors
import org.thoughtcrime.securesms.ui.theme.LocalDimensions
import org.thoughtcrime.securesms.ui.theme.PreviewTheme
import org.thoughtcrime.securesms.ui.theme.SessionColorsParameterProvider
import org.thoughtcrime.securesms.ui.theme.ThemeColors
import org.thoughtcrime.securesms.ui.theme.LocalColors
import org.thoughtcrime.securesms.ui.components.AppBar
import org.thoughtcrime.securesms.ui.components.QrImage
import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.small
import org.thoughtcrime.securesms.ui.xl
import org.thoughtcrime.securesms.ui.theme.LocalType

@Composable
internal fun StartConversationScreen(
accountId: String,
delegate: StartConversationDelegate
) {
Column(modifier = Modifier.background(LocalColors.current.backgroundSecondary)) {
Column(modifier = Modifier.background(
LocalColors.current.backgroundSecondary,
shape = MaterialTheme.shapes.small
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't a small shape, it's a bottom sheet, it's large.

We shouldn't just use this because it has the same value.

We could do our own Shapes object, but probably overkill atm, so just some extra val BottomSheetShape?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It isn't large, it is the rounded corner value that we want, which in this case matches the small value that we have defined in the Theme

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I'm just saying it's a coincidence, that our theme at the moment uses the same shape for small and bottom sheets.

)) {
AppBar(stringResource(R.string.dialog_start_conversation_title), onClose = delegate::onDialogClosePressed)
Surface(
modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection()),
Expand Down Expand Up @@ -74,18 +77,18 @@ internal fun StartConversationScreen(
)
Column(
modifier = Modifier
.padding(horizontal = LocalDimensions.current.margin)
.padding(top = LocalDimensions.current.itemSpacing)
.padding(bottom = LocalDimensions.current.margin)
.padding(horizontal = LocalDimensions.current.spacing)
.padding(top = LocalDimensions.current.spacing)
.padding(bottom = LocalDimensions.current.spacing)
) {
Text(stringResource(R.string.accountIdYours), style = xl)
Spacer(modifier = Modifier.height(LocalDimensions.current.xxxsItemSpacing))
Text(stringResource(R.string.accountIdYours), style = LocalType.current.xl)
Spacer(modifier = Modifier.height(LocalDimensions.current.xxsSpacing))
Text(
text = stringResource(R.string.qrYoursDescription),
color = LocalColors.current.textSecondary,
style = small
style = LocalType.current.small
)
Spacer(modifier = Modifier.height(LocalDimensions.current.smallItemSpacing))
Spacer(modifier = Modifier.height(LocalDimensions.current.smallSpacing))
QrImage(
string = accountId,
Modifier.contentDescription(R.string.AccessibilityId_qr_code),
Expand All @@ -100,7 +103,7 @@ internal fun StartConversationScreen(
@Preview
@Composable
private fun PreviewStartConversationScreen(
@PreviewParameter(SessionColorsParameterProvider::class) colors: Colors
@PreviewParameter(SessionColorsParameterProvider::class) colors: ThemeColors
) {
PreviewTheme(colors) {
StartConversationScreen(
Expand Down
34 changes: 19 additions & 15 deletions app/src/main/java/org/thoughtcrime/securesms/conversation/start/invitefriend/InviteFriend.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import network.loki.messenger.R
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.base
import org.thoughtcrime.securesms.ui.color.LocalColors
import org.thoughtcrime.securesms.ui.theme.LocalDimensions
import org.thoughtcrime.securesms.ui.theme.PreviewTheme
import org.thoughtcrime.securesms.ui.theme.LocalColors
import org.thoughtcrime.securesms.ui.components.AppBar
import org.thoughtcrime.securesms.ui.components.SlimOutlineButton
import org.thoughtcrime.securesms.ui.components.SlimOutlineCopyButton
import org.thoughtcrime.securesms.ui.components.border
import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.small
import org.thoughtcrime.securesms.ui.theme.LocalType

@Composable
internal fun InviteFriend(
Expand All @@ -34,35 +34,39 @@ internal fun InviteFriend(
copyPublicKey: () -> Unit = {},
sendInvitation: () -> Unit = {},
) {
Column(modifier = Modifier.background(LocalColors.current.backgroundSecondary)) {
Column(modifier = Modifier.background(
LocalColors.current.backgroundSecondary,
shape = MaterialTheme.shapes.small
)) {
AppBar(stringResource(R.string.invite_a_friend), onBack = onBack, onClose = onClose)
Column(
modifier = Modifier.padding(horizontal = LocalDimensions.current.itemSpacing),
modifier = Modifier.padding(horizontal = LocalDimensions.current.spacing)
.padding(top = LocalDimensions.current.spacing),
) {
Text(
accountId,
modifier = Modifier
.contentDescription(R.string.AccessibilityId_account_id)
.fillMaxWidth()
.border()
.padding(LocalDimensions.current.smallMargin),
.padding(LocalDimensions.current.spacing),
textAlign = TextAlign.Center,
style = base
style = LocalType.current.base
)

Spacer(modifier = Modifier.height(LocalDimensions.current.xsItemSpacing))
Spacer(modifier = Modifier.height(LocalDimensions.current.xsSpacing))

Text(
stringResource(R.string.invite_your_friend_to_chat_with_you_on_session_by_sharing_your_account_id_with_them),
textAlign = TextAlign.Center,
style = small,
style = LocalType.current.small,
color = LocalColors.current.textSecondary,
modifier = Modifier.padding(horizontal = LocalDimensions.current.smallItemSpacing)
modifier = Modifier.padding(horizontal = LocalDimensions.current.smallSpacing)
)

Spacer(modifier = Modifier.height(LocalDimensions.current.smallItemSpacing))
Spacer(modifier = Modifier.height(LocalDimensions.current.smallSpacing))

Row(horizontalArrangement = spacedBy(LocalDimensions.current.smallItemSpacing)) {
Row(horizontalArrangement = spacedBy(LocalDimensions.current.smallSpacing)) {
SlimOutlineButton(
stringResource(R.string.share),
modifier = Modifier
Expand Down
Loading