From 1d4ceb8342783f47f1fb02cae6c5d763af9c8aae Mon Sep 17 00:00:00 2001
From: Andy <xandyx@riseup.net>
Date: Sat, 4 Mar 2023 16:49:52 +0100
Subject: [PATCH] Improve EventView layout

1. Align text fields and corresponding labels
2. Hide rows for empty fields
---
 ui/EventView.qml | 44 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/ui/EventView.qml b/ui/EventView.qml
index 4c5e581..c493827 100644
--- a/ui/EventView.qml
+++ b/ui/EventView.qml
@@ -133,27 +133,36 @@ Cras nec ante sit amet augue sodales iaculis. Aliquam erat volutpat. Nam aliquet
             RowLayout {
                 Layout.fillWidth: true
                 spacing: 6
-                visible: root.category.length > 0
+
+                visible: root.category !== ""
+
                 Label {
-                    Layout.alignment: Qt.AlignTop
                     text: qsTr("Category:")
                     font.bold: true
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
                 Label {
-                    Layout.alignment: Qt.AlignTop
                     Layout.fillWidth: true
                     text: root.category
                     wrapMode: Text.WordWrap
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
             }
             RowLayout {
                 Layout.alignment: Qt.AlignTop
                 Layout.fillWidth: true
+
+                visible: root.locationName !== ""
+
                 height: Layout.preferredHeight
                 spacing: 6
                 Label {
                     text: qsTr("at:")
                     font.bold: true
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
                 Label {
                     Layout.fillWidth: true
@@ -162,6 +171,8 @@ Cras nec ante sit amet augue sodales iaculis. Aliquam erat volutpat. Nam aliquet
                     wrapMode: Text.Wrap
                     focus: false
                     font.underline: true
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
             }
             Label {
@@ -210,12 +221,16 @@ Cras nec ante sit amet augue sodales iaculis. Aliquam erat volutpat. Nam aliquet
                 Label {
                     text: qsTr("When:")
                     font.bold: true
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
                 Label {
                     Layout.fillWidth: true
                     text: root.dateTime
                     wrapMode: TextEdit.Wrap
                     font.underline: true
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
             }
             RowLayout {
@@ -227,11 +242,15 @@ Cras nec ante sit amet augue sodales iaculis. Aliquam erat volutpat. Nam aliquet
                 Label {
                     text: qsTr("Duration:")
                     font.bold: true
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
                 Label {
                     Layout.fillWidth: true
                     text: root.duration
                     wrapMode: TextEdit.Wrap
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
             }
             RowLayout {
@@ -241,11 +260,15 @@ Cras nec ante sit amet augue sodales iaculis. Aliquam erat volutpat. Nam aliquet
                 Label {
                     text: qsTr("Price:")
                     font.bold: true
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
                 Label {
                     text: root.price
                     Layout.fillWidth: true
                     wrapMode: TextEdit.Wrap
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
             }
             RowLayout {
@@ -255,6 +278,8 @@ Cras nec ante sit amet augue sodales iaculis. Aliquam erat volutpat. Nam aliquet
                 Label {
                     text: qsTr("Address:")
                     font.bold: true
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
                 Label {
                     id: address
@@ -269,6 +294,8 @@ Cras nec ante sit amet augue sodales iaculis. Aliquam erat volutpat. Nam aliquet
                         cursorShape: Qt.PointingHandCursor
                     }
                     focus: false
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
                 ToolButton {
                     font.family: "Material Design Icons"
@@ -284,16 +311,23 @@ Cras nec ante sit amet augue sodales iaculis. Aliquam erat volutpat. Nam aliquet
 
             RowLayout {
                 Layout.fillWidth: true
-                visible: root.directions.length > 0
+
+                visible: root.directions !== ""
+
                 spacing: 6
                 Label {
                     text: qsTr("Directions:")
                     font.bold: true
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
                 }
 
                 Label {
-                    Layout.alignment: Qt.AlignTop
                     Layout.fillWidth: true
+
+                    verticalAlignment: Text.AlignTop
+                    Layout.alignment: Qt.AlignTop
+
                     text: root.directions
                     wrapMode: TextEdit.Wrap
                     focus: false
-- 
GitLab