Skip to content

Commit

Permalink
Merge pull request #21427 from wordpress-mobile/issue/voicetocontent-m3
Browse files Browse the repository at this point in the history 
Material 3: Voice to content
  • Loading branch information
@nbradbury
nbradbury authored Nov 6, 2024
2 parents b2cb39b + 96cf3ab commit 3b3b4f0
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 40 deletions.
13 changes: 6 additions & 7 deletions WordPress/src/main/java/org/wordpress/android/ui/voicetocontent/MicToStopIcon.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.ContentAlpha
import androidx.compose.material.MaterialTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.rememberUpdatedState
Expand All @@ -30,7 +29,7 @@ import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.wordpress.android.R
import org.wordpress.android.ui.compose.theme.AppThemeM2
import org.wordpress.android.ui.compose.theme.AppThemeM3

@OptIn(ExperimentalAnimationApi::class)
@Suppress("DEPRECATION")
Expand All @@ -41,14 +40,14 @@ fun MicToStopIcon(model: RecordingPanelUIModel, isRecording: Boolean) {
val isLight = !isSystemInDarkTheme()

val circleColor by animateColorAsState(
targetValue = if (!isEnabled) MaterialTheme.colors.onSurface.copy(alpha = 0.3f)
else if (isMic) MaterialTheme.colors.primary
targetValue = if (!isEnabled) MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f)
else if (isMic) MaterialTheme.colorScheme.primary
else if (isLight) Color.Black
else Color.White, label = ""
)

val iconColor by animateColorAsState(
targetValue = if (!isEnabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
targetValue = if (!isEnabled) MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
else if (isMic) Color.White
else if (isLight) Color.White
else Color.Black, label = ""
Expand Down Expand Up @@ -115,7 +114,7 @@ fun MicToStopIcon(model: RecordingPanelUIModel, isRecording: Boolean) {
@Preview(showBackground = true, device = Devices.PIXEL_4_XL, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun ExistingLayoutPreview() {
AppThemeM2 {
AppThemeM3 {
MicToStopIcon(
RecordingPanelUIModel(
isEligibleForFeature = true,
Expand Down
6 changes: 2 additions & 4 deletions ...ess/src/main/java/org/wordpress/android/ui/voicetocontent/VoiceToContentDialogFragment.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import android.view.ViewGroup
import android.widget.FrameLayout
import androidx.activity.result.contract.ActivityResultContracts
import androidx.appcompat.app.AlertDialog
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.ui.platform.ComposeView
import androidx.fragment.app.viewModels
import androidx.lifecycle.Lifecycle
Expand All @@ -28,7 +27,7 @@ import org.wordpress.android.R
import org.wordpress.android.ui.ActivityLauncher
import org.wordpress.android.ui.ActivityNavigator
import org.wordpress.android.ui.PagePostCreationSourcesDetail
import org.wordpress.android.ui.compose.theme.AppThemeM2
import org.wordpress.android.ui.compose.theme.AppThemeM3
import org.wordpress.android.ui.voicetocontent.VoiceToContentActionEvent.Dismiss
import org.wordpress.android.ui.voicetocontent.VoiceToContentActionEvent.LaunchEditPost
import org.wordpress.android.ui.voicetocontent.VoiceToContentActionEvent.LaunchExternalBrowser
Expand All @@ -43,12 +42,11 @@ class VoiceToContentDialogFragment : BottomSheetDialogFragment() {

private val viewModel: VoiceToContentViewModel by viewModels()

@ExperimentalMaterialApi
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View = ComposeView(requireContext()).apply {
setContent {
AppThemeM2 {
AppThemeM3 {
VoiceToContentScreen(
viewModel = viewModel
)
Expand Down
53 changes: 26 additions & 27 deletions WordPress/src/main/java/org/wordpress/android/ui/voicetocontent/VoiceToContentScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,11 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.ContentAlpha
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Refresh
Expand Down Expand Up @@ -52,7 +51,7 @@ import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import org.wordpress.android.R
import org.wordpress.android.ui.compose.components.buttons.Drawable
import org.wordpress.android.ui.compose.theme.AppThemeM2
import org.wordpress.android.ui.compose.theme.AppThemeM3
import org.wordpress.android.util.audio.RecordingUpdate
import java.util.Locale

Expand Down Expand Up @@ -85,7 +84,7 @@ fun VoiceToContentScreen(
modifier = Modifier
.fillMaxWidth()
.height(bottomSheetHeight),
color = MaterialTheme.colors.surface
color = MaterialTheme.colorScheme.surface
) {
Box(
modifier = Modifier
Expand All @@ -108,7 +107,7 @@ fun VoiceToContentView(state: VoiceToContentUiState,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.background(MaterialTheme.colors.surface) // Use theme-aware background color
.background(MaterialTheme.colorScheme.surface) // Use theme-aware background color
) {
when (state.uiStateType) {
VoiceToContentUIStateType.PROCESSING -> ProcessingView(state)
Expand Down Expand Up @@ -326,7 +325,7 @@ fun ClickableTextViewWithLinkImage(
}
.size(16.dp),
painter = painterResource(id = drawable.resId),
colorFilter = ColorFilter.tint(MaterialTheme.colors.primary),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
contentDescription = null
)
}
Expand All @@ -336,53 +335,53 @@ fun ClickableTextViewWithLinkImage(

private val headerStyle: TextStyle
@Composable
get() = androidx.compose.material3.MaterialTheme.typography.bodyLarge.copy(
get() = MaterialTheme.typography.bodyLarge.copy(
fontWeight = FontWeight.SemiBold,
fontSize = 20.sp,
color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.high)
color = MaterialTheme.colorScheme.onSurface
)

private val secondaryHeaderStyle: TextStyle
@Composable
get() = androidx.compose.material3.MaterialTheme.typography.bodySmall.copy(
get() = MaterialTheme.typography.bodySmall.copy(
fontWeight = FontWeight.Normal,
fontSize = 16.sp,
color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
color = MaterialTheme.colorScheme.onSurface
)

private val actionLabelStyle: TextStyle
@Composable
get() = androidx.compose.material3.MaterialTheme.typography.bodyMedium.copy(
color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.high)
get() = MaterialTheme.typography.bodyMedium.copy(
color = MaterialTheme.colorScheme.onSurface
)

private val actionLabelStyleDisabled: TextStyle
@Composable
get() = androidx.compose.material3.MaterialTheme.typography.bodyMedium.copy(
color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
get() = MaterialTheme.typography.bodyMedium.copy(
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
)

private val errorMessageStyle: TextStyle
@Composable
get() = androidx.compose.material3.MaterialTheme.typography.titleMedium.copy(
get() = MaterialTheme.typography.titleMedium.copy(
fontWeight = FontWeight.Normal,
fontSize = 16.sp,
color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.high)
color = MaterialTheme.colorScheme.onSurface
)

private val errorUrlLinkCTA: TextStyle
@Composable
get() = androidx.compose.material3.MaterialTheme.typography.titleMedium.copy(
get() = MaterialTheme.typography.titleMedium.copy(
fontWeight = FontWeight.Normal,
fontSize = 16.sp,
color = MaterialTheme.colors.primary
color = MaterialTheme.colorScheme.primary
)

@Preview(showBackground = true)
@Preview(showBackground = true, device = Devices.PIXEL_4_XL, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun PreviewInitializingView() {
AppThemeM2 {
AppThemeM3 {
val state = VoiceToContentUiState(
uiStateType = VoiceToContentUIStateType.INITIALIZING,
header = HeaderUIModel(label = R.string.voice_to_content_base_header_label, onClose = { }),
Expand All @@ -404,7 +403,7 @@ fun PreviewInitializingView() {
@Preview(showBackground = true, device = Devices.PIXEL_4_XL, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun PreviewReadyToRecordView() {
AppThemeM2 {
AppThemeM3 {
val state = VoiceToContentUiState(
uiStateType = VoiceToContentUIStateType.READY_TO_RECORD,
header = HeaderUIModel(label = R.string.voice_to_content_base_header_label, onClose = { }),
Expand All @@ -426,7 +425,7 @@ fun PreviewReadyToRecordView() {
@Preview(showBackground = true, device = Devices.PIXEL_4_XL, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun PreviewNotEligibleToRecordView() {
AppThemeM2 {
AppThemeM3 {
val state = VoiceToContentUiState(
uiStateType = VoiceToContentUIStateType.INELIGIBLE_FOR_FEATURE,
header = HeaderUIModel(label = R.string.voice_to_content_base_header_label, onClose = { }),
Expand All @@ -447,7 +446,7 @@ fun PreviewNotEligibleToRecordView() {
@Preview(showBackground = true, device = Devices.PIXEL_4_XL, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun PreviewRecordingView() {
AppThemeM2 {
AppThemeM3 {
val state = VoiceToContentUiState(
uiStateType = VoiceToContentUIStateType.RECORDING,
header = HeaderUIModel(label = R.string.voice_to_content_recording_label, onClose = { }),
Expand All @@ -470,7 +469,7 @@ fun PreviewRecordingView() {
@Preview(showBackground = true, device = Devices.PIXEL_4_XL, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun PreviewProcessingView() {
AppThemeM2 {
AppThemeM3 {
val state = VoiceToContentUiState(
uiStateType = VoiceToContentUIStateType.PROCESSING,
header = HeaderUIModel(label = R.string.voice_to_content_processing_label, onClose = { })
Expand Down
4 changes: 2 additions & 2 deletions WordPress/src/main/java/org/wordpress/android/ui/voicetocontent/WaveformVisualizer.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ package org.wordpress.android.ui.voicetocontent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.MaterialTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableIntStateOf
Expand All @@ -23,7 +23,7 @@ fun WaveformOblongVisualizer(recordingUpdate: RecordingUpdate, currentPosition:
val minRadius = 50f // increased minimum radius for the oblongs
val maxAmplitude = 32767f // maximum possible amplitude from MediaRecorder
val oblongWidth = 20f // fixed width of the oblongs
val color = MaterialTheme.colors.primary
val color = MaterialTheme.colorScheme.primary

Canvas(modifier = Modifier
.fillMaxWidth()
Expand Down

0 comments on commit 3b3b4f0

Please sign in to comment.