From c9ca750a451fcb8ffcdb1c185a0c1c37dcad7470 Mon Sep 17 00:00:00 2001 From: Ahmed El-Helw Date: Sun, 2 Jun 2024 14:13:35 +0400 Subject: [PATCH] Replace material2 usages with material3 --- .../ui/SheikhDownloadSummary.kt | 2 +- .../ui/common/DownloadCommonRow.kt | 4 +- .../ui/sheikhdownload/DownloadErrorDialog.kt | 2 +- .../sheikhdownload/DownloadProgressDialog.kt | 20 ++- ...equestPostNotificationsPermissionDialog.kt | 6 +- .../ui/sheikhdownload/SuraRangeDialog.kt | 8 +- .../feature/qarilist/QariListWrapper.kt | 121 ++++++------------ .../mobile/feature/qarilist/ui/QariList.kt | 7 +- .../mobile/feature/qarilist/ui/QariRow.kt | 4 +- .../mobile/feature/qarilist/ui/QariSection.kt | 2 +- 10 files changed, 65 insertions(+), 111 deletions(-) diff --git a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/SheikhDownloadSummary.kt b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/SheikhDownloadSummary.kt index e29c9f5b92..a1b38a1442 100644 --- a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/SheikhDownloadSummary.kt +++ b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/SheikhDownloadSummary.kt @@ -5,8 +5,8 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.Surface import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier diff --git a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/common/DownloadCommonRow.kt b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/common/DownloadCommonRow.kt index 170742e60e..5d79ab9f9a 100644 --- a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/common/DownloadCommonRow.kt +++ b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/common/DownloadCommonRow.kt @@ -11,11 +11,11 @@ import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.Surface -import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Clear import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier diff --git a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadErrorDialog.kt b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadErrorDialog.kt index 49a0d1fcaf..2ef0caa7d4 100644 --- a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadErrorDialog.kt +++ b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadErrorDialog.kt @@ -1,8 +1,8 @@ package com.quran.mobile.feature.downloadmanager.ui.sheikhdownload -import androidx.compose.material.TextButton import androidx.compose.material3.AlertDialog import androidx.compose.material3.Text +import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.ui.res.stringResource import com.quran.mobile.common.download.R diff --git a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadProgressDialog.kt b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadProgressDialog.kt index 927e30b2a1..c875ec93c9 100644 --- a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadProgressDialog.kt +++ b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadProgressDialog.kt @@ -2,12 +2,10 @@ package com.quran.mobile.feature.downloadmanager.ui.sheikhdownload import android.content.Context import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.padding -import androidx.compose.material.AlertDialog -import androidx.compose.material.Text +import androidx.compose.material3.AlertDialog import androidx.compose.material3.LinearProgressIndicator +import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState @@ -43,15 +41,15 @@ fun DownloadProgressDialog( currentEvent.asMessage(LocalContext.current), modifier = Modifier.padding(bottom = 8.dp, end = 16.dp) ) - LinearProgressIndicator(progress = (progress / 100.0f)) + LinearProgressIndicator( + progress = { (progress / 100.0f) }, + ) } }, - buttons = { - Row(modifier = Modifier.padding(horizontal = 16.dp)) { - Spacer(modifier = Modifier.weight(1f)) - TextButton(onClick = onCancel) { - Text(text = stringResource(id = com.quran.mobile.common.ui.core.R.string.cancel)) - } + confirmButton = {}, + dismissButton = { + TextButton(onClick = onCancel) { + Text(text = stringResource(id = com.quran.mobile.common.ui.core.R.string.cancel)) } }, onDismissRequest = onCancel diff --git a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/RequestPostNotificationsPermissionDialog.kt b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/RequestPostNotificationsPermissionDialog.kt index a5bec201bd..f036ca45f2 100644 --- a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/RequestPostNotificationsPermissionDialog.kt +++ b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/RequestPostNotificationsPermissionDialog.kt @@ -1,8 +1,8 @@ package com.quran.mobile.feature.downloadmanager.ui.sheikhdownload -import androidx.compose.material.AlertDialog -import androidx.compose.material.Text -import androidx.compose.material.TextButton +import androidx.compose.material3.AlertDialog +import androidx.compose.material3.Text +import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.ui.res.stringResource import com.quran.mobile.feature.downloadmanager.R diff --git a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/SuraRangeDialog.kt b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/SuraRangeDialog.kt index e5a16b5ff6..5fda8c2f61 100644 --- a/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/SuraRangeDialog.kt +++ b/feature/downloadmanager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/SuraRangeDialog.kt @@ -2,11 +2,11 @@ package com.quran.mobile.feature.downloadmanager.ui.sheikhdownload import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding -import androidx.compose.material.Surface -import androidx.compose.material.Text -import androidx.compose.material.TextButton -import androidx.compose.material.contentColorFor import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.Text +import androidx.compose.material3.TextButton +import androidx.compose.material3.contentColorFor import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember diff --git a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/QariListWrapper.kt b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/QariListWrapper.kt index 81dc76c956..976e847590 100644 --- a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/QariListWrapper.kt +++ b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/QariListWrapper.kt @@ -1,43 +1,33 @@ package com.quran.mobile.feature.qarilist -import android.annotation.SuppressLint import android.content.Context import android.widget.FrameLayout -import androidx.compose.animation.core.TweenSpec -import androidx.compose.animation.core.animateFloatAsState -import androidx.compose.foundation.Canvas -import androidx.compose.foundation.gestures.detectTapGestures import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.displayCutoutPadding -import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.ModalBottomSheetDefaults -import androidx.compose.material.ModalBottomSheetLayout -import androidx.compose.material.ModalBottomSheetValue import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Close -import androidx.compose.material.rememberModalBottomSheetState +import androidx.compose.material3.BottomSheetScaffold import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.SheetValue import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar import androidx.compose.material3.contentColorFor +import androidx.compose.material3.rememberBottomSheetScaffoldState +import androidx.compose.material3.rememberStandardBottomSheetState import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.collectAsState -import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.isSpecified -import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.platform.ComposeView import androidx.compose.ui.res.stringResource -import androidx.compose.ui.semantics.contentDescription -import androidx.compose.ui.semantics.onClick -import androidx.compose.ui.semantics.semantics import androidx.compose.ui.unit.dp import com.quran.data.model.SuraAyah import com.quran.labs.androidquran.common.audio.model.QariItem @@ -47,6 +37,7 @@ import com.quran.mobile.feature.qarilist.di.QariListWrapperInjector import com.quran.mobile.feature.qarilist.presenter.QariListPresenter import com.quran.mobile.feature.qarilist.ui.QariList import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.delay import kotlinx.coroutines.launch import javax.inject.Inject @@ -77,9 +68,11 @@ class QariListWrapper( @Composable fun QariListBottomSheet() { - val state = rememberModalBottomSheetState( - initialValue = ModalBottomSheetValue.Expanded, - skipHalfExpanded = true + val state = rememberBottomSheetScaffoldState( + bottomSheetState = rememberStandardBottomSheetState( + initialValue = SheetValue.Hidden, + skipHiddenState = false + ) ) val qariListFlow = qariListPresenter.qariList(startAyah, endAyah) { QariItem.fromQari(context, it) } @@ -90,7 +83,7 @@ class QariListWrapper( val coroutineScope: CoroutineScope = rememberCoroutineScope() val closeDialog = { coroutineScope.launch { - state.hide() + state.bottomSheetState.hide() } } @@ -99,32 +92,16 @@ class QariListWrapper( currentQariManager.setCurrentQari(qari.id) } - // This is a bit of an intentional hack - if the screen has a display cut out, - // the scrim should cover the entire screen (including "not-cut-out portions" - // on the same line as the cutout), but the content should not be cut by the - // display cut out. - // - // Setting a padding on the [ModalBottomSheetLayout] would result in a padding - // on the scrim also. Setting a padding on the content would extend the sheet's - // background color, looking odd. Setting a transparent sheet color and using - // that with padding on the content leaves some artifacts due to a bug that - // someone reported at https://issuetracker.google.com/issues/227270960. - // - // To work around this, the box is full size, containing the full size scrim, - // and then the modal sheet with padding according to the display cut out. - Box(modifier = Modifier.fillMaxSize()) { - Scrim(color = ModalBottomSheetDefaults.scrimColor, - onDismiss = { - coroutineScope.launch { state.hide() } - }, - visible = state.targetValue != ModalBottomSheetValue.Hidden - ) - - ModalBottomSheetLayout( - sheetState = state, - sheetShape = RoundedCornerShape(16.dp), - scrimColor = Color.Unspecified, - sheetBackgroundColor = MaterialTheme.colorScheme.surface, + Box(modifier = Modifier + .fillMaxSize() + .displayCutoutPadding() + ) { + BottomSheetScaffold( + scaffoldState = state, + sheetPeekHeight = 0.dp, + sheetDragHandle = null, + sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), + containerColor = MaterialTheme.colorScheme.surface, sheetContentColor = MaterialTheme.colorScheme.contentColorFor(MaterialTheme.colorScheme.background), sheetContent = { Column { @@ -148,49 +125,23 @@ class QariListWrapper( QariList( qariListState.value, selectedQariId = currentQariState.value?.id ?: -1, - onQariSelected = onQariSelected, - modifier = Modifier.fillMaxHeight(0.97f) + onQariSelected = onQariSelected ) } - }, - modifier = Modifier.displayCutoutPadding() + } ) { - } - } - } + val hasExpanded = remember { mutableStateOf(false) } - // Scrim Composable taken from [ModalBottomSheetLayout] - // Suppressing Lint for using the close_sheet string from androidx - @SuppressLint("PrivateResource") - @Composable - fun Scrim( - color: Color, - onDismiss: () -> Unit, - visible: Boolean - ) { - if (color.isSpecified) { - val alpha by animateFloatAsState( - targetValue = if (visible) 1f else 0f, - animationSpec = TweenSpec() - ) - val closeSheet = stringResource(id = androidx.compose.ui.R.string.close_sheet) - val dismissModifier = if (visible) { - Modifier - .pointerInput(onDismiss) { detectTapGestures { onDismiss() } } - .semantics(mergeDescendants = true) { - contentDescription = closeSheet - onClick { onDismiss(); true } - } - } else { - Modifier - } + LaunchedEffect(Unit) { + // delay so sheet animates smoothly, otherwise it just snaps open + delay(50) + state.bottomSheetState.expand() + hasExpanded.value = true + } - Canvas( - Modifier - .fillMaxSize() - .then(dismissModifier) - ) { - drawRect(color = color, alpha = alpha) + if (hasExpanded.value && state.bottomSheetState.currentValue == SheetValue.PartiallyExpanded) { + closeDialog() + } } } } diff --git a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariList.kt b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariList.kt index a1fd4d7e23..cceb9ac56f 100644 --- a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariList.kt +++ b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariList.kt @@ -8,7 +8,12 @@ import com.quran.labs.androidquran.common.audio.model.QariItem import com.quran.mobile.feature.qarilist.model.QariUiModel @Composable -fun QariList(qaris: List, selectedQariId: Int, onQariSelected: ((QariItem) -> Unit), modifier: Modifier) { +fun QariList( + qaris: List, + selectedQariId: Int, + onQariSelected: ((QariItem) -> Unit), + modifier: Modifier = Modifier +) { val qarisBySection = qaris.groupBy { it.sectionHeader } LazyColumn(modifier = modifier) { qarisBySection.forEach { (section, sectionQaris) -> diff --git a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariRow.kt b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariRow.kt index c3a1f042ae..e7396ece98 100644 --- a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariRow.kt +++ b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariRow.kt @@ -4,11 +4,11 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.material.Icon -import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Check +import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier diff --git a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariSection.kt b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariSection.kt index 9fabb9fa22..d4f9399ec5 100644 --- a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariSection.kt +++ b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariSection.kt @@ -4,8 +4,8 @@ import androidx.annotation.StringRes import androidx.compose.foundation.background import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.material.Text import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource