QmlDesigner.propertyEditor: cleanup buttons for alignment and colors

This commit cleans up the design of the buttons and fixes
BAUHAUS-612

1 files changed, 81 insertions, 11 deletions

diff --git a/share/qtcreator/qmldesigner/propertyeditor/Qt/AlignmentHorizontalButtons.qml b/share/qtcreator/qmldesigner/propertyeditor/Qt/AlignmentHorizontalButtons.qml
index c5df4da92f..1b4c5cd8e9 100644
--- a/share/qtcreator/qmldesigner/propertyeditor/Qt/AlignmentHorizontalButtons.qml
+++ b/share/qtcreator/qmldesigner/propertyeditor/Qt/AlignmentHorizontalButtons.qml
@@ -3,6 +3,56 @@ import Bauhaus 1.0
 
 QGroupBox {
     id: aligmentHorizontalButtons
+
+    property variant theValue: backendValues.horizontalAlignment.value;
+
+    property bool blueHigh: false
+
+    property bool baseStateFlag: isBaseState;
+
+    property variant backendValue: backendValues.horizontalAlignment;
+
+
+    onBaseStateFlagChanged: {
+        evaluate();
+    }
+
+    property bool isInModel: backendValue.isInModel;
+    onIsInModelChanged: {
+        evaluate();
+    }
+    property bool isInSubState: backendValue.isInSubState;
+    onIsInSubStateChanged: {
+        evaluate();
+    }
+
+    onTheValueChanged: {
+        if (theValue != undefined) {
+            leftButton.checked = theValue == "AlignLeft";
+            centerButton.checked = theValue == "AlignHCenter";
+            rightButton.checked = theValue == "AlignRight";
+        }
+        evaluate();
+    }
+
+    function evaluate() {
+        if (!enabled) {
+            fontSelector.setStyleSheet("color: "+scheme.disabledColor);
+        } else {
+            if (baseStateFlag) {
+                if (backendValue != null && backendValue.isInModel)
+                    blueHigh = true;
+                else
+                    blueHigh = false;
+            } else {
+                if (backendValue != null && backendValue.isInSubState)
+                    blueHigh = true;
+                else
+                    blueHigh = false;
+            }
+        }
+    }
+
     layout: HorizontalLayout {
         topMargin: 6
 
@@ -11,12 +61,18 @@ QGroupBox {
 
             QPushButton {
                 id: leftButton
+
                 checkable: true
-                fixedWidth: 32
+                iconSize.width: 24;
+                iconSize.height: 24;
+                fixedWidth: 52
                 width: fixedWidth
-                fixedHeight: 32
+                fixedHeight: 28
                 height: fixedHeight
-                styleSheetFile: "alignmentleftbutton.css";
+                styleSheetFile: "styledbuttonleft.css";
+
+                iconFromFile: blueHigh ? "images/alignmentleft-h-icon.png" : "images/alignmentleft-icon.png"
+
                 checked: backendValues.horizontalAlignment.value == "AlignLeft"
 
                 onClicked: {
@@ -26,17 +82,27 @@ QGroupBox {
                     rightButton.checked = false;
                 }
 
+                ExtendedFunctionButton {
+                    backendValue:   backendValues.horizontalAlignment;
+                    y: 7
+                    x: 2
+                }
+
             }
             QPushButton {
                 id: centerButton
-                x: 32
+                x: 52
                 checkable: true
-                fixedWidth: 32
+                iconSize.width: 24;
+                iconSize.height: 24;
+                fixedWidth: 31
                 width: fixedWidth
-                fixedHeight: 32
+                fixedHeight: 28
                 height: fixedHeight
+                styleSheetFile: "styledbuttonmiddle.css";
+
+                iconFromFile: blueHigh ? "images/alignmentcenterh-h-icon.png" : "images/alignmentcenterh-icon.png"
 
-                styleSheetFile: "alignmentcenterhbutton.css";
                 checked: backendValues.horizontalAlignment.value == "AlignHCenter"
 
                 onClicked: {
@@ -49,14 +115,18 @@ QGroupBox {
             }
             QPushButton {
                 id: rightButton
-                x: 64
+                x: 83
                 checkable: true
-                fixedWidth: 32
+                iconSize.width: 24;
+                iconSize.height: 24;
+                fixedWidth: 31
                 width: fixedWidth
-                fixedHeight: 32
+                fixedHeight: 28
                 height: fixedHeight
+                styleSheetFile: "styledbuttonright.css";
+
+                iconFromFile: blueHigh ? "images/alignmentright-h-icon.png" : "images/alignmentright-icon.png"
 
-                styleSheetFile: "alignmentrightbutton.css";
                 checked: backendValues.horizontalAlignment.value == "AlignRight"
 
                 onClicked: {