diff --git a/Modules/SettingsPopup.qml b/Modules/SettingsPopup.qml index 485f3a71..151c348e 100644 --- a/Modules/SettingsPopup.qml +++ b/Modules/SettingsPopup.qml @@ -461,7 +461,7 @@ PanelWindow { width: parent.width spacing: Theme.spacingM - SettingsToggle { + DankToggle { text: "24-Hour Format" description: "Use 24-hour time format instead of 12-hour AM/PM" checked: Prefs.use24HourClock @@ -484,7 +484,7 @@ PanelWindow { width: parent.width spacing: Theme.spacingM - SettingsToggle { + DankToggle { text: "Fahrenheit" description: "Use Fahrenheit instead of Celsius for temperature" checked: Prefs.useFahrenheit @@ -570,7 +570,7 @@ PanelWindow { width: parent.width spacing: Theme.spacingM - SettingsToggle { + DankToggle { text: "Focused Window" description: "Show the currently focused application in the top bar" checked: Prefs.showFocusedWindow @@ -579,7 +579,7 @@ PanelWindow { } } - SettingsToggle { + DankToggle { text: "Weather Widget" description: "Display weather information in the top bar" checked: Prefs.showWeather @@ -588,7 +588,7 @@ PanelWindow { } } - SettingsToggle { + DankToggle { text: "Media Controls" description: "Show currently playing media in the top bar" checked: Prefs.showMusic @@ -597,7 +597,7 @@ PanelWindow { } } - SettingsToggle { + DankToggle { text: "Clipboard Button" description: "Show clipboard access button in the top bar" checked: Prefs.showClipboard @@ -606,7 +606,7 @@ PanelWindow { } } - SettingsToggle { + DankToggle { text: "System Resources" description: "Display CPU and RAM usage indicators" checked: Prefs.showSystemResources @@ -615,7 +615,7 @@ PanelWindow { } } - SettingsToggle { + DankToggle { text: "System Tray" description: "Show system tray icons in the top bar" checked: Prefs.showSystemTray @@ -638,7 +638,7 @@ PanelWindow { width: parent.width spacing: Theme.spacingM - SettingsToggle { + DankToggle { text: "Workspace Index Numbers" description: "Show workspace index numbers in the top bar workspace switcher" checked: Prefs.showWorkspaceIndex @@ -647,7 +647,7 @@ PanelWindow { } } - SettingsToggle { + DankToggle { text: "Workspace Padding" description: "Always show a minimum of 3 workspaces, even if fewer are available" checked: Prefs.showWorkspacePadding @@ -669,7 +669,7 @@ PanelWindow { width: parent.width spacing: Theme.spacingL - SettingsToggle { + DankToggle { text: "Night Mode" description: "Apply warm color temperature to reduce eye strain" checked: Prefs.nightModeEnabled @@ -682,7 +682,7 @@ PanelWindow { } } - SettingsToggle { + DankToggle { text: "Light Mode" description: "Use light theme instead of dark theme" checked: Prefs.isLightMode diff --git a/Modules/SettingsToggle.qml b/Modules/SettingsToggle.qml deleted file mode 100644 index 2f12d634..00000000 --- a/Modules/SettingsToggle.qml +++ /dev/null @@ -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 - } - - } - -} diff --git a/Widgets/DankToggle.qml b/Widgets/DankToggle.qml index 40fb501a..aeb37721 100644 --- a/Widgets/DankToggle.qml +++ b/Widgets/DankToggle.qml @@ -7,16 +7,62 @@ Item { property bool checked: false property bool enabled: true property bool toggling: false + property string text: "" + property string description: "" signal clicked() + signal toggled(bool checked) - width: 48 - height: 24 + width: text ? parent.width : 48 + 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 { id: toggleTrack - width: parent.width - height: parent.height + width: toggle.text ? 48 : parent.width + height: toggle.text ? 24 : parent.height + anchors.right: parent.right + anchors.rightMargin: toggle.text ? Theme.spacingM : 0 + anchors.verticalCenter: parent.verticalCenter radius: height / 2 color: toggle.checked ? Theme.primary : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) 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 { - ColorAnimation { - duration: Theme.shortDuration - easing.type: Theme.standardEasing - } - } - - Behavior on opacity { - NumberAnimation { - duration: Theme.shortDuration - easing.type: Theme.standardEasing - } + MouseArea { + id: toggleArea + anchors.fill: toggle.text ? toggle : toggleTrack + hoverEnabled: true + cursorShape: toggle.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor + enabled: toggle.enabled + onClicked: { + toggle.checked = !toggle.checked; + toggle.clicked(); + toggle.toggled(toggle.checked); } } + } \ No newline at end of file