From 92dc808c0829a2be79f32d4664ae7382d077a239 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Tue, 24 Sep 2019 23:41:48 +0700 Subject: reworked on task detail `Layout` --- components/icons/more-vert-24px.svg | 1 + components/icons/notes-24px.svg | 1 + features/TaskDetailForm.ui.qml | 158 ++++++++++++++++++++++-------------- material-design-icons.qrc | 30 +++---- 4 files changed, 113 insertions(+), 77 deletions(-) create mode 100644 components/icons/more-vert-24px.svg create mode 100644 components/icons/notes-24px.svg 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 @@ + \ 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 @@ + \ 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 @@ - - components/icons/add-24px.svg - components/icons/arrow-back-24px.svg - components/icons/arrow-forward-24px.svg - components/icons/attachment-24px.svg - components/icons/check-box-outline-24px.svg - components/icons/chevron-right-24px.svg - components/icons/email-24px.svg - components/icons/lock-24px.svg - components/icons/menu-24px.svg - components/icons/photo_camera_24px.svg - components/icons/profile-24px.svg - components/icons/user-24px.svg - + + components/icons/add-24px.svg + components/icons/arrow-back-24px.svg + components/icons/arrow-forward-24px.svg + components/icons/attachment-24px.svg + components/icons/check-box-outline-24px.svg + components/icons/chevron-right-24px.svg + components/icons/email-24px.svg + components/icons/lock-24px.svg + components/icons/menu-24px.svg + components/icons/photo_camera_24px.svg + components/icons/profile-24px.svg + components/icons/user-24px.svg + components/icons/notes-24px.svg + components/icons/more-vert-24px.svg + -- cgit v1.2.3