Skip to content

Commit

Permalink
Merge pull request #33 from Team-Walkie/feat/challenge_item_color
Browse files Browse the repository at this point in the history
챌린지 화면 변경된 스팩에 따라 수정
  • Loading branch information
yonghanJu authored Aug 25, 2023
2 parents 865385c + 8d8f4d4 commit f8fb931
Show file tree
Hide file tree
Showing 7 changed files with 142 additions and 68 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ data class ChallengePreview(
val title: String,
val badgeImageUrl: String,
val progress: Float?,
val type: ChallengeType
) {
// TODO: Delete
companion object {
Expand Down Expand Up @@ -41,6 +42,7 @@ data class ChallengePreview(
title = DUMMY_NAME_LIST.shuffled().first(),
badgeImageUrl = "https://picsum.photos/250/250",
progress = DUMMY_PROGRESS_LIST.shuffled().first(),
type = ChallengeType.values().toList().shuffled().first(),
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.progressSemantics
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Divider
import androidx.compose.material.ProgressIndicatorDefaults
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.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.platform.LocalContext
Expand All @@ -37,21 +37,24 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.whyranoid.domain.model.challenge.Challenge
import com.whyranoid.presentation.R
import com.whyranoid.presentation.theme.ChallengeColor.getColor

@OptIn(ExperimentalTextApi::class)
@Composable
fun ChallengeGoalContent(
challenge: Challenge
) {

val challengeColor = challenge.challengeType.getColor()

Column(
modifier = Modifier
.fillMaxWidth()
.clip(shape = RoundedCornerShape(15.dp))
.background(Color(0xFFF7F7F7)),
.background(challengeColor.backgroundColor),
) {

val progressBarColor = Color(0xFFFFB763)
val progressBarColor = challengeColor.progressBarColor

val progress = requireNotNull(challenge.process) / 100f

Expand Down Expand Up @@ -85,15 +88,14 @@ fun ChallengeGoalContent(

val isLtr = layoutDirection == LayoutDirection.Ltr
val barStart = (if (isLtr) 0f else 1f - progress) * width
val barEnd = (if (isLtr) progress else 1f - 0f) * width
val barEnd = (if (isLtr) progress else 1f) * width

// draw Background
drawLine(
progressBarColor
.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity),
Color.White,
Offset(0f, yOffset),
Offset(1f * width, yOffset),
8.dp.toPx(),
4.dp.toPx(),
cap = StrokeCap.Round,
)

Expand All @@ -102,7 +104,7 @@ fun ChallengeGoalContent(
progressBarColor,
Offset(barStart, yOffset),
Offset(barEnd, yOffset),
8.dp.toPx(),
4.dp.toPx(),
cap = StrokeCap.Round,
)

Expand All @@ -113,8 +115,9 @@ fun ChallengeGoalContent(
dstSize = bitMapIconSize,
dstOffset = IntOffset(
(barEnd - bitMapIconSize.width / 2).toInt(),
(yOffset - bitMapIconSize.height / 2).toInt()
)
- bitMapIconSize.height / 2,
),
colorFilter = ColorFilter.tint(progressBarColor)
)

val progressText = "${(progress * 100).toInt()}%"
Expand All @@ -129,14 +132,12 @@ fun ChallengeGoalContent(
drawText(
textMeasurer = textMeasure, text = progressText,
style = TextStyle(
fontSize = 15.sp,
fontSize = 14.sp,
color = challengeColor.progressBarColor
),
topLeft = Offset(
barEnd
- progressTextMeasured.size.width / 2,
yOffset
- bitMapIconSize.height / 2
- progressTextMeasured.size.height
width - progressTextMeasured.size.width,
yOffset + progressTextMeasured.size.height / 2

),
softWrap = false,
Expand All @@ -158,7 +159,7 @@ fun ChallengeGoalContent(
)

Divider(
color = Color(0xFFBABABA),
color = challengeColor.progressBarColor,
modifier = Modifier
.height(52.dp)
.width(1.dp)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ 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.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.whyranoid.presentation.theme.ChallengeColor
import com.whyranoid.presentation.util.bouncingClickable

// Todo: set Color System
@Composable
fun ChallengeItem(
modifier: Modifier = Modifier,
challengeColor: ChallengeColor.ChallengeColorInterface,
text: String,
onClicked: () -> Unit = {}
) {
Expand All @@ -34,7 +34,7 @@ fun ChallengeItem(
.fillMaxWidth()
.height(90.dp)
.clip(shape = RoundedCornerShape(20.dp))
.background(color = Color(0xFFECECEC)),
.background(color = challengeColor.backgroundColor),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Expand All @@ -49,7 +49,8 @@ fun ChallengeItem(
textAlign = TextAlign.Start,
text = text,
overflow = TextOverflow.Ellipsis,
maxLines = 2)
maxLines = 2
)
}
}
}
Original file line number Diff line number Diff line change
@@ -1,74 +1,81 @@
package com.whyranoid.presentation.component

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
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.shape.RoundedCornerShape
import androidx.compose.material.LinearProgressIndicator
import androidx.compose.material.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.unit.dp
import com.whyranoid.presentation.reusable.TextWithImageSpaceBetween
import com.whyranoid.presentation.theme.ChallengeColor
import com.whyranoid.presentation.util.bouncingClickable
import com.whyranoid.presentation.util.conditional

// TODO: set Color System
@Composable
fun ChallengingItem(
text: String,
progress: Float,
imageUrl: String,
challengeColor: ChallengeColor.ChallengeColorInterface,
onClicked: () -> Unit = {}
) {
Column(
Box(
modifier = Modifier
.bouncingClickable {
onClicked()
}
.fillMaxWidth()
.height(105.dp)
.clip(shape = RoundedCornerShape(20.dp))
.background(color = Color(0xFFECECEC))
.conditional(progress == 1f) {
border(
3.dp,
Color(0xFFFB8947),
shape = RoundedCornerShape(20.dp)
)
},
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
.background(color = challengeColor.backgroundColor)
,
) {

TextWithImageSpaceBetween(
Box(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 26.dp, vertical = 20.dp),
text = text,
imageUrl = imageUrl,
imageSize = 50.dp,
paddingValues = PaddingValues(end = 10.dp)
)
.fillMaxSize()
.padding(start = 26.dp),
contentAlignment = Alignment.CenterStart
) {
Text(text)
}


LinearProgressIndicator(
Box(
modifier = Modifier
.fillMaxWidth()
.height(6.dp)
.padding(horizontal = 26.dp)
.clip(RoundedCornerShape(15.dp)),
progress = progress,
color = Color(0xFFFFB763),
)
.fillMaxHeight()
.height(7.dp),
contentAlignment = Alignment.BottomStart
) {


Box(
modifier = Modifier
.fillMaxWidth()
.height(7.dp)
.background(color = challengeColor.progressBackgroundColor),
contentAlignment = Alignment.BottomCenter
) {

}

Box(
modifier = Modifier
.fillMaxWidth(progress)
.height(7.dp)
.background(color = challengeColor.progressBarColor),
contentAlignment = Alignment.BottomCenter
) {

}
}

Spacer(modifier = Modifier.height(12.dp))
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
package com.whyranoid.presentation.screens.challenge

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
Expand All @@ -13,6 +15,7 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.ModalBottomSheetValue
Expand All @@ -26,6 +29,7 @@ import androidx.compose.runtime.rememberCoroutineScope
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.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
Expand Down Expand Up @@ -128,13 +132,31 @@ fun ChallengeDetailContent(

Spacer(modifier = Modifier.height(10.dp))

Text(
text = challenge.contents,
fontSize = 15.sp,
fontWeight = FontWeight(500),
)
Box(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(15.dp))
.background(
Color(0xFFF7F7F7),
),
contentAlignment = Alignment.Center
) {
Text(
modifier = Modifier.padding(
horizontal = 18.dp,
vertical = 12.dp
),
color = Color(0xFF989898),
text = challenge.contents,
fontSize = 15.sp,
fontWeight = FontWeight(500)
,
)
}

Spacer(modifier = Modifier.height(40.dp))


Spacer(modifier = Modifier.height(24.dp))

Text(
text = "도전 내용",
Expand Down
Loading

0 comments on commit f8fb931

Please sign in to comment.