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

Some Material 3 updates to the ManageSubscriptionsView #2072

Merged
merged 4 commits into from
Jan 24, 2025
Merged

Some Material 3 updates to the ManageSubscriptionsView #2072

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f18a25
Some Material 3 updates to the ManageSubscriptionsView.
JayShortway Jan 22, 2025
a7eb7f2
Removes commented-out code.
JayShortway Jan 22, 2025
aa641cb
Button text colors are handled by the Button composable instead of th…
JayShortway Jan 22, 2025
0dc98c9
Adjusts the horizontal button text padding.
JayShortway Jan 22, 2025
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
75 changes: 43 additions & 32 deletions .../com/revenuecat/purchases/ui/revenuecatui/customercenter/views/ManageSubscriptionsView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,28 @@ package com.revenuecat.purchases.ui.revenuecatui.customercenter.views
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.calculateStartPadding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.revenuecat.purchases.ExperimentalPreviewRevenueCatPurchasesAPI
Expand Down Expand Up @@ -71,36 +76,27 @@ private fun ActiveUserManagementView(
Column {
Text(
text = screen.title,
style = MaterialTheme.typography.headlineMedium,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(16.dp),
style = MaterialTheme.typography.titleLarge,
modifier = Modifier.padding(end = 16.dp, top = 32.dp),
)

screen.subtitle?.let { subtitle ->
Spacer(modifier = Modifier.size(4.dp))
Text(
text = subtitle,
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.padding(bottom = 24.dp),
)
}
Spacer(modifier = Modifier.size(32.dp))

SubscriptionDetailsView(details = purchaseInformation)

LazyColumn {
item {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp),
elevation = CardDefaults.cardElevation(
defaultElevation = 4.dp,
),
) {
SubscriptionDetailsView(details = purchaseInformation)
}
}

item {
ManageSubscriptionsButtonsView(screen = screen, onDetermineFlow = onDetermineFlow)
}
Spacer(modifier = Modifier.size(32.dp))

Surface(
shape = MaterialTheme.shapes.medium,
) {
ManageSubscriptionsButtonsView(screen = screen, onDetermineFlow = onDetermineFlow)
}
}
}
Expand Down Expand Up @@ -220,27 +216,42 @@ private fun ManageSubscriptionButton(
.fillMaxWidth()
.padding(vertical = 4.dp)

val buttonContent: @Composable () -> Unit = {
val buttonContent: @Composable (Modifier) -> Unit = { modifier ->
Text(
text = path.title,
color = if (useOutlinedButton) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onPrimary,
Copy link
Contributor

Choose a reason for hiding this comment

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

so useOutlinedButton would not be used anymore. I was using that for the screen of users with no active subscriptions.

Screenshot 2025-01-22 at 14 22 32

I thought the standard would be this https://m3.material.io/foundations/content-design/global-writing/word-choice#715006c7-2637-4734-a6e6-d2dc261af528

Copy link
Member Author

Choose a reason for hiding this comment

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

It is still being used, but the text color is no longer dependent on it. This actually made me realize an improvement, which is to handle the text color using outlinedButtonColors() / textButtonColors(). See here: aa641cb. The outlined button colors should be unchanged.

Copy link
Contributor

Choose a reason for hiding this comment

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

right right, it's used in line 228 😮‍💨

perfect

modifier = modifier,
textAlign = TextAlign.Start,
style = MaterialTheme.typography.bodyLarge,
)
}

if (useOutlinedButton) {
OutlinedButton(
onClick = { onDetermineFlow(path) },
modifier = buttonModifier,
colors = ButtonDefaults.outlinedButtonColors(contentColor = MaterialTheme.colorScheme.primary),
) {
buttonContent()
buttonContent(Modifier)
}
} else {
Button(
val layoutDirection = LocalLayoutDirection.current
val totalHorizontalButtonPadding = 16.dp

val startPadding = totalHorizontalButtonPadding -
ButtonDefaults.TextButtonContentPadding.calculateStartPadding(layoutDirection)
val endPadding = totalHorizontalButtonPadding -
ButtonDefaults.TextButtonContentPadding.calculateEndPadding(layoutDirection)

TextButton(
onClick = { onDetermineFlow(path) },
modifier = buttonModifier,
colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary),
modifier = buttonModifier
.heightIn(60.dp)
.padding(start = startPadding, end = endPadding),
// It's a rectangle so it gets clipped by the parent Surface.
shape = RectangleShape,
colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.onSurface),
) {
buttonContent()
buttonContent(Modifier.fillMaxWidth())
}
}
}