From 8ed484329fc277366d7bbcd63832b0effbbbbf9f Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Tue, 28 Jun 2016 14:19:31 +0200 Subject: [PATCH] Universal: implement hover effects [ChangeLog][Universal] Implemented hover effects Task-number: QTBUG-50003 Change-Id: I67d382b0aaef06fc9c16b734f735dcc62262b6f5 Reviewed-by: Mitch Curtis --- src/imports/controls/universal/Button.qml | 9 +++++++ .../controls/universal/CheckDelegate.qml | 5 ++-- .../controls/universal/CheckIndicator.qml | 17 +++++++----- src/imports/controls/universal/ComboBox.qml | 3 ++- src/imports/controls/universal/Dial.qml | 3 ++- .../controls/universal/ItemDelegate.qml | 5 ++-- src/imports/controls/universal/MenuItem.qml | 3 ++- .../controls/universal/RadioDelegate.qml | 5 ++-- .../controls/universal/RadioIndicator.qml | 6 +++-- .../controls/universal/RangeSlider.qml | 11 +++++--- src/imports/controls/universal/Slider.qml | 7 +++-- src/imports/controls/universal/SpinBox.qml | 19 +++++++++----- .../controls/universal/SwipeDelegate.qml | 3 ++- .../controls/universal/SwitchDelegate.qml | 5 ++-- .../controls/universal/SwitchIndicator.qml | 26 ++++++++++++------- src/imports/controls/universal/TabButton.qml | 4 +-- src/imports/controls/universal/TextArea.qml | 3 ++- src/imports/controls/universal/TextField.qml | 3 ++- src/imports/controls/universal/ToolButton.qml | 10 +++++-- 19 files changed, 100 insertions(+), 47 deletions(-) diff --git a/src/imports/controls/universal/Button.qml b/src/imports/controls/universal/Button.qml index 6954d31aa0..0a81e3608d 100644 --- a/src/imports/controls/universal/Button.qml +++ b/src/imports/controls/universal/Button.qml @@ -72,5 +72,14 @@ T.Button { color: control.down ? control.Universal.baseMediumLowColor : control.enabled && (control.highlighted || control.checked) ? control.Universal.accent : control.Universal.baseLowColor + + Rectangle { + width: parent.width + height: parent.height + color: "transparent" + visible: control.hovered + border.width: 2 // ButtonBorderThemeThickness + border.color: control.Universal.baseMediumLowColor + } } } diff --git a/src/imports/controls/universal/CheckDelegate.qml b/src/imports/controls/universal/CheckDelegate.qml index c0ca272e8a..1156eb00f2 100644 --- a/src/imports/controls/universal/CheckDelegate.qml +++ b/src/imports/controls/universal/CheckDelegate.qml @@ -76,8 +76,9 @@ T.CheckDelegate { } background: Rectangle { - visible: control.down || control.highlighted || control.visualFocus - color: control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor + visible: control.down || control.highlighted || control.visualFocus || control.hovered + color: control.down ? control.Universal.listMediumColor : + control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor Rectangle { width: parent.width height: parent.height diff --git a/src/imports/controls/universal/CheckIndicator.qml b/src/imports/controls/universal/CheckIndicator.qml index eeecf2645d..96abfbe862 100644 --- a/src/imports/controls/universal/CheckIndicator.qml +++ b/src/imports/controls/universal/CheckIndicator.qml @@ -43,7 +43,7 @@ Rectangle { implicitHeight: 20 color: !control.enabled ? "transparent" : - control.down && control.checkState !== Qt.PartiallyChecked ? control.Universal.baseMediumColor : + control.down && !partiallyChecked ? control.Universal.baseMediumColor : control.checkState === Qt.Checked ? control.Universal.accent : "transparent" border.color: !control.enabled ? control.Universal.baseLowColor : control.down ? control.Universal.baseMediumColor : @@ -51,6 +51,7 @@ Rectangle { border.width: 2 // CheckBoxBorderThemeThickness property Item control + readonly property bool partiallyChecked: control.checkState === Qt.PartiallyChecked Image { x: (parent.width - width) / 2 @@ -65,11 +66,15 @@ Rectangle { Rectangle { x: (parent.width - width) / 2 y: (parent.height - height) / 2 - width: parent.width / 2 - height: parent.height / 2 + width: partiallyChecked ? parent.width / 2 : parent.width + height: partiallyChecked ? parent.height / 2 : parent.height - visible: control.checkState === Qt.PartiallyChecked - color: !control.enabled ? control.Universal.baseLowColor : - control.down ? control.Universal.baseMediumColor : control.Universal.baseMediumHighColor + visible: !control.pressed && control.hovered || partiallyChecked + color: !partiallyChecked ? "transparent" : + !control.enabled ? control.Universal.baseLowColor : + control.down ? control.Universal.baseMediumColor : + control.hovered ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor + border.width: partiallyChecked ? 0 : 2 // CheckBoxBorderThemeThickness + border.color: control.Universal.baseMediumLowColor } } diff --git a/src/imports/controls/universal/ComboBox.qml b/src/imports/controls/universal/ComboBox.qml index b5bb026c02..f462138aa2 100644 --- a/src/imports/controls/universal/ComboBox.qml +++ b/src/imports/controls/universal/ComboBox.qml @@ -91,7 +91,8 @@ T.ComboBox { border.width: 2 // ComboBoxBorderThemeThickness border.color: !control.enabled ? control.Universal.baseLowColor : - control.pressed || popup.visible ? control.Universal.baseMediumLowColor : control.Universal.baseMediumLowColor + control.pressed || popup.visible ? control.Universal.baseMediumLowColor : + control.hovered ? control.Universal.baseMediumColor : control.Universal.baseMediumLowColor color: !control.enabled ? control.Universal.baseLowColor : control.pressed || popup.visible ? control.Universal.listMediumColor : control.Universal.altMediumLowColor diff --git a/src/imports/controls/universal/Dial.qml b/src/imports/controls/universal/Dial.qml index 6781d38752..b3e0d44c1e 100644 --- a/src/imports/controls/universal/Dial.qml +++ b/src/imports/controls/universal/Dial.qml @@ -64,7 +64,8 @@ T.Dial { radius: width / 2 color: !control.enabled ? control.Universal.baseLowColor : - control.pressed ? control.Universal.baseMediumColor : control.Universal.baseMediumHighColor + control.pressed ? control.Universal.baseMediumColor : + control.hovered ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor transform: [ Translate { diff --git a/src/imports/controls/universal/ItemDelegate.qml b/src/imports/controls/universal/ItemDelegate.qml index 6822d65871..42fb7da60f 100644 --- a/src/imports/controls/universal/ItemDelegate.qml +++ b/src/imports/controls/universal/ItemDelegate.qml @@ -70,8 +70,9 @@ T.ItemDelegate { } background: Rectangle { - visible: control.down || control.highlighted || control.visualFocus - color: control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor + visible: control.down || control.highlighted || control.visualFocus || control.hovered + color: control.down ? control.Universal.listMediumColor : + control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor Rectangle { width: parent.width height: parent.height diff --git a/src/imports/controls/universal/MenuItem.qml b/src/imports/controls/universal/MenuItem.qml index d8fdbcd0c3..b0f9c3c062 100644 --- a/src/imports/controls/universal/MenuItem.qml +++ b/src/imports/controls/universal/MenuItem.qml @@ -81,7 +81,8 @@ T.MenuItem { implicitHeight: 40 color: !control.enabled ? control.Universal.baseLowColor : - control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor + control.down ? control.Universal.listMediumColor : + control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor Rectangle { x: 1; y: 1 diff --git a/src/imports/controls/universal/RadioDelegate.qml b/src/imports/controls/universal/RadioDelegate.qml index 09f86f15e8..272b7c431f 100644 --- a/src/imports/controls/universal/RadioDelegate.qml +++ b/src/imports/controls/universal/RadioDelegate.qml @@ -78,8 +78,9 @@ T.RadioDelegate { } background: Rectangle { - visible: control.down || control.highlighted || control.visualFocus - color: control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor + visible: control.down || control.highlighted || control.visualFocus || control.hovered + color: control.down ? control.Universal.listMediumColor : + control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor Rectangle { width: parent.width height: parent.height diff --git a/src/imports/controls/universal/RadioIndicator.qml b/src/imports/controls/universal/RadioIndicator.qml index 65790e6afe..eebf8492fb 100644 --- a/src/imports/controls/universal/RadioIndicator.qml +++ b/src/imports/controls/universal/RadioIndicator.qml @@ -45,7 +45,8 @@ Rectangle { border.width: 2 // RadioButtonBorderThemeThickness border.color: control.checked ? "transparent" : !control.enabled ? control.Universal.baseLowColor : - control.down ? control.Universal.baseMediumColor : control.Universal.baseMediumHighColor + control.down ? control.Universal.baseMediumColor : + control.hovered ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor property var control @@ -72,6 +73,7 @@ Rectangle { radius: width / 2 opacity: control.checked ? 1 : 0 color: !control.enabled ? control.Universal.baseLowColor : - control.down ? control.Universal.baseMediumColor : control.Universal.baseMediumHighColor + control.down ? control.Universal.baseMediumColor : + control.hovered ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor } } diff --git a/src/imports/controls/universal/RangeSlider.qml b/src/imports/controls/universal/RangeSlider.qml index ec2ff7c89c..36bbc6528a 100644 --- a/src/imports/controls/universal/RangeSlider.qml +++ b/src/imports/controls/universal/RangeSlider.qml @@ -60,7 +60,9 @@ T.RangeSlider { y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height)) radius: 4 - color: control.first.pressed ? control.Universal.chromeHighColor : control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor + color: control.first.pressed ? control.Universal.chromeHighColor : + control.first.hovered ? control.Universal.chromeAltLowColor : + control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor } second.handle: Rectangle { @@ -73,7 +75,9 @@ T.RangeSlider { y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height)) radius: 4 - color: control.second.pressed ? control.Universal.chromeHighColor : control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor + color: control.second.pressed ? control.Universal.chromeHighColor : + control.second.hovered ? control.Universal.chromeAltLowColor : + control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor } background: Item { @@ -95,7 +99,8 @@ T.RangeSlider { width: parent.horizontal ? parent.width : 2 // SliderBackgroundThemeHeight height: !parent.horizontal ? parent.height : 2 // SliderBackgroundThemeHeight - color: control.enabled ? control.Universal.baseMediumLowColor : control.Universal.chromeDisabledHighColor + color: control.hovered && !control.pressed ? control.Universal.baseMediumColor : + control.enabled ? control.Universal.baseMediumLowColor : control.Universal.chromeDisabledHighColor } Rectangle { diff --git a/src/imports/controls/universal/Slider.qml b/src/imports/controls/universal/Slider.qml index baf9121185..c7255fac0a 100644 --- a/src/imports/controls/universal/Slider.qml +++ b/src/imports/controls/universal/Slider.qml @@ -60,7 +60,9 @@ T.Slider { y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height)) radius: 4 - color: control.pressed ? control.Universal.chromeHighColor : control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor + color: control.pressed ? control.Universal.chromeHighColor : + control.hovered ? control.Universal.chromeAltLowColor : + control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor } background: Item { @@ -82,7 +84,8 @@ T.Slider { width: parent.horizontal ? parent.width : 2 // SliderTrackThemeHeight height: !parent.horizontal ? parent.height : 2 // SliderTrackThemeHeight - color: control.enabled ? control.Universal.baseMediumLowColor : control.Universal.chromeDisabledHighColor + color: control.hovered && !control.pressed ? control.Universal.baseMediumColor : + control.enabled ? control.Universal.baseMediumLowColor : control.Universal.chromeDisabledHighColor } Rectangle { diff --git a/src/imports/controls/universal/SpinBox.qml b/src/imports/controls/universal/SpinBox.qml index d36471141d..43d7ae5d6f 100644 --- a/src/imports/controls/universal/SpinBox.qml +++ b/src/imports/controls/universal/SpinBox.qml @@ -92,9 +92,11 @@ T.SpinBox { x: 2; y: 4 width: parent.width - 4 height: parent.height - 8 - color: !control.up.pressed ? "transparent" : - control.activeFocus ? control.Universal.accent - : control.Universal.chromeDisabledLowColor + color: control.activeFocus ? control.Universal.accent : + control.up.pressed ? control.Universal.baseMediumLowColor : + control.up.hovered ? control.Universal.baseLowColor : "transparent" + visible: control.up.pressed || control.up.hovered + opacity: control.activeFocus && !control.up.pressed ? 0.4 : 1.0 } Image { @@ -118,9 +120,11 @@ T.SpinBox { x: 2; y: 4 width: parent.width - 4 height: parent.height - 8 - color: !control.down.pressed ? "transparent" : - control.activeFocus ? control.Universal.accent - : control.Universal.chromeDisabledLowColor + color: control.activeFocus ? control.Universal.accent : + control.down.pressed ? control.Universal.baseMediumLowColor : + control.down.hovered ? control.Universal.baseLowColor : "transparent" + visible: control.down.pressed || control.down.hovered + opacity: control.activeFocus && !control.down.pressed ? 0.4 : 1.0 } Image { @@ -140,7 +144,8 @@ T.SpinBox { border.width: 2 // TextControlBorderThemeThickness border.color: !control.enabled ? control.Universal.baseLowColor : - control.activeFocus ? control.Universal.accent : control.Universal.chromeDisabledLowColor + control.activeFocus ? control.Universal.accent : + control.hovered ? control.Universal.baseMediumColor : control.Universal.chromeDisabledLowColor color: control.enabled ? control.Universal.background : control.Universal.baseLowColor } } diff --git a/src/imports/controls/universal/SwipeDelegate.qml b/src/imports/controls/universal/SwipeDelegate.qml index 82c1e744a8..8d56282940 100644 --- a/src/imports/controls/universal/SwipeDelegate.qml +++ b/src/imports/controls/universal/SwipeDelegate.qml @@ -84,7 +84,8 @@ T.SwipeDelegate { Rectangle { width: parent.width height: parent.height - color: control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor + color: control.down ? control.Universal.listMediumColor : + control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor Rectangle { width: parent.width height: parent.height diff --git a/src/imports/controls/universal/SwitchDelegate.qml b/src/imports/controls/universal/SwitchDelegate.qml index 558f5cfb6a..1a6fb4fc81 100644 --- a/src/imports/controls/universal/SwitchDelegate.qml +++ b/src/imports/controls/universal/SwitchDelegate.qml @@ -76,8 +76,9 @@ T.SwitchDelegate { } background: Rectangle { - visible: control.down || control.highlighted || control.visualFocus - color: control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor + visible: control.down || control.highlighted || control.visualFocus || control.hovered + color: control.down ? control.Universal.listMediumColor : + control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor Rectangle { width: parent.width height: parent.height diff --git a/src/imports/controls/universal/SwitchIndicator.qml b/src/imports/controls/universal/SwitchIndicator.qml index b3d44d9e70..18881e009e 100644 --- a/src/imports/controls/universal/SwitchIndicator.qml +++ b/src/imports/controls/universal/SwitchIndicator.qml @@ -38,17 +38,24 @@ import QtQuick 2.6 import QtQuick.Templates 2.0 as T import QtQuick.Controls.Universal 2.0 -Rectangle { +Item { implicitWidth: 44 implicitHeight: 20 - radius: 10 - color: !control.enabled ? "transparent" : - control.pressed ? control.Universal.baseMediumColor : - control.checked ? control.Universal.accent : "transparent" - border.color: !control.enabled ? control.Universal.baseLowColor : - control.checked && !control.pressed ? control.Universal.accent : control.Universal.baseMediumColor - border.width: 2 + Rectangle { + width: parent.width + height: parent.height + + radius: 10 + color: !control.enabled ? "transparent" : + control.pressed ? control.Universal.baseMediumColor : + control.checked ? control.Universal.accent : "transparent" + border.color: !control.enabled ? control.Universal.baseLowColor : + control.checked && !control.pressed ? control.Universal.accent : + control.hovered && !control.checked && !control.pressed ? control.Universal.baseHighColor : control.Universal.baseMediumColor + opacity: control.hovered && control.checked && !control.pressed ? (control.Universal.theme === Universal.Light ? 0.7 : 0.9) : 1.0 + border.width: 2 + } property Item control @@ -58,7 +65,8 @@ Rectangle { radius: 5 color: !control.enabled ? control.Universal.baseLowColor : - control.pressed || control.checked ? control.Universal.chromeWhiteColor : control.Universal.baseMediumHighColor + control.pressed || control.checked ? control.Universal.chromeWhiteColor : + control.hovered && !control.checked ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor x: Math.max(5, Math.min(parent.width - width - 5, control.visualPosition * parent.width - (width / 2))) diff --git a/src/imports/controls/universal/TabButton.qml b/src/imports/controls/universal/TabButton.qml index d503c86a58..c863f022b6 100644 --- a/src/imports/controls/universal/TabButton.qml +++ b/src/imports/controls/universal/TabButton.qml @@ -56,7 +56,7 @@ T.TabButton { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - opacity: control.checked || control.down ? 1.0 : 0.2 - color: control.Universal.foreground + opacity: control.checked || control.down || control.hovered ? 1.0 : 0.2 + color: control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground } } diff --git a/src/imports/controls/universal/TextArea.qml b/src/imports/controls/universal/TextArea.qml index 9acda0db73..23b54273a5 100644 --- a/src/imports/controls/universal/TextArea.qml +++ b/src/imports/controls/universal/TextArea.qml @@ -84,7 +84,8 @@ T.TextArea { border.width: 2 // TextControlBorderThemeThickness border.color: !control.enabled ? control.Universal.baseLowColor : - control.activeFocus ? control.Universal.accent : control.Universal.chromeDisabledLowColor + control.activeFocus ? control.Universal.accent : + control.hovered ? control.Universal.baseMediumColor : control.Universal.chromeDisabledLowColor color: control.enabled ? control.Universal.background : control.Universal.baseLowColor } } diff --git a/src/imports/controls/universal/TextField.qml b/src/imports/controls/universal/TextField.qml index 64efc77e62..0ee396e431 100644 --- a/src/imports/controls/universal/TextField.qml +++ b/src/imports/controls/universal/TextField.qml @@ -85,7 +85,8 @@ T.TextField { border.width: 2 // TextControlBorderThemeThickness border.color: !control.enabled ? control.Universal.baseLowColor : - control.activeFocus ? control.Universal.accent : control.Universal.chromeDisabledLowColor + control.activeFocus ? control.Universal.accent : + control.hovered ? control.Universal.baseMediumColor : control.Universal.chromeDisabledLowColor color: control.enabled ? control.Universal.background : control.Universal.baseLowColor } } diff --git a/src/imports/controls/universal/ToolButton.qml b/src/imports/controls/universal/ToolButton.qml index cb87130d17..011a4f3261 100644 --- a/src/imports/controls/universal/ToolButton.qml +++ b/src/imports/controls/universal/ToolButton.qml @@ -66,7 +66,13 @@ T.ToolButton { implicitWidth: 68 implicitHeight: 48 // AppBarThemeCompactHeight - color: control.down ? control.Universal.listMediumColor : - control.enabled && (control.highlighted || control.checked) ? control.Universal.accent : "transparent" + color: control.enabled && (control.highlighted || control.checked) ? control.Universal.accent : "transparent" + + Rectangle { + width: parent.width + height: parent.height + visible: control.down || control.hovered + color: control.down ? control.Universal.listMediumColor : control.Universal.listLowColor + } } }