Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat #93] :: 로그인 퍼블리싱 #94

Merged
merged 6 commits into from
Jan 2, 2025
Merged

[feat #93] :: 로그인 퍼블리싱 #94

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c2b25f9
refactor :: padding 추가
parkuiery Jan 2, 2025
887f649
refactor :: 주석 제거 및 디자인 수정
parkuiery Jan 2, 2025
3230151
feat :: SignInScreen 구현
parkuiery Jan 2, 2025
76463f0
refactor :: ktlint
parkuiery Jan 2, 2025
ef8d51a
refactor :: ktlint
parkuiery Jan 2, 2025
98ad627
refactor :: ktlint
parkuiery Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions core/common/src/commonMain/kotlin/team/aliens/dms/kmp/core/common/ui/PaddingDefaults.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ fun Modifier.horizontalPadding(
value: Dp = PaddingDefaults.ExtraLarge,
): Modifier = padding(horizontal = value)

fun Modifier.startPadding(value: Dp): Modifier = padding(start = value)

fun Modifier.endPadding(value: Dp): Modifier = padding(end = value)

fun Modifier.topPadding(
value: Dp = PaddingDefaults.Medium,
): Modifier = padding(top = value)
Expand Down
217 changes: 29 additions & 188 deletions ...gn-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,16 @@ package team.aliens.dms.kmp.core.designsystem.button
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
Expand Down Expand Up @@ -124,16 +122,16 @@ private fun ButtonColor.containedColors() = when (this) {
private fun ButtonColor.outlinedColors() = when (this) {
ButtonColor.Primary -> ButtonState(
enabled = ButtonTheme(
textColor = DmsTheme.colors.onSecondaryContainer,
borderColor = DmsTheme.colors.onSecondaryContainer,
textColor = DmsTheme.colors.secondary,
borderColor = DmsTheme.colors.secondary,
),
pressed = ButtonTheme(
textColor = DmsTheme.colors.surfaceTint,
borderColor = DmsTheme.colors.errorContainer,
textColor = DmsTheme.colors.onSecondaryContainer,
borderColor = DmsTheme.colors.onSecondaryContainer,
),
disabled = ButtonTheme(
textColor = DmsTheme.colors.surfaceTint,
borderColor = DmsTheme.colors.onError,
textColor = DmsTheme.colors.primaryContainer,
borderColor = DmsTheme.colors.primaryContainer,
),
)

Expand Down Expand Up @@ -318,8 +316,11 @@ private fun ButtonColor.roundedColors() = when (this) {
@Composable
private fun BasicButton(
modifier: Modifier = Modifier,
backgroundColor: Color,
enabled: Boolean,
shape: Shape,
borderColor: Color,
buttonType: ButtonType,
onClick: () -> Unit,
onPressed: (pressed: Boolean) -> Unit,
keyboardInteractionEnabled: Boolean,
Expand All @@ -342,162 +343,30 @@ private fun BasicButton(
} else {
shape to DEFAULT_PRESS_DEPTH
}

Box(
modifier = modifier
.clip(shape = shapeByKeyboardShow)
.background(backgroundColor)
.then(
if (buttonType == ButtonType.Outlined) Modifier.border(
1.dp,
color = borderColor,
shapeByKeyboardShow,
) else Modifier,
)
.clickable(
pressDepth = pressDepth,
enabled = enabled,
onPressed = onPressed,
onClick = onClick,
),
contentAlignment = Alignment.Center,
) {
content()
}
}

/*@Composable
fun DmsButton(
modifier: Modifier = Modifier,
text: String,
enabled: Boolean = true,
onClick: () -> Unit,
) {
val backgroundColor by animateColorAsState(
targetValue = if (enabled) {
DmsTheme.colors.onSecondary
} else {
DmsTheme.colors.onTertiaryContainer
},
)

BasicButton(
modifier = modifier,
enabled = enabled,
backgroundColor = backgroundColor,
onClick = onClick,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = 24.dp,
vertical = 16.dp,
),
horizontalArrangement = Arrangement.Center,
) {
DmsText(
text = text,
style = DmsTypography.SubtitleSemiBold,
color = DmsTheme.colors.surfaceContainerHighest,
)
}
}
}*/

/*@Composable
fun DmsSmallButton(
modifier: Modifier = Modifier,
text: String,
enabled: Boolean = true,
onClick: () -> Unit,
) {
val backgroundColor by animateColorAsState(
targetValue = if (enabled) {
DmsTheme.colors.onSecondary
} else {
DmsTheme.colors.error
},
)
val contentColor by animateColorAsState(
targetValue = if (enabled) {
DmsTheme.colors.surfaceContainerHighest
} else {
DmsTheme.colors.surfaceContainerHigh
},
)

BasicButton(
modifier = modifier,
enabled = enabled,
backgroundColor = backgroundColor,
onClick = onClick,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = 14.dp,
vertical = 8.dp,
),
horizontalArrangement = Arrangement.Center,
) {
DmsText(
text = text,
style = DmsTypography.Body1Medium,
color = contentColor,
)
}
}
}*/

@Composable
fun DmsContainedButton(
modifier: Modifier = Modifier,
text: String,
enabled: Boolean = true,
shape: Shape = RoundedCornerShape(4.dp),
buttonColor: ButtonColor,
contentPadding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 14.dp),
keyboardInteractionEnabled: Boolean = true,
onClick: () -> Unit,
) {
var pressed by remember { mutableStateOf(false) }

val buttonColors = buttonColor.containedColors()
val backgroundColor by animateColorAsState(
targetValue = if (!enabled) {
buttonColors.disabled.backgroundColor!!
} else if (pressed) {
buttonColors.pressed.backgroundColor!!
} else {
buttonColors.enabled.backgroundColor!!
},
)
val contentColor by animateColorAsState(
targetValue = if (!enabled) {
buttonColors.disabled.textColor
} else if (pressed) {
buttonColors.pressed.textColor
} else {
buttonColors.pressed.textColor
},
)

BasicButton(
modifier = modifier,
enabled = enabled,
shape = shape,
onClick = onClick,
onPressed = { pressed = it },
keyboardInteractionEnabled = keyboardInteractionEnabled,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.background(backgroundColor)
.padding(contentPadding),
horizontalArrangement = Arrangement.Center,
) {
DmsText(
text = text,
style = DmsTypography.Button0,
color = contentColor,
)
}
}
}

@Composable
fun DmsButton(
modifier: Modifier = Modifier,
Expand Down Expand Up @@ -552,49 +421,21 @@ fun DmsButton(

BasicButton(
modifier = modifier,
backgroundColor = backgroundColor,
enabled = enabled,
shape = buttonShape,
borderColor = borderColor,
buttonType = buttonType,
onClick = onClick,
onPressed = { pressed = it },
keyboardInteractionEnabled = keyboardInteractionEnabled,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.background(backgroundColor)
.border(
buttonType = buttonType,
width = 1.dp,
shape = buttonShape,
color = borderColor,
)
.padding(contentPadding),
horizontalArrangement = Arrangement.Center,
) {
DmsText(
text = text,
style = if (buttonType == ButtonType.Underline) DmsTypography.Button3 else DmsTypography.Button0,
color = contentColor,
textDecoration = if (buttonType == ButtonType.Underline) TextDecoration.Underline else TextDecoration.None,
)
}
}
}

@Composable
private fun Modifier.border(
buttonType: ButtonType,
width: Dp,
shape: Shape,
color: Color,
): Modifier {
return if (buttonType == ButtonType.Outlined) {
Modifier.border(
width = width,
shape = shape,
color = color,
DmsText(
modifier = Modifier.padding(contentPadding),
text = text,
style = if (buttonType == ButtonType.Underline) DmsTypography.Button3 else DmsTypography.Button0,
color = contentColor,
textDecoration = if (buttonType == ButtonType.Underline) TextDecoration.Underline else TextDecoration.None,
)
} else {
Modifier
}
}
Loading
Loading