reworked on task detail `Layout`

4 files changed, 113 insertions, 77 deletions

diff --git a/components/icons/more-vert-24px.svg b/components/icons/more-vert-24px.svg
new file mode 100644
index 0000000..6d6e3a7
--- /dev/null
+++ b/components/icons/more-vert-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
\ No newline at end of file
diff --git a/components/icons/notes-24px.svg b/components/icons/notes-24px.svg
new file mode 100644
index 0000000..34be213
--- /dev/null
+++ b/components/icons/notes-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M21 11.01L3 11v2h18zM3 16h12v2H3zM21 6H3v2.01L21 8z"/></svg>
\ No newline at end of file
diff --git a/features/TaskDetailForm.ui.qml b/features/TaskDetailForm.ui.qml
index 48e3a49..3125bef 100644
--- a/features/TaskDetailForm.ui.qml
+++ b/features/TaskDetailForm.ui.qml
@@ -12,76 +12,108 @@ Page {
 
     property alias taskTitle: taskTitle
     property alias taskDescription: taskDescription
+    property alias backButton: backButton
 
-    Row {
-        id: row
-        anchors.fill: parent
-        RowLayout {
-            id: taskTitleLayout
-            width: parent.width
-            height: 56
-            TextField {
-                id: taskTitle
-                Layout.rightMargin: 16
-                Layout.leftMargin: 72
-                Layout.fillWidth: true
-                placeholderText: qsTr("Enter task title")
-            }
+    header: ToolBar {
+        background: Rectangle {
+            color: "#FAFFFFFF"
         }
         RowLayout {
-            id: taskDescriptionLayout
-            width: parent.width
-            height: 56
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: taskTitleLayout.bottom
-            anchors.topMargin: 16
-            TextField {
-                id: taskDescription
-                Layout.rightMargin: 16
-                Layout.leftMargin: 72
-                Layout.fillWidth: true
-                placeholderText: qsTr("Enter task description")
+            id: toolBar
+            anchors.fill: parent
+            spacing: 0
+            ToolButton {
+                id: backButton
+                icon.name: "back-button"
+                icon.source: "/components/icons/arrow-back-24px.svg"
+                highlighted: true
             }
-        }
-        RowLayout {
-            id: attachmentLayout
-            height: 56
-            anchors.top: taskDescriptionLayout.bottom
-            anchors.topMargin: 16
-            width: parent.width
-            Image {
-                opacity: 0.54
-                sourceSize.height: 24
-                sourceSize.width: 24
-                Layout.leftMargin: 16
-                source: "/components/icons/attachment-24px.svg"
+            ToolButton {
+                id: toolMoreButton
+                icon.name: "more-button"
+                icon.source: "/components/icons/more-vert-24px.svg"
+                highlighted: true
+                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
             }
-            ItemDelegate {
-                id: itemDelegate
-                highlighted: false
+        }
+    }
 
+    RowLayout {
+        id: taskTitleLayout
+        height: 56
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        Layout.fillWidth: true
 
-                /*
-                background: Rectangle {
-                    color: Material.primary
-                    radius: 8
-                }
-                */
-                anchors.verticalCenter: parent.verticalCenter
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-                Label {
-                    text: qsTr("Attachment")
-                    anchors.left: parent.left
-                    anchors.leftMargin: 24
-                    anchors.verticalCenterOffset: 0
-                    leftPadding: 0
-                    anchors.verticalCenter: parent.verticalCenter
-                    font.weight: Font.Medium
-                    font.pixelSize: 20
-                    font.family: "Work Sans"
-                }
-            }
+        TextField {
+            id: taskTitle
+            Layout.rightMargin: 16
+            Layout.leftMargin: 66
+            Layout.fillWidth: true
+            placeholderText: qsTr("Enter task title")
+        }
+    }
+    RowLayout {
+        id: taskDescriptionLayout
+        width: parent.width
+        height: 56
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: taskTitleLayout.bottom
+        anchors.topMargin: 24
+        Image {
+            id: descriptionIcon
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 12
+            opacity: 0.54
+            Layout.minimumHeight: 24
+            Layout.minimumWidth: 24
+            Layout.preferredHeight: 24
+            Layout.preferredWidth: 24
+            source: "/components/icons/notes-24px.svg"
+        }
+        TextField {
+            id: taskDescription
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            Layout.fillWidth: true
+            placeholderText: qsTr("Enter task description")
+        }
+    }
+    RowLayout {
+        id: attachmentLayout
+        height: 56
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.top: taskDescriptionLayout.bottom
+        anchors.topMargin: 24
+        Image {
+            id: attachmentIcon
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 12
+            opacity: 0.54
+            Layout.minimumHeight: 24
+            Layout.minimumWidth: 24
+            Layout.preferredHeight: 24
+            Layout.preferredWidth: 24
+            source: "/components/icons/attachment-24px.svg"
+        }
+        Label {
+            color: "#000000"
+            text: qsTr("Attachment")
+            font.weight: Font.Medium
+            font.pixelSize: 16
+            font.family: "Work Sans"
+            verticalAlignment: Text.AlignVCenter
+            Layout.leftMargin: 24
+            Layout.fillWidth: true
         }
     }
 }
diff --git a/material-design-icons.qrc b/material-design-icons.qrc
index e08b3b8..eb90650 100644
--- a/material-design-icons.qrc
+++ b/material-design-icons.qrc
@@ -1,16 +1,18 @@
 <RCC>
-	<qresource prefix="/">
-		<file>components/icons/add-24px.svg</file>
-		<file>components/icons/arrow-back-24px.svg</file>
-		<file>components/icons/arrow-forward-24px.svg</file>
-		<file>components/icons/attachment-24px.svg</file>
-		<file>components/icons/check-box-outline-24px.svg</file>
-		<file>components/icons/chevron-right-24px.svg</file>
-		<file>components/icons/email-24px.svg</file>
-		<file>components/icons/lock-24px.svg</file>
-		<file>components/icons/menu-24px.svg</file>
-		<file>components/icons/photo_camera_24px.svg</file>
-		<file>components/icons/profile-24px.svg</file>
-		<file>components/icons/user-24px.svg</file>
-	</qresource>
+    <qresource prefix="/">
+        <file>components/icons/add-24px.svg</file>
+        <file>components/icons/arrow-back-24px.svg</file>
+        <file>components/icons/arrow-forward-24px.svg</file>
+        <file>components/icons/attachment-24px.svg</file>
+        <file>components/icons/check-box-outline-24px.svg</file>
+        <file>components/icons/chevron-right-24px.svg</file>
+        <file>components/icons/email-24px.svg</file>
+        <file>components/icons/lock-24px.svg</file>
+        <file>components/icons/menu-24px.svg</file>
+        <file>components/icons/photo_camera_24px.svg</file>
+        <file>components/icons/profile-24px.svg</file>
+        <file>components/icons/user-24px.svg</file>
+        <file>components/icons/notes-24px.svg</file>
+        <file>components/icons/more-vert-24px.svg</file>
+    </qresource>
 </RCC>