mirror of
https://github.com/Nheko-Reborn/nheko.git
synced 2024-11-22 03:00:46 +03:00
Merge pull request #1409 from Nheko-Reborn/uiTweaks
Overhaul switch appearance
This commit is contained in:
commit
8136659024
1 changed files with 60 additions and 7 deletions
|
@ -12,6 +12,57 @@ Switch {
|
|||
|
||||
implicitWidth: indicatorItem.width
|
||||
|
||||
state: checked ? "on" : "off"
|
||||
states: [
|
||||
State {
|
||||
name: "off"
|
||||
|
||||
PropertyChanges {
|
||||
target: track
|
||||
border.color: "#767676"
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: handle
|
||||
x: 0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "on"
|
||||
|
||||
PropertyChanges {
|
||||
target: track
|
||||
border.color: Nheko.colors.highlight
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: handle
|
||||
x: indicatorItem.width - handle.width
|
||||
}
|
||||
}
|
||||
]
|
||||
transitions: [
|
||||
Transition {
|
||||
to: "off"
|
||||
reversible: true
|
||||
|
||||
ParallelAnimation {
|
||||
NumberAnimation {
|
||||
target: handle
|
||||
property: "x"
|
||||
duration: 200
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
|
||||
ColorAnimation {
|
||||
target: track
|
||||
properties: "color,border.color"
|
||||
duration: 200
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
indicator: Item {
|
||||
id: indicatorItem
|
||||
|
||||
|
@ -20,23 +71,25 @@ Switch {
|
|||
y: parent.height / 2 - height / 2
|
||||
|
||||
Rectangle {
|
||||
height: 3 * parent.height / 4
|
||||
id: track
|
||||
|
||||
height: parent.height * 0.6
|
||||
radius: height / 2
|
||||
width: parent.width - height
|
||||
x: radius
|
||||
y: parent.height / 2 - height / 2
|
||||
color: toggleButton.checked ? Nheko.colors.highlight : "grey"
|
||||
border.color: "#cccccc"
|
||||
color: Qt.rgba(border.color.r, border.color.g, border.color.b, 0.6)
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
x: toggleButton.checked ? parent.width - width : 0
|
||||
id: handle
|
||||
|
||||
y: parent.height / 2 - height / 2
|
||||
width: parent.height
|
||||
width: parent.height * 0.9
|
||||
height: width
|
||||
radius: width / 2
|
||||
color: toggleButton.enabled ? "whitesmoke" : "#cccccc"
|
||||
border.color: "#ebebeb"
|
||||
color: Nheko.colors.button
|
||||
border.color: "#767676"
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue