Skip to content

Commit

Permalink
Merge branch 'trunk' into issue/21444-personalization-accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
nbradbury authored Nov 11, 2024
2 parents 12d3f1b + ae41f3f commit e5d90e9
Show file tree
Hide file tree
Showing 22 changed files with 129 additions and 98 deletions.
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
package org.wordpress.android.ui.compose.components.card

import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
Expand All @@ -16,14 +20,28 @@ fun UnelevatedCard(
) {
val shape = RoundedCornerShape(10.dp)
Card(
modifier = Modifier.clip(shape).then(modifier),
modifier = Modifier
.clip(shape)
.then(modifier),
border = BorderStroke(
width = 1.dp,
color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f)
),
elevation = 0.dp,
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surface,
),
elevation = CardDefaults.elevatedCardElevation(0.dp),
shape = shape,
) {
content()
}
}

@Preview
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
private fun UnelevatedCardPreview() {
UnelevatedCard {
Text(text = "Preview")
}
}
Original file line number Diff line number Diff line change
@@ -1,61 +1,104 @@
package org.wordpress.android.ui.compose.styles

import androidx.compose.material.ContentAlpha
import androidx.compose.material.MaterialTheme.colors
import androidx.compose.foundation.layout.Column
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.Modifier
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

object DashboardCardTypography {
val title: TextStyle
@Composable
get() = MaterialTheme.typography.bodyLarge.copy(
fontWeight = FontWeight.SemiBold,
color = colors.onSurface.copy(alpha = ContentAlpha.high)
color = MaterialTheme.colorScheme.onSurface
)

val smallTitle: TextStyle
@Composable
get() = MaterialTheme.typography.bodyLarge.copy(
fontWeight = FontWeight.Normal,
fontSize = 14.sp,
color = colors.onSurface.copy(alpha = ContentAlpha.high)
color = MaterialTheme.colorScheme.onSurface
)

val subTitle: TextStyle
@Composable
get() = MaterialTheme.typography.titleMedium.copy(
fontWeight = FontWeight.Medium,
fontStyle = FontStyle.Normal,
color = colors.onSurface.copy(alpha = ContentAlpha.high)
color = MaterialTheme.colorScheme.onSurface
)

val detailText: TextStyle
@Composable
get() = MaterialTheme.typography.bodyMedium.copy(
color = colors.onSurface.copy(alpha = ContentAlpha.medium)
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.74f)
)

val largeText: TextStyle
@Composable
get() = MaterialTheme.typography.headlineMedium.copy(
color = colors.onSurface.copy(alpha = ContentAlpha.high)
color = MaterialTheme.colorScheme.onSurface
)

val footerCTA: TextStyle
@Composable
get() = MaterialTheme.typography.titleMedium.copy(
fontWeight = FontWeight.Medium,
color = colors.primary
color = MaterialTheme.colorScheme.primary
)

val standaloneText: TextStyle
@Composable
get() = MaterialTheme.typography.titleMedium.copy(
fontWeight = FontWeight.Medium,
color = colors.onSurface.copy(alpha = ContentAlpha.high)
color = MaterialTheme.colorScheme.onSurface
)
}

@Preview
@Composable
fun DashboardCardTypographyPreview() {
val padding = Modifier.padding(8.dp)

Column {
Text(
text = "Title",
style = DashboardCardTypography.title,
modifier = padding
)
Text(
text = "subTitle",
style = DashboardCardTypography.subTitle,
modifier = padding
)
Text(
text = "detailText",
style = DashboardCardTypography.detailText,
modifier = padding
)
Text(
text = "largeText",
style = DashboardCardTypography.largeText,
modifier = padding
)
Text(
text = "footerCTA",
style = DashboardCardTypography.footerCTA,
modifier = padding
)
Text(
text = "standaloneText",
style = DashboardCardTypography.standaloneText,
modifier = padding
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
Expand Down Expand Up @@ -71,10 +71,10 @@ fun BlazeCampaignsCard(
)
} else Spacer(modifier = Modifier.size(8.dp))
}
Divider(
thickness = 0.5.dp,
HorizontalDivider(
modifier = Modifier
.padding(start = 16.dp)
.padding(start = 16.dp),
thickness = 0.5.dp
)
Column(modifier = Modifier
.clickable { blazeCampaignCardModel.footer.onClick.click() }) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.ui.Modifier
import org.wordpress.android.databinding.CampaignsCardBinding
import org.wordpress.android.ui.compose.theme.AppThemeM2WithoutBackground
import org.wordpress.android.ui.compose.theme.AppThemeM3WithoutBackground
import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.BlazeCard.BlazeCampaignsCardModel
import org.wordpress.android.ui.mysite.MySiteCardAndItemViewHolder
import org.wordpress.android.util.extensions.viewBinding
Expand All @@ -14,7 +14,7 @@ class BlazeCampaignsCardViewHolder(parent: ViewGroup) :
MySiteCardAndItemViewHolder<CampaignsCardBinding>(parent.viewBinding(CampaignsCardBinding::inflate)) {
fun bind(cardModel: BlazeCampaignsCardModel) = with(binding) {
blazeCampaignsCard.setContent {
AppThemeM2WithoutBackground {
AppThemeM3WithoutBackground {
BlazeCampaignsCard(
blazeCampaignCardModel = cardModel, modifier = Modifier
.fillMaxWidth()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
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 Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.ContentAlpha
import androidx.compose.material.Divider
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.MoreVert
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
Expand All @@ -36,7 +35,7 @@ import androidx.compose.ui.unit.dp
import org.wordpress.android.R
import org.wordpress.android.ui.compose.components.card.UnelevatedCard
import org.wordpress.android.ui.compose.styles.DashboardCardTypography
import org.wordpress.android.ui.compose.theme.AppThemeM2
import org.wordpress.android.ui.compose.theme.AppThemeM3

/**
* A toolbar for MySite cards written in Compose, that tries to match behavior and positioning of cards written in XML.
Expand Down Expand Up @@ -111,14 +110,14 @@ private fun CardDropDownMenu(
Icon(
imageVector = Icons.Rounded.MoreVert,
contentDescription = stringResource(id = R.string.more),
tint = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium),
tint = MaterialTheme.colorScheme.onSurface,
)
}

DropdownMenu(
expanded = isExpanded,
onDismissRequest = { isExpanded = false },
modifier = Modifier.background(MaterialTheme.colors.surface.copy(alpha = ContentAlpha.high))
modifier = Modifier.background(MaterialTheme.colorScheme.surface)
) {
contextMenuItems.map { item ->
when (item) {
Expand All @@ -132,7 +131,7 @@ private fun CardDropDownMenu(
)
}

MySiteCardToolbarContextMenuItem.Divider -> Divider()
MySiteCardToolbarContextMenuItem.Divider -> HorizontalDivider()
}
}
}
Expand All @@ -158,7 +157,7 @@ sealed interface MySiteCardToolbarContextMenuItem {
)
@Composable
private fun MySiteCardToolbarPreview() {
AppThemeM2 {
AppThemeM3 {
MySiteCardToolbar(
onContextMenuClick = {},
contextMenuItems = listOf(
Expand Down Expand Up @@ -191,7 +190,7 @@ private fun MySiteCardToolbarPreview() {
)
@Composable
private fun MySiteCardToolbarInCardPreview() {
AppThemeM2 {
AppThemeM3 {
UnelevatedCard(
modifier = Modifier.padding(8.dp)
) {
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.MaterialTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
Expand All @@ -20,7 +20,7 @@ import androidx.compose.ui.unit.dp
import org.wordpress.android.R
import org.wordpress.android.ui.compose.components.card.UnelevatedCard
import org.wordpress.android.ui.compose.styles.DashboardCardTypography
import org.wordpress.android.ui.compose.theme.AppThemeM2
import org.wordpress.android.ui.compose.theme.AppThemeM3
import org.wordpress.android.ui.compose.unit.Margin
import org.wordpress.android.ui.compose.utils.uiStringText
import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.BloganuaryNudgeCardModel
Expand Down Expand Up @@ -90,7 +90,7 @@ private fun CardToolbar(
painter = painterResource(R.drawable.ic_bloganuary_24dp),
contentDescription = null,
modifier = Modifier.size(24.dp),
tint = MaterialTheme.colors.onSurface
tint = MaterialTheme.colorScheme.onSurface
)
}
}
Expand All @@ -99,7 +99,7 @@ private fun CardToolbar(
@Preview(name = "Dark Mode", uiMode = UI_MODE_NIGHT_YES)
@Composable
fun BloganuaryNudgeCardPreview() {
AppThemeM2 {
AppThemeM3 {
BloganuaryNudgeCard(
model = BloganuaryNudgeCardModel(
UiString.UiStringRes(R.string.bloganuary_dashboard_nudge_title_december),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ViewCompositionStrategy
import org.wordpress.android.databinding.BloganuaryNudgeCardBinding
import org.wordpress.android.ui.compose.theme.AppThemeM2WithoutBackground
import org.wordpress.android.ui.compose.theme.AppThemeM3WithoutBackground
import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.BloganuaryNudgeCardModel
import org.wordpress.android.ui.mysite.MySiteCardAndItemViewHolder
import org.wordpress.android.util.extensions.viewBinding
Expand All @@ -16,7 +16,7 @@ class BloganuaryNudgeCardViewHolder(parent: ViewGroup) :
// Dispose of the Composition when the view's LifecycleOwner is destroyed
setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnDetachedFromWindowOrReleasedFromPool)
setContent {
AppThemeM2WithoutBackground {
AppThemeM3WithoutBackground {
BloganuaryNudgeCard(
model = cardModel,
modifier = Modifier.fillMaxWidth()
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
package org.wordpress.android.ui.mysite.cards.dynamiccard

import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
Expand Down
Loading

0 comments on commit e5d90e9

Please sign in to comment.