QML rewrite followup: Fixes UI of some pages where content didn't fit (…

…#739) Follows #733
FedoraQt · Oct 4, 2024 · fd0648a · fd0648a
1 parent 09f8787
commit fd0648a
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 80 deletions.
diff --git a/src/app/qml/Heading.qml b/src/app/qml/Heading.qml
@@ -23,7 +23,7 @@ import QtQml 6.6
 Label {
     id: mainLabel
     property int level: 0
-    font.bold: true
+    font.bold: level > 1
 
     font.pointSize: referenceLabel.font.pointSize + level
     property list<QtObject> children: [

diff --git a/src/app/qml/MainPage.qml b/src/app/qml/MainPage.qml
@@ -63,6 +63,12 @@ Page {
         }
     }
 
+    // HACK: enforces all the items above to move up and make smaller
+    // space between the image and the heading
+    Item {
+        Layout.fillHeight: true
+    }
+
     previousButtonText: qsTr("About")
 
     onPreviousButtonClicked: {

diff --git a/src/app/qml/Page.qml b/src/app/qml/Page.qml
@@ -48,38 +48,30 @@ QQC2.Page {
     signal previousButtonClicked()
     signal nextButtonClicked()
 
-    Image {
-        id: image
-        anchors {
-            left: parent.left
-            right: parent.right
-            top: parent.top
-        }
-        width: visible ? 280 : 0
-        height: visible ? 210 : 0
-        source: ""
-        fillMode: Image.PreserveAspectFit
-        sourceSize.width: parent.width
-        sourceSize.height: parent.height
-        smooth: true
-        antialiasing: true
-        visible: source != ""
-    }
-
     ColumnLayout {
         id: mainLayout
-        anchors {
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            top: image.bottom
-            topMargin: units.gridUnit
-        }
+        anchors.fill: parent
         spacing: units.gridUnit
 
+        Image {
+            id: image
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.maximumWidth: 280
+            Layout.maximumHeight: 210
+            source: ""
+            fillMode: Image.PreserveAspectFit
+            sourceSize.width: parent.width
+            sourceSize.height: parent.height
+            smooth: true
+            antialiasing: true
+            visible: source != ""
+        }
+
         Heading {
             id: heading
-            Layout.alignment: Qt.AlignHCenter
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
             level: 5
             visible: text
         }

diff --git a/src/app/qml/RestorePage.qml b/src/app/qml/RestorePage.qml
@@ -25,71 +25,60 @@ import QtQuick.Layouts 6.6
 Page {  
     id: restorePage
 
-    Column {
-        QQC2.Label {
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
-            text: qsTr("Restore Drive <b>%1</b>").arg(lastRestoreable.name)
-            wrapMode: QQC2.Label.Wrap
-            width: mainWindow.width - (units.gridUnit * 4)
-            horizontalAlignment: QQC2.Label.AlignHCenter
-        }
-    }
+    text: qsTr("Restore Drive <b>%1</b>").arg(lastRestoreable.name)
+    textLevel: 1
 
-    Column {
-        QQC2.Label {
-            id: warningText
-            visible: lastRestoreable.restoreStatus == Units.RestoreStatus.Contains_Live
-            Layout.alignment: Qt.AlignHCenter
-            text: qsTr("<p align=\"justify\"> To reclaim all space available on the drive, it has to be restored to its factory settings. The live system and all saved data will be deleted. </p> <p align=\"justify\"> You don't need to restore the drive if you want to write another live system to it.
-            </p> <p align=\"justify\"> Do you want to restore it to factory settings? </p>" )
-            textFormat: Text.RichText
-            horizontalAlignment: Text.AlignHCenter
-            wrapMode: QQC2.Label.Wrap
-            width: mainWindow.width - (units.gridUnit * 4)
-        }
+    QQC2.Label {
+        id: warningText
+        visible: lastRestoreable.restoreStatus == Units.RestoreStatus.Contains_Live
+        Layout.alignment: Qt.AlignHCenter
+        Layout.fillWidth: true
+        text: qsTr("<p align=\"justify\"> To reclaim all space available on the drive, it has to be restored to its factory settings. The live system and all saved data will be deleted. </p> <p align=\"justify\"> You don't need to restore the drive if you want to write another live system to it.
+        </p> <p align=\"justify\"> Do you want to restore it to factory settings? </p>" )
+        textFormat: Text.RichText
+        wrapMode: QQC2.Label.Wrap
+    }
 
-        ColumnLayout {
-            id: progress
-            visible: lastRestoreable.restoreStatus == Units.RestoreStatus.Restoring
+    ColumnLayout {
+        id: progress
+        visible: lastRestoreable.restoreStatus == Units.RestoreStatus.Restoring
 
-            Column{
-                QQC2.Label {
-                    Layout.alignment: Qt.AlignHCenter
-                    horizontalAlignment: QQC2.Label.AlignHCenter
-                    wrapMode: QQC2.Label.Wrap
-                    width: warningText.width
-                    text: qsTr("<p align=\"justify\">Please wait while Fedora Media Writer restores your portable drive.</p>")
-                }
-            }
-
-            QQC2.ProgressBar {
-                id: progressIndicator
-                width: units.gridUnit * 14
-                Layout.alignment: Qt.AlignHCenter
-                indeterminate: true
-            }
-        }
+        Layout.alignment: Qt.AlignHCenter
+        Layout.fillWidth: true
 
         QQC2.Label {
-            id: restoredText
-            visible: lastRestoreable.restoreStatus == Units.RestoreStatus.Restored
             Layout.alignment: Qt.AlignHCenter
-            horizontalAlignment: Text.AlignHCenter
-            text: qsTr("Your drive was successfully restored!")
+            Layout.fillWidth: true
+            horizontalAlignment: QQC2.Label.AlignHCenter
             wrapMode: QQC2.Label.Wrap
-            width: mainWindow.width - (units.gridUnit * 4)
+            text: qsTr("<p align=\"justify\">Please wait while Fedora Media Writer restores your portable drive.</p>")
         }
 
-        QQC2.Label {
-            id: errorText
-            visible: lastRestoreable.restoreStatus == Units.RestoreStatus.Restore_Error
+        QQC2.ProgressBar {
+            id: progressIndicator
             Layout.alignment: Qt.AlignHCenter
-            horizontalAlignment: Text.AlignHCenter
-            text: qsTr("Unfortunately, an error occurred during the process. Please try restoring the drive using your system tools.")
-            wrapMode: QQC2.Label.Wrap
-            width: mainWindow.width - (units.gridUnit * 4)
+            Layout.fillWidth: true
+            indeterminate: true
         }
     }
+
+    QQC2.Label {
+        id: restoredText
+        visible: lastRestoreable.restoreStatus == Units.RestoreStatus.Restored
+        Layout.alignment: Qt.AlignHCenter
+        Layout.fillWidth: true
+        text: qsTr("Your drive was successfully restored!")
+        wrapMode: QQC2.Label.Wrap
+    }
+
+    QQC2.Label {
+        id: errorText
+        visible: lastRestoreable.restoreStatus == Units.RestoreStatus.Restore_Error
+        Layout.alignment: Qt.AlignHCenter
+        Layout.fillWidth: true
+        text: qsTr("Unfortunately, an error occurred during the process. Please try restoring the drive using your system tools.")
+        wrapMode: QQC2.Label.Wrap
+    }
 
     Component.onCompleted: {
         lastRestoreable = drives.lastRestoreable