qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Universal: implement hover effects 

[ChangeLog][Universal] Implemented hover effects

Task-number: QTBUG-50003
Change-Id: I67d382b0aaef06fc9c16b734f735dcc62262b6f5
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
This commit is contained in:
J-P Nurmi 2016-06-28 14:19:31 +02:00
parent f92e8de455
commit 8ed484329f
19 changed files with 100 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/imports/controls/universal/Button.qml
View File

@ -72,5 +72,14 @@ T.Button {
color: control.down ? control.Universal.baseMediumLowColor : color: control.down ? control.Universal.baseMediumLowColor :
control.enabled && (control.highlighted || control.checked) ? control.Universal.accent : control.enabled && (control.highlighted || control.checked) ? control.Universal.accent :
control.Universal.baseLowColor control.Universal.baseLowColor
Rectangle {
width: parent.width
height: parent.height
color: "transparent"
visible: control.hovered
border.width: 2 // ButtonBorderThemeThickness
border.color: control.Universal.baseMediumLowColor
}
} }
} }

5
src/imports/controls/universal/CheckDelegate.qml
View File

@ -76,8 +76,9 @@ T.CheckDelegate {
} }
background: Rectangle { background: Rectangle {
visible: control.down || control.highlighted || control.visualFocus visible: control.down || control.highlighted || control.visualFocus || control.hovered
color: control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor color: control.down ? control.Universal.listMediumColor :
control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
Rectangle { Rectangle {
width: parent.width width: parent.width
height: parent.height height: parent.height

17
src/imports/controls/universal/CheckIndicator.qml
View File

@ -43,7 +43,7 @@ Rectangle {
implicitHeight: 20 implicitHeight: 20
color: !control.enabled ? "transparent" : 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" control.checkState === Qt.Checked ? control.Universal.accent : "transparent"
border.color: !control.enabled ? control.Universal.baseLowColor : border.color: !control.enabled ? control.Universal.baseLowColor :
control.down ? control.Universal.baseMediumColor : control.down ? control.Universal.baseMediumColor :
@ -51,6 +51,7 @@ Rectangle {
border.width: 2 // CheckBoxBorderThemeThickness border.width: 2 // CheckBoxBorderThemeThickness
property Item control property Item control
readonly property bool partiallyChecked: control.checkState === Qt.PartiallyChecked
Image { Image {
x: (parent.width - width) / 2 x: (parent.width - width) / 2
@ -65,11 +66,15 @@ Rectangle {
Rectangle { Rectangle {
x: (parent.width - width) / 2 x: (parent.width - width) / 2
y: (parent.height - height) / 2 y: (parent.height - height) / 2
width: parent.width / 2 width: partiallyChecked ? parent.width / 2 : parent.width
height: parent.height / 2 height: partiallyChecked ? parent.height / 2 : parent.height
visible: control.checkState === Qt.PartiallyChecked visible: !control.pressed && control.hovered || partiallyChecked
color: !control.enabled ? control.Universal.baseLowColor : color: !partiallyChecked ? "transparent" :
control.down ? control.Universal.baseMediumColor : control.Universal.baseMediumHighColor !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
} }
} }

3
src/imports/controls/universal/ComboBox.qml
View File

@ -91,7 +91,8 @@ T.ComboBox {
border.width: 2 // ComboBoxBorderThemeThickness border.width: 2 // ComboBoxBorderThemeThickness
border.color: !control.enabled ? control.Universal.baseLowColor : 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 : color: !control.enabled ? control.Universal.baseLowColor :
control.pressed || popup.visible ? control.Universal.listMediumColor : control.Universal.altMediumLowColor control.pressed || popup.visible ? control.Universal.listMediumColor : control.Universal.altMediumLowColor

3
src/imports/controls/universal/Dial.qml
View File

@ -64,7 +64,8 @@ T.Dial {
radius: width / 2 radius: width / 2
color: !control.enabled ? control.Universal.baseLowColor : 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: [ transform: [
Translate { Translate {

5
src/imports/controls/universal/ItemDelegate.qml
View File

@ -70,8 +70,9 @@ T.ItemDelegate {
} }
background: Rectangle { background: Rectangle {
visible: control.down || control.highlighted || control.visualFocus visible: control.down || control.highlighted || control.visualFocus || control.hovered
color: control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor color: control.down ? control.Universal.listMediumColor :
control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
Rectangle { Rectangle {
width: parent.width width: parent.width
height: parent.height height: parent.height

3
src/imports/controls/universal/MenuItem.qml
View File

@ -81,7 +81,8 @@ T.MenuItem {
implicitHeight: 40 implicitHeight: 40
color: !control.enabled ? control.Universal.baseLowColor : 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 { Rectangle {
x: 1; y: 1 x: 1; y: 1

5
src/imports/controls/universal/RadioDelegate.qml
View File

@ -78,8 +78,9 @@ T.RadioDelegate {
} }
background: Rectangle { background: Rectangle {
visible: control.down || control.highlighted || control.visualFocus visible: control.down || control.highlighted || control.visualFocus || control.hovered
color: control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor color: control.down ? control.Universal.listMediumColor :
control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
Rectangle { Rectangle {
width: parent.width width: parent.width
height: parent.height height: parent.height

6
src/imports/controls/universal/RadioIndicator.qml
View File

@ -45,7 +45,8 @@ Rectangle {
border.width: 2 // RadioButtonBorderThemeThickness border.width: 2 // RadioButtonBorderThemeThickness
border.color: control.checked ? "transparent" : border.color: control.checked ? "transparent" :
!control.enabled ? control.Universal.baseLowColor : !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 property var control
@ -72,6 +73,7 @@ Rectangle {
radius: width / 2 radius: width / 2
opacity: control.checked ? 1 : 0 opacity: control.checked ? 1 : 0
color: !control.enabled ? control.Universal.baseLowColor : 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
} }
} }

11
src/imports/controls/universal/RangeSlider.qml
View File

@ -60,7 +60,9 @@ T.RangeSlider {
y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height)) y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
radius: 4 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 { second.handle: Rectangle {
@ -73,7 +75,9 @@ T.RangeSlider {
y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height)) y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
radius: 4 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 { background: Item {
@ -95,7 +99,8 @@ T.RangeSlider {
width: parent.horizontal ? parent.width : 2 // SliderBackgroundThemeHeight width: parent.horizontal ? parent.width : 2 // SliderBackgroundThemeHeight
height: !parent.horizontal ? parent.height : 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 { Rectangle {

7
src/imports/controls/universal/Slider.qml
View File

@ -60,7 +60,9 @@ T.Slider {
y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height)) y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
radius: 4 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 { background: Item {
@ -82,7 +84,8 @@ T.Slider {
width: parent.horizontal ? parent.width : 2 // SliderTrackThemeHeight width: parent.horizontal ? parent.width : 2 // SliderTrackThemeHeight
height: !parent.horizontal ? parent.height : 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 { Rectangle {

19
src/imports/controls/universal/SpinBox.qml
View File

@ -92,9 +92,11 @@ T.SpinBox {
x: 2; y: 4 x: 2; y: 4
width: parent.width - 4 width: parent.width - 4
height: parent.height - 8 height: parent.height - 8
color: !control.up.pressed ? "transparent" : color: control.activeFocus ? control.Universal.accent :
control.activeFocus ? control.Universal.accent control.up.pressed ? control.Universal.baseMediumLowColor :
: control.Universal.chromeDisabledLowColor 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 { Image {
@ -118,9 +120,11 @@ T.SpinBox {
x: 2; y: 4 x: 2; y: 4
width: parent.width - 4 width: parent.width - 4
height: parent.height - 8 height: parent.height - 8
color: !control.down.pressed ? "transparent" : color: control.activeFocus ? control.Universal.accent :
control.activeFocus ? control.Universal.accent control.down.pressed ? control.Universal.baseMediumLowColor :
: control.Universal.chromeDisabledLowColor 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 { Image {
@ -140,7 +144,8 @@ T.SpinBox {
border.width: 2 // TextControlBorderThemeThickness border.width: 2 // TextControlBorderThemeThickness
border.color: !control.enabled ? control.Universal.baseLowColor : 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 color: control.enabled ? control.Universal.background : control.Universal.baseLowColor
} }
} }

3
src/imports/controls/universal/SwipeDelegate.qml
View File

@ -84,7 +84,8 @@ T.SwipeDelegate {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: parent.height 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 { Rectangle {
width: parent.width width: parent.width
height: parent.height height: parent.height

5
src/imports/controls/universal/SwitchDelegate.qml
View File

@ -76,8 +76,9 @@ T.SwitchDelegate {
} }
background: Rectangle { background: Rectangle {
visible: control.down || control.highlighted || control.visualFocus visible: control.down || control.highlighted || control.visualFocus || control.hovered
color: control.down ? control.Universal.listMediumColor : control.Universal.altMediumLowColor color: control.down ? control.Universal.listMediumColor :
control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
Rectangle { Rectangle {
width: parent.width width: parent.width
height: parent.height height: parent.height

26
src/imports/controls/universal/SwitchIndicator.qml
View File

@ -38,17 +38,24 @@ import QtQuick 2.6
import QtQuick.Templates 2.0 as T import QtQuick.Templates 2.0 as T
import QtQuick.Controls.Universal 2.0 import QtQuick.Controls.Universal 2.0
Rectangle { Item {
implicitWidth: 44 implicitWidth: 44
implicitHeight: 20 implicitHeight: 20
radius: 10 Rectangle {
color: !control.enabled ? "transparent" : width: parent.width
control.pressed ? control.Universal.baseMediumColor : height: parent.height
control.checked ? control.Universal.accent : "transparent"
border.color: !control.enabled ? control.Universal.baseLowColor : radius: 10
control.checked && !control.pressed ? control.Universal.accent : control.Universal.baseMediumColor color: !control.enabled ? "transparent" :
border.width: 2 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 property Item control
@ -58,7 +65,8 @@ Rectangle {
radius: 5 radius: 5
color: !control.enabled ? control.Universal.baseLowColor : 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, x: Math.max(5, Math.min(parent.width - width - 5,
control.visualPosition * parent.width - (width / 2))) control.visualPosition * parent.width - (width / 2)))

4
src/imports/controls/universal/TabButton.qml
View File

@ -56,7 +56,7 @@ T.TabButton {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
opacity: control.checked || control.down ? 1.0 : 0.2 opacity: control.checked || control.down || control.hovered ? 1.0 : 0.2
color: control.Universal.foreground color: control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground
} }
} }

3
src/imports/controls/universal/TextArea.qml
View File

@ -84,7 +84,8 @@ T.TextArea {
border.width: 2 // TextControlBorderThemeThickness border.width: 2 // TextControlBorderThemeThickness
border.color: !control.enabled ? control.Universal.baseLowColor : 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 color: control.enabled ? control.Universal.background : control.Universal.baseLowColor
} }
} }

3
src/imports/controls/universal/TextField.qml
View File

@ -85,7 +85,8 @@ T.TextField {
border.width: 2 // TextControlBorderThemeThickness border.width: 2 // TextControlBorderThemeThickness
border.color: !control.enabled ? control.Universal.baseLowColor : 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 color: control.enabled ? control.Universal.background : control.Universal.baseLowColor
} }
} }

10
src/imports/controls/universal/ToolButton.qml
View File

@ -66,7 +66,13 @@ T.ToolButton {
implicitWidth: 68 implicitWidth: 68
implicitHeight: 48 // AppBarThemeCompactHeight implicitHeight: 48 // AppBarThemeCompactHeight
color: control.down ? control.Universal.listMediumColor : color: control.enabled && (control.highlighted || control.checked) ? control.Universal.accent : "transparent"
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
}
} }
} }