QmlDesigner: Fix UrlChooser reset behavior

 * Cleanup ColorLogic (imports and source)
 * Shifting a value from Constants.js to Values.qml
 * Add a property alias on AbstractButton to allow changing the font
   family

Change-Id: I51542f69f8f2190030a97164167d71d277147391
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

4 files changed, 46 insertions, 103 deletions

diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml
index 4426e95cde..9c20009779 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml
@@ -24,61 +24,42 @@
 ****************************************************************************/
 
 import QtQuick 2.1
-import QtQuick.Controls 1.1 as Controls
-import QtQuick.Controls.Styles 1.0
-import QtQuickDesignerTheme 1.0
-import "Constants.js" as Constants
 import StudioTheme 1.0 as StudioTheme
 
 QtObject {
     id: innerObject
 
     property variant backendValue
-    property color textColor: StudioTheme.Values.themeTextColor//Theme.color(Theme.PanelTextColorLight)
+    property color textColor: StudioTheme.Values.themeTextColor
     property variant valueFromBackend: backendValue.value;
     property bool baseStateFlag: isBaseState;
     property bool isInModel: backendValue.isInModel;
     property bool isInSubState: backendValue.isInSubState;
     property bool highlight: textColor === __changedTextColor
 
-    property color __defaultTextColor: StudioTheme.Values.themeTextColor//Theme.color(Theme.PanelTextColorLight)
-    readonly property color __changedTextColor: StudioTheme.Values.themeInteraction//Theme.color(Theme.QmlDesigner_HighlightColor)
+    property color __defaultTextColor: StudioTheme.Values.themeTextColor
+    readonly property color __changedTextColor: StudioTheme.Values.themeInteraction
 
-    onBackendValueChanged: {
-        evaluate();
-    }
-
-    onValueFromBackendChanged: {
-        evaluate();
-    }
-
-    onBaseStateFlagChanged: {
-        evaluate();
-    }
-
-    onIsInModelChanged: {
-        evaluate();
-    }
-
-    onIsInSubStateChanged: {
-        evaluate();
-    }
+    onBackendValueChanged: evaluate()
+    onValueFromBackendChanged: evaluate()
+    onBaseStateFlagChanged: evaluate()
+    onIsInModelChanged: evaluate()
+    onIsInSubStateChanged: evaluate()
 
     function evaluate() {
         if (innerObject.backendValue === undefined)
-            return;
+            return
 
-        if (baseStateFlag) {
+        if (innerObject.baseStateFlag) {
             if (innerObject.backendValue.isInModel)
                 innerObject.textColor = __changedTextColor
             else
-                innerObject.textColor = Theme.color(Theme.PanelTextColorLight)
+                innerObject.textColor = __defaultTextColor
         } else {
             if (innerObject.backendValue.isInSubState)
-                innerObject.textColor = Constants.colorsChangedStateText
+                innerObject.textColor = StudioTheme.Values.themeChangedStateText
             else
-                innerObject.textColor = Theme.color(Theme.PanelTextColorLight)
+                innerObject.textColor = __defaultTextColor
         }
-
     }
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml
index 327bfb2335..ce839f77f1 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml
@@ -31,16 +31,15 @@ import QtQuick.Controls.Styles 1.1
 
 RowLayout {
     id: urlChooser
-    property variant backendValue
 
+    property variant backendValue
     property color textColor: colorLogic.highlight ? colorLogic.textColor : "white"
-
-    property string filter: "*.png *.gif *.jpg *.bmp *.jpeg *.svg"
+    property string filter: "*.png *.gif *.jpg *.bmp *.jpeg *.svg *.pbm *.pgm *.ppm *.xbm *.xpm"
 
     FileResourcesModel {
+        id: fileModel
         modelNodeBackendProperty: modelNodeBackend
         filter: urlChooser.filter
-        id: fileModel
     }
 
     ColorLogic {
@@ -57,35 +56,31 @@ RowLayout {
 
         ExtendedFunctionLogic {
             id: extFuncLogic
-            backendValue: comboBox.backendValue
+            backendValue: urlChooser.backendValue
         }
 
         property bool isComplete: false
-
         property bool dirty: false
 
         onEditTextChanged: comboBox.dirty = true
 
         function setCurrentText(text) {
-            if (text === "")
-                return
-
             var index = comboBox.find(text)
             if (index === -1)
                 currentIndex = -1
 
-            editText = text
+            comboBox.editText = text
             comboBox.dirty = false
         }
 
         property string textValue: {
-            if (backendValue.isBound)
-                return backendValue.expression
+            if (urlChooser.backendValue.isBound)
+                return urlChooser.backendValue.expression
 
-            return backendValue.valueToString
+            return urlChooser.backendValue.valueToString
         }
 
-        onTextValueChanged: setCurrentText(textValue)
+        onTextValueChanged: comboBox.setCurrentText(comboBox.textValue)
 
         Layout.fillWidth: true
 
@@ -95,27 +90,27 @@ RowLayout {
 
         onModelChanged: {
             if (!comboBox.isComplete)
-                return;
+                return
 
-            setCurrentText(textValue)
+            comboBox.setCurrentText(comboBox.textValue)
         }
 
         onAccepted: {
             if (!comboBox.isComplete)
-                return;
+                return
 
-            if (backendValue.value !== editText)
-                backendValue.value = editText;
+            if (comboBox.backendValue.value !== comboBox.editText)
+                comboBox.backendValue.value = comboBox.editText
 
             comboBox.dirty = false
         }
 
         onFocusChanged: {
             if (comboBox.dirty)
-               handleActivate(comboBox.currentIndex)
+               comboBox.handleActivate(comboBox.currentIndex)
         }
 
-        onActivated: handleActivate(index)
+        onActivated: comboBox.handleActivate(index)
 
         function handleActivate(index)
         {
@@ -125,19 +120,19 @@ RowLayout {
                 cText = comboBox.editText
 
             if (urlChooser.backendValue === undefined)
-                return;
+                return
 
             if (!comboBox.isComplete)
-                return;
+                return
 
             if (urlChooser.backendValue.value !== cText)
-                urlChooser.backendValue.value = cText;
+                urlChooser.backendValue.value = cText
 
             comboBox.dirty = false
         }
 
         Component.onCompleted: {
-            //Hack to style the text input
+            // Hack to style the text input
             for (var i = 0; i < comboBox.children.length; i++) {
                 if (comboBox.children[i].text !== undefined) {
                     comboBox.children[i].color = urlChooser.textColor
@@ -145,55 +140,18 @@ RowLayout {
                 }
             }
             comboBox.isComplete = true
-            setCurrentText(textValue)
+            comboBox.setCurrentText(comboBox.textValue)
         }
-
     }
 
-    RoundedPanel {
-        roundLeft: true
-        roundRight: true
-        width: 24
-        height: 18
-
-        RoundedPanel {
-            id: darkPanel
-            roundLeft: true
-            roundRight: true
-
-            anchors.fill: parent
-
-            opacity: 0
-
-            Behavior on opacity {
-                PropertyAnimation {
-                    duration: 100
-                }
-            }
-
-
-            gradient: Gradient {
-                GradientStop {color: '#444' ; position: 0}
-                GradientStop {color: '#333' ; position: 1}
-            }
-        }
-
-        Text {
-            renderType: Text.NativeRendering
-            text: "..."
-            color: urlChooser.textColor
-            anchors.centerIn: parent
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                darkPanel.opacity = 1
-                fileModel.openFileDialog()
-                if (fileModel.fileName != "")
-                    backendValue.value = fileModel.fileName
-                darkPanel.opacity = 0
-            }
+    StudioControls.AbstractButton {
+        buttonIcon: "..."
+        iconFont: StudioTheme.Constants.font.family
+        iconColor: urlChooser.textColor
+        onClicked: {
+            fileModel.openFileDialog()
+            if (fileModel.fileName !== "")
+                urlChooser.backendValue.value = fileModel.fileName
         }
     }
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml
index 222334f7ca..409f097822 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml
@@ -32,6 +32,7 @@ T.AbstractButton {
 
     property alias buttonIcon: buttonIcon.text
     property alias iconColor: buttonIcon.color
+    property alias iconFont: buttonIcon.font.family
     property alias backgroundVisible: buttonBackground.visible
     property alias backgroundRadius: buttonBackground.radius
 
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
index 67438bc14b..46d2141adc 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
@@ -122,4 +122,7 @@ QtObject {
     property string themeControlBackgroundInteraction: "#404040" // TODO Name. Right now themeFocusEdit is used for all 'edit' states. Is that correct? Different color!
 
     property string themeTranslationIndicatorBorder: "#7f7f7f"
+
+    // Taken out of Constants.js
+    property string themeChangedStateText: "#99ccff"
 }