GH-36 Improve UI/UX of task editor (Fix #36)

dzikoysk · Jul 16, 2022 · dc374d9 · dc374d9
1 parent 4dd7157
commit dc374d9
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 26 deletions.
diff --git a/pom-application/app/src/main/java/net/dzikoysk/presenceofmind/pages/Dashboard.kt b/pom-application/app/src/main/java/net/dzikoysk/presenceofmind/pages/Dashboard.kt
@@ -10,14 +10,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import net.dzikoysk.presenceofmind.createDefaultTasks
-import net.dzikoysk.presenceofmind.pages.dashboard.*
-import net.dzikoysk.presenceofmind.pages.dashboard.editor.AnimatedEditorDrawer
-import net.dzikoysk.presenceofmind.pages.dashboard.list.TaskList
 import net.dzikoysk.presenceofmind.data.task.MarkedAs
-import net.dzikoysk.presenceofmind.data.task.Task
 import net.dzikoysk.presenceofmind.data.task.TaskService
 import net.dzikoysk.presenceofmind.data.theme.InMemoryThemeRepository
 import net.dzikoysk.presenceofmind.data.theme.ThemeRepository
+import net.dzikoysk.presenceofmind.pages.dashboard.*
+import net.dzikoysk.presenceofmind.pages.dashboard.editor.AnimatedEditorDrawer
+import net.dzikoysk.presenceofmind.pages.dashboard.editor.TaskToEdit
+import net.dzikoysk.presenceofmind.pages.dashboard.list.TaskList
 
 /** List of tasks */
 
@@ -39,7 +39,7 @@ fun Dashboard(
 ) {
     val selectedTasks = remember { mutableStateOf(MarkedAs.UNFINISHED) }
     val openMenu = remember { mutableStateOf(false)  }
-    val openEditorDrawer = remember { mutableStateOf<Task?>(null)  }
+    val openEditorDrawer = remember { mutableStateOf<TaskToEdit?>(null)  }
 
     Scaffold(
         content = { padding ->
@@ -79,7 +79,7 @@ fun Dashboard(
                     }
                     TaskList(
                         taskService = taskService,
-                        openTaskEditor = { openEditorDrawer.value = it },
+                        openTaskEditor = { openEditorDrawer.value = TaskToEdit(isNew = false, it) },
                         displayMode = selectedTasks.value
                     )
                 }
@@ -93,15 +93,15 @@ fun Dashboard(
                     close = { openEditorDrawer.value = null },
                     saveTask = { taskService.saveTask(it) },
                     deleteTask = { taskService.deleteTask(it.id) },
-                    taskToEdit = openEditorDrawer.value
+                    taskToEdit = openEditorDrawer.value ?: TaskToEdit(isNew = true)
                 )
             }
         },
         floatingActionButton = {
             if (openEditorDrawer.value == null) {
                 CreateTaskButton(
                     themeRepository = themeRepository,
-                    openTaskEditor = { openEditorDrawer.value = Task() }
+                    openTaskEditor = { openEditorDrawer.value = TaskToEdit(isNew = true) }
                 )
             }
         }

diff --git a/...tion/app/src/main/java/net/dzikoysk/presenceofmind/pages/dashboard/editor/EditorDrawer.kt b/...tion/app/src/main/java/net/dzikoysk/presenceofmind/pages/dashboard/editor/EditorDrawer.kt
@@ -21,11 +21,16 @@ import net.dzikoysk.presenceofmind.data.task.DeleteTask
 import net.dzikoysk.presenceofmind.data.task.SaveTask
 import net.dzikoysk.presenceofmind.data.task.Task
 
+data class TaskToEdit(
+    val isNew: Boolean,
+    val task: Task = Task()
+)
+
 @Composable
 fun AnimatedEditorDrawer(
     open: Boolean,
     close: () -> Unit,
-    taskToEdit: Task?,
+    taskToEdit: TaskToEdit,
     saveTask: SaveTask,
     deleteTask: DeleteTask
 ) {
@@ -53,11 +58,11 @@ typealias SelectTab = (EditorTab) -> Unit
 @Composable
 fun EditorDrawer(
     close: () -> Unit,
-    taskToEdit: Task?,
+    taskToEdit: TaskToEdit,
     saveTask: SaveTask,
     deleteTask: DeleteTask
 ) {
-    val task = remember { mutableStateOf(taskToEdit ?: Task(description = "")) }
+    val task = remember { mutableStateOf(taskToEdit.task) }
     val interactionSource = remember { MutableInteractionSource() }
     val selectedTab = remember { mutableStateOf(EditorTab.MAIN) }
 
@@ -88,6 +93,7 @@ fun EditorDrawer(
                     EditorTab.MAIN ->
                         MainMenu(
                             close = close,
+                            isNew = taskToEdit.isNew,
                             task = task.value,
                             selectTab = { selectedTab.value = it },
                             updateTask = { task.value = it },

diff --git a/...lication/app/src/main/java/net/dzikoysk/presenceofmind/pages/dashboard/editor/MainMenu.kt b/...lication/app/src/main/java/net/dzikoysk/presenceofmind/pages/dashboard/editor/MainMenu.kt
@@ -1,31 +1,32 @@
 package net.dzikoysk.presenceofmind.pages.dashboard.editor
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Button
+import androidx.compose.material.*
 import androidx.compose.material.ButtonDefaults.buttonColors
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedTextField
-import androidx.compose.material.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.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import net.dzikoysk.presenceofmind.R
 import net.dzikoysk.presenceofmind.components.drawVerticalScrollbar
 import net.dzikoysk.presenceofmind.components.scaledSp
-import net.dzikoysk.presenceofmind.data.task.DeleteTask
-import net.dzikoysk.presenceofmind.data.task.SaveTask
-import net.dzikoysk.presenceofmind.data.task.Task
-import net.dzikoysk.presenceofmind.data.task.UpdateTask
 import net.dzikoysk.presenceofmind.data.attributes.ChecklistAttribute
 import net.dzikoysk.presenceofmind.data.attributes.EventAttribute
 import net.dzikoysk.presenceofmind.data.attributes.PomodoroAttribute
 import net.dzikoysk.presenceofmind.data.attributes.RepetitiveAttribute
+import net.dzikoysk.presenceofmind.data.task.DeleteTask
+import net.dzikoysk.presenceofmind.data.task.SaveTask
+import net.dzikoysk.presenceofmind.data.task.Task
+import net.dzikoysk.presenceofmind.data.task.UpdateTask
 
 @Preview(showBackground = true)
 @Composable
@@ -37,6 +38,7 @@ fun MainMenuPreview() {
         MainMenu(
             close = {},
             selectTab = {},
+            isNew = true,
             task = Task(
                 description = "Task to edit",
                 checklistAttribute = ChecklistAttribute()
@@ -51,6 +53,7 @@ fun MainMenuPreview() {
 @Composable
 fun MainMenu(
     close: () -> Unit,
+    isNew: Boolean,
     task: Task,
     selectTab: SelectTab,
     updateTask: UpdateTask,
@@ -67,12 +70,29 @@ fun MainMenu(
         contentPadding = PaddingValues(horizontal = 24.dp)
     ) {
         item {
-            Text(
-                text = "Add a new task  \uD83C\uDFA8",
-                modifier = Modifier.padding(top = 24.dp, bottom = 5.dp),
-                fontWeight = FontWeight.Bold,
-                fontSize = 16.scaledSp()
-            )
+            val message = when (isNew) {
+                true -> "Add a new task  \uD83C\uDFA8"
+                false -> "Modify task  \uD83C\uDFA8"
+            }
+
+            Row(
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 24.dp, bottom = 5.dp)
+            ) {
+                Text(
+                    text = message,
+                    fontWeight = FontWeight.Bold,
+                    fontSize = 16.scaledSp()
+                )
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_baseline_close_24),
+                    contentDescription = "Close editor",
+                    modifier = Modifier.clickable { close() }
+                )
+            }
         }
 
         item {
@@ -186,7 +206,12 @@ fun MainMenu(
                         deleteTask(task)
                         close()
                     },
-                    content = { Text(text = "Delete") }
+                    content = {
+                        when (isNew) {
+                            true -> Text(text = "Cancel")
+                            false -> Text(text = "Delete")
+                        }
+                    }
                 )
             }
         }