Button box: rendering its height adaptable to texts in buttons

Place (*) adaptable to RTL

1 files changed, 34 insertions, 33 deletions

diff --git a/qml/mw-ui.qml b/qml/mw-ui.qml
index 69e122f..b379ba2 100644
--- a/qml/mw-ui.qml
+++ b/qml/mw-ui.qml
@@ -105,12 +105,14 @@ Rectangle {
                 columns: 2
                     Label {
                         Layout.columnSpan: 2
-                        Layout.margins: 10
+                        Layout.topMargin: 10
+                        Layout.leftMargin: 10
                         text: qsTr("Configure software repositories"); font.bold: true;
                         color: "white" }
                     Label {
                         Layout.columnSpan: 2
-                        Layout.margins: 10
+                        Layout.topMargin: 10
+                        Layout.leftMargin: 10
                         text: qsTr("Mageia official repositories contain:");
                         color: "white"  }
                     Button {id: coreBg
@@ -283,11 +285,9 @@ Rectangle {
                 }
 
                 Label {
-                    x: 84
-                    anchors {top: parent.bottom; topMargin: 3; }
+                    anchors {top: parent.bottom; topMargin: 3; horizontalCenter: parent.left; horizontalCenterOffset: parent.width * .4 }
                     text: qsTr("(*) Administrator password is needed.")
-                    Layout.maximumWidth: slideshow.width * .25
-                    wrapMode: Text.WordWrap
+                    Layout.maximumWidth: slideshow.width * .4
                     font.italic: true
                     color: "white"
                 }
@@ -346,8 +346,7 @@ Rectangle {
 
             }
             Label {
-                anchors {top: parent.bottom; topMargin: 3 }
-                x:20
+                anchors {top: parent.bottom; topMargin: 3; horizontalCenter: parent.left; horizontalCenterOffset: parent.width * .4  }
                 text: qsTr("(*) User password is needed")
                 wrapMode: Text.WordWrap
                 font.italic: true
@@ -421,8 +420,7 @@ Rectangle {
                     }
                 }
                 Label {
-                anchors {top: parent.bottom; topMargin: 3; }
-                x:20
+                anchors {top: parent.bottom; topMargin: 3; horizontalCenter: parent.left; horizontalCenterOffset: parent.width * .4 }
                 text: qsTr("(*) Administrator password is needed")
                 wrapMode: Text.WordWrap
                 font.italic: true
@@ -511,8 +509,7 @@ Rectangle {
                    }
             }
             Label {
-                anchors {top: parent.bottom; topMargin: 3}
-                x:20
+                anchors {top: parent.bottom; topMargin: 3; horizontalCenter: parent.left; horizontalCenterOffset: parent.width * .4 }
                 text: qsTr("(*) Administrator password is needed")
                 wrapMode: Text.WordWrap
                 font.italic: true
@@ -893,36 +890,40 @@ Rectangle {
     }
     Rectangle {
         id: buttonbox
-        width: banner.width; height: 46
+        width: banner.width; height: buttonRow.height
         anchors { top: banner.bottom;  }
         color: "#262F45"
 
-        Row {
-            anchors.centerIn: parent
-            spacing: 10
+        RowLayout {
+            id: buttonRow
 
             Repeater {
                 model: itemModel.count
 
-                Rectangle {
-                    width: banner.width/9; height: 35
-                    radius: 5
-                    color: view.currentIndex == index ? "#2397D4" : "white"
-                    Label{
-                        anchors.verticalCenter: parent.verticalCenter
-                        text: itemModel.get(index).title
-                        font.pointSize: 8
-                        width: parent.width
-                        color: view.currentIndex == index ? "white" : "#262F45"
-                        horizontalAlignment: Text.AlignHCenter
-                        wrapMode : Text.WordWrap
-                    }
+                Button  {
+                    Layout.fillHeight: true
 
-                    MouseArea {
-                        width: banner.width/8; height: 35
-                        anchors.centerIn: parent
-                        onClicked: view.currentIndex = index
+                    Layout.preferredWidth: banner.width/8-15;
+                    Layout.topMargin: 6
+                    Layout.leftMargin: 4
+                    Layout.rightMargin: 4
+                    Layout.bottomMargin: 6
+                    //Layout.alignment: Qt.AlignHCenter
+                    style: ButtonStyle {
+                        background: Rectangle {
+                            radius: 5
+                            color: view.currentIndex == index ? "#2397D4" : "white"
+                        }
+                        label: Label{
+                            anchors.verticalCenter: parent.verticalCenter
+                            text: itemModel.get(index).title
+                            font.pointSize: 8
+                            color: view.currentIndex == index ? "white" : "#262F45"
+                            horizontalAlignment: Text.AlignHCenter
+                            wrapMode : Text.WordWrap
+                        }
                     }
+                    onClicked: view.currentIndex = index
                 }
             }
         }