waffles: screen snip

2025-12-20 11:46:07 +01:00
parent 169b24bea5
commit 8842df6340
34 changed files with 976 additions and 113 deletions
@@ -93,8 +93,8 @@ Singleton {
        property color bgPanelFooter: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelFooter : root.lightColors.bgPanelFooter, root.panelLayerTransparency)
        property color bgPanelBody: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelBody : root.lightColors.bgPanelBody, root.panelLayerTransparency)
        property color bgPanelSeparator: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelSeparator : root.lightColors.bgPanelSeparator, root.backgroundTransparency)
-        property color bg0Opaque: root.dark ? root.darkColors.bg0 : root.lightColors.bg0
-        property color bg0: ColorUtils.transparentize(bg0Opaque, root.backgroundTransparency)
+        property color bg0Base: root.dark ? root.darkColors.bg0 : root.lightColors.bg0
+        property color bg0: ColorUtils.transparentize(bg0Base, root.backgroundTransparency)
        property color bg0Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg0Border : root.lightColors.bg0Border, root.backgroundTransparency)
        property color bg1Base: root.dark ? root.darkColors.bg1Base : root.lightColors.bg1Base
        property color bg1: ColorUtils.transparentize(root.dark ? root.darkColors.bg1 : root.lightColors.bg1, root.contentTransparency)
@@ -39,9 +39,10 @@ Button {
        }
    }
    property color fgColor: {
+        if (!root.enabled) return root.colForegroundDisabled
        if (root.checked) return root.colForegroundToggled
        if (root.enabled) return root.colForeground
-        return root.colForegroundDisabled
+        return root.colForeground
    }
    property alias horizontalAlignment: buttonText.horizontalAlignment
    font {
@@ -76,8 +76,9 @@ Menu {
    contentItem: Item {
        implicitWidth: menuListView.implicitWidth
        implicitHeight: menuListView.implicitHeight
-        ListView {
+        WListView {
            id: menuListView
+            interactive: contentHeight > height
            anchors {
                left: parent.left
                right: parent.right
@@ -87,6 +88,7 @@ Menu {
                topMargin: root.downDirection ? root.sourceEdgeMargin : root.margins
                bottomMargin: root.downDirection ? root.margins : root.sourceEdgeMargin
            }
+            clip: true
            implicitHeight: contentHeight
            implicitWidth: Array.from({
                length: count
@@ -6,6 +6,7 @@ import Quickshell
 import Quickshell.Hyprland
 import qs.modules.common
 import qs.modules.common.functions
+import qs.modules.common.widgets
 import qs.modules.waffle.looks

 MenuItem {
@@ -14,11 +15,11 @@ MenuItem {
    property color colBackground: ColorUtils.transparentize(Looks.colors.bg1)
    property color colBackgroundHover: Looks.colors.bg2Hover
    property color colBackgroundActive: Looks.colors.bg2Active
-    property color colBackgroundToggled: Looks.colors.accent
-    property color colBackgroundToggledHover: Looks.colors.accentHover
-    property color colBackgroundToggledActive: Looks.colors.accentActive
+    property color colBackgroundToggled: Looks.colors.bg2Hover
+    property color colBackgroundToggledHover: Looks.colors.bg2Active
+    property color colBackgroundToggledActive: Looks.colors.bg2Hover
    property color colForeground: Looks.colors.fg
-    property color colForegroundToggled: Looks.colors.accentFg
+    property color colForegroundToggled: Looks.colors.fg
    property color colForegroundDisabled: ColorUtils.transparentize(Looks.colors.subfg, 0.4)
    property color color: {
        if (!root.enabled)
@@ -70,27 +71,57 @@ MenuItem {
    implicitHeight: Math.max(28, contentItem.implicitHeight) + topInset + bottomInset
    implicitWidth: contentItem.implicitWidth + leftInset + rightInset + leftPadding + rightPadding

-    contentItem: RowLayout {
-        id: contentLayout
-        spacing: 12
-        FluentIcon {
-            id: buttonIcon
-            monochrome: true
-            implicitSize: 20
-            Layout.fillWidth: false
-            Layout.alignment: Qt.AlignVCenter
-            color: root.fgColor
-            visible: root.icon.name !== "";
-            icon: root.icon.name
+    contentItem: Item {
+        implicitWidth: contentLayout.implicitWidth
+        implicitHeight: contentLayout.implicitHeight
+
+        RowLayout {
+            id: contentLayout
+            anchors.fill: parent
+            spacing: 12
+            FluentIcon {
+                id: buttonIcon
+                monochrome: true
+                implicitSize: 20
+                Layout.fillWidth: false
+                Layout.alignment: Qt.AlignVCenter
+                color: root.fgColor
+                visible: root.icon.name !== ""
+                icon: root.icon.name
+            }
+            WText {
+                id: buttonText
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                text: root.text
+                horizontalAlignment: Text.AlignLeft
+                font.pixelSize: Looks.font.pixelSize.large
+                color: root.fgColor
+            }
        }
-        WText {
-            id: buttonText
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            text: root.text
-            horizontalAlignment: Text.AlignLeft
-            font.pixelSize: Looks.font.pixelSize.large
-            color: root.fgColor
+
+        WFadeLoader {
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                leftMargin: -root.leftPadding + width
+            }
+            shown: root.checked
+            sourceComponent: Rectangle {
+                implicitWidth: 3
+                implicitHeight: 3
+                radius: width / 2
+                color: Looks.colors.accent
+                property bool forceZeroHeight: true
+                height: forceZeroHeight ? 0 : Math.max(root.down ? 10 : 16, root.background.height - 18 * 2)
+                Component.onCompleted: {
+                    forceZeroHeight = false;
+                }
+
+                Behavior on height {
+                    animation: Looks.transition.resize.createObject(this)
+                }
+            }
        }
    }
 }
@@ -0,0 +1,38 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+Item {
+    id: root
+
+    property real padding: 9
+    property alias colBackground: background.color
+    property alias spacing: toolbarLayout.spacing
+    property alias radius: background.radius
+    default property alias data: toolbarLayout.data
+    
+    implicitWidth: background.implicitWidth
+    implicitHeight: background.implicitHeight
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        implicitHeight: 50
+        implicitWidth: toolbarLayout.implicitWidth + root.padding * 2
+        radius: Looks.radius.large
+        color: Looks.colors.bg0Base
+
+        border.width: 1
+        border.color: Looks.colors.bg1Border
+
+        RowLayout {
+            id: toolbarLayout
+            spacing: 4
+            anchors {
+                fill: parent
+                margins: root.padding
+            }
+        }
+    }
+}
@@ -0,0 +1,8 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+
+WButton {
+    implicitHeight: 32
+    radius: Looks.radius.medium
+}
@@ -0,0 +1,16 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+
+WToolbarButton {
+    id: root
+    implicitWidth: height
+    contentItem: Item {
+        FluentIcon {
+            anchors.centerIn: parent
+            icon: root.icon.name
+            implicitSize: 18
+            color: root.fgColor
+        }
+    }
+}
@@ -0,0 +1,21 @@
+import QtQuick
+import QtQuick.Controls
+import qs.modules.common
+
+TabButton {
+    id: root
+
+    implicitWidth: 38
+    implicitHeight: 32
+    padding: 0
+
+    background: null
+    contentItem: Item {
+        FluentIcon {
+            anchors.centerIn: parent
+            icon: root.icon.name
+            color: root.icon.color
+            implicitSize: 18
+        }
+    }
+}
@@ -0,0 +1,11 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+
+Rectangle {
+    Layout.leftMargin: 4
+    Layout.rightMargin: 4
+    implicitHeight: 24
+    implicitWidth: 1
+    color: Looks.colors.bg0Border
+}
@@ -0,0 +1,53 @@
+import QtQuick
+import QtQuick.Controls
+import qs.modules.common
+import qs.modules.common.functions
+
+TabBar {
+    id: root
+    implicitHeight: 32
+
+    background: Rectangle {
+        radius: Looks.radius.medium
+        color: Looks.colors.bgPanelFooter
+        border.color: ColorUtils.transparentize(Looks.colors.bg0Border, 0.7)
+        border.width: 1
+
+        // Indicator
+        Rectangle {
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                left: parent.left
+                leftMargin: root.currentIndex * (root.width / root.count)
+                Behavior on leftMargin {
+                    animation: Looks.transition.resize.createObject(this)
+                }
+            }
+            radius: Looks.radius.medium
+            color: Looks.colors.bg2Base
+            border.color: Looks.colors.bg0Border
+            border.width: 1
+            width: root.width / root.count
+
+            Rectangle {
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    bottom: parent.bottom
+                    bottomMargin: 1
+                }
+                implicitWidth: pressDetector.containsPress ? 16 : 12
+                implicitHeight: 3
+                radius: height / 2
+                color: Looks.colors.accent
+            }
+        }
+    }
+
+    MouseArea {
+        id: pressDetector
+        z: 9999
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton
+    }
+}