Skip to content

GitLab

Commit 4530b332 authored by Noah Davis's avatar Noah Davis 🌵
Browse files

[style/impl/] add color and opacity animations 

Also add a way to separate component unloading from visibility changes
parent 79991bf1
Hide whitespace changes
Inline Side-by-side
style/impl/BackgroundGradient.qml
View file @ 4530b332
......@@ -8,8 +8,9 @@ import org.kde.kirigami 2.14 as Kirigami
Loader {
id: root
property real radius: Kirigami.Units.smallRadius
property bool unloaded: !visible
anchors.fill: parent
sourceComponent: visible ? raisedGradientComponent : null
sourceComponent: unloaded ? null : raisedGradientComponent
Component {
id: raisedGradientComponent
Rectangle {
......@@ -26,6 +27,13 @@ Loader {
}
}
radius: root.radius
opacity: parent.opacity
Behavior on opacity {
OpacityAnimator {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
}
}
}
style/impl/ButtonBackground.qml
View file @ 4530b332
......@@ -39,7 +39,11 @@ Kirigami.ShadowedRectangle {
if (control.down || control.checked ) {
Kirigami.Theme.alternateBackgroundColor
} else if (control.flat) {
return "transparent"
return Qt.rgba(
control.palette.button.r,
control.palette.button.g,
control.palette.button.b,
0)
} else {
control.palette.button
}
......@@ -58,15 +62,29 @@ Kirigami.ShadowedRectangle {
width: Kirigami.Units.smallBorder
}
Behavior on color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
Behavior on border.color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
SmallShadow {
id: shadowRect
visible: !control.editable && !control.flat && !control.down && control.enabled
opacity: control.down ? 0 : 1
visible: !control.editable && !control.flat && control.enabled
z: -1
radius: mainBackground.radius
}
FocusRect {
id: focRect
id: focusRect
baseRadius: mainBackground.radius
visible: control.visualFocus
}
......@@ -74,7 +92,7 @@ Kirigami.ShadowedRectangle {
BackgroundGradient {
id: bgGradient
radius: mainBackground.radius
// rotation: control.checked ? 180 : 0
visible: control.enabled && !control.editable && !control.flat && !control.down && !control.hovered
opacity: control.down || control.hovered ? 0 : 1
visible: !control.editable && !control.flat && control.enabled
}
}
style/impl/CheckIndicator.qml
View file @ 4530b332
......@@ -26,7 +26,7 @@ Rectangle {
Kirigami.Theme.colorSet: Kirigami.Theme.Button
Kirigami.Theme.inherit: false
color: control.enabled && control.down || root.checkState !== Qt.Unchecked ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor
color: (control.down || root.checkState !== Qt.Unchecked) ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor
radius: Kirigami.Units.smallRadius
......@@ -37,9 +37,23 @@ Rectangle {
//Kirigami.ColorUtils.tintWithAlpha(root.color, Kirigami.Theme.textColor, 0.3)
}
Behavior on color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
Behavior on border.color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
SmallShadow {
id: shadow
visible: !control.editable && !control.flat && !control.down && control.enabled
opacity: control.down ? 0 : 1
visible: control.enabled
z: -1
radius: parent.radius
}
......
style/impl/ComboBoxBackground.qml
View file @ 4530b332
......@@ -28,7 +28,11 @@ Rectangle {
if (!control.popup.visible && (control.down || control.checked) ) {
Kirigami.Theme.alternateBackgroundColor
} else if (control.flat) {
"transparent"
Qt.rgba(
Kirigami.Theme.backgroundColor.r,
Kirigami.Theme.backgroundColor.g,
Kirigami.Theme.backgroundColor.b,
0)
} else {
Kirigami.Theme.backgroundColor
}
......@@ -41,17 +45,31 @@ Rectangle {
width: Kirigami.Units.smallBorder
}
Behavior on color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
Behavior on border.color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
radius: Kirigami.Units.smallRadius
SmallShadow {
id: shadow
visible: !control.editable && !control.flat && !control.down && control.enabled
opacity: control.down ? 0 : 1
visible: !control.editable && !control.flat && control.enabled
z: -1
radius: parent.radius
}
FocusRect {
id: focRect
id: focusRect
baseRadius: mainBackground.radius
visible: control.visualFocus
}
......@@ -59,7 +77,7 @@ Rectangle {
BackgroundGradient {
id: bgGradient
radius: mainBackground.radius
// rotation: control.checked ? 180 : 0
visible: !control.editable && !control.flat && !control.down && !control.hovered && control.enabled
opacity: control.down || control.hovered ? 0 : 1
visible: !control.editable && !control.flat && control.enabled
}
}
style/impl/DelegateBackground.qml
View file @ 4530b332
......@@ -14,15 +14,38 @@ Loader {
property bool listViewHasHighlight: isInListView && control.ListView.view.highlight
property int currentIndex: isInListView ? control.ListView.view.currentIndex : 0
property int count: isInListView ? control.ListView.view.count : 0
sourceComponent: control.highlighted || control.down || control.hovered || control.visualFocus ? backgroundComponent : null
// Rectangle compatibility properties. 3rd party devs might assume that these properties are available.
property color color: {
if (control.down ) {
return Kirigami.Theme.alternateBackgroundColor
} else if (control.highlighted) {
return Kirigami.Theme.highlightColor
} else {
return Qt.rgba(
Kirigami.Theme.backgroundColor.r,
Kirigami.Theme.backgroundColor.g,
Kirigami.Theme.backgroundColor.b,
0)
}
}
property real radius: 0
property QtObject border: QtObject {
property real width: 0
property color color: Kirigami.Theme.focusColor
}
visible: control.highlighted || control.down || control.hovered || control.visualFocus
sourceComponent: visible ? backgroundComponent : null
Component {
id: backgroundComponent
Kirigami.ShadowedRectangle {
id: mainBackground
implicitHeight: Kirigami.Units.mediumControlHeight
anchors.fill: parent
// radius: Kirigami.Units.smallRadius
radius: root.radius
// readonly property real topRadius: root.isCurrentItem && root.currentIndex == 0 ? Kirigami.Units.smallRadius : 0
//readonly property real bottomRadius: root.isCurrentItem && root.currentIndex == root.count-1 ? Kirigami.Units.smallRadius : 0
......@@ -33,19 +56,20 @@ Loader {
//bottomRightRadius: Kirigami.Units.smallRadius//root.bottomRadius
//}
color: {
if (control.down) {
return Kirigami.Theme.alternateBackgroundColor
} else if (control.highlighted) {
return Kirigami.Theme.highlightColor
} else {
return "transparent"
color: root.color
border {
width: root.border.width
color: root.border.color
}
Behavior on color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
// border {
// width: Kirigami.Units.smallBorder
// color: Kirigami.Theme.focusColor
// }
Rectangle {
height: Kirigami.Units.smallBorder
anchors {
......@@ -53,7 +77,7 @@ Loader {
right: parent.right
top: parent.top
}
color: Kirigami.Theme.focusColor
color: mainBackground.border.color
}
Rectangle {
height: Kirigami.Units.smallBorder
......@@ -62,7 +86,7 @@ Loader {
right: parent.right
bottom: parent.bottom
}
color: Kirigami.Theme.focusColor
color: mainBackground.border.color
}
}
}
......
style/impl/FocusRect.qml
View file @ 4530b332
......@@ -8,8 +8,9 @@ import org.kde.kirigami 2.14 as Kirigami
Loader {
id: root
property real baseRadius: 0
property bool unloaded: !visible
anchors.fill: parent
sourceComponent: visible ? focusRectComponent : null
sourceComponent: unloaded ? null : focusRectComponent
Component {
id: focusRectComponent
Rectangle {
......@@ -43,6 +44,15 @@ Loader {
)
border.width: parent.border.width
}
opacity: 0
OpacityAnimator on opacity {
id: opacityAnimator
running: true
from: 0
to: 1
duration: Kirigami.Units.shortDuration
easing.type: Easing.InCubic
}
}
}
}
style/impl/LargeShadow.qml
View file @ 4530b332
......@@ -7,10 +7,11 @@ import org.kde.kirigami 2.14 as Kirigami
Loader {
id: root
property real radius: Kirigami.Units.smallRadius
property bool unloaded: !visible
sourceComponent: unloaded || Kirigami.Theme.lowPowerHardware ? null : shadowComponent
anchors.fill: parent
z: -1
property real radius: Kirigami.Units.smallRadius
sourceComponent: visible && !Kirigami.Theme.lowPowerHardware ? shadowComponent : null
Component {
id: shadowComponent
Kirigami.ShadowedRectangle {
......@@ -22,6 +23,13 @@ Loader {
size: 16
yOffset: 4
}
opacity: parent.opacity
Behavior on opacity {
OpacityAnimator {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
}
}
}
style/impl/MediumShadow.qml
View file @ 4530b332
......@@ -7,10 +7,11 @@ import org.kde.kirigami 2.14 as Kirigami
Loader {
id: root
property real radius: Kirigami.Units.smallRadius
property bool unloaded: !visible
sourceComponent: unloaded || Kirigami.Theme.lowPowerHardware ? null : shadowComponent
anchors.fill: parent
z: -1
property real radius: Kirigami.Units.smallRadius
sourceComponent: visible && !Kirigami.Theme.lowPowerHardware ? shadowComponent : null
Component {
id: shadowComponent
Kirigami.ShadowedRectangle {
......@@ -22,6 +23,13 @@ Loader {
size: 10
yOffset: 2
}
opacity: parent.opacity
Behavior on opacity {
OpacityAnimator {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
}
}
}
style/impl/RadioIndicator.qml
View file @ 4530b332
......@@ -24,7 +24,7 @@ Rectangle {
Kirigami.Theme.colorSet: Kirigami.Theme.Button
Kirigami.Theme.inherit: false
color: control.down || control.checked ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor
color: (control.down || control.checked) ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor
border {
width: Kirigami.Units.smallBorder
......@@ -32,9 +32,23 @@ Rectangle {
Kirigami.Theme.focusColor : Kirigami.Theme.separatorColor
}
Behavior on color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
Behavior on border.color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
SmallShadow {
id: shadow
visible: !control.flat && !control.down && control.enabled
opacity: control.down ? 0 : 1
visible: control.enabled
z: -1
radius: parent.radius
}
......
style/impl/SliderHandle.qml
View file @ 4530b332
......@@ -57,6 +57,13 @@ Rectangle {
Kirigami.Theme.focusColor : Kirigami.Theme.separatorColor
}
Behavior on border.color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
Behavior on x {
enabled: root.loaded && !Kirigami.Settings.hasTransientTouchInput
SmoothedAnimation {
......@@ -75,7 +82,8 @@ Rectangle {
SmallShadow {
id: shadow
visible: !root.pressed && control.enabled
opacity: root.pressed ? 0 : 1
visible: control.enabled
z: -1
radius: parent.radius
}
......
style/impl/SmallShadow.qml
View file @ 4530b332
......@@ -7,10 +7,11 @@ import org.kde.kirigami 2.14 as Kirigami
Loader {
id: root
property real radius: Kirigami.Units.smallRadius
property bool unloaded: !visible
sourceComponent: unloaded || Kirigami.Theme.lowPowerHardware ? null : shadowComponent
anchors.fill: parent
z: -1
property real radius: Kirigami.Units.smallRadius
sourceComponent: visible && !Kirigami.Theme.lowPowerHardware ? shadowComponent : null
Component {
id: shadowComponent
Kirigami.ShadowedRectangle {
......@@ -22,6 +23,13 @@ Loader {
size: 3
yOffset: 1
}
opacity: parent.opacity
Behavior on opacity {
OpacityAnimator {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
}
}
}
style/impl/SwitchIndicator.qml
View file @ 4530b332
......@@ -83,6 +83,13 @@ Item {
Kirigami.Theme.focusColor : Kirigami.Theme.separatorColor
}
Behavior on border.color {
ColorAnimation {
duration: Kirigami.Units.shortDuration
easing.type: Easing.OutCubic
}
}
Behavior on x {
enabled: handle.loaded// && !Kirigami.Settings.hasTransientTouchInput
// Using SmoothedAnimation because the fill effect is anchored to the handle.
......@@ -94,7 +101,8 @@ Item {
SmallShadow {
id: shadow
visible: !control.flat && !control.down && control.enabled
opacity: control.down ? 0 : 1
visible: control.enabled
z: -1
radius: parent.radius
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment