From e6d142db20541fd124032048a1b98c2893886f42 Mon Sep 17 00:00:00 2001 From: boris-xyz <62296097+014967@users.noreply.github.com> Date: Sat, 10 Feb 2024 20:32:39 +0900 Subject: [PATCH 1/5] [feat] create toolbar component --- .../toolbar/PreviewTwoToolToolbar.kt | 103 ++++++ .../designsystem/component/toolbar/Toolbar.kt | 57 ++++ .../component/toolbar/TwoTooToolbar.kt | 296 ++++++++++++++++++ .../component/toolbar/TwoTooToolbarType.kt | 78 +++++ .../component/toolbar/TwoTooTopAppBar.kt | 78 +++++ .../src/main/res/drawable/ic_calendar.xml | 45 +++ 6 files changed, 657 insertions(+) create mode 100644 presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/PreviewTwoToolToolbar.kt create mode 100644 presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/Toolbar.kt create mode 100644 presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooToolbar.kt create mode 100644 presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooToolbarType.kt create mode 100644 presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooTopAppBar.kt create mode 100644 presenter/src/main/res/drawable/ic_calendar.xml diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/PreviewTwoToolToolbar.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/PreviewTwoToolToolbar.kt new file mode 100644 index 00000000..fa02efcb --- /dev/null +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/PreviewTwoToolToolbar.kt @@ -0,0 +1,103 @@ +package com.mashup.twotoo.presenter.designsystem.component.toolbar + +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.wrapContentHeight +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.constraintlayout.compose.ConstraintLayout +import com.mashup.twotoo.presenter.R + +@Preview +@Composable +private fun HelpCenterToolbar( + modifier: Modifier = Modifier, + onClickHelpIcon: () -> Unit = {}, + text: String = "", +) { + TwoTooToolbar.HelpCenterToolbar( + modifier = modifier.fillMaxWidth(), + onClickHelpIcon = onClickHelpIcon, + text = text, + ) +} + +@Preview +@Composable +private fun CalendarToolbar( + modifier: Modifier = Modifier, + onClickHelpIcon: () -> Unit = {}, + onClickCalendarIcon: () -> Unit = {}, + text: String = "", +) { + TwoTooToolbar.CalendarToolbar( + modifier = modifier.fillMaxWidth(), + onClickHelpIcon = onClickHelpIcon, + onClickCalendarIcon = onClickCalendarIcon, + ) +} + +@Preview +@Composable +private fun BackToolbar( + modifier: Modifier = Modifier, + onClickBackIcon: () -> Unit = {}, + onClickActionButton: () -> Unit = {}, +) { + TwoTooToolbar.BackToolbar( + modifier = modifier.fillMaxWidth(), + onClickBackIcon = onClickBackIcon, + onClickActionButton = onClickActionButton, + actionIcons = null, + ) +} + +@Preview +@Composable +private fun PreviewCreateChallengeToolbar() { + TwoTooToolbar.CreateChallengeToolbar( + modifier = Modifier.fillMaxWidth(), + title = stringResource(id = R.string.challenge_info), + onClickActionButton = {}, + onClickBackIcon = {}, + ) +} + +@Preview +@Composable +private fun HistoryToolbar( + modifier: Modifier = Modifier, +) { + TwoTooToolbar.HistoryToolbar( + modifier = modifier.fillMaxWidth(), + onClickBackIcon = {}, + onClickActionButton = {}, + ) +} + +@Preview +@Composable +private fun DetailImageToolbar() { + ConstraintLayout { + val (topBar, dropDownMenu) = createRefs() + TwoTooToolbar.DetailImageToolbar( + modifier = Modifier.constrainAs(topBar) { + top.linkTo(parent.top) + start.linkTo(parent.start) + end.linkTo(parent.end) + }, + dropDownModifier = Modifier + .wrapContentHeight() + .constrainAs(dropDownMenu) { + top.linkTo(topBar.bottom) + end.linkTo(parent.end) + }, + onClickBackIcon = { }, + onClickActionButton = { }, + onDismiss = { }, + onClickSaveButton = { }, + expandedState = false, + ) + } +} diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/Toolbar.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/Toolbar.kt new file mode 100644 index 00000000..b9e258cb --- /dev/null +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/Toolbar.kt @@ -0,0 +1,57 @@ +package com.mashup.twotoo.presenter.designsystem.component.toolbar + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextAlign +import com.mashup.twotoo.presenter.R +import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme +import com.mashup.twotoo.presenter.designsystem.theme.TwotooPink + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun Toolbar( + modifier: Modifier = Modifier, + hasTitle: Boolean = false, + actions: @Composable (RowScope.() -> Unit), + navigationIcon: @Composable () -> Unit = {}, +) { + TopAppBar( + modifier = modifier, + title = { + if (hasTitle) { + Text( + text = stringResource(R.string.app_name), + color = TwotooPink, + style = TwoTooTheme.typography.headLineNormal28, + textAlign = TextAlign.Center, + ) + } else { + Box( + modifier = Modifier.fillMaxSize(), + contentAlignment = Alignment.Center + ) { + Text( + text = stringResource(R.string.app_name), + color = TwotooPink, + style = TwoTooTheme.typography.headLineNormal28, + ) + } + } + }, + navigationIcon = navigationIcon, + colors = TopAppBarDefaults.topAppBarColors( + containerColor = Color.Transparent, + ), + actions = actions, + ) +} diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooToolbar.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooToolbar.kt new file mode 100644 index 00000000..77a51fd9 --- /dev/null +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooToolbar.kt @@ -0,0 +1,296 @@ +package com.mashup.twotoo.presenter.designsystem.component.toolbar + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.DropdownMenu +import androidx.compose.material3.DropdownMenuItem +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp +import com.mashup.twotoo.presenter.R +import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme + +object TwoTooToolbar : TwoTooToolbarType { + @Composable + override fun HelpCenterToolbar( + modifier: Modifier, + onClickHelpIcon: () -> Unit, + text: String, + ) { + TwoTooTopAppBar( + modifier = modifier, + titleEnabled = true, + actionIcons = { + Icon( + modifier = Modifier.clip(shape = CircleShape).clickable { + onClickHelpIcon() + }, + painter = painterResource(id = R.drawable.help), + contentDescription = null, + tint = Color.Unspecified, + ) + }, + ) + } + + @Composable + override fun CalendarToolbar( + modifier: Modifier, + onClickHelpIcon: () -> Unit, + onClickCalendarIcon: () -> Unit, + ) { + TwoTooTopAppBar( + modifier = modifier, + titleEnabled = true, + title = stringResource(id = R.string.app_name), + titleAlignment = Arrangement.Start, + actionIcons = { + Icon( + modifier = Modifier.clickable { + onClickCalendarIcon() + }, + painter = painterResource(id = R.drawable.ic_calendar), + contentDescription = null, + tint = Color.Unspecified, + ) + Spacer( + modifier = Modifier.width(20.dp), + ) + Icon( + modifier = Modifier.clip(shape = CircleShape).clickable { + onClickHelpIcon() + }, + painter = painterResource(id = R.drawable.help), + contentDescription = null, + tint = Color.Unspecified, + ) + }, + ) + } + + @Composable + override fun BackToolbar( + modifier: Modifier, + onClickBackIcon: () -> Unit, + onClickActionButton: () -> Unit, + actionIcons: (@Composable () -> Unit)?, + ) { + TwoTooTopAppBar( + modifier = modifier, + actionIcons = { + if (actionIcons != null) { + actionIcons() + } + }, + navigationIcon = { + Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.CenterStart) { + IconButton(onClick = { + onClickBackIcon() + }) { + Icon( + painter = painterResource(id = R.drawable.ic_back), + contentDescription = null, + tint = TwoTooTheme.color.mainBrown, + ) + } + } + }, + ) + } + + @Composable + override fun GardenToolbar( + modifier: Modifier, + onClickHelpIcon: () -> Unit, + ) { + TwoTooTopAppBar( + modifier = modifier, + titleEnabled = true, + title = stringResource(id = R.string.garden_title), + titleAlignment = Arrangement.Start, + actionIcons = { + Icon( + modifier = Modifier.clip(shape = CircleShape).clickable { + onClickHelpIcon() + }, + painter = painterResource(id = R.drawable.help), + contentDescription = null, + tint = Color.Unspecified, + ) + }, + ) + } + + @Composable + override fun HistoryToolbar( + modifier: Modifier, + onClickBackIcon: () -> Unit, + onClickActionButton: () -> Unit, + ) { + TwoTooTopAppBar( + modifier = modifier, + titleEnabled = false, + navigationIcon = { + Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.CenterStart) { + IconButton(onClick = { + onClickBackIcon() + }) { + Icon( + painter = painterResource(id = R.drawable.ic_back), + contentDescription = null, + tint = TwoTooTheme.color.mainBrown, + ) + } + } + }, + actionIcons = { + Icon( + modifier = Modifier.clickable { + onClickActionButton() + }, + painter = painterResource(id = R.drawable.ic_more), + contentDescription = null, + tint = TwoTooTheme.color.mainBrown, + ) + }, + ) + } + + @Composable + override fun HistoryDetailToolbar( + modifier: Modifier, + title: String, + ) { + TwoTooTopAppBar( + modifier = modifier, + titleEnabled = true, + title = title, + titleAlignment = Arrangement.Start, + ) + } + + @Composable + override fun TitleToolbar(modifier: Modifier) { + TwoTooTopAppBar( + modifier = modifier, + titleEnabled = true, + title = stringResource(id = R.string.app_name), + titleAlignment = Arrangement.Start, + ) + } + + @Composable + override fun MyPageToolbar(modifier: Modifier, onClickHelpIcon: () -> Unit) { + TwoTooTopAppBar( + modifier = modifier, + titleEnabled = true, + title = stringResource(id = R.string.mypage), + titleAlignment = Arrangement.Start, + actionIcons = { + Icon( + modifier = Modifier.clip(shape = CircleShape).clickable { + onClickHelpIcon() + }, + painter = painterResource(id = R.drawable.help), + contentDescription = null, + tint = Color.Unspecified, + ) + }, + ) + } + + @Composable + override fun CreateChallengeToolbar( + modifier: Modifier, + title: String, + onClickActionButton: () -> Unit, + onClickBackIcon: () -> Unit, + ) { + TwoTooTopAppBar( + modifier = modifier, + title = title, + titleEnabled = true, + titleAlignment = Arrangement.Center, + titleTextColor = TwoTooTheme.color.mainBrown, + navigationIcon = { + Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.CenterStart) { + IconButton(onClick = { + onClickBackIcon() + }) { + Icon( + painter = painterResource(id = R.drawable.ic_back), + contentDescription = null, + tint = TwoTooTheme.color.mainBrown, + ) + } + } + }, + actionIcons = { + Icon( + modifier = Modifier.clickable { onClickActionButton() }, + painter = painterResource(id = R.drawable.ic_more), + contentDescription = null, + tint = TwoTooTheme.color.mainBrown, + ) + }, + ) + } + + @Composable + override fun DetailImageToolbar( + modifier: Modifier, + dropDownModifier: Modifier, + onClickBackIcon: () -> Unit, + onClickActionButton: () -> Unit, + onClickSaveButton: () -> Unit, + expandedState: Boolean, + onDismiss: () -> Unit, + ) { + TwoTooTopAppBar( + modifier = modifier, + navigationIcon = { + Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.CenterStart) { + IconButton(onClick = { + onClickBackIcon() + }) { + Icon( + painter = painterResource(id = R.drawable.ic_back), + contentDescription = null, + tint = Color.White, + ) + } + } + }, + actionIcons = { + Icon( + painter = painterResource(id = R.drawable.ic_more), + contentDescription = null, + tint = Color.White, + ) + + DropdownMenu( + modifier = dropDownModifier, + expanded = expandedState, + onDismissRequest = onDismiss, + ) { + DropdownMenuItem(text = { + Text(text = stringResource(id = R.string.saveImage)) + }, onClick = onClickSaveButton) + } + }, + ) + } +} diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooToolbarType.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooToolbarType.kt new file mode 100644 index 00000000..1b397282 --- /dev/null +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooToolbarType.kt @@ -0,0 +1,78 @@ +package com.mashup.twotoo.presenter.designsystem.component.toolbar + +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier + +sealed interface TwoTooToolbarType { + + @Composable + fun HelpCenterToolbar( + modifier: Modifier, + onClickHelpIcon: () -> Unit, + text: String, + ) + + @Composable + fun CalendarToolbar( + modifier: Modifier, + onClickHelpIcon: () -> Unit, + onClickCalendarIcon: () -> Unit, + ) + + @Composable + fun BackToolbar( + modifier: Modifier, + onClickBackIcon: () -> Unit, + onClickActionButton: () -> Unit, + actionIcons: (@Composable () -> Unit)?, + ) + + @Composable + fun GardenToolbar( + modifier: Modifier, + onClickHelpIcon: () -> Unit, + ) + + @Composable + fun HistoryToolbar( + modifier: Modifier, + onClickBackIcon: () -> Unit, + onClickActionButton: () -> Unit, + ) + + @Composable + fun HistoryDetailToolbar( + modifier: Modifier, + title: String, + ) + + @Composable + fun TitleToolbar( + modifier: Modifier, + ) + + @Composable + fun MyPageToolbar( + modifier: Modifier, + onClickHelpIcon: () -> Unit, + ) + + @Composable + fun CreateChallengeToolbar( + modifier: Modifier, + title: String, + onClickActionButton: () -> Unit, + onClickBackIcon: () -> Unit, + ) + + @Composable + fun DetailImageToolbar( + modifier: Modifier, + dropDownModifier: Modifier, + onClickBackIcon: () -> Unit, + onClickActionButton: () -> Unit, + onClickSaveButton: () -> Unit, + expandedState: Boolean, + onDismiss: () -> Unit, + ) +} diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooTopAppBar.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooTopAppBar.kt new file mode 100644 index 00000000..a78428d8 --- /dev/null +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooTopAppBar.kt @@ -0,0 +1,78 @@ +package com.mashup.twotoo.presenter.designsystem.component.toolbar + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.width +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.unit.dp +import com.mashup.twotoo.presenter.R +import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme +import com.mashup.twotoo.presenter.designsystem.theme.TwotooPink + +@Composable +fun TwoTooTopAppBar( + modifier: Modifier = Modifier, + titleEnabled: Boolean = false, + title: String = stringResource(id = R.string.app_name), + titleAlignment: Arrangement.Horizontal = Arrangement.Center, + titleTextStyle: TextStyle = TwoTooTheme.typography.headLineNormal28, + titleTextColor: Color = TwotooPink, + navigationIcon: (@Composable () -> Unit)? = null, + actionIcons: (@Composable RowScope.() -> Unit)? = null, +) { + Box( + modifier = modifier.fillMaxWidth().height(54.dp), + ) { + if (titleEnabled) { + Row( + modifier = Modifier.fillMaxSize(), + horizontalArrangement = titleAlignment, + verticalAlignment = Alignment.CenterVertically, + ) { + if (titleAlignment != Arrangement.Center) { + Spacer( + modifier = Modifier.width(26.dp), + ) + } + Text( + text = title, + color = titleTextColor, + style = titleTextStyle, + ) + } + } + if (navigationIcon != null) { + Row( + modifier = Modifier.fillMaxSize(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.Start, + ) { + navigationIcon() + } + } + if (actionIcons != null) { + Row( + modifier = Modifier.fillMaxSize(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.End, + ) { + actionIcons() + Spacer( + modifier = Modifier.width(15.5.dp), + ) + } + } + } +} diff --git a/presenter/src/main/res/drawable/ic_calendar.xml b/presenter/src/main/res/drawable/ic_calendar.xml new file mode 100644 index 00000000..e1cb1823 --- /dev/null +++ b/presenter/src/main/res/drawable/ic_calendar.xml @@ -0,0 +1,45 @@ + + + + + + + + + + From a003a8cd17ee7fd7c643fc4ea8edcb010220ccd4 Mon Sep 17 00:00:00 2001 From: boris-xyz <62296097+014967@users.noreply.github.com> Date: Sat, 10 Feb 2024 20:32:51 +0900 Subject: [PATCH 2/5] [refactor] replace TwoTooToolbar --- .../createChallenge/CreateChallenge.kt | 31 +++-------- .../selectflower/SelectFlowerCard.kt | 11 ++-- .../mashup/twotoo/presenter/garden/Garden.kt | 7 +-- .../twotoo/presenter/guid/GuideWebView.kt | 14 ++--- .../twotoo/presenter/history/HistoryScreen.kt | 25 +++------ .../history/datail/HistoryDetailScreen.kt | 6 +-- .../history/detailImage/DetailImageScreen.kt | 53 +++++-------------- .../com/mashup/twotoo/presenter/home/Home.kt | 19 +++++-- .../twotoo/presenter/invite/SendInvitation.kt | 7 +-- .../mashup/twotoo/presenter/mypage/MyPage.kt | 13 +++-- .../mypage/navigation/UserNavigation.kt | 2 +- .../presenter/nickname/NickNameSetting.kt | 26 +++++++-- .../twotoo/presenter/onboarding/OnBoarding.kt | 5 +- 13 files changed, 96 insertions(+), 123 deletions(-) diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/createChallenge/CreateChallenge.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/createChallenge/CreateChallenge.kt index 346e05b0..fd9aaf52 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/createChallenge/CreateChallenge.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/createChallenge/CreateChallenge.kt @@ -5,13 +5,11 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.navigationBarsPadding -import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding import androidx.compose.material.SnackbarHostState -import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -20,7 +18,6 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview @@ -29,7 +26,7 @@ import com.mashup.twotoo.presenter.R import com.mashup.twotoo.presenter.createChallenge.model.ChallengeInfoModel import com.mashup.twotoo.presenter.designsystem.component.dialog.selection.SelectionDialogButtonContent import com.mashup.twotoo.presenter.designsystem.component.toast.SnackBarHost -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooBackToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.designsystem.theme.TwotooPink import com.mashup.twotoo.presenter.history.TwoTooSelectionDialog @@ -197,29 +194,15 @@ fun CreateChallengeToolbar( else -> { "" } } - val moreIconButton: @Composable (Int) -> Unit = - { - IconButton(onClick = { - setDialogVisibility(true) - }) { - Icon( - painter = painterResource(id = R.drawable.ic_more), - contentDescription = null, - ) - } - } - - TwoTooBackToolbar( + TwoTooToolbar.CreateChallengeToolbar( + modifier = Modifier.fillMaxWidth(), title = toolbarTitle, - titleModifier = Modifier.offset(x = -16.dp), - onClickBackIcon = { - onClickBackButton() - }, - actionIconButton = { + onClickActionButton = { if (BeforeChallengeState.isChallengeDeletionEnabled(homeState)) { - moreIconButton(challengeNo) + setDialogVisibility(true) } }, + onClickBackIcon = onClickBackButton, ) if (deleteDialogVisibility) { diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/createChallenge/selectflower/SelectFlowerCard.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/createChallenge/selectflower/SelectFlowerCard.kt index ca173d82..6789f486 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/createChallenge/selectflower/SelectFlowerCard.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/createChallenge/selectflower/SelectFlowerCard.kt @@ -28,7 +28,7 @@ import com.mashup.twotoo.presenter.createChallenge.CreateChallengeSideEffect import com.mashup.twotoo.presenter.createChallenge.CreateChallengeViewModel import com.mashup.twotoo.presenter.createChallenge.model.ChallengeInfoModel import com.mashup.twotoo.presenter.designsystem.component.button.TwoTooTextButton -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooBackToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.designsystem.theme.TwotooPink import com.mashup.twotoo.presenter.home.model.BeforeChallengeState @@ -81,9 +81,12 @@ fun SelectFlowerCard( var flowerName by remember { mutableStateOf("") } Column { Spacer(modifier = Modifier.height(5.dp)) - TwoTooBackToolbar(onClickBackIcon = { - onClickBackButton() - }) + TwoTooToolbar.BackToolbar( + modifier = Modifier.fillMaxWidth(), + onClickBackIcon = onClickBackButton, + onClickActionButton = {}, + actionIcons = null, + ) Box { Column(modifier = Modifier.padding(top = 11.dp)) { SelectFlowerTitle() diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/garden/Garden.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/garden/Garden.kt index 73e2be19..a3237716 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/garden/Garden.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/garden/Garden.kt @@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width @@ -26,7 +27,7 @@ import androidx.lifecycle.Lifecycle import androidx.lifecycle.repeatOnLifecycle import com.mashup.twotoo.presenter.R import com.mashup.twotoo.presenter.designsystem.component.loading.FlowerLoadingIndicator -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooMainToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import kotlinx.coroutines.delay import org.orbitmvi.orbit.compose.collectAsState @@ -68,8 +69,8 @@ fun GardenScreen( Column(modifier = modifier) { Spacer(modifier = Modifier.height(5.dp)) - TwoTooMainToolbar( - text = stringResource(id = R.string.garden_title), + TwoTooToolbar.GardenToolbar( + modifier = Modifier.fillMaxWidth(), onClickHelpIcon = { navigateToGuide() }, ) Spacer(modifier = Modifier.height(24.dp)) diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/guid/GuideWebView.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/guid/GuideWebView.kt index c151fee2..9999548f 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/guid/GuideWebView.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/guid/GuideWebView.kt @@ -7,16 +7,13 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.navigationBarsPadding -import androidx.compose.foundation.layout.offset import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import androidx.compose.ui.viewinterop.AndroidView -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooBackToolbar -import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.mypage.model.GuideUrlItem @Composable @@ -28,12 +25,11 @@ fun GuideRoute( val url = GuideUrlItem.findUrlBy(route) val title = GuideUrlItem.findTitleBy(route) Column { - TwoTooBackToolbar( + TwoTooToolbar.BackToolbar( modifier = Modifier.fillMaxWidth(), - title = title, - titleModifier = Modifier.offset(x = -16.dp), - onClickBackIcon = { onClickBackButton() }, - color = TwoTooTheme.color.mainWhite, + onClickBackIcon = onClickBackButton, + onClickActionButton = {}, + actionIcons = null, ) GuideWebView( modifier = modifier.fillMaxSize().navigationBarsPadding(), diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/history/HistoryScreen.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/history/HistoryScreen.kt index 4d6acba6..d3222c63 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/history/HistoryScreen.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/history/HistoryScreen.kt @@ -1,6 +1,5 @@ package com.mashup.twotoo.presenter.history -import androidx.compose.foundation.background import android.app.Activity import android.util.Log import androidx.compose.foundation.layout.Box @@ -12,8 +11,6 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.material3.Divider -import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue @@ -25,7 +22,6 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalLifecycleOwner -import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.lifecycle.Lifecycle @@ -39,7 +35,7 @@ import com.mashup.twotoo.presenter.designsystem.component.dialog.DialogContent import com.mashup.twotoo.presenter.designsystem.component.dialog.TwoTooDialog import com.mashup.twotoo.presenter.designsystem.component.dialog.selection.SelectionDialogButtonContent import com.mashup.twotoo.presenter.designsystem.component.loading.FlowerLoadingIndicator -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooBackToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.designsystem.theme.TwotooPink import kotlinx.coroutines.launch @@ -134,20 +130,13 @@ fun HistoryScreen( ) { Spacer(modifier = Modifier.padding(top = 5.dp)) - TwoTooBackToolbar( - onClickBackIcon = { - onClickBackButton() - }, - ) { - IconButton(onClick = { + TwoTooToolbar.HistoryToolbar( + modifier = Modifier.fillMaxWidth(), + onClickBackIcon = onClickBackButton, + onClickActionButton = { showSelectListDialog = true - }) { - Icon( - painter = painterResource(id = R.drawable.ic_more), - contentDescription = null, - ) - } - } + }, + ) Spacer(modifier = Modifier.height(9.dp)) if (state.loadingIndicatorState) { Box(modifier = Modifier.fillMaxSize()) { diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/history/datail/HistoryDetailScreen.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/history/datail/HistoryDetailScreen.kt index 8e154b3b..c2ca8f90 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/history/datail/HistoryDetailScreen.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/history/datail/HistoryDetailScreen.kt @@ -28,7 +28,7 @@ import com.mashup.twotoo.presenter.designsystem.component.TwoTooImageView import com.mashup.twotoo.presenter.designsystem.component.bottomsheet.TwoTooBottomSheet import com.mashup.twotoo.presenter.designsystem.component.button.TwoTooTextButton import com.mashup.twotoo.presenter.designsystem.component.toast.SnackBarHost -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooMainToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.MainWhite import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.designsystem.theme.TwotooPink @@ -131,13 +131,13 @@ fun HistoryDetailScreen( modifier = Modifier.fillMaxSize(), ) { Spacer(modifier = Modifier.height(8.dp)) - TwoTooMainToolbar( + TwoTooToolbar.HistoryDetailToolbar( + modifier = Modifier.fillMaxWidth(), title = stringResource( id = R.string.historyDetailTitle, historyDetailInfoUiModel.ownerNickNamesUiModel.myNickName, ), ) - CompositionLocalProvider( LocalContentColor provides TwoTooTheme.color.mainBrown, ) { diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/history/detailImage/DetailImageScreen.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/history/detailImage/DetailImageScreen.kt index 37885a08..6061e704 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/history/detailImage/DetailImageScreen.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/history/detailImage/DetailImageScreen.kt @@ -7,11 +7,6 @@ import androidx.compose.foundation.gestures.detectTransformGestures import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.material.SnackbarHostState -import androidx.compose.material3.DropdownMenu -import androidx.compose.material3.DropdownMenuItem -import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableFloatStateOf @@ -27,7 +22,6 @@ import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @@ -36,7 +30,7 @@ import androidx.constraintlayout.compose.Dimension import com.mashup.twotoo.presenter.R import com.mashup.twotoo.presenter.designsystem.component.TwoTooImageView import com.mashup.twotoo.presenter.designsystem.component.toast.SnackBarHost -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooBackToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.util.saveBitmapToStorage import dev.shreyaspatil.capturable.Capturable @@ -104,45 +98,24 @@ fun DetailImageScreen( }, ) { val (topBar, image, captureWrapper, dropDownMenu, snackBar) = createRefs() - TwoTooBackToolbar( + TwoTooToolbar.DetailImageToolbar( modifier = Modifier.constrainAs(topBar) { top.linkTo(parent.top) start.linkTo(parent.start) end.linkTo(parent.end) }, - onClickBackIcon = { - onClickBackButton() - }, - contentColor = Color.White, - ) { - IconButton( - onClick = { - settingMenuVisibility = true + dropDownModifier = Modifier + .wrapContentHeight() + .constrainAs(dropDownMenu) { + top.linkTo(topBar.bottom) + end.linkTo(parent.end) }, - ) { - Icon( - painter = painterResource(id = R.drawable.ic_more), - contentDescription = null, - tint = Color.White, - ) - } - DropdownMenu( - modifier = Modifier - .wrapContentHeight() - .constrainAs(dropDownMenu) { - top.linkTo(topBar.bottom) - end.linkTo(parent.end) - }, - expanded = settingMenuVisibility, - onDismissRequest = { settingMenuVisibility = false }, - ) { - DropdownMenuItem(text = { - Text(text = stringResource(id = R.string.saveImage)) - }, onClick = { - captureController.capture(Bitmap.Config.ARGB_8888) - }) - } - } + onClickBackIcon = onClickBackButton, + onClickActionButton = { settingMenuVisibility = true }, + onDismiss = { settingMenuVisibility = false }, + onClickSaveButton = { captureController.capture(Bitmap.Config.ARGB_8888) }, + expandedState = settingMenuVisibility, + ) Capturable( modifier = Modifier.constrainAs(captureWrapper) { diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/home/Home.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/home/Home.kt index 4d65dc64..57e11fb2 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/home/Home.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/home/Home.kt @@ -22,6 +22,7 @@ import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.testTagsAsResourceId +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.constraintlayout.compose.ConstraintLayout import androidx.lifecycle.Lifecycle @@ -36,7 +37,8 @@ import com.mashup.twotoo.presenter.designsystem.component.dialog.ShareChallengeD import com.mashup.twotoo.presenter.designsystem.component.dialog.TwoTooDialog import com.mashup.twotoo.presenter.designsystem.component.loading.FlowerLoadingIndicator import com.mashup.twotoo.presenter.designsystem.component.toast.SnackBarHost -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooMainToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar +import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.home.before.HomeBeforeChallenge import com.mashup.twotoo.presenter.home.model.BeforeChallengeState import com.mashup.twotoo.presenter.home.model.BeforeChallengeUiModel @@ -164,16 +166,17 @@ fun HomeScreen( onClickCompleteButton: (Int) -> Unit = {}, state: HomeStateUiModel = HomeStateUiModel.init, onClickCheerButton: () -> Unit = {}, - navigateToGuide: () -> Unit, + navigateToGuide: () -> Unit = {}, onWiggleAnimationEnd: () -> Unit = {}, - onClickFlowerTextBubble: (Int, FlowerName) -> Unit = { num, name -> }, + onClickFlowerTextBubble: (Int, FlowerName) -> Unit = { _, _ -> }, ) { Column(modifier = modifier) { - TwoTooMainToolbar( + TwoTooToolbar.CalendarToolbar( modifier = Modifier.padding(top = 5.dp), onClickHelpIcon = { navigateToGuide() }, + onClickCalendarIcon = {}, ) Crossfade( modifier = Modifier.fillMaxSize(), @@ -254,3 +257,11 @@ fun HomeScreen( } } } + +@Preview +@Composable +private fun PreviewHomeScreen() { + TwoTooTheme { + HomeScreen() + } +} diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/invite/SendInvitation.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/invite/SendInvitation.kt index 5bf8ba88..c342023b 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/invite/SendInvitation.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/invite/SendInvitation.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.padding @@ -24,7 +25,7 @@ import androidx.compose.ui.unit.dp import com.mashup.twotoo.presenter.R import com.mashup.twotoo.presenter.designsystem.component.TwoTooImageView import com.mashup.twotoo.presenter.designsystem.component.button.TwoTooTextButton -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooMainToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import org.orbitmvi.orbit.compose.collectAsState import org.orbitmvi.orbit.compose.collectSideEffect @@ -77,7 +78,7 @@ fun SendInvitation( verticalArrangement = Arrangement.SpaceAround, ) { Spacer(modifier = Modifier.height(5.dp)) - TwoTooMainToolbar() + TwoTooToolbar.TitleToolbar(modifier = Modifier.fillMaxWidth(),) Text( text = stringResource(id = R.string.invite_title), modifier = Modifier.padding(top = 137.dp, bottom = 24.dp), @@ -111,5 +112,5 @@ fun SendInvitation( @Preview @Composable private fun SendInvitationPreview() { - SendInvitation() + SendInvitation() } diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/mypage/MyPage.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/mypage/MyPage.kt index 044824c9..f0dc8dae 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/mypage/MyPage.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/mypage/MyPage.kt @@ -37,7 +37,7 @@ import com.mashup.twotoo.presenter.designsystem.component.TwoTooImageView import com.mashup.twotoo.presenter.designsystem.component.dialog.DialogContent import com.mashup.twotoo.presenter.designsystem.component.dialog.TwoTooDialog import com.mashup.twotoo.presenter.designsystem.component.toast.SnackBarHost -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooMainToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.home.model.HomeGoalCountUiModel import com.mashup.twotoo.presenter.home.ongoing.components.HomeGoalCount @@ -51,10 +51,10 @@ import org.orbitmvi.orbit.compose.collectSideEffect @Composable fun MyPageRoute( - isChangeNicknameSuccess: Boolean = false, userViewModel: UserViewModel, - navigateToRoute: (String) -> Unit, modifier: Modifier = Modifier, + isChangeNicknameSuccess: Boolean = false, + navigateToRoute: (String) -> Unit, ) { val lifecycleOwner = LocalLifecycleOwner.current LaunchedEffect(Unit) { @@ -144,7 +144,7 @@ private fun handleSideEffect( sideEffect: UserSideEffect, toast: () -> Unit, navigate: (String) -> Unit, - action: (MyPageDialogType) -> Unit + action: (MyPageDialogType) -> Unit, ) { when (sideEffect) { is UserSideEffect.NavigateToRoute -> { @@ -173,16 +173,15 @@ fun MyPageScreen( isMyPageDialogVisible: Boolean = false, myPageDialogContent: DialogContent = DialogContent.default, navigateToGuide: (String) -> Unit, - navigateToChangeNickName: (String) -> Unit + navigateToChangeNickName: (String) -> Unit, ) { Column( modifier = modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, ) { Spacer(modifier = Modifier.height(5.dp)) - TwoTooMainToolbar( + TwoTooToolbar.MyPageToolbar( modifier = Modifier.fillMaxWidth(), - text = stringResource(id = R.string.mypage), onClickHelpIcon = { navigateToGuide(GuideUrlItem.UsingGuide.name) }, ) TwoTooImageView( diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/mypage/navigation/UserNavigation.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/mypage/navigation/UserNavigation.kt index 49e0746e..90c638ea 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/mypage/navigation/UserNavigation.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/mypage/navigation/UserNavigation.kt @@ -31,8 +31,8 @@ fun NavGraphBuilder.userGraph(navController: NavController) { val isChangeNicknameSuccess = action == "success" MyPageRoute( - isChangeNicknameSuccess, userViewModel = userViewModel, + isChangeNicknameSuccess = isChangeNicknameSuccess, navigateToRoute = { route -> when (route) { MyPageItem.SignOut.route -> { diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/nickname/NickNameSetting.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/nickname/NickNameSetting.kt index d0f396e8..a7b04667 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/nickname/NickNameSetting.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/nickname/NickNameSetting.kt @@ -39,8 +39,7 @@ import com.mashup.twotoo.presenter.designsystem.component.TwoTooImageView import com.mashup.twotoo.presenter.designsystem.component.button.TwoTooTextButton import com.mashup.twotoo.presenter.designsystem.component.textfield.TwoTooTextField import com.mashup.twotoo.presenter.designsystem.component.toast.SnackBarHost -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooBackToolbar -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooMainToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.MainYellow import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.designsystem.theme.TwotooPink @@ -121,7 +120,7 @@ fun NickNameSetting( snackState: SnackbarHostState, startRoute: String, onNextButtonClick: (String) -> Unit, - onClickBackButton: () -> Unit + onClickBackButton: () -> Unit, ) { val isChangeMode = startRoute.isNotEmpty() && startRoute == "mypage" val buttonText = @@ -146,9 +145,14 @@ fun NickNameSetting( ) { Spacer(modifier = Modifier.height(5.dp)) if (isChangeMode) { - TwoTooBackToolbar(onClickBackIcon = { onClickBackButton() }) + TwoTooToolbar.BackToolbar( + modifier = Modifier.fillMaxWidth(), + onClickBackIcon = { onClickBackButton() }, + onClickActionButton = {}, + actionIcons = null, + ) } else { - TwoTooMainToolbar() + TwoTooToolbar.TitleToolbar(modifier = Modifier.fillMaxWidth()) } if (state.partnerNickName.isNotEmpty() && !isChangeMode) { TwoTooImageView( @@ -265,3 +269,15 @@ private fun InviteGuidePreview() { private fun NickNameSettingPreview() { NickNameSetting(NickNameState(), SnackbarHostState(), "", {}, {}) } + +@Preview +@Composable +private fun NickNameSettingIsChangePreview() { + NickNameSetting( + NickNameState(), + SnackbarHostState(), + "mypage", + {}, + {}, + ) +} diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/onboarding/OnBoarding.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/onboarding/OnBoarding.kt index 1b7921f1..c322d80a 100755 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/onboarding/OnBoarding.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/onboarding/OnBoarding.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.width @@ -24,7 +25,7 @@ import com.mashup.twotoo.presenter.constant.TAG import com.mashup.twotoo.presenter.designsystem.component.button.TwoTooIconButtonImpl import com.mashup.twotoo.presenter.designsystem.component.loading.FlowerLoadingIndicator import com.mashup.twotoo.presenter.designsystem.component.scrim.TwoTooScrim -import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooMainToolbar +import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.navigation.NavigationRoute import com.mashup.twotoo.presenter.sdk.theme.KakaoLoginButtonTheme @@ -88,7 +89,7 @@ fun OnBoardingScreen( horizontalAlignment = Alignment.CenterHorizontally, ) { Spacer(modifier = Modifier.height(5.dp)) - TwoTooMainToolbar() + TwoTooToolbar.TitleToolbar(modifier = Modifier.fillMaxWidth()) HorizontalPagerContent(pagerState = pagerState) Spacer(modifier = Modifier.weight(1f)) From 9f7bd02ce22fbd31061fba3b90be49712b35602c Mon Sep 17 00:00:00 2001 From: boris-xyz <62296097+014967@users.noreply.github.com> Date: Sat, 10 Feb 2024 20:40:08 +0900 Subject: [PATCH 3/5] [feat] add statusbarPadding --- .../designsystem/component/toolbar/TwoTooTopAppBar.kt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooTopAppBar.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooTopAppBar.kt index a78428d8..450ba429 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooTopAppBar.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooTopAppBar.kt @@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.statusBarsPadding import androidx.compose.foundation.layout.width import androidx.compose.material.Text import androidx.compose.runtime.Composable @@ -33,7 +34,7 @@ fun TwoTooTopAppBar( actionIcons: (@Composable RowScope.() -> Unit)? = null, ) { Box( - modifier = modifier.fillMaxWidth().height(54.dp), + modifier = modifier.fillMaxWidth().height(54.dp).statusBarsPadding(), ) { if (titleEnabled) { Row( From 1b9c16203b32be34030af528ea04967e4c3fac87 Mon Sep 17 00:00:00 2001 From: boris-xyz <62296097+014967@users.noreply.github.com> Date: Sat, 10 Feb 2024 20:45:33 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[feat]=20=EC=9B=B9=EB=B7=B0=20=ED=9D=B0?= =?UTF-8?q?=EC=83=89=20=EB=B0=B0=EA=B2=BD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mashup/twotoo/presenter/guid/GuideWebView.kt | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/guid/GuideWebView.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/guid/GuideWebView.kt index 9999548f..27d5f27a 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/guid/GuideWebView.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/guid/GuideWebView.kt @@ -3,15 +3,20 @@ package com.mashup.twotoo.presenter.guid import android.annotation.SuppressLint import android.webkit.WebView import android.webkit.WebViewClient -import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.navigationBarsPadding +import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import androidx.compose.ui.viewinterop.AndroidView import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooToolbar import com.mashup.twotoo.presenter.mypage.model.GuideUrlItem @@ -24,15 +29,15 @@ fun GuideRoute( ) { val url = GuideUrlItem.findUrlBy(route) val title = GuideUrlItem.findTitleBy(route) - Column { + Box(modifier = Modifier.fillMaxSize().background(color = Color.White)) { TwoTooToolbar.BackToolbar( - modifier = Modifier.fillMaxWidth(), + modifier = Modifier.fillMaxWidth().align(Alignment.TopCenter), onClickBackIcon = onClickBackButton, onClickActionButton = {}, actionIcons = null, ) GuideWebView( - modifier = modifier.fillMaxSize().navigationBarsPadding(), + modifier = modifier.fillMaxSize().padding(top = 54.dp).navigationBarsPadding(), url = url, ) } From 9e9f48dae24e724620ffa82e6fb754eaa3ab63d2 Mon Sep 17 00:00:00 2001 From: boris-xyz <62296097+014967@users.noreply.github.com> Date: Sat, 10 Feb 2024 20:47:31 +0900 Subject: [PATCH 5/5] [feat] remove unused toolbar --- .../designsystem/component/toolbar/Toolbar.kt | 57 ---------- .../component/toolbar/TwoTooBackToolbar.kt | 106 ------------------ .../component/toolbar/TwoTooMainToolbar.kt | 80 ------------- 3 files changed, 243 deletions(-) delete mode 100644 presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/Toolbar.kt delete mode 100644 presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooBackToolbar.kt delete mode 100644 presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooMainToolbar.kt diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/Toolbar.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/Toolbar.kt deleted file mode 100644 index b9e258cb..00000000 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/Toolbar.kt +++ /dev/null @@ -1,57 +0,0 @@ -package com.mashup.twotoo.presenter.designsystem.component.toolbar - -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.RowScope -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.Text -import androidx.compose.material3.TopAppBar -import androidx.compose.material3.TopAppBarDefaults -import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.style.TextAlign -import com.mashup.twotoo.presenter.R -import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme -import com.mashup.twotoo.presenter.designsystem.theme.TwotooPink - -@OptIn(ExperimentalMaterial3Api::class) -@Composable -fun Toolbar( - modifier: Modifier = Modifier, - hasTitle: Boolean = false, - actions: @Composable (RowScope.() -> Unit), - navigationIcon: @Composable () -> Unit = {}, -) { - TopAppBar( - modifier = modifier, - title = { - if (hasTitle) { - Text( - text = stringResource(R.string.app_name), - color = TwotooPink, - style = TwoTooTheme.typography.headLineNormal28, - textAlign = TextAlign.Center, - ) - } else { - Box( - modifier = Modifier.fillMaxSize(), - contentAlignment = Alignment.Center - ) { - Text( - text = stringResource(R.string.app_name), - color = TwotooPink, - style = TwoTooTheme.typography.headLineNormal28, - ) - } - } - }, - navigationIcon = navigationIcon, - colors = TopAppBarDefaults.topAppBarColors( - containerColor = Color.Transparent, - ), - actions = actions, - ) -} diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooBackToolbar.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooBackToolbar.kt deleted file mode 100644 index 3e29f23f..00000000 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooBackToolbar.kt +++ /dev/null @@ -1,106 +0,0 @@ -package com.mashup.twotoo.presenter.designsystem.component.toolbar - -import androidx.annotation.DrawableRes -import androidx.compose.foundation.layout.* -import androidx.compose.material3.* -import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp -import com.mashup.twotoo.presenter.R -import com.mashup.twotoo.presenter.designsystem.theme.* - -@OptIn(ExperimentalMaterial3Api::class) -@Composable -fun TwoTooBackToolbar( - onClickBackIcon: () -> Unit, - modifier: Modifier = Modifier, - title: String = "", - titleModifier: Modifier = Modifier, - @DrawableRes backIconId: Int = R.drawable.ic_back, - color: Color = Color.Transparent, - contentColor: Color? = null, - actionIconButton: @Composable () -> Unit = {}, -) { - TopAppBar( - title = { - Box( - modifier = Modifier.fillMaxSize(), - contentAlignment = Alignment.Center, - ) { - Text( - text = title, - modifier = titleModifier, - color = contentColor ?: TwoTooTheme.color.mainBrown, - style = TwoTooTheme.typography.headLineNormal24, - textAlign = TextAlign.Center, - ) - } - }, - navigationIcon = { - Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.CenterStart) { - IconButton(onClick = { - onClickBackIcon() - }) { - Icon( - painter = painterResource(id = backIconId), - contentDescription = null, - tint = contentColor ?: LocalContentColor.current, - ) - } - } - }, - actions = { - Row( - Modifier.fillMaxHeight(), - verticalAlignment = Alignment.CenterVertically, - ) { - actionIconButton() - } - }, - modifier = modifier.then(Modifier.height(56.dp)), - colors = TopAppBarDefaults.topAppBarColors( - containerColor = color, - ), - ) -} - -@Composable -@Preview -private fun BackToolbarWithNavTitleAndActionPreview() { - val moreIconButton: @Composable () -> Unit = - { - IconButton(onClick = {}) { - Icon( - painter = painterResource(id = R.drawable.ic_more), - contentDescription = null, - ) - } - } - TwoTooBackToolbar(title = "title", onClickBackIcon = {}, actionIconButton = moreIconButton) -} - -@Composable -@Preview -private fun BackToolbarWithNavAndTitlePreview() { - val moreIconButton: @Composable () -> Unit = - { - IconButton(onClick = {}) { - Icon( - painter = painterResource(id = R.drawable.ic_more), - contentDescription = null, - ) - } - } - TwoTooBackToolbar(onClickBackIcon = {}, actionIconButton = moreIconButton) -} - -@Composable -@Preview -private fun TwoTooBackToolbar() { - TwoTooBackToolbar(onClickBackIcon = {}, title = "투투 설명서") -} diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooMainToolbar.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooMainToolbar.kt deleted file mode 100644 index 17fce7b5..00000000 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooMainToolbar.kt +++ /dev/null @@ -1,80 +0,0 @@ -package com.mashup.twotoo.presenter.designsystem.component.toolbar - -import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.* -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material3.* -import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp -import com.mashup.twotoo.presenter.R -import com.mashup.twotoo.presenter.designsystem.theme.* - -@Composable -fun TwoTooMainToolbar( - onClickHelpIcon: () -> Unit, - modifier: Modifier = Modifier, - text: String = stringResource(id = R.string.app_name), -) { - Row( - modifier = modifier.fillMaxWidth().padding(top = 22.dp).padding(horizontal = 24.dp).height(56.dp), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = text, - color = TwotooPink, - style = TwoTooTheme.typography.headLineNormal28, - ) - - Icon( - modifier = Modifier.clip(shape = CircleShape).clickable { - onClickHelpIcon() - }, - painter = painterResource(id = R.drawable.help), - contentDescription = null, - tint = Color.Unspecified, - ) - } -} - -@OptIn(ExperimentalMaterial3Api::class) -@Composable -fun TwoTooMainToolbar(title: String = stringResource(id = R.string.app_name)) { - TopAppBar( - title = { - Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.CenterStart) { - Text( - text = title, - color = TwotooPink, - style = TwoTooTheme.typography.headLineNormal28, - textAlign = TextAlign.Center, - modifier = Modifier.offset(x = (-16).dp).padding(horizontal = 24.dp), - ) - } - }, - modifier = Modifier.height(56.dp), - colors = TopAppBarDefaults.topAppBarColors( - containerColor = Color.Transparent, - ), - ) -} - -@Composable -@Preview -private fun MainToolbarWithNavAndActionsPreview() { - TwoTooMainToolbar(text = "공주", onClickHelpIcon = {}) -} - -@Composable -@Preview -private fun MainToolbarPreview() { - TwoTooMainToolbar() -}