Skip to content

Commit

Permalink
create low storage bottom sheet layout
Browse files Browse the repository at this point in the history
  • Loading branch information
mebarbosa committed Oct 30, 2024
1 parent defd98b commit 5f44a52
Show file tree
Hide file tree
Showing 5 changed files with 191 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ fun ManageDownloadsCard(
modifier = Modifier.padding(end = 16.dp),
) {
TextH40(
text = stringResource(LR.string.you_are_running_low_on_storage),
text = stringResource(LR.string.need_to_free_up_space),
fontWeight = FontWeight.Bold,
color = MaterialTheme.theme.colors.primaryText01,
)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="57dp"
android:height="4dp"
android:viewportWidth="57"
android:viewportHeight="4">
<path
android:pathData="M2.257,0L54.257,0A2,2 0,0 1,56.257 2L56.257,2A2,2 0,0 1,54.257 4L2.257,4A2,2 0,0 1,0.257 2L0.257,2A2,2 0,0 1,2.257 0z"
android:fillColor="#E4E4E4"/>
</vector>
6 changes: 4 additions & 2 deletions modules/services/localization/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -399,6 +399,7 @@
<string name="player_play_failed_check_internet">Could not load podcast. Please check your internet connection and try again.</string>
<string name="player_played_up_to">Played up to %s</string>
<string name="player_time_remaining">Time remaining %s</string>
<string name="swipe_affordance_content_description">Swipe Affordance</string>

<!-- Chapters -->

Expand Down Expand Up @@ -2192,8 +2193,9 @@

<!-- Manage Downloaded Episodes -->
<string name="pencil_clean_up_icon_content_description">Pencil Clean Up</string>
<string name="you_are_running_low_on_storage">You\'re running low on storage</string>
<string name="need_to_free_up_space">Need to free up space?</string>
<string name="save_space_by_managing_downloaded_episodes">Save %1$s – by managing downloaded episodes.</string>
<string name="manage_downloads">Manage Downloads</string>
<string name="manage_downloads">Manage downloads</string>
<string name="maybe_later">Maybe Later</string>

</resources>
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
package au.com.shiftyjelly.pocketcasts.views.lowstorage

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.FrameLayout
import androidx.compose.ui.platform.ComposeView
import androidx.core.view.doOnLayout
import au.com.shiftyjelly.pocketcasts.compose.AppTheme
import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
import com.google.android.material.bottomsheet.BottomSheetBehavior
import com.google.android.material.bottomsheet.BottomSheetDialog
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import jakarta.inject.Inject

class LowStorageBottomSheet : BottomSheetDialogFragment() {

@Inject
lateinit var theme: Theme

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: android.os.Bundle?): View {
return ComposeView(requireContext()).apply {
setContent {
AppTheme(theme.activeTheme) {
LowStorageDialog(
totalDownloadSize = 1000000000,
onManageDownloadsClick = {
// todo: handle this
},
onMaybeLaterClick = {
// todo: snooze the warning for seven days
dismiss()
},
)
}
}
}
}

override fun onViewCreated(view: View, savedInstanceState: android.os.Bundle?) {
super.onViewCreated(view, savedInstanceState)

view.doOnLayout {
val dialog = dialog as BottomSheetDialog
val bottomSheet = dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet) as FrameLayout?
if (bottomSheet != null) {
BottomSheetBehavior.from(bottomSheet).run {
state = BottomSheetBehavior.STATE_EXPANDED
peekHeight = 0
skipCollapsed = true
}
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
package au.com.shiftyjelly.pocketcasts.views.lowstorage

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.ButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
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.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import au.com.shiftyjelly.pocketcasts.compose.AppThemeWithBackground
import au.com.shiftyjelly.pocketcasts.compose.buttons.RowButton
import au.com.shiftyjelly.pocketcasts.compose.buttons.RowOutlinedButton
import au.com.shiftyjelly.pocketcasts.compose.components.TextH20
import au.com.shiftyjelly.pocketcasts.compose.components.TextH50
import au.com.shiftyjelly.pocketcasts.compose.preview.ThemePreviewParameterProvider
import au.com.shiftyjelly.pocketcasts.compose.theme
import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
import au.com.shiftyjelly.pocketcasts.utils.Util
import au.com.shiftyjelly.pocketcasts.images.R as IR
import au.com.shiftyjelly.pocketcasts.localization.R as LR

@Composable
internal fun LowStorageDialog(
modifier: Modifier = Modifier,
totalDownloadSize: Long,
onManageDownloadsClick: () -> Unit,
onMaybeLaterClick: () -> Unit,
) {
val formattedTotalDownloadSize = Util.formattedBytes(bytes = totalDownloadSize, context = LocalContext.current)

Box(
modifier = modifier
.fillMaxWidth(),
contentAlignment = Alignment.Center,
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier.fillMaxWidth(),
) {
Image(
painterResource(IR.drawable.swipe_affordance),
contentDescription = stringResource(LR.string.swipe_affordance_content_description),
modifier = modifier
.width(56.dp)
.padding(top = 8.dp, bottom = 24.dp),
)

Icon(
painterResource(IR.drawable.pencil_cleanup),
contentDescription = stringResource(LR.string.pencil_clean_up_icon_content_description),
modifier = modifier
.padding(bottom = 16.dp)
.size(40.dp),
tint = MaterialTheme.theme.colors.primaryInteractive01,
)

TextH20(
text = stringResource(LR.string.need_to_free_up_space),
textAlign = TextAlign.Center,
modifier = modifier.padding(bottom = 10.dp, start = 21.dp, end = 21.dp),
)

TextH50(
text = stringResource(LR.string.save_space_by_managing_downloaded_episodes, formattedTotalDownloadSize),
fontWeight = FontWeight.W500,
textAlign = TextAlign.Center,
modifier = modifier.padding(bottom = 57.dp, start = 21.dp, end = 21.dp),
)

RowButton(
text = stringResource(LR.string.manage_downloads),
contentDescription = stringResource(LR.string.manage_downloads),
onClick = { onManageDownloadsClick.invoke() },
includePadding = false,
textColor = MaterialTheme.theme.colors.primaryInteractive02,
colors = ButtonDefaults.buttonColors(
backgroundColor = MaterialTheme.theme.colors.primaryInteractive01,
),
modifier = modifier
.padding(horizontal = 21.dp)
.padding(bottom = 12.dp),
)

RowOutlinedButton(
text = stringResource(LR.string.maybe_later),
onClick = { onMaybeLaterClick.invoke() },
includePadding = false,
modifier = modifier
.padding(bottom = 12.dp)
.padding(horizontal = 21.dp),
border = null,
colors = ButtonDefaults.outlinedButtonColors(contentColor = MaterialTheme.theme.colors.primaryText01),
)
}
}
}

@Preview(showBackground = true)
@Composable
fun PreviewLowStorageDialog(@PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType) {
AppThemeWithBackground(themeType) {
LowStorageDialog(
totalDownloadSize = 1000000000,
onManageDownloadsClick = {},
onMaybeLaterClick = {},
)
}
}

0 comments on commit 5f44a52

Please sign in to comment.