diff options
author | Mitch Curtis <mitch.curtis@qt.io> | 2016-05-13 13:21:49 +0200 |
---|---|---|
committer | Mitch Curtis <mitch.curtis@qt.io> | 2016-05-19 14:44:14 +0000 |
commit | 4ecf0a7da5acad1cd49b53e15c5716770b5e3c2b (patch) | |
tree | f28b545f8422f0d0addb82d0c5121d6c3649c67c | |
parent | 56a162cc1ac4702f2a76cbc7dab0acd00aa1ca30 (diff) |
Remove frames from certain controls and lighten others
E.g. Button and Popups look awkward with frames. Other controls
need them, but they're currently too dark. This patch gives them
gentler shades.
Change-Id: I1c3c486935180300b8233a028d25742fe8535995
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>
-rw-r--r-- | src/imports/controls/Button.qml | 6 | ||||
-rw-r--r-- | src/imports/controls/CheckIndicator.qml | 4 | ||||
-rw-r--r-- | src/imports/controls/ComboBox.qml | 8 | ||||
-rw-r--r-- | src/imports/controls/RadioIndicator.qml | 6 | ||||
-rw-r--r-- | src/imports/controls/RangeSlider.qml | 13 | ||||
-rw-r--r-- | src/imports/controls/Slider.qml | 9 | ||||
-rw-r--r-- | src/imports/controls/SpinBox.qml | 8 | ||||
-rw-r--r-- | src/imports/controls/SwitchIndicator.qml | 14 |
8 files changed, 32 insertions, 36 deletions
diff --git a/src/imports/controls/Button.qml b/src/imports/controls/Button.qml index 94c05c40..f875a97a 100644 --- a/src/imports/controls/Button.qml +++ b/src/imports/controls/Button.qml @@ -70,9 +70,9 @@ T.Button { visible: !control.flat || control.down || control.checked || control.highlighted color: control.checked || control.highlighted ? (control.visualFocus ? (control.down ? "#599bff" : "#0066ff") : (control.down ? "#585a5c" : "#353637")) : - (control.visualFocus ? (control.down ? "#cce0ff" : "#f0f6ff") : (control.down ? "#d6d6d6" : "#f6f6f6")) - border.color: control.visualFocus ? "#0066ff" : (control.down ? "#26282a" : "#353637") - border.width: control.flat || control.checked || control.highlighted ? 0 : (control.visualFocus ? 2 : 1) + (control.visualFocus ? (control.down ? "#cce0ff" : "#f0f6ff") : (control.down ? "#d0d0d0" : "#e0e0e0")) + border.color: "#0066ff" + border.width: control.visualFocus ? 2 : 0 } //! [background] } diff --git a/src/imports/controls/CheckIndicator.qml b/src/imports/controls/CheckIndicator.qml index 69a5e266..d78e9e30 100644 --- a/src/imports/controls/CheckIndicator.qml +++ b/src/imports/controls/CheckIndicator.qml @@ -44,9 +44,9 @@ Rectangle { implicitWidth: 28 implicitHeight: 28 - color: control.enabled ? (control.down ? (control.visualFocus ? "#cce0ff" : "#e4e4e4") : "#f6f6f6") : "#353637" + color: control.enabled ? (control.down ? (control.visualFocus ? "#cce0ff" : "#f6f6f6") : "#ffffff") : "#353637" border.width: control.visualFocus ? 2 : 1 - border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.down ? "#26282a" : "#353637")) : "transparent" + border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.down ? "#808080" : "#909090")) : "transparent" Image { x: (parent.width - width) / 2 diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml index da9e8fe2..757af672 100644 --- a/src/imports/controls/ComboBox.qml +++ b/src/imports/controls/ComboBox.qml @@ -95,9 +95,9 @@ T.ComboBox { implicitHeight: 40 color: control.visualFocus ? (control.pressed ? "#cce0ff" : "#f0f6ff") : - (control.pressed || popup.visible ? "#d6d6d6" : "#f6f6f6") - border.color: control.visualFocus ? "#0066ff" : "#353637" - border.width: control.visualFocus ? 2 : 1 + (control.pressed || popup.visible ? "#d0d0d0" : "#e0e0e0") + border.color: "#0066ff" + border.width: control.visualFocus ? 2 : 0 } //! [background] @@ -121,7 +121,7 @@ T.ComboBox { width: listview.width height: listview.height color: "transparent" - border.color: "#353637" + border.color: "#bdbebf" } T.ScrollIndicator.vertical: ScrollIndicator { } diff --git a/src/imports/controls/RadioIndicator.qml b/src/imports/controls/RadioIndicator.qml index b9a17dfe..08c24cc5 100644 --- a/src/imports/controls/RadioIndicator.qml +++ b/src/imports/controls/RadioIndicator.qml @@ -41,9 +41,9 @@ Rectangle { implicitHeight: 28 radius: width / 2 - color: control.down ? (control.visualFocus ? "#cce0ff" : "#e4e4e4") : (control.visualFocus ? "#f0f6ff" : "#f6f6f6") + color: control.down ? (control.visualFocus ? "#cce0ff" : "#f6f6f6") : (control.visualFocus ? "#f0f6ff" : "#ffffff") border.width: control.visualFocus ? 2 : 1 - border.color: control.visualFocus ? "#0066ff" : (control.down ? "#26282a" : "#353637") + border.color: control.visualFocus ? "#0066ff" : (control.down ? "#808080" : "#909090") property Item control @@ -53,7 +53,7 @@ Rectangle { width: 20 height: 20 radius: width / 2 - color: parent.border.color + color: control.down ? "#26282a" : "#353637" visible: control.checked } } diff --git a/src/imports/controls/RangeSlider.qml b/src/imports/controls/RangeSlider.qml index e747e077..8d285298 100644 --- a/src/imports/controls/RangeSlider.qml +++ b/src/imports/controls/RangeSlider.qml @@ -59,8 +59,8 @@ T.RangeSlider { implicitHeight: 28 radius: width / 2 border.width: activeFocus ? 2 : 1 - border.color: control.enabled ? (activeFocus ? "#0066ff" : (control.first.pressed ? "#26282a" : "#353637")) : "#d6d6d6" - color: control.enabled ? (first.pressed ? (activeFocus ? "#cce0ff" : "#e4e4e4") : (activeFocus ? "#f0f6ff" : "#f6f6f6")) : "#fdfdfd" + border.color: control.enabled ? (activeFocus ? "#0066ff" : (control.first.pressed ? "#808080" : "#909090")) : "#d6d6d6" + color: control.enabled ? (first.pressed ? (activeFocus ? "#cce0ff" : "#f6f6f6") : (activeFocus ? "#f0f6ff" : "#ffffff")) : "#fdfdfd" readonly property bool horizontal: control.orientation === Qt.Horizontal } @@ -74,8 +74,8 @@ T.RangeSlider { implicitHeight: 28 radius: width / 2 border.width: activeFocus ? 2 : 1 - border.color: control.enabled ? (activeFocus ? "#0066ff" : (control.first.pressed ? "#26282a" : "#353637")) : "#d6d6d6" - color: control.enabled ? (second.pressed ? (activeFocus ? "#cce0ff" : "#e4e4e4") : (activeFocus ? "#f0f6ff" : "#f6f6f6")) : "#fdfdfd" + border.color: control.enabled ? (activeFocus ? "#0066ff" : (control.first.pressed ? "#808080" : "#909090")) : "#d6d6d6" + color: control.enabled ? (second.pressed ? (activeFocus ? "#cce0ff" : "#f6f6f6") : (activeFocus ? "#f0f6ff" : "#ffffff")) : "#fdfdfd" readonly property bool horizontal: control.orientation === Qt.Horizontal } @@ -90,9 +90,8 @@ T.RangeSlider { width: horizontal ? control.availableWidth : implicitWidth height: horizontal ? implicitHeight : control.availableHeight radius: 3 - border.color: "#353637" - color: "#ffffff" - opacity: control.enabled ? 1 : 0.2 + opacity: control.enabled ? 1 : 0.3 + color: "#e0e0e0" scale: horizontal && control.mirrored ? -1 : 1 readonly property bool horizontal: control.orientation === Qt.Horizontal diff --git a/src/imports/controls/Slider.qml b/src/imports/controls/Slider.qml index 0d4b7125..a44a6c80 100644 --- a/src/imports/controls/Slider.qml +++ b/src/imports/controls/Slider.qml @@ -56,9 +56,9 @@ T.Slider { implicitWidth: 28 implicitHeight: 28 radius: width / 2 - color: control.enabled ? (control.pressed ? (control.visualFocus ? "#cce0ff" : "#e4e4e4") : (control.visualFocus ? "#f0f6ff" : "#f6f6f6")) : "#fdfdfd" + color: control.enabled ? (control.pressed ? (control.visualFocus ? "#cce0ff" : "#f6f6f6") : (control.visualFocus ? "#f0f6ff" : "#ffffff")) : "#fdfdfd" border.width: control.visualFocus ? 2 : 1 - border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.pressed ? "#26282a" : "#353637")) : "#d6d6d6" + border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.pressed ? "#808080" : "#909090")) : "#d6d6d6" readonly property bool horizontal: control.orientation === Qt.Horizontal } @@ -73,9 +73,8 @@ T.Slider { width: horizontal ? control.availableWidth : implicitWidth height: horizontal ? implicitHeight : control.availableHeight radius: 3 - border.color: "#353637" - color: "#ffffff" - opacity: control.enabled ? 1 : 0.2 + opacity: control.enabled ? 1 : 0.3 + color: "#e0e0e0" scale: horizontal && control.mirrored ? -1 : 1 readonly property bool horizontal: control.orientation === Qt.Horizontal diff --git a/src/imports/controls/SpinBox.qml b/src/imports/controls/SpinBox.qml index 81bbb1b2..93db1c8e 100644 --- a/src/imports/controls/SpinBox.qml +++ b/src/imports/controls/SpinBox.qml @@ -98,8 +98,7 @@ T.SpinBox { height: parent.height implicitWidth: 40 implicitHeight: 40 - color: up.pressed ? "#e4e4e4" : "#f6f6f6" - border.color: control.enabled ? "#353637" : "#bdbebf" + color: up.pressed ? "#d0d0d0" : "#e0e0e0" Rectangle { x: (parent.width - width) / 2 @@ -124,8 +123,7 @@ T.SpinBox { height: parent.height implicitWidth: 40 implicitHeight: 40 - color: down.pressed ? "#e4e4e4" : "#f6f6f6" - border.color: control.enabled ? "#353637" : "#bdbebf" + color: down.pressed ? "#d0d0d0" : "#e0e0e0" Rectangle { x: (parent.width - width) / 2 @@ -140,7 +138,7 @@ T.SpinBox { //! [background] background: Rectangle { implicitWidth: 140 - border.color: "#bdbebf" + border.color: "#e0e0e0" } //! [background] } diff --git a/src/imports/controls/SwitchIndicator.qml b/src/imports/controls/SwitchIndicator.qml index f03fa86c..f11f7147 100644 --- a/src/imports/controls/SwitchIndicator.qml +++ b/src/imports/controls/SwitchIndicator.qml @@ -47,10 +47,10 @@ Item { width: 56 height: 16 radius: 8 - opacity: control.enabled ? 1 : 0.2 - color: control.checked ? (control.visualFocus ? "#0066ff" : "#353637") : "#ffffff" - border.width: control.visualFocus ? 2 : 1 - border.color: control.checked ? "transparent" : (control.visualFocus ? "#0066ff" : "#353637") + opacity: control.enabled ? 1 : 0.3 + color: control.checked ? (control.visualFocus ? "#0066ff" : "#353637") : "#e0e0e0" + border.width: control.visualFocus ? 2 : 0 + border.color: "#0066ff" } Rectangle { @@ -59,12 +59,12 @@ Item { width: 28 height: 28 radius: 16 - color: control.enabled ? (control.pressed ? (control.visualFocus ? "#cce0ff" : "#e4e4e4") : (control.visualFocus ? "#f0f6ff" : "#f6f6f6")) : "#fdfdfd" + color: control.enabled ? (control.down ? (control.visualFocus ? "#cce0ff" : "#f6f6f6") : (control.visualFocus ? "#f0f6ff" : "#ffffff")) : "#fdfdfd" border.width: control.visualFocus ? 2 : 1 - border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.pressed ? "#26282a" : "#353637")) : "#d6d6d6" + border.color: control.enabled ? (control.visualFocus ? "#0066ff" : (control.down ? "#808080" : "#909090")) : "#d6d6d6" Behavior on x { - enabled: !control.pressed + enabled: !control.down SmoothedAnimation { velocity: 200 } } } |