Applications: manage adjustment of width to the larger button

Enlarge column of repo name in media sources

1 files changed, 40 insertions, 14 deletions

diff --git a/qml/mw-ui.qml b/qml/mw-ui.qml
index 3cc1223..36c6a01 100644
--- a/qml/mw-ui.qml
+++ b/qml/mw-ui.qml
@@ -11,6 +11,10 @@ Rectangle {
     width: 1000; height: 650
     property alias view: view
 
+    // For RTL tests
+    //LayoutMirroring.enabled: true
+    //LayoutMirroring.childrenInherit: true
+
     Component {
         id: slidebackground
         LinearGradient {
@@ -114,7 +118,7 @@ Rectangle {
                                 GradientStop { position: 1.0; color: "green" }
                             }
                         }
-                        width: 80;
+                        width: 90;
                         height: 30
                         Layout.alignment: Qt.AlignTop
                         Layout.fillWidth: true
@@ -139,7 +143,7 @@ Rectangle {
                                 GradientStop { position: 1.0; color: "darkred" }
                             }
                         }
-                        width: 80; height: 30
+                        height: 30
                         Layout.alignment: Qt.AlignTop
                         Layout.fillWidth: true
                         Label {
@@ -164,7 +168,7 @@ Rectangle {
                                 GradientStop { position: 1.0; color: "darkred" }
                             }
                         }
-                        width: 80; height: 30
+                        height: 30
                         Layout.alignment: Qt.AlignTop
                         Layout.fillWidth: true
                         Label {
@@ -188,7 +192,7 @@ Rectangle {
                                 GradientStop { position: 1.0; color: "darkgray" }
                             }
                         }
-                        width: 80; height: 30
+                        height: 30
                         Layout.alignment: Qt.AlignTop
                         Layout.fillWidth: true
                         Label { anchors.centerIn: parent
@@ -217,7 +221,6 @@ Rectangle {
                     }
                     Rectangle {id: noteBg
                         color: "#e6c200";
-                        width: 70
                         height: 30
                         Layout.alignment: Qt.AlignTop
                         Layout.fillWidth: true
@@ -488,6 +491,12 @@ Rectangle {
                     appListDM.items.insert(entry, "group");
                 }
             }
+            for(var child in applicationsListView.contentItem.children) {
+                if (applicationsListView.contentItem.children[child].naturalwidth > softListRect.installwidth ) {
+                    softListRect.installwidth = applicationsListView.contentItem.children[child].naturalwidth
+                }
+                //console.log(applicationsListView.contentItem.children[child].naturalwidth.implicitWidth, typeof(applicationsListView.contentItem.children[child].naturalwidth))
+            }
             appListDM.filterOnGroup = "items";
         }
 
@@ -527,7 +536,7 @@ Rectangle {
                             Rectangle {
                                 width: 190
                                 height:  Qt.application.font.pixelSize + 16
-                                anchors.horizontalCenter: parent.horizontalCenter
+                                //anchors.horizontalCenter: parent.horizontalCenter
                                 color:  "#262F45"
                                 y: categoriesList.currentItem.y;
                             }
@@ -578,6 +587,9 @@ Rectangle {
                         // Software list
                         height: box.height - 222
                         x: 210
+                        id: softListRect
+                        // the width of install and Launch button will be calculated then updated. We give here a minimal size
+                        property real installwidth: Qt.application.font.pixelSize * 2
 
                         DelegateModel {
                             id: appListDM
@@ -600,9 +612,17 @@ Rectangle {
                                             items.insert(entry, "group");
                                         }
                                     }
+                                    // The lsit has to be painted first for buttons width evaluation
+                                    applicationsListView.forceLayout()
+                                    for(var child in applicationsListView.contentItem.children) {
+                                        if (applicationsListView.contentItem.children[child].naturalwidth > softListRect.installwidth ) {
+                                            softListRect.installwidth = applicationsListView.contentItem.children[child].naturalwidth
+                                        }
+                                    }
                                 }
                             delegate: Row {
                                 spacing: 10
+                                property int naturalwidth : optButton.item.implicitWidth
                                 Image {
                                     source: icon
                                     width: 32
@@ -620,23 +640,25 @@ Rectangle {
                                         text: description
                                         font.italic: true
                                         font.pixelSize: Qt.application.font.pixelSize * .9
-                                        width: view.width - (200 + 44 +38 + Qt.application.font.pixelSize * 4 * 2)
+                                        width: view.width - (200 + 44 +38 + softListRect.installwidth + Qt.application.font.pixelSize * 3.5)
                                         wrapMode: Text.WordWrap
                                         color: "white"
                                         }
                                     }
 
                                     Loader {
+                                        id: optButton
                                         Component { id: button;
                                             Button {
-                                                width: Qt.application.font.pixelSize * 5; height: Qt.application.font.pixelSize * 1.3
+                                                width: softListRect.installwidth;
+                                                height: Qt.application.font.pixelSize * 1.3
                                                 objectName: "launch"
                                                 onClicked: {
                                                     launch.command(["gurpmi",name,])}
                                                 style: ButtonStyle {
                                                     label: Label {
                                                         horizontalAlignment: TextInput.AlignHCenter
-							verticalAlignment: TextInput.AlignVCenter
+                                                        verticalAlignment: TextInput.AlignVCenter
                                                         text: qsTr("Install");
                                                         font.pixelSize: Qt.application.font.pixelSize * .8
                                                         color: "black"
@@ -647,14 +669,15 @@ Rectangle {
                                         }
                                         Component { id: launcher;
                                             Button {
-                                                width:  Qt.application.font.pixelSize * 5; height: Qt.application.font.pixelSize * 1.3
+                                                width:  softListRect.installwidth;
+                                                height: Qt.application.font.pixelSize * 1.3
                                                 objectName: "launch"
                                                 onClicked: {
                                                     launch.command([command,])}
                                                 style: ButtonStyle {
                                                     label: Label {
                                                         horizontalAlignment: TextInput.AlignHCenter
-							verticalAlignment: TextInput.AlignVCenter
+                                                        verticalAlignment: TextInput.AlignVCenter
                                                         text: qsTr("Launch");
                                                         font.pixelSize: Qt.application.font.pixelSize * .8
                                                         color: "black"
@@ -666,7 +689,7 @@ Rectangle {
                                             padding: 2
                                             horizontalAlignment: TextInput.AlignHCenter
                                                 font.pixelSize: Qt.application.font.pixelSize * .8
-                                                width:  Qt.application.font.pixelSize * 5
+                                                width: softListRect.installwidth
                                                 color: "white"
                                             }
                                         }
@@ -679,7 +702,7 @@ Rectangle {
                                             Rectangle {
                                                 color: "#FF4C4C"
                                                 radius: 3
-                                                width:  Qt.application.font.pixelSize * 3.2; height: Qt.application.font.pixelSize * 1.3
+                                                width:  Qt.application.font.pixelSize * 3.5; height: Qt.application.font.pixelSize * 1.3
                                                 Label {
                                                     anchors.centerIn: parent
                                                     text:  repo
@@ -688,7 +711,10 @@ Rectangle {
                                                 }
                                             }
                                         }
-                                        Component { id: dumm; Label {text: " "}}
+                                        Component { id: dumm;
+                                            Label {
+                                                width:  Qt.application.font.pixelSize * 3.5;
+                                                text: " "}}
                                         sourceComponent: repo == "" ?  dumm : repotag
                                     }
                                 }