better layout for `TaskHistory` to accomodate long ass description 🤪

3 files changed, 62 insertions, 62 deletions

diff --git a/features/TaskBriefForm.ui.qml b/features/TaskBriefForm.ui.qml
index 8be2a83..1a68978 100644
--- a/features/TaskBriefForm.ui.qml
+++ b/features/TaskBriefForm.ui.qml
@@ -46,28 +46,34 @@ Page {
         anchors.left: parent.left
         anchors.leftMargin: 0
         spacing: 8
-        Rectangle {
-            id: userAvatar
-            height: 32
-            width: 32
-            radius: 8
-            Layout.topMargin: 8
-            Layout.preferredHeight: 32
-            Layout.preferredWidth: 32
-            Layout.minimumHeight: 32
-            Layout.minimumWidth: 32
-            Layout.leftMargin: 16
-            Image {
-                source: "https://via.placeholder.com/32x32.png"
-                fillMode: Image.PreserveAspectFit
-            }
-        }
         RowLayout {
+            id: creatorInfo
+            spacing: 8
+            Layout.fillWidth: true
+            Rectangle {
+                id: userAvatar
+                height: 24
+                width: 24
+                radius: 8
+                Layout.bottomMargin: 8
+                Layout.topMargin: 8
+                Layout.preferredHeight: 24
+                Layout.preferredWidth: 24
+                Layout.minimumHeight: 24
+                Layout.minimumWidth: 24
+                Layout.leftMargin: 16
+                Image {
+                    width: 24
+                    anchors.verticalCenter: parent.verticalCenter
+                    source: "https://via.placeholder.com/32x32.png"
+                    fillMode: Image.PreserveAspectFit
+                }
+            }
             Text {
                 id: ticketCreator
                 text: qsTr("Username")
                 Layout.rightMargin: 0
-                Layout.leftMargin: 16
+                Layout.leftMargin: 0
                 Layout.fillWidth: false
                 font.weight: Font.Medium
                 font.family: "Work Sans"
@@ -78,14 +84,15 @@ Page {
             Text {
                 id: ticketCreatedText
                 text: qsTr("created this issue")
-                Layout.fillHeight: true
+                Layout.fillHeight: false
                 Layout.rightMargin: 16
                 Layout.leftMargin: 0
                 font.pixelSize: 14
                 font.family: "Work Sans"
-                Layout.fillWidth: false
+                Layout.fillWidth: true
             }
         }
+
         Text {
             id: ticketCreatedTimestamp
             text: qsTr("2017-07-25 14:05:30")
diff --git a/features/TaskDetailForm.ui.qml b/features/TaskDetailForm.ui.qml
index 0a6540b..f8da9d1 100644
--- a/features/TaskDetailForm.ui.qml
+++ b/features/TaskDetailForm.ui.qml
@@ -6,9 +6,6 @@ import QtQuick.Layouts 1.12
 Page {
     id: page
     title: qsTr("Task detail page")
-    background: Rectangle {
-        color: "#FFFFFF"
-    }
 
     property alias backButton: backButton
 
@@ -39,7 +36,7 @@ Page {
 
 /*##^##
 Designer {
-    D{i:0;autoSize:true;height:480;width:640}D{i:9;anchors_x:0;anchors_y:183}
+    D{i:0;autoSize:true;height:480;width:640}
 }
 ##^##*/
 
diff --git a/features/TaskHistoryForm.ui.qml b/features/TaskHistoryForm.ui.qml
index 4b207de..fe211ea 100644
--- a/features/TaskHistoryForm.ui.qml
+++ b/features/TaskHistoryForm.ui.qml
@@ -8,35 +8,56 @@ Page {
     background: Rectangle {
         color: "#eeeeee"
     }
-    height: ticketDescriptionLayout.height + ticketDateLayout.height
+    height: ticketDescriptionLayout.height
     property alias creator: creator
     property alias ticketDescription: ticketDescription
     property alias ticketDate: ticketDate
 
-    RowLayout {
+    ColumnLayout {
         id: ticketDescriptionLayout
-        anchors.top: parent.top
-        anchors.topMargin: 0
         anchors.right: parent.right
         anchors.rightMargin: 0
         anchors.left: parent.left
         anchors.leftMargin: 0
         spacing: 8
-        Text {
-            id: creator
-            text: qsTr("Username")
-            Layout.bottomMargin: 8
+        RowLayout {
             Layout.topMargin: 8
-            font.weight: Font.Medium
-            font.pixelSize: 14
-            font.family: "Work Sans"
-            Layout.leftMargin: 16
+            spacing: 8
+            Text {
+                id: creator
+                text: qsTr("Username")
+                Layout.rightMargin: 0
+                Layout.fillWidth: true
+                Layout.bottomMargin: 0
+                Layout.topMargin: 0
+                font.weight: Font.Medium
+                font.pixelSize: 14
+                font.family: "Work Sans"
+                Layout.leftMargin: 16
+            }
+            Text {
+                id: ticketDate
+                text: qsTr("2017-07-25 15:05:30")
+                horizontalAlignment: Text.AlignRight
+                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                Layout.bottomMargin: 0
+                Layout.topMargin: 0
+                Layout.fillWidth: false
+                Layout.leftMargin: 0
+                Layout.rightMargin: 16
+                font.pixelSize: 12
+                font.family: "Work Sans"
+                color: "#8a000000"
+            }
         }
         Text {
             id: ticketDescription
-            text: qsTr("Edit or Commented")
+            text: qsTr("You may put ticket activity description here. Such as editing, commenting, or updating the ticket status.")
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            Layout.leftMargin: 16
+            Layout.rightMargin: 16
             Layout.bottomMargin: 8
-            Layout.topMargin: 8
+            Layout.topMargin: 0
             Layout.fillWidth: true
             font.pixelSize: 14
             font.family: "Work Sans"
@@ -44,29 +65,4 @@ Page {
             color: "#000000"
         }
     }
-    RowLayout {
-        id: ticketDateLayout
-        anchors.right: parent.right
-        anchors.rightMargin: 0
-        anchors.left: parent.left
-        anchors.leftMargin: 0
-        anchors.top: ticketDescriptionLayout.bottom
-        anchors.topMargin: 0
-        spacing: 8
-        Text {
-            id: ticketDate
-            text: qsTr("2017-07-25 15:05:30")
-            Layout.bottomMargin: 8
-            Layout.topMargin: 8
-            Layout.fillWidth: true
-            Layout.leftMargin: 16
-            Layout.rightMargin: 16
-            font.pixelSize: 12
-            font.family: "Work Sans"
-            color: "#8a000000"
-        }
-    }
 }
-
-
-