From 4ecf0a7da5acad1cd49b53e15c5716770b5e3c2b Mon Sep 17 00:00:00 2001 From: Mitch Curtis Date: Fri, 13 May 2016 13:21:49 +0200 Subject: 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 --- src/imports/controls/Button.qml | 6 +++--- src/imports/controls/CheckIndicator.qml | 4 ++-- src/imports/controls/ComboBox.qml | 8 ++++---- src/imports/controls/RadioIndicator.qml | 6 +++--- src/imports/controls/RangeSlider.qml | 13 ++++++------- src/imports/controls/Slider.qml | 9 ++++----- src/imports/controls/SpinBox.qml | 8 +++----- 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 } } } -- cgit v1.2.3