(Control Center): revamp of 25% pill option (#2568)

* revamp of control center

* update comment of SmallCompoundButton.qml

quickshell/Modules/ControlCenter/Widgets/DndPill.qml

@@ -5,7 +5,7 @@ import qs.Modules.ControlCenter.Widgets
 CompoundPill {
     id: root
 
-    iconName: SessionData.doNotDisturb ? "do_not_disturb_on" : "do_not_disturb_off"
+    iconName: "do_not_disturb_on"
     iconColor: SessionData.doNotDisturb ? Theme.primary : Theme.surfaceText
     primaryText: I18n.tr("Do Not Disturb")
     isActive: SessionData.doNotDisturb

quickshell/Modules/ControlCenter/Widgets/SmallColorPickerButton.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    LayoutMirroring.enabled: I18n.isRtl
+    LayoutMirroring.childrenInherit: true
+
+    property var colorPickerModal: null
+
+    signal clicked
+
+    width: parent ? ((parent.width - parent.spacing * 3) / 4) : 48
+    height: 48
+    radius: Theme.cornerRadius === 0 ? 0 : Theme.cornerRadius
+
+    function hoverTint(base) {
+        const factor = 1.2;
+        return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
+    }
+
+    color: Theme.primary
+    border.color: Theme.ccTileRing
+    border.width: 1
+    antialiasing: true
+
+    Rectangle {
+        anchors.fill: parent
+        radius: parent.radius
+        color: hoverTint(root.color)
+        opacity: mouseArea.pressed ? 0.3 : (mouseArea.containsMouse ? 0.2 : 0.0)
+        visible: opacity > 0
+        antialiasing: true
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.shortDuration
+            }
+        }
+    }
+
+    DankIcon {
+        anchors.centerIn: parent
+        name: "palette"
+        size: Theme.iconSize
+        color: Theme.primaryText
+    }
+
+    DankRipple {
+        id: ripple
+        cornerRadius: root.radius
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        enabled: root.enabled
+        onPressed: mouse => ripple.trigger(mouse.x, mouse.y)
+        onClicked: root.clicked()
+    }
+}

quickshell/Modules/ControlCenter/Widgets/SmallCompoundButton.qml

@@ -0,0 +1,107 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    LayoutMirroring.enabled: I18n.isRtl
+    LayoutMirroring.childrenInherit: true
+
+    property string iconName: ""
+    property bool isActive: false
+    property bool iconBlinking: false
+
+    // Left click expands the widget (primary detail action), right click toggles on/off.
+    signal toggled
+    signal expandClicked
+    signal wheelEvent(var wheelEvent)
+
+    width: parent ? ((parent.width - parent.spacing * 3) / 4) : 48
+    height: 48
+    radius: {
+        if (Theme.cornerRadius === 0)
+            return 0;
+        return isActive ? Theme.cornerRadius : Theme.cornerRadius + 4;
+    }
+
+    function hoverTint(base) {
+        const factor = 1.2;
+        return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
+    }
+
+    readonly property color _tileBgActive: Theme.ccTileActiveBg
+    readonly property color _tileBgInactive: Theme.ccPillInactiveBg
+    readonly property color _tileRingActive: Theme.ccTileRing
+    readonly property color _tileIconActive: Theme.ccTileActiveText
+    readonly property color _tileIconInactive: Theme.ccTileInactiveIcon
+
+    color: {
+        if (isActive)
+            return _tileBgActive;
+        const baseColor = mouseArea.containsMouse ? Theme.ccPillInactiveHoverBg : _tileBgInactive;
+        return baseColor;
+    }
+    border.color: isActive ? _tileRingActive : Theme.outlineMedium
+    border.width: isActive ? 1 : Theme.layerOutlineWidth
+    antialiasing: true
+    opacity: enabled ? 1.0 : 0.6
+
+    Rectangle {
+        anchors.fill: parent
+        radius: parent.radius
+        color: hoverTint(root.color)
+        opacity: mouseArea.pressed ? 0.3 : (mouseArea.containsMouse ? 0.2 : 0.0)
+        visible: opacity > 0
+        antialiasing: true
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Theme.shortDuration
+            }
+        }
+    }
+
+    DankIcon {
+        id: tileIcon
+        anchors.centerIn: parent
+        name: iconName
+        size: Theme.iconSize
+        color: isActive ? _tileIconActive : _tileIconInactive
+
+        DankBlink {
+            target: tileIcon
+            running: root.iconBlinking
+        }
+    }
+
+    DankRipple {
+        id: ripple
+        cornerRadius: root.radius
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        enabled: root.enabled
+        onPressed: mouse => ripple.trigger(mouse.x, mouse.y)
+        onClicked: mouse => {
+            if (mouse.button === Qt.RightButton)
+                root.toggled();
+            else
+                root.expandClicked();
+        }
+        onWheel: function (ev) {
+            root.wheelEvent(ev);
+        }
+    }
+
+    Behavior on radius {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+}