Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-08-05 21:18:30 -04:00
Code Packages Releases Activity

qs: integrate with dank-qml-common

Browse Source
This commit is contained in:
bbedward
2026-07-16 09:24:37 -04:00
parent 5dfd875b9e
commit 92ba96d9f9
127 changed files with 452 additions and 14660 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickshell/Widgets/DankToggle.qml
+2 -193
View File
@@ -1,194 +1,3 @@
import QtQuick
import qs.Common
import qs.Widgets
import qs.DankCommon.Widgets as DankCommon
Item {
id: toggle
LayoutMirroring.enabled: I18n.isRtl
LayoutMirroring.childrenInherit: true
// API
property bool checked: false
property bool toggling: false
property string text: ""
property string description: ""
property color descriptionColor: Theme.surfaceVariantText
property bool hideText: false
signal clicked
signal toggled(bool checked)
signal toggleCompleted(bool checked)
readonly property bool showText: text && !hideText
readonly property int trackWidth: 52
readonly property int trackHeight: 30
readonly property int insetCircle: 24
width: showText ? parent.width : trackWidth
height: showText ? Math.max(trackHeight, textColumn.implicitHeight + Theme.spacingM * 2) : trackHeight
function handleClick() {
if (!enabled)
return;
clicked();
toggled(!checked);
}
StyledRect {
id: background
anchors.fill: parent
radius: showText ? Theme.cornerRadius : 0
color: "transparent"
visible: showText
StateLayer {
visible: showText
disabled: !toggle.enabled
stateColor: Theme.primary
cornerRadius: parent.radius
onClicked: toggle.handleClick()
}
}
Row {
anchors.left: parent.left
anchors.right: toggleTrack.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingXS
visible: showText
Column {
id: textColumn
width: parent.width
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingXS
StyledText {
text: toggle.text
font.pixelSize: Appearance.fontSize.normal
font.weight: Font.Medium
opacity: toggle.enabled ? 1 : 0.4
width: parent.width
horizontalAlignment: Text.AlignLeft
}
StyledText {
text: toggle.description
font.pixelSize: Appearance.fontSize.small
color: toggle.descriptionColor
wrapMode: Text.WordWrap
width: parent.width
visible: toggle.description.length > 0
horizontalAlignment: Text.AlignLeft
}
}
}
StyledRect {
id: toggleTrack
width: showText ? trackWidth : Math.max(parent.width, trackWidth)
height: showText ? trackHeight : Math.max(parent.height, trackHeight)
anchors.right: parent.right
anchors.rightMargin: showText ? Theme.spacingM : 0
anchors.verticalCenter: parent.verticalCenter
radius: Theme.cornerRadius
// Distinguish disabled checked vs unchecked so unchecked disabled switches don't look enabled
color: !toggle.enabled ? (toggle.checked ? Qt.alpha(Theme.surfaceText, 0.12) : Theme.withAlpha(Qt.alpha(Theme.surfaceText, 0.12), 0)) : (toggle.checked ? Theme.primary : Theme.surfaceVariantAlpha)
opacity: toggle.toggling ? 0.6 : 1
// M3 disabled unchecked border: on surface 12% opacity
border.color: toggle.checked ? Theme.withAlpha(Theme.outline, 0) : (!toggle.enabled ? Qt.alpha(Theme.surfaceText, 0.12) : Theme.outline)
readonly property int pad: Math.round((height - thumb.width) / 2)
readonly property int edgeLeft: pad
readonly property int edgeRight: width - thumb.width - pad
StyledRect {
id: thumb
width: toggle.checked ? insetCircle : insetCircle - 4
height: toggle.checked ? insetCircle : insetCircle - 4
radius: Theme.cornerRadius
anchors.verticalCenter: parent.verticalCenter
// M3 disabled thumb:
// checked = solid surface | unchecked = outlined off-state thumb
color: !toggle.enabled ? (toggle.checked ? Theme.surface : Theme.withAlpha(Theme.surface, 0)) : (toggle.checked ? Theme.surface : Theme.outline)
border.color: !toggle.enabled ? (toggle.checked ? Theme.withAlpha(Qt.alpha(Theme.surfaceText, 0.38), 0) : Qt.alpha(Theme.surfaceText, 0.38)) : Theme.outline
border.width: (toggle.checked && toggle.enabled) ? 1 : 2
x: toggle.checked ? toggleTrack.edgeRight : toggleTrack.edgeLeft
Behavior on x {
SequentialAnimation {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
}
ScriptAction {
script: {
toggle.toggleCompleted(toggle.checked);
}
}
}
}
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasized
}
}
Behavior on border.width {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasized
}
}
DankIcon {
id: checkIcon
anchors.centerIn: parent
name: "check"
size: 20
// M3 disabled icon: on surface 38%
color: toggle.enabled ? Theme.surfaceText : Qt.alpha(Theme.surfaceText, 0.38)
filled: true
opacity: (toggle.checked && toggle.enabled) ? 1 : 0
scale: (toggle.checked && toggle.enabled) ? 1 : 0.6
Behavior on opacity {
NumberAnimation {
duration: Anims.durShort
easing.type: Easing.BezierSpline
easing.bezierCurve: Anims.emphasized
}
}
Behavior on scale {
NumberAnimation {
duration: Anims.durShort
easing.type: Easing.BezierSpline
easing.bezierCurve: Anims.emphasized
}
}
}
}
StateLayer {
disabled: !toggle.enabled
stateColor: Theme.primary
cornerRadius: parent.radius
onClicked: toggle.handleClick()
}
}
}
DankCommon.DankToggle {}