Merge pull request #113 from SELab1/better_screens

Better session recap screen

.idea/misc.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">

app/src/main/java/be/ugent/sel/studeez/common/composable/FloatingActionButtonComposable.kt

@@ -2,7 +2,6 @@ package be.ugent.sel.studeez.common.composable
 
 import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.updateTransition
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.FloatingActionButton
 import androidx.compose.material.Icon

app/src/main/java/be/ugent/sel/studeez/common/composable/ImageComposable.kt

@@ -0,0 +1,39 @@
+package be.ugent.sel.studeez.common.composable
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ImageBackgroundButton(
+    paint: Painter,
+    str: String,
+    background2: Color,
+    setBackground1: (Color) -> Unit,
+    setBackground2: (Color) -> Unit
+) {
+    Image(
+        painter = paint,
+        str,
+        modifier = Modifier
+            .clickable {
+                if (background2 == Color.Transparent) {
+                    setBackground1(Color.LightGray)
+                    setBackground2(Color.Transparent)
+                } else {
+                    setBackground2(Color.Transparent)
+                }
+            }
+            .border(
+                width = 2.dp,
+                color = background2,
+                shape = RoundedCornerShape(16.dp)
+            )
+    )
+}

app/src/main/java/be/ugent/sel/studeez/screens/session_recap/SessionRecapScreen.kt

@@ -1,13 +1,24 @@
 package be.ugent.sel.studeez.screens.session_recap
 
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import be.ugent.sel.studeez.R
 import be.ugent.sel.studeez.common.composable.BasicButton
+import be.ugent.sel.studeez.common.composable.ImageBackgroundButton
 import be.ugent.sel.studeez.common.ext.basicButton
 import be.ugent.sel.studeez.data.local.models.SessionReport
 import be.ugent.sel.studeez.data.local.models.timer_functional.HoursMinutesSeconds
@@ -47,11 +58,62 @@ fun SessionRecapScreen(modifier: Modifier, sessionRecapActions: SessionRecapActi
     val sessionReport: SessionReport = sessionRecapActions.getSessionReport()
     val studyTime: Int = sessionReport.studyTime
     val hms: HoursMinutesSeconds = Time(studyTime).getAsHMS()
+    val (background1, setBackground1) = remember { mutableStateOf(Color.Transparent) }
+    val (background2, setBackground2) = remember { mutableStateOf(Color.Transparent) }
     Column(
         modifier = modifier
+            .fillMaxWidth()
+            .fillMaxHeight()
+            .padding(16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.SpaceBetween
     ) {
-        Text(text = "You studied: $hms")
+        Text(
+            text = stringResource(R.string.congrats, hms),
+            modifier = Modifier
+                .fillMaxWidth(),
+            textAlign = TextAlign.Center,
+            fontWeight = FontWeight.Light,
+            fontSize = 30.sp,
 
+            )
+
+        Column(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = stringResource(R.string.how_did_it_go),
+                modifier = Modifier.fillMaxWidth(),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Light,
+                fontSize = 30.sp
+            )
+
+            Row(
+                horizontalArrangement = Arrangement.Center,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .align(Alignment.CenterHorizontally)
+            ) {
+                ImageBackgroundButton(
+                    paint = painterResource(id = R.drawable.mood_1),
+                    str = stringResource(id = R.string.good),
+                    background2 = background2,
+                    setBackground1 = setBackground2,
+                    setBackground2 = setBackground1
+                )
+
+                ImageBackgroundButton(
+                    paint = painterResource(id = R.drawable.mood_2),
+                    str = stringResource(id = R.string.bad),
+                    background2 = background1,
+                    setBackground1 = setBackground1,
+                    setBackground2 = setBackground2
+                )
+            }
+        }
+
+        Column {
             BasicButton(
                 R.string.save, Modifier.basicButton()
             ) {
@@ -65,3 +127,19 @@ fun SessionRecapScreen(modifier: Modifier, sessionRecapActions: SessionRecapActi
             }
         }
     }
+}
+
+@Preview
+@Composable
+fun SessionRecapScreenPreview() {
+    SessionRecapScreen(
+        modifier = Modifier,
+        sessionRecapActions = SessionRecapActions(
+            { SessionReport(
+                studyTime = 100,
+            ) },
+            {},
+            {},
+        )
+    )
+}

app/src/main/res/drawable/mood_1.xml

@@ -0,0 +1,5 @@
+<vector android:height="75dp" android:tint="#999999"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="75dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8zM15.5,11c0.83,0 1.5,-0.67 1.5,-1.5S16.33,8 15.5,8 14,8.67 14,9.5s0.67,1.5 1.5,1.5zM8.5,11c0.83,0 1.5,-0.67 1.5,-1.5S9.33,8 8.5,8 7,8.67 7,9.5 7.67,11 8.5,11zM12,17.5c2.33,0 4.31,-1.46 5.11,-3.5L6.89,14c0.8,2.04 2.78,3.5 5.11,3.5z"/>
+</vector>

app/src/main/res/drawable/mood_2.xml

@@ -0,0 +1,5 @@
+<vector android:height="75dp" android:tint="#999999"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="75dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8zM15.5,11c0.83,0 1.5,-0.67 1.5,-1.5S16.33,8 15.5,8 14,8.67 14,9.5s0.67,1.5 1.5,1.5zM8.5,11c0.83,0 1.5,-0.67 1.5,-1.5S9.33,8 8.5,8 7,8.67 7,9.5 7.67,11 8.5,11zM12,14c-2.33,0 -4.31,1.46 -5.11,3.5h10.22c-0.8,-2.04 -2.78,-3.5 -5.11,-3.5z"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -150,4 +150,11 @@
     <string name="breakTime">Break Time</string>
     <string name="repeats">Number of Repeats</string>
 
+    <!-- Session Recap -->
+    <string name="congrats">"Congratulations! You studied: %s"</string>
+    <string name="how_did_it_go">How did it go?</string>
+    <string name="good">Good</string>
+    <string name="bad">Bad</string>
+
+
 </resources>