mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2025-12-11 07:52:50 -05:00
refactor: replace SettingsToggle with DankToggle
This commit is contained in:
bbedward
@@ -461,7 +461,7 @@ PanelWindow {
|
|||||||
width: parent.width
|
width: parent.width
|
||||||
spacing: Theme.spacingM
|
spacing: Theme.spacingM
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "24-Hour Format"
|
text: "24-Hour Format"
|
||||||
description: "Use 24-hour time format instead of 12-hour AM/PM"
|
description: "Use 24-hour time format instead of 12-hour AM/PM"
|
||||||
checked: Prefs.use24HourClock
|
checked: Prefs.use24HourClock
|
||||||
@@ -484,7 +484,7 @@ PanelWindow {
|
|||||||
width: parent.width
|
width: parent.width
|
||||||
spacing: Theme.spacingM
|
spacing: Theme.spacingM
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "Fahrenheit"
|
text: "Fahrenheit"
|
||||||
description: "Use Fahrenheit instead of Celsius for temperature"
|
description: "Use Fahrenheit instead of Celsius for temperature"
|
||||||
checked: Prefs.useFahrenheit
|
checked: Prefs.useFahrenheit
|
||||||
@@ -570,7 +570,7 @@ PanelWindow {
|
|||||||
width: parent.width
|
width: parent.width
|
||||||
spacing: Theme.spacingM
|
spacing: Theme.spacingM
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "Focused Window"
|
text: "Focused Window"
|
||||||
description: "Show the currently focused application in the top bar"
|
description: "Show the currently focused application in the top bar"
|
||||||
checked: Prefs.showFocusedWindow
|
checked: Prefs.showFocusedWindow
|
||||||
@@ -579,7 +579,7 @@ PanelWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "Weather Widget"
|
text: "Weather Widget"
|
||||||
description: "Display weather information in the top bar"
|
description: "Display weather information in the top bar"
|
||||||
checked: Prefs.showWeather
|
checked: Prefs.showWeather
|
||||||
@@ -588,7 +588,7 @@ PanelWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "Media Controls"
|
text: "Media Controls"
|
||||||
description: "Show currently playing media in the top bar"
|
description: "Show currently playing media in the top bar"
|
||||||
checked: Prefs.showMusic
|
checked: Prefs.showMusic
|
||||||
@@ -597,7 +597,7 @@ PanelWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "Clipboard Button"
|
text: "Clipboard Button"
|
||||||
description: "Show clipboard access button in the top bar"
|
description: "Show clipboard access button in the top bar"
|
||||||
checked: Prefs.showClipboard
|
checked: Prefs.showClipboard
|
||||||
@@ -606,7 +606,7 @@ PanelWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "System Resources"
|
text: "System Resources"
|
||||||
description: "Display CPU and RAM usage indicators"
|
description: "Display CPU and RAM usage indicators"
|
||||||
checked: Prefs.showSystemResources
|
checked: Prefs.showSystemResources
|
||||||
@@ -615,7 +615,7 @@ PanelWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "System Tray"
|
text: "System Tray"
|
||||||
description: "Show system tray icons in the top bar"
|
description: "Show system tray icons in the top bar"
|
||||||
checked: Prefs.showSystemTray
|
checked: Prefs.showSystemTray
|
||||||
@@ -638,7 +638,7 @@ PanelWindow {
|
|||||||
width: parent.width
|
width: parent.width
|
||||||
spacing: Theme.spacingM
|
spacing: Theme.spacingM
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "Workspace Index Numbers"
|
text: "Workspace Index Numbers"
|
||||||
description: "Show workspace index numbers in the top bar workspace switcher"
|
description: "Show workspace index numbers in the top bar workspace switcher"
|
||||||
checked: Prefs.showWorkspaceIndex
|
checked: Prefs.showWorkspaceIndex
|
||||||
@@ -647,7 +647,7 @@ PanelWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "Workspace Padding"
|
text: "Workspace Padding"
|
||||||
description: "Always show a minimum of 3 workspaces, even if fewer are available"
|
description: "Always show a minimum of 3 workspaces, even if fewer are available"
|
||||||
checked: Prefs.showWorkspacePadding
|
checked: Prefs.showWorkspacePadding
|
||||||
@@ -669,7 +669,7 @@ PanelWindow {
|
|||||||
width: parent.width
|
width: parent.width
|
||||||
spacing: Theme.spacingL
|
spacing: Theme.spacingL
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "Night Mode"
|
text: "Night Mode"
|
||||||
description: "Apply warm color temperature to reduce eye strain"
|
description: "Apply warm color temperature to reduce eye strain"
|
||||||
checked: Prefs.nightModeEnabled
|
checked: Prefs.nightModeEnabled
|
||||||
@@ -682,7 +682,7 @@ PanelWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SettingsToggle {
|
DankToggle {
|
||||||
text: "Light Mode"
|
text: "Light Mode"
|
||||||
description: "Use light theme instead of dark theme"
|
description: "Use light theme instead of dark theme"
|
||||||
checked: Prefs.isLightMode
|
checked: Prefs.isLightMode
|
||||||
|
|||||||
@@ -1,120 +0,0 @@
|
|||||||
import QtQuick
|
|
||||||
import qs.Common
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: root
|
|
||||||
|
|
||||||
property string text: ""
|
|
||||||
property string description: ""
|
|
||||||
property bool checked: false
|
|
||||||
|
|
||||||
signal toggled(bool checked)
|
|
||||||
|
|
||||||
width: parent.width
|
|
||||||
height: 60
|
|
||||||
radius: Theme.cornerRadius
|
|
||||||
color: toggleArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
|
|
||||||
|
|
||||||
Row {
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: toggle.left
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.leftMargin: Theme.spacingM
|
|
||||||
anchors.rightMargin: Theme.spacingM
|
|
||||||
spacing: Theme.spacingXS
|
|
||||||
|
|
||||||
Column {
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
spacing: Theme.spacingXS
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: root.text
|
|
||||||
font.pixelSize: Theme.fontSizeMedium
|
|
||||||
color: Theme.surfaceText
|
|
||||||
font.weight: Font.Medium
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: root.description
|
|
||||||
font.pixelSize: Theme.fontSizeSmall
|
|
||||||
color: Theme.surfaceVariantText
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
width: Math.min(implicitWidth, root.width - 120)
|
|
||||||
visible: root.description.length > 0
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle switch
|
|
||||||
Rectangle {
|
|
||||||
id: toggle
|
|
||||||
|
|
||||||
width: 48
|
|
||||||
height: 24
|
|
||||||
radius: 12
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.rightMargin: Theme.spacingM
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
color: root.checked ? Theme.primary : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.5)
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: toggleHandle
|
|
||||||
|
|
||||||
width: 20
|
|
||||||
height: 20
|
|
||||||
radius: 10
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
x: root.checked ? parent.width - width - 2 : 2
|
|
||||||
color: root.checked ? Theme.primaryText : Theme.surfaceText
|
|
||||||
|
|
||||||
Behavior on x {
|
|
||||||
NumberAnimation {
|
|
||||||
duration: Theme.shortDuration
|
|
||||||
easing.type: Theme.standardEasing
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
Behavior on color {
|
|
||||||
ColorAnimation {
|
|
||||||
duration: Theme.shortDuration
|
|
||||||
easing.type: Theme.standardEasing
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
Behavior on color {
|
|
||||||
ColorAnimation {
|
|
||||||
duration: Theme.shortDuration
|
|
||||||
easing.type: Theme.standardEasing
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: toggleArea
|
|
||||||
|
|
||||||
anchors.fill: parent
|
|
||||||
hoverEnabled: true
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
|
||||||
onClicked: {
|
|
||||||
root.checked = !root.checked;
|
|
||||||
root.toggled(root.checked);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Behavior on color {
|
|
||||||
ColorAnimation {
|
|
||||||
duration: Theme.shortDuration
|
|
||||||
easing.type: Theme.standardEasing
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -7,16 +7,62 @@ Item {
|
|||||||
property bool checked: false
|
property bool checked: false
|
||||||
property bool enabled: true
|
property bool enabled: true
|
||||||
property bool toggling: false
|
property bool toggling: false
|
||||||
|
property string text: ""
|
||||||
|
property string description: ""
|
||||||
|
|
||||||
signal clicked()
|
signal clicked()
|
||||||
|
signal toggled(bool checked)
|
||||||
|
|
||||||
width: 48
|
width: text ? parent.width : 48
|
||||||
height: 24
|
height: text ? 60 : 24
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: background
|
||||||
|
anchors.fill: parent
|
||||||
|
radius: toggle.text ? Theme.cornerRadius : 0
|
||||||
|
color: toggle.text ? (toggleArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)) : "transparent"
|
||||||
|
visible: toggle.text
|
||||||
|
}
|
||||||
|
|
||||||
|
Row {
|
||||||
|
id: textRow
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: toggleTrack.left
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.leftMargin: Theme.spacingM
|
||||||
|
anchors.rightMargin: Theme.spacingM
|
||||||
|
spacing: Theme.spacingXS
|
||||||
|
visible: toggle.text
|
||||||
|
|
||||||
|
Column {
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
spacing: Theme.spacingXS
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: toggle.text
|
||||||
|
font.pixelSize: Theme.fontSizeMedium
|
||||||
|
color: Theme.surfaceText
|
||||||
|
font.weight: Font.Medium
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: toggle.description
|
||||||
|
font.pixelSize: Theme.fontSizeSmall
|
||||||
|
color: Theme.surfaceVariantText
|
||||||
|
wrapMode: Text.WordWrap
|
||||||
|
width: Math.min(implicitWidth, toggle.width - 120)
|
||||||
|
visible: toggle.description.length > 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: toggleTrack
|
id: toggleTrack
|
||||||
width: parent.width
|
width: toggle.text ? 48 : parent.width
|
||||||
height: parent.height
|
height: toggle.text ? 24 : parent.height
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: toggle.text ? Theme.spacingM : 0
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
radius: height / 2
|
radius: height / 2
|
||||||
color: toggle.checked ? Theme.primary : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
|
color: toggle.checked ? Theme.primary : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
|
||||||
opacity: toggle.toggling ? 0.6 : 1
|
opacity: toggle.toggling ? 0.6 : 1
|
||||||
@@ -49,27 +95,19 @@ Item {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
}
|
||||||
id: toggleArea
|
|
||||||
anchors.fill: parent
|
|
||||||
hoverEnabled: true
|
|
||||||
cursorShape: toggle.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
||||||
enabled: toggle.enabled
|
|
||||||
onClicked: toggle.clicked()
|
|
||||||
}
|
|
||||||
|
|
||||||
Behavior on color {
|
MouseArea {
|
||||||
ColorAnimation {
|
id: toggleArea
|
||||||
duration: Theme.shortDuration
|
anchors.fill: toggle.text ? toggle : toggleTrack
|
||||||
easing.type: Theme.standardEasing
|
hoverEnabled: true
|
||||||
}
|
cursorShape: toggle.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||||
}
|
enabled: toggle.enabled
|
||||||
|
onClicked: {
|
||||||
Behavior on opacity {
|
toggle.checked = !toggle.checked;
|
||||||
NumberAnimation {
|
toggle.clicked();
|
||||||
duration: Theme.shortDuration
|
toggle.toggled(toggle.checked);
|
||||||
easing.type: Theme.standardEasing
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user