Color animations: more uniform across NWidgets
This commit is contained in:
parent
102aca0fa0
commit
d1f5d301c2
7 changed files with 60 additions and 16 deletions
|
|
@ -37,6 +37,18 @@ RowLayout {
|
|||
border.color: root.checked ? root.activeColor : Color.mOutline
|
||||
border.width: Math.max(1, Style.borderM * scaling)
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationNormal
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationNormal
|
||||
}
|
||||
}
|
||||
|
||||
NIcon {
|
||||
visible: root.checked
|
||||
anchors.centerIn: parent
|
||||
|
|
@ -59,16 +71,5 @@ RowLayout {
|
|||
}
|
||||
onClicked: root.toggled(!root.checked)
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,12 @@ RowLayout {
|
|||
border.color: combo.activeFocus ? Color.mSecondary : Color.mOutline
|
||||
border.width: Math.max(1, Style.borderS * scaling)
|
||||
radius: Style.radiusM * scaling
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: NText {
|
||||
|
|
@ -113,12 +119,22 @@ RowLayout {
|
|||
color: highlighted ? Color.mSurface : Color.mOnSurface
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
width: combo.width - Style.marginM * scaling * 3
|
||||
color: highlighted ? Color.mSecondary : Color.transparent
|
||||
color: highlighted ? Color.mTertiary : Color.transparent
|
||||
radius: Style.radiusS * scaling
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,12 +25,17 @@ RadioButton {
|
|||
|
||||
radius: width * 0.5
|
||||
color: Qt.alpha(Color.mPrimary, root.checked ? 1 : 0)
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationNormal
|
||||
easing.type: Easing.InQuad
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,6 +77,12 @@ Slider {
|
|||
border.color: Color.mPrimary
|
||||
border.width: Math.max(1, Style.borderL * scaling)
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
|
||||
// Press feedback halo (using accent color, low opacity)
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@ RowLayout {
|
|||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,7 +125,6 @@ RowLayout {
|
|||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,6 +51,12 @@ ColumnLayout {
|
|||
color: Color.transparent
|
||||
border.color: input.activeFocus ? Color.mSecondary : Color.transparent
|
||||
border.width: input.activeFocus ? Math.max(1, Style.borderS * scaling) : 0
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
|
|
|
|||
|
|
@ -34,6 +34,18 @@ RowLayout {
|
|||
border.color: root.checked ? Color.mPrimary : Color.mOutline
|
||||
border.width: Math.max(1, Style.borderM * scaling)
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
implicitWidth: (root.baseSize - 5) * scaling
|
||||
implicitHeight: (root.baseSize - 5) * scaling
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue