action center: toggle pages

2026-06-05 14:59:27 -05:00 · 2025-11-18 23:08:51 +01:00
parent b650120fd4
commit 4cbb0f23c6
27 changed files with 283 additions and 105 deletions
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.102 8c-1.074 0-1.648 1.265-.94 2.073l5.521 6.31a1.75 1.75 0 0 0 2.634 0l5.522-6.31c.707-.808.133-2.073-.94-2.073H6.101Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.161 10.073C4.454 9.265 5.028 8 6.102 8h11.796c1.074 0 1.648 1.265.941 2.073l-5.522 6.31a1.75 1.75 0 0 1-2.634 0l-5.522-6.31ZM6.653 9.5l5.159 5.896a.25.25 0 0 0 .376 0l5.16-5.896H6.652Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.102 16.981c-1.074 0-1.648-1.265-.94-2.073l5.521-6.31a1.75 1.75 0 0 1 2.634 0l5.522 6.31c.707.809.133 2.073-.94 2.073H6.101Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.161 14.908c-.707.809-.133 2.073.941 2.073h11.796c1.074 0 1.648-1.265.941-2.073l-5.522-6.31a1.75 1.75 0 0 0-2.634 0l-5.522 6.31Zm1.492.573 5.159-5.896a.25.25 0 0 1 .376 0l5.16 5.896H6.652Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+../cloudflare-dns-symbolic.svg
@@ -0,0 +1 @@
+../cloudflare-dns-symbolic.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Zm4.745-5.487a.75.75 0 0 0 .711.987h3.74l-8.824 9.196 1.316-5.264a.75.75 0 0 0-.727-.932h-2.51l2.57-9h5.394l-1.67 5.013Z" fill="#212121"/></svg>
@@ -1,4 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000">
-<path d="M2.00244 4.70455V9C2.00244 12.3137 4.68873 15 8.00244 15C8.10042 15 8.19784 14.9977 8.29467 14.993C8.55723 15.8766 8.98958 16.6872 9.5539 17.3868L7.22374 19.7156C6.93075 20.0084 6.93061 20.4833 7.22342 20.7763C7.51622 21.0692 7.99109 21.0694 8.28408 20.7766L10.6146 18.4474C11.8152 19.4154 13.3421 19.9949 15.0044 19.9949C18.8696 19.9949 22.0031 16.8615 22.0031 12.9962V7.74756C22.0031 6.78106 21.2196 5.99756 20.2531 5.99756L15.0044 5.99756C14.4209 5.99756 13.8541 6.06896 13.3123 6.2035C12.3069 4.29847 10.3063 3 8.00244 3H3.70699C2.76559 3 2.00244 3.76315 2.00244 4.70455ZM11.6835 17.3792L15.7801 13.2851C16.0731 12.9923 16.0732 12.5174 15.7804 12.2244C15.4876 11.9314 15.0128 11.9313 14.7198 12.2241L10.6226 16.3188C9.92169 15.3958 9.50569 14.2446 9.50569 12.9962C9.50569 9.9594 11.9675 7.49756 15.0044 7.49756H20.2531C20.3911 7.49756 20.5031 7.60949 20.5031 7.74756V12.9962C20.5031 16.0331 18.0412 18.4949 15.0044 18.4949C13.7567 18.4949 12.6062 18.0794 11.6835 17.3792ZM8.00244 4.5C9.65903 4.5 11.1065 5.39514 11.8877 6.72812C10.7891 7.27543 9.85464 8.10307 9.17802 9.11737L7.28032 7.21967C6.98743 6.92678 6.51255 6.92678 6.21966 7.21967C5.92677 7.51256 5.92677 7.98744 6.21966 8.28033L8.45718 10.5179C8.1654 11.2883 8.00569 12.1236 8.00569 12.9962C8.00569 13.1656 8.01171 13.3336 8.02354 13.5L8.00244 13.5C5.51716 13.5 3.50244 11.4853 3.50244 9L3.50244 4.70455C3.50244 4.59158 3.59402 4.5 3.70699 4.5L8.00244 4.5Z" fill="#000000"/>
-</svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.707 2c-.941 0-1.705.763-1.705 1.705V8a6.002 6.002 0 0 0 5.003 5.917A7.961 7.961 0 0 1 8.408 9.47L6.22 7.28a.75.75 0 0 1 1.06-1.06l2.094 2.093a7.979 7.979 0 0 1 4.322-2.21A6.003 6.003 0 0 0 8.002 2H3.707Z" fill="#212121"/><path d="M9.554 18.387 7.22 20.719a.75.75 0 1 0 1.06 1.061l2.335-2.333a6.999 6.999 0 0 0 11.389-5.451V8.748a1.75 1.75 0 0 0-1.75-1.75h-5.25a6.999 6.999 0 0 0-5.45 11.389Zm6.226-4.102-4.095 4.095a5.53 5.53 0 0 1-1.061-1.06l4.095-4.096a.75.75 0 0 1 1.061 1.061Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.996 18.532a1 1 0 0 1 .993.883l.007.117v1.456a1 1 0 0 1-1.993.116l-.007-.116v-1.456a1 1 0 0 1 1-1Zm6.037-1.932 1.03 1.03a1 1 0 0 1-1.415 1.413l-1.03-1.029a1 1 0 0 1 1.415-1.414Zm-10.66 0a1 1 0 0 1 0 1.414l-1.029 1.03a1 1 0 0 1-1.414-1.415l1.03-1.03a1 1 0 0 1 1.413 0ZM12.01 6.472a5.525 5.525 0 1 1 0 11.05 5.525 5.525 0 0 1 0-11.05Zm8.968 4.546a1 1 0 0 1 .117 1.993l-.117.007h-1.456a1 1 0 0 1-.116-1.993l.116-.007h1.456ZM4.479 10.99a1 1 0 0 1 .116 1.993l-.116.007H3.023a1 1 0 0 1-.117-1.993l.117-.007h1.456Zm1.77-6.116.095.083 1.03 1.03a1 1 0 0 1-1.32 1.497L5.958 7.4 4.93 6.371a1 1 0 0 1 1.32-1.497Zm12.813.083a1 1 0 0 1 .083 1.32l-.083.094-1.03 1.03a1 1 0 0 1-1.497-1.32l.084-.095 1.029-1.03a1 1 0 0 1 1.414 0ZM12 2.013a1 1 0 0 1 .993.883l.007.117v1.455a1 1 0 0 1-1.993.117L11 4.468V3.013a1 1 0 0 1 1-1Z" fill="#212121"/></svg>
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.996 19.01a.75.75 0 0 1 .743.649l.007.102v1.5a.75.75 0 0 1-1.493.101l-.007-.101v-1.5a.75.75 0 0 1 .75-.75Zm6.022-2.072 1.06 1.06a.75.75 0 1 1-1.06 1.061l-1.06-1.06a.75.75 0 0 1 1.06-1.061Zm-10.983 0a.75.75 0 0 1 0 1.06L5.974 19.06a.75.75 0 0 1-1.06-1.06l1.06-1.061a.75.75 0 0 1 1.06 0ZM12 6.475a5.525 5.525 0 1 1 0 11.05 5.525 5.525 0 0 1 0-11.05Zm0 1.5a4.025 4.025 0 1 0 0 8.05 4.025 4.025 0 0 0 0-8.05Zm9.25 3.293a.75.75 0 0 1 .102 1.493l-.102.007h-1.5a.75.75 0 0 1-.102-1.493l.102-.007h1.5Zm-17-.029a.75.75 0 0 1 .102 1.494l-.102.006h-1.5a.75.75 0 0 1-.102-1.493l.102-.007h1.5Zm1.64-6.37.084.072 1.06 1.06a.75.75 0 0 1-.976 1.134l-.084-.073-1.06-1.06a.75.75 0 0 1 .976-1.134Zm13.188.072a.75.75 0 0 1 .073.977l-.073.084-1.06 1.06a.75.75 0 0 1-1.133-.976l.072-.084 1.06-1.061a.75.75 0 0 1 1.061 0ZM12 1.99a.75.75 0 0 1 .743.648l.007.102v1.5a.75.75 0 0 1-1.493.101l-.007-.102v-1.5a.75.75 0 0 1 .75-.75Z" fill="#212121"/></svg>
@@ -581,7 +581,7 @@ Singleton {
                    property bool leftAlignApps: false
                }
                property JsonObject actionCenter: JsonObject {
-                    property list<string> toggles: [ "network", "bluetooth", "easyEffects", "powerProfile", "idleInhibitor", "antiFlashbang", "nightLight", "darkMode", "cloudflareWarp", "mic", "audio", "musicRecognition", "notifications", "onScreenKeyboard", "gameMode", "screenSnip", "colorPicker" ]
+                    property list<string> toggles: [ "network", "bluetooth", "easyEffects", "powerProfile", "idleInhibitor", "nightLight", "darkMode", "antiFlashbang", "cloudflareWarp", "mic", "audio", "musicRecognition", "notifications", "onScreenKeyboard", "gameMode", "screenSnip", "colorPicker" ]
                }
            }
        }
@@ -25,7 +25,6 @@ Rectangle {
        ActionCenterBodyToggles {
            id: togglesContainer
            Layout.fillWidth: true
-            Layout.bottomMargin: -12
        }

        Rectangle {
@@ -7,39 +7,75 @@ import qs.modules.common
 import qs.modules.common.functions
 import qs.modules.waffle.looks

-RowLayout {
-    spacing: 4
+ColumnLayout {
+    id: root
+    property var screen: root.QsWindow.window?.screen
+    property var brightnessMonitor: Brightness.getMonitorForScreen(screen)
+    spacing: 12

-    WPanelIconButton {
-        iconName: WIcons.volumeIcon
-        onClicked: Audio.toggleMute();
-    }
+    RowLayout {
+        spacing: 4

-    WSlider {
-        Layout.fillWidth: true
-        value: Audio.sink.audio.volume
-        onMoved: {
-            Audio.sink.audio.volume = value;
+        WPanelIconButton {
+            color: colBackground
+            property real animationValue: root.brightnessMonitor.brightness
+            rotation: animationValue * 180
+            scale: 0.8 + animationValue * 0.2
+            iconName: "weather-sunny"
+
+            Behavior on animationValue {
+                animation: Looks.transition.longMovement.createObject(this)
+            }
+        }
+        
+        WSlider {
+            Layout.fillWidth: true
+            value: root.brightnessMonitor.brightness
+            onMoved: {
+                root.brightnessMonitor.setBrightness(value)
+            }
+        }
+
+        WPanelIconButton {
+            opacity: 0
        }
    }
    
-    WPanelIconButton {
-        contentItem: Item {
-            anchors.centerIn: parent
-            Row {
+    RowLayout {
+        spacing: 4
+
+        WPanelIconButton {
+            iconName: WIcons.volumeIcon
+            onClicked: Audio.toggleMute();
+        }
+        
+        WSlider {
+            Layout.fillWidth: true
+            value: Audio.sink.audio.volume
+            onMoved: {
+                Audio.sink.audio.volume = value;
+            }
+        }
+
+        WPanelIconButton {
+            contentItem: Item {
                anchors.centerIn: parent
-                spacing: -1
-                FluentIcon {
-                    anchors.verticalCenter: parent.verticalCenter
-                    implicitSize: 18
-                    icon: "options"
-                }
-                FluentIcon {
-                    anchors.verticalCenter: parent.verticalCenter
-                    implicitSize: 12
-                    icon: "chevron-right"
+                Row {
+                    anchors.centerIn: parent
+                    spacing: -1
+                    FluentIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        implicitSize: 18
+                        icon: "options"
+                    }
+                    FluentIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        implicitSize: 12
+                        icon: "chevron-right"
+                    }
                }
            }
        }
    }
+
 }
@@ -1,10 +1,13 @@
 pragma ComponentBehavior: Bound
+import Qt.labs.synchronizer
 import QtQuick
 import QtQuick.Layouts
+import QtQuick.Controls
 import Quickshell
 import qs
 import qs.services
 import qs.modules.common
+import qs.modules.common.widgets
 import qs.modules.common.models.quickToggles
 import qs.modules.common.functions
 import qs.modules.waffle.looks
@@ -13,37 +16,124 @@ import qs.modules.waffle.actionCenter.toggles
 Item {
    id: root

+    property int columns: 3
+    property int rows: 2
    property int currentPage: 0
-    property alias columns: grid.columns
-    property alias rows: grid.rows
    readonly property int itemsPerPage: columns * rows
+    readonly property int pages: Math.ceil(toggles.length / itemsPerPage)
    property list<string> toggles: Config.options.waffles.actionCenter.toggles
-    property list<string> togglesInCurrentPage: toggles.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage)

    property real padding: 22
-    implicitHeight: grid.implicitHeight + padding * 2
+    property real reducedBottomPadding: 12
+    implicitHeight: swipeView.implicitHeight + (padding - swipeView.padding) * 2 - reducedBottomPadding

-    GridLayout {
-        id: grid
-        anchors {
-            fill: parent
-            margins: parent.padding
-        }
+    function togglesInPage(index) {
+        var start = index * root.itemsPerPage;
+        var end = start + root.itemsPerPage;
+        return root.toggles.slice(start, end);
+    }

-        columns: 3
-        rows: 2
-        rowSpacing: 12
-        columnSpacing: 12
-        uniformCellHeights: true
-        uniformCellWidths: true
-
-        Repeater {
-            model: ScriptModel {
-                values: root.togglesInCurrentPage
-            }
-            delegate: ActionCenterTogglesDelegateChooser {}
+    function decreasePage() {
+        if (root.currentPage > 0) {
+            root.currentPage -= 1;
        }
    }

-    // TODO: pages indicator on the right
+    function increasePage() {
+        if (root.currentPage < (root.pages - 1)) {
+            root.currentPage += 1;
+        }
+    }
+
+    clip: true
+    SwipeView {
+        id: swipeView
+        anchors {
+            fill: parent
+            topMargin: root.padding - swipeView.padding
+            bottomMargin: root.padding - swipeView.padding - root.reducedBottomPadding
+        }
+        padding: 4
+        leftPadding: root.padding
+        rightPadding: root.padding
+        spacing: padding
+
+        orientation: Qt.Vertical
+        clip: true
+        Synchronizer on currentIndex {
+            property alias source: root.currentPage
+        }
+
+        Repeater {
+            model: root.pages
+            delegate: GridLayout {
+                id: grid
+                required property int index
+                // width: SwipeView.view.width - root.padding * 2
+                // height: SwipeView.view.height - root.padding * 2
+
+                columns: root.columns
+                rows: root.rows
+                rowSpacing: 12
+                columnSpacing: 12
+
+                Repeater {
+                    model: ScriptModel {
+                        values: root.togglesInPage(grid.index)
+                    }
+                    delegate: ActionCenterTogglesDelegateChooser {}
+                }
+            }
+        }
+    }
+
+    Column {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 6
+        spacing: 6
+
+        FluentIcon {
+            anchors.horizontalCenter: parent.horizontalCenter
+            implicitSize: 12
+            icon: "caret-up"
+            color: Looks.colors.controlBg
+            filled: true
+            opacity: root.currentPage > 0 ? 1 : 0
+        }
+
+        Repeater {
+            model: root.pages
+            delegate: Item {
+                required property int index
+                anchors.horizontalCenter: parent.horizontalCenter
+                implicitWidth: 6
+                implicitHeight: 6
+
+                Circle {
+                    anchors.centerIn: parent
+                    diameter: index === root.currentPage ? 6 : 4
+                    color: Looks.colors.controlBg
+                }
+            }
+        }
+
+        FluentIcon {
+            anchors.horizontalCenter: parent.horizontalCenter
+            implicitSize: 12
+            icon: "caret-down"
+            color: Looks.colors.controlBg
+            filled: true
+            opacity: root.currentPage < (root.pages - 1) ? 1 : 0
+        }
+    }
+
+    FocusedScrollMouseArea {
+        z: 999
+        anchors.fill: parent
+        acceptedButtons: Qt.NoButton
+        hoverEnabled: false
+        onScrollUp: decreasePage();
+        onScrollDown: increasePage();
+    }
 }
@@ -14,10 +14,7 @@ WBarAttachedPanelContent {
        anchors.centerIn: parent
        spacing: 0

-        ActionCenterBody {
-            topLeftRadius: root.border.radius - root.border.border.width
-            topRightRadius: topLeftRadius
-        }
+        ActionCenterBody {}

        Rectangle {
            Layout.fillHeight: false
@@ -26,9 +23,6 @@ WBarAttachedPanelContent {
            implicitHeight: 1
        }

-        ActionCenterFooter {
-            bottomLeftRadius: root.border.radius - root.border.border.width
-            bottomRightRadius: bottomLeftRadius
-        }
+        ActionCenterFooter {}
    }
 }
@@ -42,6 +42,11 @@ Rectangle {
        anchors.right: parent.right
        anchors.rightMargin: 12

+        onClicked: {
+            GlobalStates.sidebarLeftOpen = false;
+            Quickshell.execDetached(["qs", "-p", Quickshell.shellPath("settings.qml")]);
+        }
+
        contentItem: FluentIcon {
            icon: "settings"
        }
@@ -56,6 +56,13 @@ Scope {
                id: content
                anchors.centerIn: parent

+                focus: true
+                Keys.onPressed: event => { // Esc to close
+                    if (event.key === Qt.Key_Escape) {
+                        content.close()
+                    }
+                }
+
                onClosed: {
                    barLoader.active = false;
                    GlobalStates.sidebarLeftOpen = false;
@@ -32,18 +32,18 @@ ColumnLayout {
    property color colBorder: toggled ? Looks.colors.accentHover : Looks.colors.bg0Border
    property color colForeground: toggled ? Looks.colors.accentFg : Looks.colors.fg1

+    spacing: 0
+    property real wholeToggleWidth: 96
+
    Rectangle {
        Layout.fillWidth: true
-        implicitWidth: 96
+        implicitWidth: root.wholeToggleWidth
        implicitHeight: 48
        color: root.colBackground
-        border.color: root.colBorder
-        border.width: 1
        radius: Looks.radius.medium

        RowLayout {
            anchors.fill: parent
-            uniformCellSizes: true
            spacing: 0

            WButton {
@@ -102,8 +102,8 @@ ColumnLayout {

    Item {
        id: toggleNameWidget
+        implicitWidth: root.wholeToggleWidth
        implicitHeight: 36
-        Layout.fillWidth: true
        WText {
            id: toggleNameText
            anchors {
@@ -32,6 +32,7 @@ DelegateChooser {
        roleValue: "bluetooth"
        ActionCenterToggleButton {
            toggleModel: BluetoothToggle {}
+            name: toggleModel.statusText
            icon: WIcons.bluetoothIcon
        }
    }
@@ -39,7 +40,7 @@ DelegateChooser {
        roleValue: "cloudflareWarp"
        ActionCenterToggleButton {
            toggleModel: CloudflareWarpToggle {}
-            icon: "globe-shield"
+            icon: "cloudflare"
        }
    }
    DelegateChoice {
@@ -53,7 +54,7 @@ DelegateChooser {
        roleValue: "darkMode"
        ActionCenterToggleButton {
            toggleModel: DarkModeToggle {}
-            icon: "dark-theme*"
+            icon: "dark-theme"
        }
    }
    DelegateChoice {
@@ -95,6 +96,7 @@ DelegateChooser {
        roleValue: "network"
        ActionCenterToggleButton {
            toggleModel: NetworkToggle {}
+            name: toggleModel.statusText
            icon: WIcons.internetIcon
        }
    }
@@ -124,6 +126,7 @@ DelegateChooser {
        ActionCenterToggleButton {
            toggleModel: PowerProfilesToggle {}
            icon: WIcons.powerProfileIcon
+            name: toggleModel.statusText
        }
    }
    DelegateChoice {
@@ -18,18 +18,29 @@ BarButton {

    contentItem: Item {
        anchors.centerIn: root.background
-        implicitHeight: column.implicitHeight
-        implicitWidth: column.implicitWidth
-        Column {
-            id: column
+        implicitHeight: contentLayout.implicitHeight
+        implicitWidth: contentLayout.implicitWidth
+        Row {
+            id: contentLayout
            anchors.centerIn: parent
-            WText {
-                anchors.right: parent.right
-                text: DateTime.time
+            spacing: 7
+            
+            Column {
+                anchors.verticalCenter: parent.verticalCenter
+                WText {
+                    anchors.right: parent.right
+                    text: DateTime.time
+                }
+                WText {
+                    anchors.right: parent.right
+                    text: DateTime.date
+                }
            }
-            WText {
-                anchors.right: parent.right
-                text: DateTime.date
+            FluentIcon {
+                anchors.verticalCenter: parent.verticalCenter
+                icon: "alert-snooze"
+                implicitSize: 18
+                filled: true
            }
        }
    }
@@ -148,5 +148,13 @@ Singleton {
                easing.bezierCurve: transition.easing.bezierCurve.easeIn
            }
        }
+
+        property Component longMovement: Component {
+            NumberAnimation {
+                duration: 1000
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: transition.easing.bezierCurve.easeIn
+            }
+        }
    }
 }
@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import Quickshell
 import qs
 import qs.services
@@ -9,10 +10,10 @@ import qs.modules.waffle.looks
 Item {
    id: root

-    signal closed()
+    signal closed

    property alias border: borderRect
-    required default property Item contentItem
+    default required property Item contentItem
    property real visualMargin: 12

    function close() {
@@ -26,6 +27,7 @@ Item {

    Rectangle {
        id: borderRect
+        z: 1

        color: "transparent"
        radius: Looks.radius.large
@@ -33,7 +35,6 @@ Item {
        border.width: 1
        implicitWidth: contentItem.implicitWidth + border.width * 2
        implicitHeight: contentItem.implicitHeight + border.width * 2
-        children: [root.contentItem]

        anchors {
            left: parent.left
@@ -76,4 +77,20 @@ Item {
            }
        }
    }
+
+    Item {
+        id: contentArea
+        z: 0
+        anchors.fill: borderRect
+        anchors.margins: borderRect.border.width
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: contentArea.width
+                height: contentArea.height
+                radius: borderRect.radius - borderRect.border.width
+            }
+        }
+        children: [root.contentItem]
+    }
 }
@@ -16,6 +16,24 @@ Button {
    property color colBackgroundToggledHover: Looks.colors.accentHover
    property color colBackgroundToggledActive: Looks.colors.accentActive
    property alias backgroundOpacity: backgroundRect.opacity
+    property color color: {
+        if (root.checked) {
+            if (root.down) {
+                return root.colBackgroundToggledActive;
+            } else if (root.hovered && !root.down) {
+                return root.colBackgroundToggledHover;
+            } else {
+                return root.colBackgroundToggled;
+            }
+        }
+        if (root.down) {
+            return root.colBackgroundActive;
+        } else if (root.hovered && !root.down) {
+            return root.colBackgroundHover;
+        } else {
+            return root.colBackground;
+        }
+    }

    property alias monochromeIcon: buttonIcon.monochrome
    property bool forceShowIcon: false
@@ -42,24 +60,7 @@ Button {
    background: Rectangle {
        id: backgroundRect
        radius: Looks.radius.medium
-        color: {
-            if (root.checked) {
-                if (root.down) {
-                    return root.colBackgroundToggledActive;
-                } else if (root.hovered && !root.down) {
-                    return root.colBackgroundToggledHover;
-                } else {
-                    return root.colBackgroundToggled;
-                }
-            }
-            if (root.down) {
-                return root.colBackgroundActive;
-            } else if (root.hovered && !root.down) {
-                return root.colBackgroundHover;
-            } else {
-                return root.colBackground;
-            }
-        }
+        color: root.color
        Behavior on color {
            animation: Looks.transition.color.createObject(this)
        }
@@ -55,7 +55,7 @@ Singleton {
    property string powerProfileIcon: {
        switch(PowerProfiles.profile) {
            case PowerProfile.PowerSaver: return "leaf-two";
-            case PowerProfile.Balanced: return "settings-cog-multiple";
+            case PowerProfile.Balanced: return "flash-on";
            case PowerProfile.Performance: return "fire";
        }
    }
@@ -46,8 +46,8 @@ Slider {
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            topLeftRadius: root.trackWidth / 2
-            bottomLeftRadius: root.trackWidth / 2
+            topRightRadius: root.trackWidth / 2
+            bottomRightRadius: root.trackWidth / 2
            color: Looks.colors.controlBg
            implicitHeight: root.trackWidth
            width: background.width * (1 - root.visualPosition)
				`@@ -0,0 +1 @@`
				`<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.102 8c-1.074 0-1.648 1.265-.94 2.073l5.521 6.31a1.75 1.75 0 0 0 2.634 0l5.522-6.31c.707-.808.133-2.073-.94-2.073H6.101Z" fill="#212121"/></svg>`
				`@@ -0,0 +1 @@`
				<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.707 2c-.941 0-1.705.763-1.705 1.705V8a6.002 6.002 0 0 0 5.003 5.917A7.961 7.961 0 0 1 8.408 9.47L6.22 7.28a.75.75 0 0 1 1.06-1.06l2.094 2.093a7.979 7.979 0 0 1 4.322-2.21A6.003 6.003 0 0 0 8.002 2H3.707Z" fill="#212121"/><path d="M9.554 18.387 7.22 20.719a.75.75 0 1 0 1.06 1.061l2.335-2.333a6.999 6.999 0 0 0 11.389-5.451V8.748a1.75 1.75 0 0 0-1.75-1.75h-5.25a6.999 6.999 0 0 0-5.45 11.389Zm6.226-4.102-4.095 4.095a5.53 5.53 0 0 1-1.061-1.06l4.095-4.096a.75.75 0 0 1 1.061 1.061Z" fill="#212121"/></svg>