Fix ItemButton minHeight style

This commit is contained in:
Andrew 2024-06-26 12:23:18 +09:30
parent 432a2816ab
commit 5294cd45a0
5 changed files with 65 additions and 49 deletions

View File

@ -10,21 +10,18 @@ import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Surface import androidx.compose.material.Surface
import androidx.compose.material.Text import androidx.compose.material.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.rememberNestedScrollInteropConnection import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import network.loki.messenger.R import network.loki.messenger.R
import org.thoughtcrime.securesms.conversation.start.NullStartConversationDelegate import org.thoughtcrime.securesms.conversation.start.NullStartConversationDelegate
import org.thoughtcrime.securesms.conversation.start.StartConversationDelegate import org.thoughtcrime.securesms.conversation.start.StartConversationDelegate
import org.thoughtcrime.securesms.ui.Divider import org.thoughtcrime.securesms.ui.Divider
import org.thoughtcrime.securesms.ui.ItemButton import org.thoughtcrime.securesms.ui.ItemButton
import org.thoughtcrime.securesms.ui.LocalDimensions import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.LocalItemButtonMinHeight
import org.thoughtcrime.securesms.ui.PreviewTheme import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
import org.thoughtcrime.securesms.ui.color.Colors import org.thoughtcrime.securesms.ui.color.Colors
@ -49,31 +46,29 @@ internal fun StartConversationScreen(
Column( Column(
modifier = Modifier.verticalScroll(rememberScrollState()) modifier = Modifier.verticalScroll(rememberScrollState())
) { ) {
CompositionLocalProvider(LocalItemButtonMinHeight provides 40.dp) { ItemButton(
ItemButton( textId = R.string.messageNew,
textId = R.string.messageNew, icon = R.drawable.ic_message,
icon = R.drawable.ic_message, onClick = delegate::onNewMessageSelected)
onClick = delegate::onNewMessageSelected) Divider(startIndent = LocalDimensions.current.dividerIndent)
Divider(startIndent = LocalDimensions.current.dividerIndent) ItemButton(
ItemButton( textId = R.string.activity_create_group_title,
textId = R.string.activity_create_group_title, icon = R.drawable.ic_group,
icon = R.drawable.ic_group, onClick = delegate::onCreateGroupSelected
onClick = delegate::onCreateGroupSelected )
) Divider(startIndent = LocalDimensions.current.dividerIndent)
Divider(startIndent = LocalDimensions.current.dividerIndent) ItemButton(
ItemButton( textId = R.string.dialog_join_community_title,
textId = R.string.dialog_join_community_title, icon = R.drawable.ic_globe,
icon = R.drawable.ic_globe, onClick = delegate::onJoinCommunitySelected
onClick = delegate::onJoinCommunitySelected )
) Divider(startIndent = LocalDimensions.current.dividerIndent)
Divider(startIndent = LocalDimensions.current.dividerIndent) ItemButton(
ItemButton( textId = R.string.activity_settings_invite_button_title,
textId = R.string.activity_settings_invite_button_title, icon = R.drawable.ic_invite_friend,
icon = R.drawable.ic_invite_friend, Modifier.contentDescription(R.string.AccessibilityId_invite_friend_button),
Modifier.contentDescription(R.string.AccessibilityId_invite_friend_button), onClick = delegate::onInviteFriend
onClick = delegate::onInviteFriend )
)
}
Column( Column(
modifier = Modifier modifier = Modifier
.padding(horizontal = LocalDimensions.current.margin) .padding(horizontal = LocalDimensions.current.margin)

View File

@ -63,6 +63,7 @@ import org.thoughtcrime.securesms.ui.Divider
import org.thoughtcrime.securesms.ui.GetString import org.thoughtcrime.securesms.ui.GetString
import org.thoughtcrime.securesms.ui.HorizontalPagerIndicator import org.thoughtcrime.securesms.ui.HorizontalPagerIndicator
import org.thoughtcrime.securesms.ui.ItemButton import org.thoughtcrime.securesms.ui.ItemButton
import org.thoughtcrime.securesms.ui.LargeItemButton
import org.thoughtcrime.securesms.ui.LocalDimensions import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
@ -217,7 +218,7 @@ fun CellButtons(
Cell { Cell {
Column { Column {
onReply?.let { onReply?.let {
ItemButton( LargeItemButton(
R.string.reply, R.string.reply,
R.drawable.ic_message_details__reply, R.drawable.ic_message_details__reply,
onClick = it onClick = it
@ -225,14 +226,14 @@ fun CellButtons(
Divider() Divider()
} }
onResend?.let { onResend?.let {
ItemButton( LargeItemButton(
R.string.resend, R.string.resend,
R.drawable.ic_message_details__refresh, R.drawable.ic_message_details__refresh,
onClick = it onClick = it
) )
Divider() Divider()
} }
ItemButton( LargeItemButton(
R.string.delete, R.string.delete,
R.drawable.ic_message_details__trash, R.drawable.ic_message_details__trash,
colors = destructiveButtonColors(), colors = destructiveButtonColors(),

View File

@ -76,6 +76,8 @@ import org.thoughtcrime.securesms.ui.Cell
import org.thoughtcrime.securesms.ui.Divider import org.thoughtcrime.securesms.ui.Divider
import org.thoughtcrime.securesms.ui.ItemButton import org.thoughtcrime.securesms.ui.ItemButton
import org.thoughtcrime.securesms.ui.ItemButtonWithDrawable import org.thoughtcrime.securesms.ui.ItemButtonWithDrawable
import org.thoughtcrime.securesms.ui.LargeItemButton
import org.thoughtcrime.securesms.ui.LargeItemButtonWithDrawable
import org.thoughtcrime.securesms.ui.LocalDimensions import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.color.destructiveButtonColors import org.thoughtcrime.securesms.ui.color.destructiveButtonColors
import org.thoughtcrime.securesms.ui.components.OutlineButton import org.thoughtcrime.securesms.ui.components.OutlineButton
@ -414,27 +416,27 @@ class SettingsActivity : PassphraseRequiredActionBarActivity() {
Cell { Cell {
Column { Column {
ItemButtonWithDrawable(R.string.activity_path_title, if (hasPaths) R.drawable.ic_status else R.drawable.ic_path_yellow) { show<PathActivity>() } LargeItemButtonWithDrawable(R.string.activity_path_title, if (hasPaths) R.drawable.ic_status else R.drawable.ic_path_yellow) { show<PathActivity>() }
Divider() Divider()
ItemButton(R.string.activity_settings_privacy_button_title, R.drawable.ic_privacy_icon) { show<PrivacySettingsActivity>() } LargeItemButton(R.string.activity_settings_privacy_button_title, R.drawable.ic_privacy_icon) { show<PrivacySettingsActivity>() }
Divider() Divider()
ItemButton(R.string.activity_settings_notifications_button_title, R.drawable.ic_speaker, Modifier.contentDescription(R.string.AccessibilityId_notifications)) { show<NotificationSettingsActivity>() } LargeItemButton(R.string.activity_settings_notifications_button_title, R.drawable.ic_speaker, Modifier.contentDescription(R.string.AccessibilityId_notifications)) { show<NotificationSettingsActivity>() }
Divider() Divider()
ItemButton(R.string.activity_settings_conversations_button_title, R.drawable.ic_conversations, Modifier.contentDescription(R.string.AccessibilityId_conversations)) { show<ChatSettingsActivity>() } LargeItemButton(R.string.activity_settings_conversations_button_title, R.drawable.ic_conversations, Modifier.contentDescription(R.string.AccessibilityId_conversations)) { show<ChatSettingsActivity>() }
Divider() Divider()
ItemButton(R.string.activity_settings_message_requests_button_title, R.drawable.ic_message_requests, Modifier.contentDescription(R.string.AccessibilityId_message_requests)) { show<MessageRequestsActivity>() } LargeItemButton(R.string.activity_settings_message_requests_button_title, R.drawable.ic_message_requests, Modifier.contentDescription(R.string.AccessibilityId_message_requests)) { show<MessageRequestsActivity>() }
Divider() Divider()
ItemButton(R.string.activity_settings_message_appearance_button_title, R.drawable.ic_appearance, Modifier.contentDescription(R.string.AccessibilityId_appearance)) { show<AppearanceSettingsActivity>() } LargeItemButton(R.string.activity_settings_message_appearance_button_title, R.drawable.ic_appearance, Modifier.contentDescription(R.string.AccessibilityId_appearance)) { show<AppearanceSettingsActivity>() }
Divider() Divider()
ItemButton(R.string.activity_settings_invite_button_title, R.drawable.ic_invite_friend, Modifier.contentDescription(R.string.AccessibilityId_invite_friend)) { sendInvitationToUseSession() } LargeItemButton(R.string.activity_settings_invite_button_title, R.drawable.ic_invite_friend, Modifier.contentDescription(R.string.AccessibilityId_invite_friend)) { sendInvitationToUseSession() }
Divider() Divider()
if (!prefs.getHidePassword()) { if (!prefs.getHidePassword()) {
ItemButton(R.string.sessionRecoveryPassword, R.drawable.ic_recovery_phrase, Modifier.contentDescription(R.string.AccessibilityId_recovery_password_menu_item)) { show<RecoveryPasswordActivity>() } LargeItemButton(R.string.sessionRecoveryPassword, R.drawable.ic_recovery_phrase, Modifier.contentDescription(R.string.AccessibilityId_recovery_password_menu_item)) { show<RecoveryPasswordActivity>() }
Divider() Divider()
} }
ItemButton(R.string.activity_settings_help_button, R.drawable.ic_help, Modifier.contentDescription(R.string.AccessibilityId_help)) { show<HelpSettingsActivity>() } LargeItemButton(R.string.activity_settings_help_button, R.drawable.ic_help, Modifier.contentDescription(R.string.AccessibilityId_help)) { show<HelpSettingsActivity>() }
Divider() Divider()
ItemButton(R.string.activity_settings_clear_all_data_button_title, R.drawable.ic_clear_data, Modifier.contentDescription(R.string.AccessibilityId_clear_data), destructiveButtonColors()) { ClearAllDataDialog().show(supportFragmentManager, "Clear All Data Dialog") } LargeItemButton(R.string.activity_settings_clear_all_data_button_title, R.drawable.ic_clear_data, Modifier.contentDescription(R.string.AccessibilityId_clear_data), destructiveButtonColors()) { ClearAllDataDialog().show(supportFragmentManager, "Clear All Data Dialog") }
} }
} }
} }

View File

@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
@ -37,7 +36,6 @@ import androidx.compose.material.TextButton
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent import androidx.compose.ui.draw.drawWithContent
@ -110,7 +108,16 @@ fun <T> OptionsCard(card: OptionsCard<T>, callbacks: Callbacks<T>) {
} }
} }
val LocalItemButtonMinHeight = staticCompositionLocalOf { 60.dp } @Composable
fun LargeItemButtonWithDrawable(
@StringRes textId: Int,
@DrawableRes icon: Int,
modifier: Modifier = Modifier,
colors: ButtonColors = transparentButtonColors(),
onClick: () -> Unit
) {
ItemButtonWithDrawable(textId, icon, modifier.heightIn(min = LocalDimensions.current.minLargeItemButtonHeight), colors, onClick)
}
@Composable @Composable
fun ItemButtonWithDrawable( fun ItemButtonWithDrawable(
@ -137,6 +144,17 @@ fun ItemButtonWithDrawable(
) )
} }
@Composable
fun LargeItemButton(
@StringRes textId: Int,
@DrawableRes icon: Int,
modifier: Modifier = Modifier,
colors: ButtonColors = transparentButtonColors(),
onClick: () -> Unit
) {
ItemButton(textId, icon, modifier.heightIn(min = LocalDimensions.current.minLargeItemButtonHeight), colors, onClick)
}
/** /**
* Courtesy [ItemButton] implementation that takes a [DrawableRes] for the [icon] * Courtesy [ItemButton] implementation that takes a [DrawableRes] for the [icon]
*/ */
@ -177,9 +195,7 @@ fun ItemButton(
onClick: () -> Unit onClick: () -> Unit
) { ) {
TextButton( TextButton(
modifier = modifier modifier = modifier.fillMaxWidth(),
.fillMaxWidth()
.heightIn(min = LocalItemButtonMinHeight.current),
colors = colors, colors = colors,
onClick = onClick, onClick = onClick,
shape = RectangleShape, shape = RectangleShape,
@ -187,14 +203,15 @@ fun ItemButton(
Box( Box(
modifier = Modifier modifier = Modifier
.width(80.dp) .width(80.dp)
.height(LocalItemButtonMinHeight.current) .wrapContentHeight()
.align(Alignment.CenterVertically) .align(Alignment.CenterVertically)
) { ) {
icon() icon()
} }
Text( Text(
text, text,
Modifier.fillMaxWidth() Modifier
.fillMaxWidth()
.padding(vertical = LocalDimensions.current.xsItemSpacing) .padding(vertical = LocalDimensions.current.xsItemSpacing)
.align(Alignment.CenterVertically), .align(Alignment.CenterVertically),
style = xl style = xl

View File

@ -25,6 +25,7 @@ data class Dimensions(
val dividerIndent: Dp = 80.dp, val dividerIndent: Dp = 80.dp,
val appBarHeight: Dp = 64.dp, val appBarHeight: Dp = 64.dp,
val minScrollableViewHeight: Dp = 200.dp, val minScrollableViewHeight: Dp = 200.dp,
val minLargeItemButtonHeight: Dp = 60.dp,
val indicatorHeight: Dp = 4.dp, val indicatorHeight: Dp = 4.dp,
val borderStroke: Dp = 1.dp val borderStroke: Dp = 1.dp