reworked on task detail `Layout`

1 files changed, 95 insertions, 63 deletions

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
         }
     }
 }