diff --git a/core/designsystem/src/main/kotlin/com/chipichipi/dobedobe/core/designsystem/component/BottomSheetScaffold.kt b/core/designsystem/src/main/kotlin/com/chipichipi/dobedobe/core/designsystem/component/BottomSheetScaffold.kt index fd7fb801..cb111c32 100644 --- a/core/designsystem/src/main/kotlin/com/chipichipi/dobedobe/core/designsystem/component/BottomSheetScaffold.kt +++ b/core/designsystem/src/main/kotlin/com/chipichipi/dobedobe/core/designsystem/component/BottomSheetScaffold.kt @@ -3,18 +3,25 @@ package com.chipichipi.dobedobe.core.designsystem.component import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.BottomSheetDefaults import androidx.compose.material3.BottomSheetScaffold import androidx.compose.material3.BottomSheetScaffoldState import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.SnackbarHost import androidx.compose.material3.SnackbarHostState +import androidx.compose.material3.Surface import androidx.compose.material3.rememberBottomSheetScaffoldState import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme +val DRAG_HANDLER_HEIGHT = 24.dp + @OptIn(ExperimentalMaterial3Api::class) @Composable fun DobeDobeBottomSheetScaffold( @@ -22,7 +29,6 @@ fun DobeDobeBottomSheetScaffold( modifier: Modifier = Modifier, scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(), sheetPeekHeight: Dp = BottomSheetDefaults.SheetPeekHeight, - sheetDragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() }, topBar: @Composable (() -> Unit)? = null, snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }, content: @Composable (PaddingValues) -> Unit, @@ -34,7 +40,9 @@ fun DobeDobeBottomSheetScaffold( sheetContent = sheetContent, scaffoldState = scaffoldState, sheetPeekHeight = sheetPeekHeight, - sheetDragHandle = sheetDragHandle, + sheetDragHandle = { + DobeDobeDragHandle() + }, topBar = topBar, snackbarHost = snackbarHost, content = content, @@ -43,3 +51,20 @@ fun DobeDobeBottomSheetScaffold( ) } } + +@Composable +private fun DobeDobeDragHandle( + modifier: Modifier = Modifier, +) { + Surface( + modifier = modifier + .padding( + top = 8.dp, + bottom = 12.dp, + ), + color = DobeDobeTheme.colors.gray300, + shape = RoundedCornerShape(4.dp), + ) { + Box(Modifier.size(width = 48.dp, height = 4.dp)) + } +} diff --git a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/DashboardScreen.kt b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/DashboardScreen.kt index bd9c3654..0f9cfd86 100644 --- a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/DashboardScreen.kt +++ b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/DashboardScreen.kt @@ -7,7 +7,6 @@ import androidx.compose.animation.SharedTransitionLayout import androidx.compose.animation.core.Animatable import androidx.compose.animation.core.AnimationVector1D import androidx.compose.animation.core.tween -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth @@ -33,12 +32,11 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.compose.ui.zIndex import androidx.lifecycle.compose.collectAsStateWithLifecycle +import com.chipichipi.dobedobe.core.designsystem.component.DRAG_HANDLER_HEIGHT import com.chipichipi.dobedobe.core.designsystem.component.DobeDobeBottomSheetScaffold import com.chipichipi.dobedobe.core.designsystem.component.DobeDobeDialog -import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme import com.chipichipi.dobedobe.core.model.DashboardPhoto import com.chipichipi.dobedobe.feature.dashboard.component.DashboardEditMode -import com.chipichipi.dobedobe.feature.dashboard.component.DashboardTopAppBar import com.chipichipi.dobedobe.feature.dashboard.component.DashboardViewMode import com.chipichipi.dobedobe.feature.dashboard.component.ExpandedPhotoFrame import com.chipichipi.dobedobe.feature.dashboard.model.DashboardModeState @@ -176,7 +174,7 @@ private fun DashboardBody( } DobeDobeBottomSheetScaffold( - modifier = modifier + modifier = Modifier .fillMaxSize() .then( if (isEditMode) { @@ -192,29 +190,30 @@ private fun DashboardBody( onGoalToggled = onGoalToggled, onAddGoalClicked = navigateToAddGoal, onGoalClicked = navigateToGoalDetail, + modifier = Modifier + .padding(top = 8.dp), ) }, sheetPeekHeight = 380.dp, - topBar = { - DashboardTopAppBar( - onEditClick = onToggleMode, - navigateToSetting = navigateToSetting, - ) - }, ) { innerPadding -> - DashboardViewMode( - isViewMode = !isEditMode, - photoState = uiState.photoState, - bubbleTitle = uiState.bubbleTitle, - photoFramesState = photoFramesState, - onChangeBubble = onChangeBubble, - onToggleExpansion = onToggleExpansion, - onToggleMode = onToggleMode, + Box( modifier = Modifier .fillMaxSize() - .background(DobeDobeTheme.colors.gray50) - .padding(innerPadding), - ) + .padding( + bottom = innerPadding.calculateBottomPadding() - DRAG_HANDLER_HEIGHT, + ), + ) { + DashboardViewMode( + isViewMode = !isEditMode, + photoState = uiState.photoState, + bubbleTitle = uiState.bubbleTitle, + photoFramesState = photoFramesState, + onChangeBubble = onChangeBubble, + onToggleExpansion = onToggleExpansion, + onToggleMode = onToggleMode, + navigateToSetting = navigateToSetting, + ) + } } ExpandedPhotoFrame( diff --git a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/GoalBottomSheet.kt b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/GoalBottomSheet.kt index e810c049..f6fe03c8 100644 --- a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/GoalBottomSheet.kt +++ b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/GoalBottomSheet.kt @@ -43,8 +43,11 @@ internal fun GoalBottomSheetContent( onGoalToggled: (Long) -> Unit, onGoalClicked: (Long) -> Unit, onAddGoalClicked: () -> Unit, + modifier: Modifier = Modifier, ) { - Column { + Column( + modifier = modifier, + ) { GoalBottomSheetHeader(onAddGoalClicked) Spacer(modifier = Modifier.height(15.dp)) GoalBottomSheetBody( diff --git a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardCharacter.kt b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardCharacter.kt index f51f9899..916ae50e 100644 --- a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardCharacter.kt +++ b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardCharacter.kt @@ -35,13 +35,13 @@ internal fun DashboardCharacter( } .build() - var currentRaw by remember { mutableIntStateOf(R.raw.bird01) } + var currentRaw by remember { mutableIntStateOf(R.raw.rabbit01) } var isResetTrigger by remember { mutableStateOf(false) } LaunchedEffect(isResetTrigger) { if (isResetTrigger) { delay(4000) - currentRaw = R.raw.bird01 + currentRaw = R.raw.rabbit01 isResetTrigger = false } } @@ -54,14 +54,14 @@ internal fun DashboardCharacter( model = currentRaw, contentDescription = "Character Image", imageLoader = imageLoader, - placeholder = painterResource(R.drawable.bird_placeholder), + placeholder = painterResource(R.drawable.rabbit_placeholder), modifier = Modifier .size(180.dp, 225.dp) .clickable( interactionSource = remember { MutableInteractionSource() }, indication = null, ) { - currentRaw = R.raw.bird02 + currentRaw = R.raw.rabbit02 isResetTrigger = true }, ) diff --git a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardTopAppBar.kt b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardTopAppBar.kt index 6dabab64..a3c038d4 100644 --- a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardTopAppBar.kt +++ b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardTopAppBar.kt @@ -26,7 +26,7 @@ import com.chipichipi.dobedobe.feature.dashboard.R @OptIn(ExperimentalMaterial3Api::class) @Composable -internal fun DashboardTopAppBar( +internal fun DashboardViewModeTopAppBar( onEditClick: () -> Unit, navigateToSetting: () -> Unit, modifier: Modifier = Modifier, @@ -60,7 +60,7 @@ internal fun DashboardTopAppBar( } }, colors = TopAppBarDefaults.topAppBarColors( - containerColor = DobeDobeTheme.colors.gray50, + containerColor = Color.Transparent, ), ) } @@ -113,9 +113,9 @@ internal fun DashboardEditModeTopAppBar( @ThemePreviews @Composable -private fun DashboardTopAppBarPreview() { +private fun DashboardViewModeTopAppBarPreview() { DobeDobeTheme { - DashboardTopAppBar( + DashboardViewModeTopAppBar( onEditClick = {}, navigateToSetting = {}, ) diff --git a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardViewMode.kt b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardViewMode.kt index 32ad5bb7..cb477793 100644 --- a/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardViewMode.kt +++ b/feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardViewMode.kt @@ -11,10 +11,14 @@ import androidx.compose.foundation.layout.height import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.paint +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp import androidx.compose.ui.zIndex import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme import com.chipichipi.dobedobe.feature.dashboard.DashboardPhotoFramesState +import com.chipichipi.dobedobe.feature.dashboard.R import com.chipichipi.dobedobe.feature.dashboard.model.DashboardPhotoState @OptIn(ExperimentalSharedTransitionApi::class) @@ -27,46 +31,62 @@ internal fun SharedTransitionScope.DashboardViewMode( onChangeBubble: () -> Unit, onToggleExpansion: (Int) -> Unit, onToggleMode: () -> Unit, + navigateToSetting: () -> Unit, modifier: Modifier = Modifier, ) { - Box( - modifier = modifier, - contentAlignment = Alignment.Center, + Column( + modifier = modifier + .fillMaxSize() + .paint( + painterResource(id = R.drawable.rabbit_sheet_content_background), + contentScale = ContentScale.FillBounds, + ), + horizontalAlignment = Alignment.CenterHorizontally, ) { - photoState.forEach { photo -> - CollapsedPhotoFrame( - config = photo.config, - uri = photo.uri, - isExpanded = photoFramesState.isExpanded(photo.config.id), - rotation = photoFramesState.rotationMap[photo.config.id], - onToggleExpansion = onToggleExpansion, - onEmptyFrameClick = onToggleMode, - modifier = Modifier - .fillMaxSize() - .zIndex(0f), - ) - } + DashboardViewModeTopAppBar( + onEditClick = onToggleMode, + navigateToSetting = navigateToSetting, + ) - if (isViewMode) { - Column( - horizontalAlignment = Alignment.CenterHorizontally, - ) { - Spacer(Modifier.height(13.dp)) - DashboardBubble( - title = bubbleTitle, - textStyle = DobeDobeTheme.typography.body2, - modifier = Modifier - .background( - color = DobeDobeTheme.colors.white, - ), - onClick = onChangeBubble, - ) - DashboardCharacter( + Box( + modifier = modifier, + contentAlignment = Alignment.Center, + ) { + photoState.forEach { photo -> + CollapsedPhotoFrame( + config = photo.config, + uri = photo.uri, + isExpanded = photoFramesState.isExpanded(photo.config.id), + rotation = photoFramesState.rotationMap[photo.config.id], + onToggleExpansion = onToggleExpansion, + onEmptyFrameClick = onToggleMode, modifier = Modifier .fillMaxSize() - .zIndex(0.5f), + .zIndex(0f), ) } + + if (isViewMode) { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Spacer(Modifier.height(14.dp)) + DashboardBubble( + title = bubbleTitle, + textStyle = DobeDobeTheme.typography.body2, + modifier = Modifier + .background( + color = DobeDobeTheme.colors.white, + ), + onClick = onChangeBubble, + ) + DashboardCharacter( + modifier = Modifier + .fillMaxSize() + .zIndex(0.5f), + ) + } + } } } } diff --git a/feature/dashboard/src/main/res/drawable/rabbit_placeholder.png b/feature/dashboard/src/main/res/drawable/rabbit_placeholder.png new file mode 100644 index 00000000..cb2067b2 Binary files /dev/null and b/feature/dashboard/src/main/res/drawable/rabbit_placeholder.png differ diff --git a/feature/dashboard/src/main/res/drawable/rabbit_sheet_content_background.png b/feature/dashboard/src/main/res/drawable/rabbit_sheet_content_background.png new file mode 100644 index 00000000..3e975a75 Binary files /dev/null and b/feature/dashboard/src/main/res/drawable/rabbit_sheet_content_background.png differ diff --git a/feature/dashboard/src/main/res/raw/rabbit01.png b/feature/dashboard/src/main/res/raw/rabbit01.png new file mode 100644 index 00000000..c48524d5 Binary files /dev/null and b/feature/dashboard/src/main/res/raw/rabbit01.png differ diff --git a/feature/dashboard/src/main/res/raw/rabbit02.png b/feature/dashboard/src/main/res/raw/rabbit02.png new file mode 100644 index 00000000..edfbb0f0 Binary files /dev/null and b/feature/dashboard/src/main/res/raw/rabbit02.png differ