Cosmetic changes in DefaultFileDialog and dialog shared controls

Implementation of the button for QML-based dialogs matches
the one for QML examples.  The button and the text field
use system palette colors, as does the file dialog.

Change-Id: Ibf45d57bdab8799ae6aa69ba543c0e05c55b01d3
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>

src/imports/dialogs/DefaultFileDialog.qml

@@ -213,7 +213,7 @@ AbstractFileDialog {
             delegate: folderDelegate
             highlight: Rectangle {
                 color: "transparent"
-                border.color: palette.midlight
+                border.color: Qt.darker(palette.window, 1.3)
             }
             highlightMoveDuration: 0
             highlightMoveVelocity: -1
@@ -257,11 +257,10 @@ AbstractFileDialog {
             id: titleBar
             width: parent.width
             height: currentPathField.height * 1.5
-            BorderImage {
-                source: "images/titlebar.sci"
+            Rectangle {
                 anchors.fill: parent
-                anchors.topMargin: -7
-                anchors.bottomMargin: -7
+                color: Qt.darker(palette.window, 1.1)
+                border.color: Qt.darker(palette.window, 1.3)
             }
             Rectangle {
                 id: upButton
@@ -291,7 +290,7 @@ AbstractFileDialog {
                 anchors.left: parent.left; anchors.right: parent.right; anchors.verticalCenter: parent.verticalCenter
                 anchors.leftMargin: textX; anchors.rightMargin: 4
                 text: root.urlToPath(view.model.folder)
-                color: "white"
+                color: palette.text
                 elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
                 MouseArea {
                     anchors.fill: parent
@@ -320,12 +319,8 @@ AbstractFileDialog {
             width: parent.width
             height: buttonRow.height + buttonRow.spacing * 2
             anchors.bottom: parent.bottom
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: palette.dark }
-                GradientStop { position: 0.3; color: palette.mid }
-                GradientStop { position: 0.85; color: palette.mid }
-                GradientStop { position: 1.0; color: palette.light }
-            }
+            color: Qt.darker(palette.window, 1.1)
+            border.color: Qt.darker(palette.window, 1.3)
 
             Row {
                 id: buttonRow

src/imports/dialogs/dialogs.pro

@@ -23,8 +23,6 @@ QML_FILES += \
     qml/TextField.qml \
     qml/qmldir \
     images/folder.png \
-    images/titlebar.png \
-    images/titlebar.sci \
     images/up.png
 
 QT += quick-private gui-private core-private

src/imports/dialogs/images/titlebar.sci

-border.left: 10
-border.top: 12
-border.bottom: 12
-border.right: 10
-source: titlebar.png

src/imports/dialogs/qml/Button.qml

@@ -41,49 +41,47 @@
 import QtQuick 2.1
 
 Item {
-    height: label.implicitHeight * 2
-    width: Math.max(label.implicitWidth * 1.2, height * 2.5);
-    anchors.verticalCenter: parent.verticalCenter
-    property alias text: label.text
-    property string tooltip
+    id: container
+
+    property alias text: buttonLabel.text
+    property alias label: buttonLabel
     signal clicked
+    property alias containsMouse: mouseArea.containsMouse
+    property alias pressed: mouseArea.pressed
+    implicitHeight: buttonLabel.implicitHeight
+    implicitWidth: buttonLabel.implicitWidth
+    height: buttonLabel.implicitHeight + 12
+    width: Math.max(80, implicitWidth + 8)
+
     SystemPalette { id: palette }
+
     Rectangle {
-        antialiasing: true
-        border.color: mouseArea.pressed ? palette.highlight : palette.light
-        color: "transparent"
-        anchors.fill: parent
-        anchors.rightMargin: 1
-        anchors.bottomMargin: 1
-        radius: 3
-    }
-    Rectangle {
-        border.color: palette.dark
+        id: frame
         anchors.fill: parent
-        anchors.leftMargin: 1
-        anchors.topMargin: 1
-        radius: 3
-    }
-    Rectangle {
+        color: palette.button
         gradient: Gradient {
-            GradientStop { position: 0.0; color: mouseArea.pressed ? palette.dark : palette.light }
-            GradientStop { position: 0.2; color: palette.button }
-            GradientStop { position: 0.8; color: palette.button }
-            GradientStop { position: 1.0; color: mouseArea.pressed ? palette.light : palette.dark }
+            GradientStop { position: 0.0; color: mouseArea.pressed ? Qt.darker(palette.button, 1.3) : palette.button }
+            GradientStop { position: 1.0; color: Qt.darker(palette.button, 1.3) }
         }
-        anchors.fill: parent
-        anchors.margins: 1
-        radius: 3
-    }
-    Text {
-        id: label
-        anchors.centerIn: parent
-        color: palette.buttonText
+        antialiasing: true
+        radius: 5
+        border.color: Qt.darker(palette.button, 1.5)
+        border.width: 1
     }
 
     MouseArea {
         id: mouseArea
         anchors.fill: parent
-        onClicked: parent.clicked()
+        onClicked: container.clicked()
+        hoverEnabled: true
+    }
+
+    Text {
+        id: buttonLabel
+        width: parent.width
+        horizontalAlignment: Text.Center
+        text: container.text
+        color: palette.buttonText
+        anchors.verticalCenter: parent.verticalCenter
     }
 }

src/imports/dialogs/qml/TextField.qml

@@ -53,16 +53,9 @@ Item {
     Rectangle {
         id: rect
         anchors.fill: parent
-        anchors.leftMargin: -radius
-        border.color: palette.light
         radius: height / 4
-        antialiasing: true
-        gradient: Gradient {
-            GradientStop { position: 0.0; color: palette.dark }
-            GradientStop { position: 0.2; color: palette.button }
-            GradientStop { position: 0.8; color: palette.button }
-            GradientStop { position: 1.0; color: palette.light }
-        }
+        color: palette.button
+        border.color: Qt.darker(palette.button, 1.5)
     }
 
     TextInput {