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.

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

[디자인] 디자인 최신화 #320

Merged
merged 11 commits into from
Jun 3, 2024
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
package com.droidknights.app.core.designsystem.component

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ProvideTextStyle
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
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.droidknights.app.core.designsystem.theme.DarkGray
import com.droidknights.app.core.designsystem.theme.KnightsTheme
import com.droidknights.app.core.designsystem.theme.LightGray

@Composable
fun IconTextChip(
text: String,
containerColor: Color,
labelColor: Color,
iconPainter: Painter,
iconTint: Color,
modifier: Modifier = Modifier,
) {
Surface(
modifier = modifier,
shape = RoundedCornerShape(10.dp),
color = containerColor,
) {
Row(
modifier = modifier.padding(start = 4.dp, end = 10.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Start
) {
Icon(
modifier = modifier
.width(20.dp)
.height(20.dp),
painter = iconPainter,
contentDescription = null,
tint = iconTint
)
ProvideTextStyle(KnightsTheme.typography.labelSmallM) {
Text(text = text, color = labelColor, modifier = Modifier.padding(top = 2.dp, bottom = 2.dp))
}
}
}
}

@Preview
@Composable
private fun IconTextChipPreview() {
MaterialTheme {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

preview에서는 theme를 적용하지 않고, @Preveiw 어노테이션을 활용하여 처리할수도 있습니다.
개인적으론 preview용 theme를 따로 만들어 사용하기도 합니다.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

추후 컴포즈 개발에도 참고해야겠네요! 코멘트 감사드립니다~

IconTextChip(
"북마크",
containerColor = DarkGray,
labelColor = LightGray,
iconPainter = painterResource(id = androidx.appcompat.R.drawable.abc_btn_radio_material),
iconTint = Color.Green
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ fun TextChip(
shape = RoundedCornerShape(10.dp),
color = containerColor,
) {
ProvideTextStyle(KnightsTheme.typography.labelMediumR) {
ProvideTextStyle(KnightsTheme.typography.labelSmallM) {
Text(text = text, color = labelColor, modifier = Modifier.padding(TextChipPadding))
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ val Black = Color(0xFF000000)
val Graphite = Color(0xFF292929)

val Purple01 = Color(0xFFB469FF)
val Purple01A30 = Color(0x4DB469FF)
val Mint01 = Color(0xFF7BFAF2)

val Neon01 = Color(0xFF49F300)
Expand All @@ -32,7 +33,7 @@ val Green04 = Color(0xFF386524)
val Yellow01 = Color(0xFFF2E800)
val Yellow02 = Color(0xFFE8ED00)
val Yellow03 = Color(0xFFBEED00)
val Yellow03A40 = Color(0x66BEED00)
val Yellow03A40 = Color(0x66A1ED00)
val Yellow04 = Color(0xFF465703)
val Yellow05 = Color(0xFF222B00)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ private val DarkColorScheme = darkColorScheme(
onErrorContainer = Red01,
surface = Graphite,
onSurface = White,
surfaceDim = Black,
inverseSurface = Neon05,
inverseOnSurface = Black,
outline = DarkGray,
Expand Down Expand Up @@ -63,6 +64,7 @@ private val LightColorScheme = lightColorScheme(
onErrorContainer = Red06,
surface = PaperGray,
onSurface = DuskGray,
surfaceDim = PaleGray,
inverseSurface = Yellow05,
inverseOnSurface = White,
outline = LightGray,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ private fun BookmarkTopAppBar(
modifier = Modifier
.align(Alignment.CenterEnd)
.clickable(onClick = onClickEditButton)
.padding(8.dp),
.padding(6.dp),
text = if (isEditMode) {
stringResource(id = R.string.edit_button_confirm_label)
} else {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import com.droidknights.app.core.designsystem.component.KnightsCard
import com.droidknights.app.core.designsystem.component.KnightsTopAppBar
import com.droidknights.app.core.designsystem.component.NetworkImage
import com.droidknights.app.core.designsystem.component.TextChip
import com.droidknights.app.core.designsystem.component.TopAppBarNavigationType
import com.droidknights.app.core.designsystem.res.rememberPainterResource
import com.droidknights.app.core.designsystem.theme.Black
import com.droidknights.app.core.designsystem.theme.KnightsTheme
Expand Down Expand Up @@ -106,6 +107,7 @@ private fun ContributorTopAppBar(
titleRes = R.string.contributor_top_title,
navigationIconContentDescription = null,
modifier = Modifier.statusBarsPadding(),
navigationType = TopAppBarNavigationType.Close,
onNavigationClick = onBackClick,
containerColor = containerColor,
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ internal fun ContributorCard(

Text(
text = stringResource(id = R.string.contributor_card_description),
style = KnightsTheme.typography.titleSmallR,
style = KnightsTheme.typography.titleSmallM140,
color = Green03,
modifier = Modifier.padding(top = 6.dp),
modifier = Modifier.padding(top = 6.dp, start = 3.dp),
)
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ internal fun SessionCard(
private fun SessionCardCaption() {
Box(
modifier = Modifier
.background(Graphite, RoundedCornerShape(32.dp))
.background(Graphite, RoundedCornerShape(10.dp))
.padding(horizontal = 12.dp, vertical = 2.dp)
) {
Text(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ private fun SponsorCardContents(uiState: SponsorsUiState.Sponsors) {
uiState.goldCount,
uiState.silverCount
),
style = KnightsTheme.typography.titleSmallR,
style = KnightsTheme.typography.titleSmallM140,
color = DuskGray,
modifier = Modifier.padding(top = 8.dp),
)
Expand Down Expand Up @@ -117,7 +117,7 @@ private fun SponsorGroupRow(

LazyRow(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(space = 22.dp),
horizontalArrangement = Arrangement.spacedBy(space = 24.dp),
userScrollEnabled = false
) {
items(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,10 @@ import com.droidknights.app.core.designsystem.component.NetworkImage
import com.droidknights.app.core.designsystem.component.TextChip
import com.droidknights.app.core.designsystem.component.TopAppBarNavigationType
import com.droidknights.app.core.designsystem.theme.DarkGray
import com.droidknights.app.core.designsystem.theme.Gray
import com.droidknights.app.core.designsystem.theme.KnightsTheme
import com.droidknights.app.core.designsystem.theme.LightGray
import com.droidknights.app.core.designsystem.theme.Purple01
import com.droidknights.app.core.model.Room
import com.droidknights.app.core.model.Session
import com.droidknights.app.core.model.Speaker
Expand Down Expand Up @@ -154,7 +156,7 @@ private fun SessionDetailContent(session: Session) {
.padding(horizontal = 16.dp)
) {
SessionDetailTitle(title = session.title, modifier = Modifier.padding(top = 8.dp))
Spacer(modifier = Modifier.height(8.dp))
Spacer(modifier = Modifier.height(12.dp))
SessionChips(session = session)

if (session.content.isNotEmpty()) {
Expand Down Expand Up @@ -203,7 +205,7 @@ private fun SessionDetailTitle(
modifier: Modifier = Modifier,
) {
Text(
modifier = modifier.padding(end = 64.dp),
modifier = modifier.padding(end = 58.dp),
text = title,
style = KnightsTheme.typography.headlineMediumB,
color = MaterialTheme.colorScheme.onSecondaryContainer,
Expand Down Expand Up @@ -249,11 +251,19 @@ private fun SessionDetailSpeaker(

@Composable
private fun SessionOverview(content: String) {
Text(
text = content,
style = KnightsTheme.typography.titleSmallR140,
color = MaterialTheme.colorScheme.onSecondaryContainer
)
Column {
Text(
text = stringResource(id = R.string.session_overview_title),
style = KnightsTheme.typography.titleSmallB,
color = MaterialTheme.colorScheme.onSecondaryContainer
)
Spacer(Modifier.height(4.dp))
Text(
text = content,
style = KnightsTheme.typography.titleSmallR140,
color = MaterialTheme.colorScheme.onSecondaryContainer
)
}
}

@Composable
Expand All @@ -272,7 +282,8 @@ private fun BookmarkToggleButton(
} else {
painterResource(id = R.drawable.ic_session_bookmark)
},
contentDescription = null
contentDescription = null,
tint = if (bookmarked) Purple01 else Gray
)
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,24 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
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.systemBarsPadding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
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 androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
Expand Down Expand Up @@ -78,7 +84,7 @@ private fun SessionContent(
LazyColumn(
modifier = modifier,
state = sessionState.listState,
contentPadding = PaddingValues(horizontal = 8.dp, vertical = 12.dp),
contentPadding = PaddingValues(horizontal = 8.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
sessionState.groups.forEachIndexed { index, group ->
Expand All @@ -91,19 +97,21 @@ private fun SessionContent(
room = group.room,
items = group.sessions,
topPadding = topPadding,
isLastGroup = index == sessionState.groups.size - 1,
onItemClick = onSessionClick,
)
}
}
}

private val SessionTopSpace = 4.dp
private val SessionGroupSpace = 16.dp
private val SessionTopSpace = 16.dp
private val SessionGroupSpace = 100.dp

private fun LazyListScope.sessionItems(
room: Room,
items: PersistentList<Session>,
topPadding: Dp,
isLastGroup: Boolean,
onItemClick: (Session) -> Unit,
) {
itemsIndexed(items) { index, item ->
Expand All @@ -114,6 +122,9 @@ private fun LazyListScope.sessionItems(
topPadding = topPadding,
onItemClick = onItemClick
)
if (isLastGroup && index == items.size - 1) {
DroidKnightsFooter()
}
}
}

Expand Down Expand Up @@ -152,3 +163,17 @@ private fun RoomTitle(
Spacer(modifier = Modifier.height(32.dp))
}
}

@Composable
private fun DroidKnightsFooter() {
Text(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(top = 56.dp, bottom = 80.dp),
text = stringResource(id = R.string.footer_text),
style = KnightsTheme.typography.labelMediumR,
color = Color.LightGray,
textAlign = TextAlign.Center
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,15 @@ 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
import com.droidknights.app.core.designsystem.component.IconTextChip
import com.droidknights.app.core.designsystem.component.KnightsCard
import com.droidknights.app.core.designsystem.component.NetworkImage
import com.droidknights.app.core.designsystem.component.TextChip
import com.droidknights.app.core.designsystem.theme.DarkGray
import com.droidknights.app.core.designsystem.theme.KnightsTheme
import com.droidknights.app.core.designsystem.theme.LightGray
import com.droidknights.app.core.designsystem.theme.Purple01
import com.droidknights.app.core.designsystem.theme.Purple01A30
import com.droidknights.app.core.model.Room
import com.droidknights.app.core.model.Session
import com.droidknights.app.core.model.Speaker
Expand Down Expand Up @@ -131,6 +134,16 @@ private fun SessionTrackInfo(
TrackChip(room = session.room)
Spacer(modifier = Modifier.width(8.dp))
TimeChip(dateTime = session.startTime)
if (session.isBookmarked) {
Spacer(modifier = Modifier.width(8.dp))
IconTextChip(
text = stringResource(id = R.string.bookmark),
containerColor = Purple01A30,
labelColor = Purple01,
iconPainter = painterResource(id = R.drawable.ic_session_bookmark_filled),
iconTint = Purple01
)
}
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ private fun TabIndicator(height: Dp, modifier: Modifier) {
modifier = modifier
.height(height * 2)
.offset { IntOffset(0, height.roundToPx()) }
.background(brush, RoundedCornerShape(8.dp))
.background(brush, RoundedCornerShape(100.dp, 100.dp, 0.dp, 0.dp))
)
}

Expand Down
4 changes: 4 additions & 0 deletions feature/session/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,8 @@

<string name="session_detail_bookmark_popup_message">북마크에 저장했습니다. 시간표를 만들어보세요!</string>
<string name="session_detail_unbookmark_popup_message">북마크가 해제되었습니다.</string>

<string name="bookmark">북마크</string>
<string name="session_overview_title">세션 소개</string>
<string name="footer_text">Droid Knights 2024</string>
</resources>
Loading
Loading