From c1964589fa5c053a02778e1ab15f25898c8bf652 Mon Sep 17 00:00:00 2001 From: Clara Dautermann Date: Tue, 13 May 2025 21:29:29 +0200 Subject: [PATCH] UI for Skills List --- DBTApp/.idea/deploymentTargetSelector.xml | 3 ++ .../main/java/de/cdaut/dbtapp/MainActivity.kt | 3 +- .../de/cdaut/dbtapp/components/SkillsList.kt | 42 ++++++++++++++++--- .../main/java/de/cdaut/dbtapp/model/Skill.kt | 4 ++ .../de/cdaut/dbtapp/model/SkillCategory.kt | 14 +++++++ 5 files changed, 60 insertions(+), 6 deletions(-) create mode 100644 DBTApp/app/src/main/java/de/cdaut/dbtapp/model/SkillCategory.kt diff --git a/DBTApp/.idea/deploymentTargetSelector.xml b/DBTApp/.idea/deploymentTargetSelector.xml index 2ea36bc..2a7a811 100644 --- a/DBTApp/.idea/deploymentTargetSelector.xml +++ b/DBTApp/.idea/deploymentTargetSelector.xml @@ -17,6 +17,9 @@ + + \ No newline at end of file diff --git a/DBTApp/app/src/main/java/de/cdaut/dbtapp/MainActivity.kt b/DBTApp/app/src/main/java/de/cdaut/dbtapp/MainActivity.kt index 227b740..8e03061 100644 --- a/DBTApp/app/src/main/java/de/cdaut/dbtapp/MainActivity.kt +++ b/DBTApp/app/src/main/java/de/cdaut/dbtapp/MainActivity.kt @@ -30,6 +30,7 @@ import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController import com.google.android.material.floatingactionbutton.FloatingActionButton import de.cdaut.dbtapp.components.BottomNavigationBar +import de.cdaut.dbtapp.components.SkillsScreen import de.cdaut.dbtapp.navigation.Screens class MainActivity : ComponentActivity() { @@ -60,7 +61,7 @@ private fun MainContent() { Text("Tracking") } composable(Screens.Skillslist.route) { - Text("Skillslist") + SkillsScreen() } composable(Screens.Home.route) { Text("Home") diff --git a/DBTApp/app/src/main/java/de/cdaut/dbtapp/components/SkillsList.kt b/DBTApp/app/src/main/java/de/cdaut/dbtapp/components/SkillsList.kt index 7d51c4e..3f93d07 100644 --- a/DBTApp/app/src/main/java/de/cdaut/dbtapp/components/SkillsList.kt +++ b/DBTApp/app/src/main/java/de/cdaut/dbtapp/components/SkillsList.kt @@ -1,7 +1,10 @@ package de.cdaut.dbtapp.components import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.clickable +import androidx.compose.foundation.gestures.ScrollableState +import androidx.compose.foundation.gestures.scrollable import androidx.compose.foundation.interaction.Interaction import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -13,11 +16,16 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width +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.icons.Icons import androidx.compose.material.icons.filled.Star import androidx.compose.material.icons.outlined.Star import androidx.compose.material.icons.outlined.StarOutline import androidx.compose.material3.Button +import androidx.compose.material3.Card import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -27,6 +35,7 @@ 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 import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview @@ -34,19 +43,40 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.em import de.cdaut.dbtapp.R import de.cdaut.dbtapp.model.Skill +import de.cdaut.dbtapp.model.SkillCategory + +@Preview +@Composable +fun SkillsScreen() { + Column( + Modifier.verticalScroll(rememberScrollState()) + ) { + SkillCategory.entries.forEach { skillCategory -> + SkillsCategoryCard(skillCategory.skills, skillCategory.title) + Spacer(Modifier.height(5.dp)) + } + } +} @Preview @Composable private fun SkillsCategoryCardPrev() { - SkillsCategoryCard(Skill.mockSkills()) + SkillsCategoryCard(Skill.mockSkills(), "Skill") } @Composable -fun SkillsCategoryCard(skills: List) { - Column { +fun SkillsCategoryCard(skills: List, title: String) { + Card( + Modifier + .fillMaxWidth() + .padding(10.dp) + ) { + TitleText( + modifier = Modifier.padding(10.dp), + content = title + ) skills.forEach { skill -> SingleSkillCard(skill.title, skill.description) - Spacer(modifier = Modifier.height(2.dp)) } } } @@ -69,7 +99,9 @@ private fun SingleSkillCard(title: String, description: String) { modifier = Modifier .fillMaxWidth() .height(IntrinsicSize.Min) - .background(Color.LightGray) + .background(Color.Transparent) + .padding(10.dp) + .background(Color.White, shape = RoundedCornerShape(5.dp)) .padding(10.dp), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically diff --git a/DBTApp/app/src/main/java/de/cdaut/dbtapp/model/Skill.kt b/DBTApp/app/src/main/java/de/cdaut/dbtapp/model/Skill.kt index 7fd2416..612c86a 100644 --- a/DBTApp/app/src/main/java/de/cdaut/dbtapp/model/Skill.kt +++ b/DBTApp/app/src/main/java/de/cdaut/dbtapp/model/Skill.kt @@ -13,6 +13,10 @@ class Skill(val title: String, val description: String) { Skill( title = "5-4-3-2-1", description = "Hier kurz beschreiben wie die Übung funktioniert. Ggf. mehrere Zeilen aber nicht super lang" + ), + Skill( + title = "UwU UwU awawawa", + description = "Just arf a little like the good fopsgirl you are :3" ) ) } diff --git a/DBTApp/app/src/main/java/de/cdaut/dbtapp/model/SkillCategory.kt b/DBTApp/app/src/main/java/de/cdaut/dbtapp/model/SkillCategory.kt new file mode 100644 index 0000000..c09483a --- /dev/null +++ b/DBTApp/app/src/main/java/de/cdaut/dbtapp/model/SkillCategory.kt @@ -0,0 +1,14 @@ +package de.cdaut.dbtapp.model + +import androidx.compose.foundation.layout.Arrangement + +enum class SkillCategory(val title: String, val skills: List = Skill.mockSkills()) { + Mindfulness("Achtsamkeitsübungen"), + EmotionalRegulation("Emotionsregulation"), + MiddleWay("Mittelweg"), + StressTolerance("Stresstoleranz"), + SelfWorth("Selbstwert"), + Addiction("Sucht"), + Interpersonal("Zwischenmenschlich"); +} +