mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-28 07:22:50 -05:00
100
quickshell/Modules/Settings/Widgets/SettingsSliderCard.qml
Normal file
100
quickshell/Modules/Settings/Widgets/SettingsSliderCard.qml
Normal file
@@ -0,0 +1,100 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import qs.Common
|
||||
import qs.Widgets
|
||||
|
||||
StyledRect {
|
||||
id: root
|
||||
|
||||
property string tab: ""
|
||||
property var tags: []
|
||||
|
||||
property string title: ""
|
||||
property string description: ""
|
||||
property string iconName: ""
|
||||
property alias value: slider.value
|
||||
property alias minimum: slider.minimum
|
||||
property alias maximum: slider.maximum
|
||||
property alias unit: slider.unit
|
||||
property int defaultValue: -1
|
||||
|
||||
signal sliderValueChanged(int newValue)
|
||||
|
||||
width: parent?.width ?? 0
|
||||
height: Theme.spacingL * 2 + contentColumn.height
|
||||
radius: Theme.cornerRadius
|
||||
color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
|
||||
|
||||
Column {
|
||||
id: contentColumn
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: Theme.spacingL
|
||||
anchors.rightMargin: Theme.spacingL
|
||||
spacing: Theme.spacingS
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
id: headerIcon
|
||||
name: root.iconName
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: root.iconName !== ""
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingXS
|
||||
width: parent.width - headerIcon.width - (root.defaultValue >= 0 ? resetButton.width + Theme.spacingS : 0) - Theme.spacingM
|
||||
|
||||
StyledText {
|
||||
text: root.title
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
visible: root.title !== ""
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.description
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
wrapMode: Text.WordWrap
|
||||
width: parent.width
|
||||
visible: root.description !== ""
|
||||
}
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
id: resetButton
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
buttonSize: 36
|
||||
iconName: "restart_alt"
|
||||
iconSize: 20
|
||||
visible: root.defaultValue >= 0 && slider.value !== root.defaultValue
|
||||
backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
|
||||
iconColor: Theme.surfaceVariantText
|
||||
onClicked: {
|
||||
slider.value = root.defaultValue;
|
||||
root.sliderValueChanged(root.defaultValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DankSlider {
|
||||
id: slider
|
||||
width: parent.width
|
||||
height: 32
|
||||
showValue: true
|
||||
wheelEnabled: false
|
||||
thumbOutlineColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
|
||||
onSliderValueChanged: newValue => root.sliderValueChanged(newValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
113
quickshell/Modules/Settings/Widgets/SettingsToggleCard.qml
Normal file
113
quickshell/Modules/Settings/Widgets/SettingsToggleCard.qml
Normal file
@@ -0,0 +1,113 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import qs.Common
|
||||
import qs.Widgets
|
||||
|
||||
StyledRect {
|
||||
id: root
|
||||
|
||||
property string tab: ""
|
||||
property var tags: []
|
||||
|
||||
property string title: ""
|
||||
property string description: ""
|
||||
property string iconName: ""
|
||||
property bool checked: false
|
||||
property bool enabled: true
|
||||
|
||||
default property alias content: expandedContent.children
|
||||
readonly property bool hasContent: expandedContent.children.length > 0
|
||||
|
||||
signal toggled(bool checked)
|
||||
|
||||
width: parent?.width ?? 0
|
||||
height: Theme.spacingL * 2 + mainColumn.height
|
||||
radius: Theme.cornerRadius
|
||||
color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
|
||||
|
||||
Column {
|
||||
id: mainColumn
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: Theme.spacingL
|
||||
anchors.rightMargin: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
height: headerColumn.height
|
||||
|
||||
Column {
|
||||
id: headerColumn
|
||||
anchors.left: parent.left
|
||||
anchors.right: toggleSwitch.left
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
Row {
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
id: headerIcon
|
||||
name: root.iconName
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: root.iconName !== ""
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: headerText
|
||||
text: root.title
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: root.title !== ""
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: descriptionText
|
||||
text: root.description
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
wrapMode: Text.WordWrap
|
||||
width: parent.width
|
||||
visible: root.description !== ""
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
id: toggleSwitch
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
hideText: true
|
||||
checked: root.checked
|
||||
enabled: root.enabled
|
||||
onToggled: checked => root.toggled(checked)
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
anchors.fill: parent
|
||||
disabled: !root.enabled
|
||||
stateColor: Theme.primary
|
||||
cornerRadius: root.radius
|
||||
onClicked: {
|
||||
if (!root.enabled)
|
||||
return;
|
||||
root.toggled(!root.checked);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: expandedContent
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
visible: root.checked && root.hasContent
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user