diff --git a/app/src/main/java/org/thoughtcrime/securesms/conversation/start/NewConversationHomeFragment.kt b/app/src/main/java/org/thoughtcrime/securesms/conversation/start/NewConversationHomeFragment.kt index 582df5b289..c88a01f2aa 100644 --- a/app/src/main/java/org/thoughtcrime/securesms/conversation/start/NewConversationHomeFragment.kt +++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/start/NewConversationHomeFragment.kt @@ -24,6 +24,7 @@ import network.loki.messenger.R import org.session.libsession.utilities.TextSecurePreferences import org.thoughtcrime.securesms.ui.AppTheme import org.thoughtcrime.securesms.ui.ItemButton +import org.thoughtcrime.securesms.ui.LocalDimensions import org.thoughtcrime.securesms.ui.classicDarkColors import org.thoughtcrime.securesms.ui.components.AppBar import org.thoughtcrime.securesms.ui.components.QrImage @@ -57,20 +58,20 @@ class NewConversationHomeFragment : Fragment() { Column(modifier = Modifier.background(MaterialTheme.colors.primarySurface)) { AppBar(stringResource(R.string.dialog_new_conversation_title), onClose = { delegate.onDialogClosePressed() }) ItemButton(textId = R.string.messageNew, icon = R.drawable.ic_message) { delegate.onNewMessageSelected() } - Divider(modifier = Modifier.padding(start = 80.dp)) + Divider(startIndent = LocalDimensions.current.dividerIndent) ItemButton(textId = R.string.activity_create_group_title, icon = R.drawable.ic_group) { delegate.onCreateGroupSelected() } - Divider(modifier = Modifier.padding(start = 80.dp)) + Divider(startIndent = LocalDimensions.current.dividerIndent) ItemButton(textId = R.string.dialog_join_community_title, icon = R.drawable.ic_globe) { delegate.onJoinCommunitySelected() } - Divider(modifier = Modifier.padding(start = 80.dp)) + Divider(startIndent = LocalDimensions.current.dividerIndent) ItemButton(textId = R.string.activity_settings_invite_button_title, icon = R.drawable.ic_invite_friend, contentDescription = R.string.AccessibilityId_invite_friend_button) { delegate.onInviteFriend() } Column( modifier = Modifier - .padding(horizontal = 32.dp) - .padding(top = 20.dp)) { + .padding(horizontal = LocalDimensions.current.marginMedium) + .padding(top = LocalDimensions.current.itemSpacingMedium)) { Text(text = stringResource(R.string.accountIdYours), style = MaterialTheme.typography.medium) - Spacer(modifier = Modifier.height(4.dp)) + Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingTiny)) Text(text = stringResource(R.string.qrYoursDescription), color = classicDarkColors[5], style = MaterialTheme.typography.small) - Spacer(modifier = Modifier.height(20.dp)) + Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingSmall)) QrImage(string = TextSecurePreferences.getLocalNumber(requireContext())!!, Modifier.contentDescription(R.string.AccessibilityId_qr_code)) } } diff --git a/app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt b/app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt index db94ba9536..05bb3ac5cb 100644 --- a/app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt +++ b/app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt @@ -17,11 +17,11 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Card import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.Composable @@ -49,6 +49,8 @@ import org.thoughtcrime.securesms.onboarding.pickname.startPickDisplayNameActivi import org.thoughtcrime.securesms.service.KeyCachingService import org.thoughtcrime.securesms.showOpenUrlDialog import org.thoughtcrime.securesms.ui.AppTheme +import org.thoughtcrime.securesms.ui.Cell +import org.thoughtcrime.securesms.ui.LocalDimensions import org.thoughtcrime.securesms.ui.PreviewTheme import org.thoughtcrime.securesms.ui.ThemeResPreviewParameterProvider import org.thoughtcrime.securesms.ui.classicDarkColors @@ -119,63 +121,68 @@ class LandingActivity : BaseActionBarActivity() { } } - Column(modifier = Modifier.padding(horizontal = 36.dp)) { - Spacer(modifier = Modifier.weight(1f)) - Text( - stringResource(R.string.onboardingBubblePrivacyInYourPocket), - modifier = Modifier.align(Alignment.CenterHorizontally), - style = MaterialTheme.typography.h4, - textAlign = TextAlign.Center - ) - Spacer(modifier = Modifier.height(24.dp)) + Column { + Column(modifier = Modifier + .weight(1f) + .padding(horizontal = LocalDimensions.current.marginMedium)) { + Spacer(modifier = Modifier.weight(1f)) + Text( + stringResource(R.string.onboardingBubblePrivacyInYourPocket), + modifier = Modifier.align(Alignment.CenterHorizontally), + style = MaterialTheme.typography.h4, + textAlign = TextAlign.Center + ) + Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingMedium)) - LazyColumn( - state = listState, - modifier = Modifier - .heightIn(min = 200.dp) - .fillMaxWidth() - .weight(2f), - verticalArrangement = Arrangement.spacedBy(16.dp) - ) { - items( - MESSAGES.take(count), - key = { it.stringId } - ) { item -> - AnimateMessageText( - stringResource(item.stringId), - item.isOutgoing - ) + LazyColumn( + state = listState, + modifier = Modifier + .heightIn(min = 200.dp) + .fillMaxWidth() + .weight(3f), + verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.itemSpacingSmall) + ) { + items( + MESSAGES.take(count), + key = { it.stringId } + ) { item -> + AnimateMessageText( + stringResource(item.stringId), + item.isOutgoing + ) + } } + + Spacer(modifier = Modifier.weight(1f)) } - Spacer(modifier = Modifier.weight(1f)) - - OutlineButton( - text = stringResource(R.string.onboardingAccountCreate), - modifier = Modifier - .contentDescription(R.string.AccessibilityId_create_account_button) - .width(262.dp) - .align(Alignment.CenterHorizontally), - onClick = ::startPickDisplayNameActivity - ) - Spacer(modifier = Modifier.height(14.dp)) - FilledButton( - text = stringResource(R.string.onboardingAccountExists), - modifier = Modifier - .width(262.dp) - .align(Alignment.CenterHorizontally) - .contentDescription(R.string.AccessibilityId_restore_account_button) - ) { start() } - Spacer(modifier = Modifier.height(8.dp)) - BorderlessButton( - text = stringResource(R.string.onboardingTosPrivacy), - modifier = Modifier - .width(262.dp) - .align(Alignment.CenterHorizontally) - .contentDescription(R.string.AccessibilityId_open_url), - onClick = ::openDialog - ) - Spacer(modifier = Modifier.height(8.dp)) + Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.marginLarge)) { + FilledButton( + text = stringResource(R.string.onboardingAccountCreate), + modifier = Modifier + .fillMaxWidth() + .align(Alignment.CenterHorizontally) + .contentDescription(R.string.AccessibilityId_create_account_button), + onClick = ::startPickDisplayNameActivity + ) + Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingSmall)) + OutlineButton( + text = stringResource(R.string.onboardingAccountExists), + modifier = Modifier + .fillMaxWidth() + .align(Alignment.CenterHorizontally) + .contentDescription(R.string.AccessibilityId_restore_account_button) + ) { start() } + BorderlessButton( + text = stringResource(R.string.onboardingTosPrivacy), + modifier = Modifier + .fillMaxWidth() + .align(Alignment.CenterHorizontally) + .contentDescription(R.string.AccessibilityId_open_url), + onClick = ::openDialog + ) + Spacer(modifier = Modifier.height(LocalDimensions.current.itemSpacingExtraSmall)) + } } } @@ -218,47 +225,34 @@ private fun AnimateMessageText(text: String, isOutgoing: Boolean, modifier: Modi @Composable private fun MessageText(text: String, isOutgoing: Boolean, modifier: Modifier) { - if (isOutgoing) OutgoingText(text, modifier) else IncomingText(text, modifier) -} - -@Composable -private fun IncomingText(text: String, modifier: Modifier = Modifier) { - ChatText( - text, - color = classicDarkColors[2], - modifier = modifier - ) -} - -@Composable -private fun OutgoingText(text: String, modifier: Modifier = Modifier) { Box(modifier = modifier then Modifier.fillMaxWidth()) { - ChatText( + MessageText( text, - color = session_accent, - textColor = MaterialTheme.colors.primary, - modifier = Modifier.align(Alignment.TopEnd) + color = if (isOutgoing) session_accent else classicDarkColors[2], + textColor = if (isOutgoing) MaterialTheme.colors.primary else Color.Unspecified, + modifier = Modifier.align(if (isOutgoing) Alignment.TopEnd else Alignment.TopStart) ) } } @Composable -private fun ChatText( +private fun MessageText( text: String, color: Color, modifier: Modifier = Modifier, textColor: Color = Color.Unspecified ) { - Text( - text, - style = MaterialTheme.typography.large, - color = textColor, - modifier = modifier - .fillMaxWidth(0.666f) - .background( - color = color, - shape = RoundedCornerShape(size = 13.dp) - ) - .padding(horizontal = 16.dp, vertical = 12.dp) - ) + Card( + modifier = modifier.fillMaxWidth(0.666f), + shape = RoundedCornerShape(size = 13.dp), + backgroundColor = color, + elevation = 0.dp + ) { + Text( + text, + style = MaterialTheme.typography.large, + color = textColor, + modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp) + ) + } } diff --git a/app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt b/app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt index b72328df83..a1b962b7fb 100644 --- a/app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt +++ b/app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt @@ -5,6 +5,7 @@ import androidx.annotation.AttrRes import androidx.appcompat.view.ContextThemeWrapper import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.selection.LocalTextSelectionColors import androidx.compose.foundation.text.selection.TextSelectionColors import androidx.compose.material.LocalContentColor @@ -21,7 +22,9 @@ import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.PreviewParameterProvider +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit +import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.google.accompanist.themeadapter.appcompat.createAppCompatTheme import com.google.android.material.color.MaterialColors @@ -32,6 +35,20 @@ val LocalButtonColor = staticCompositionLocalOf { Color.Black } val LocalLightCell = staticCompositionLocalOf { Color.Black } val LocalOnLightCell = staticCompositionLocalOf { Color.Black } +val LocalDimensions = staticCompositionLocalOf { Dimensions() } + +data class Dimensions( + val itemSpacingTiny: Dp = 4.dp, + val itemSpacingExtraSmall: Dp = 8.dp, + val itemSpacingSmall: Dp = 16.dp, + val itemSpacingMedium: Dp = 24.dp, + val marginTiny: Dp = 8.dp, + val marginSmall: Dp = 16.dp, + val marginMedium: Dp = 32.dp, + val marginLarge: Dp = 64.dp, + val dividerIndent: Dp = 80.dp, +) + /** * Converts current Theme to Compose Theme. */ @@ -85,7 +102,9 @@ fun AppCompatTheme( surface = surface ?: colors.surface ), typography = typography, - shapes = shapes, + shapes = shapes.copy( + small = RoundedCornerShape(50) + ), ) { // We update the LocalContentColor to match our onBackground. This allows the default // content color to be more appropriate to the theme background diff --git a/app/src/main/java/org/thoughtcrime/securesms/ui/components/Button.kt b/app/src/main/java/org/thoughtcrime/securesms/ui/components/Button.kt index ff9ca63d7a..2e6d5578e8 100644 --- a/app/src/main/java/org/thoughtcrime/securesms/ui/components/Button.kt +++ b/app/src/main/java/org/thoughtcrime/securesms/ui/components/Button.kt @@ -23,6 +23,7 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape @@ -41,7 +42,6 @@ import org.thoughtcrime.securesms.ui.extraSmall import kotlin.time.Duration.Companion.seconds val LocalButtonSize = staticCompositionLocalOf { mediumButton } -val LocalButtonShape = staticCompositionLocalOf { RoundedCornerShape(percent = 50) } @Composable fun Modifier.applyButtonSize() = then(LocalButtonSize.current) @@ -56,7 +56,10 @@ fun OutlineButton(@StringRes textId: Int, modifier: Modifier = Modifier, onClick @Composable fun OutlineButton(text: String, modifier: Modifier = Modifier, onClick: () -> Unit) { - OutlineButton(modifier.contentDescription(text), onClick = onClick) { Text(text) } + OutlineButton( + modifier.contentDescription(text), + onClick = onClick + ) { Text(text) } } @Composable @@ -71,7 +74,6 @@ fun OutlineButton( interactionSource = interactionSource, onClick = onClick, border = BorderStroke(1.dp, LocalButtonColor.current), - shape = LocalButtonShape.current, colors = ButtonDefaults.outlinedButtonColors( contentColor = LocalButtonColor.current, backgroundColor = Color.Unspecified @@ -125,7 +127,7 @@ fun FilledButton( onClick: () -> Unit ) { OutlinedButton( - modifier = modifier.size(108.dp, 34.dp), + modifier = modifier, onClick = onClick, shape = RoundedCornerShape(50), colors = ButtonDefaults.outlinedButtonColors(