From fdcb95b8a4b4fae45bd2e76b2544ebc033f1ad6c Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Mon, 10 Nov 2025 23:41:15 +0100 Subject: [PATCH] wbar: add widgets, taskview, light theme --- .../ii/assets/icons/fluent/task-view.svg | 79 ++++++++++++++++ .../ii/assets/icons/fluent/widgets.svg | 92 +++++++++++++++++++ .../ii/modules/waffle/bar/AppButton.qml | 9 +- .../ii/modules/waffle/bar/AppIcon.qml | 16 ++++ .../ii/modules/waffle/bar/SearchButton.qml | 1 + .../ii/modules/waffle/bar/StartButton.qml | 2 +- .../ii/modules/waffle/bar/TaskViewButton.qml | 12 +++ .../modules/waffle/bar/WaffleBarContent.qml | 19 ++++ .../ii/modules/waffle/bar/WidgetsButton.qml | 39 ++++++++ .../ii/modules/waffle/looks/Looks.qml | 26 ++++-- 10 files changed, 279 insertions(+), 16 deletions(-) create mode 100644 dots/.config/quickshell/ii/assets/icons/fluent/task-view.svg create mode 100644 dots/.config/quickshell/ii/assets/icons/fluent/widgets.svg create mode 100644 dots/.config/quickshell/ii/modules/waffle/bar/AppIcon.qml create mode 100644 dots/.config/quickshell/ii/modules/waffle/bar/TaskViewButton.qml create mode 100644 dots/.config/quickshell/ii/modules/waffle/bar/WidgetsButton.qml diff --git a/dots/.config/quickshell/ii/assets/icons/fluent/task-view.svg b/dots/.config/quickshell/ii/assets/icons/fluent/task-view.svg new file mode 100644 index 000000000..4323e8421 --- /dev/null +++ b/dots/.config/quickshell/ii/assets/icons/fluent/task-view.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + diff --git a/dots/.config/quickshell/ii/assets/icons/fluent/widgets.svg b/dots/.config/quickshell/ii/assets/icons/fluent/widgets.svg new file mode 100644 index 000000000..0989033a7 --- /dev/null +++ b/dots/.config/quickshell/ii/assets/icons/fluent/widgets.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/AppButton.qml b/dots/.config/quickshell/ii/modules/waffle/bar/AppButton.qml index 808a8ba0a..017d8f931 100644 --- a/dots/.config/quickshell/ii/modules/waffle/bar/AppButton.qml +++ b/dots/.config/quickshell/ii/modules/waffle/bar/AppButton.qml @@ -9,6 +9,7 @@ BarButton { id: root required property string iconName + property bool separateLightDark: false implicitWidth: height - topInset - bottomInset + leftInset + rightInset contentItem: Item { @@ -27,14 +28,10 @@ BarButton { } } - Kirigami.Icon { + AppIcon { id: iconWidget anchors.centerIn: parent - implicitWidth: 26 - implicitHeight: 26 - roundToIconSize: false - source: `${Looks.iconsPath}/${root.iconName}-${Looks.dark ? "dark" : "light"}.svg` - fallback: root.iconName + iconName: root.iconName } } } diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/AppIcon.qml b/dots/.config/quickshell/ii/modules/waffle/bar/AppIcon.qml new file mode 100644 index 000000000..02c1da144 --- /dev/null +++ b/dots/.config/quickshell/ii/modules/waffle/bar/AppIcon.qml @@ -0,0 +1,16 @@ +import QtQuick +import org.kde.kirigami as Kirigami +import qs.services +import qs.modules.common +import qs.modules.waffle.looks + +Kirigami.Icon { + id: iconWidget + required property string iconName + + implicitWidth: 26 + implicitHeight: 26 + roundToIconSize: false + source: `${Looks.iconsPath}/${root.iconName}${!root.separateLightDark ? "" : Looks.dark ? "-dark" : "-light"}.svg` + fallback: root.iconName +} diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/SearchButton.qml b/dots/.config/quickshell/ii/modules/waffle/bar/SearchButton.qml index 3bfd3a781..d1b59b85b 100644 --- a/dots/.config/quickshell/ii/modules/waffle/bar/SearchButton.qml +++ b/dots/.config/quickshell/ii/modules/waffle/bar/SearchButton.qml @@ -9,4 +9,5 @@ AppButton { id: root iconName: "system-search" + separateLightDark: true } diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/StartButton.qml b/dots/.config/quickshell/ii/modules/waffle/bar/StartButton.qml index e3aea59d2..d5a4e0f97 100644 --- a/dots/.config/quickshell/ii/modules/waffle/bar/StartButton.qml +++ b/dots/.config/quickshell/ii/modules/waffle/bar/StartButton.qml @@ -8,6 +8,6 @@ import qs.modules.waffle.looks AppButton { id: root - leftInset: 12 + leftInset: Config.options.waffles.bar.leftAlignApps ? 12 : 0 iconName: "start-here" } diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/TaskViewButton.qml b/dots/.config/quickshell/ii/modules/waffle/bar/TaskViewButton.qml new file mode 100644 index 000000000..3211217fa --- /dev/null +++ b/dots/.config/quickshell/ii/modules/waffle/bar/TaskViewButton.qml @@ -0,0 +1,12 @@ +import QtQuick +import QtQuick.Layouts +import org.kde.kirigami as Kirigami +import qs.services +import qs.modules.common +import qs.modules.waffle.looks + +AppButton { + id: root + + iconName: "task-view" +} diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/WaffleBarContent.qml b/dots/.config/quickshell/ii/modules/waffle/bar/WaffleBarContent.qml index f4881adf0..989904e2f 100644 --- a/dots/.config/quickshell/ii/modules/waffle/bar/WaffleBarContent.qml +++ b/dots/.config/quickshell/ii/modules/waffle/bar/WaffleBarContent.qml @@ -1,6 +1,7 @@ import QtQuick import QtQuick.Layouts import qs.modules.common +import qs.modules.common.widgets import qs.modules.waffle.looks Rectangle { @@ -21,6 +22,18 @@ Rectangle { implicitHeight: 1 } + BarGroupRow { + id: bloatRow + anchors.left: parent.left + opacity: Config.options.waffles.bar.leftAlignApps ? 0 : 1 + visible: opacity > 0 + Behavior on opacity { + animation: Looks.transition.opacity.createObject(this) + } + + WidgetsButton {} + } + BarGroupRow { id: appsRow spacing: 4 @@ -43,11 +56,17 @@ Rectangle { StartButton {} SearchButton {} + TaskViewButton {} } BarGroupRow { id: systemRow anchors.right: parent.right + FadeLoader { + Layout.fillHeight: true + shown: Config.options.waffles.bar.leftAlignApps + sourceComponent: WidgetsButton {} + } SystemButton {} TimeButton {} } diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/WidgetsButton.qml b/dots/.config/quickshell/ii/modules/waffle/bar/WidgetsButton.qml new file mode 100644 index 000000000..94c194686 --- /dev/null +++ b/dots/.config/quickshell/ii/modules/waffle/bar/WidgetsButton.qml @@ -0,0 +1,39 @@ +import QtQuick +import QtQuick.Layouts +import org.kde.kirigami as Kirigami +import qs.services +import qs.modules.common +import qs.modules.waffle.looks + +AppButton { + id: root + + readonly property bool expandedForm: Config.options.waffles.bar.leftAlignApps + leftInset: Config.options.waffles.bar.leftAlignApps ? 0 : 12 + implicitWidth: expandedForm ? 148 : (height - topInset - bottomInset + leftInset + rightInset) + iconName: "widgets" + + contentItem: Item { + anchors { + verticalCenter: parent.verticalCenter + left: root.expandedForm ? parent.left : undefined + horizontalCenter: root.expandedForm ? undefined : background.horizontalCenter + } + implicitHeight: row.implicitHeight + implicitWidth: row.implicitWidth + Row { + id: row + anchors { + verticalCenter: parent.verticalCenter + left: root.expandedForm ? parent.left : undefined + horizontalCenter: root.expandedForm ? undefined : parent.horizontalCenter + margins: 8 + } + + AppIcon { + id: iconWidget + iconName: root.iconName + } + } + } +} diff --git a/dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml b/dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml index 95693a05d..ea225f093 100644 --- a/dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml +++ b/dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml @@ -19,13 +19,13 @@ Singleton { property real fluentContentTransparency: 0.3 colors: QtObject { id: colors - property color bg0: "#1C1C1C" - property color bg0Border: "#404040" - property color bg1: "#2E2E2E" - property color bg1Hover: "#292929" - property color bg1Active: "#252525" - property color bg1Border: "#333333" - property color fg: "#FFFFFF" + property color bg0: root.dark ? "#1C1C1C" : "#EEEEEE" + property color bg0Border: root.dark ? "#404040" : "#BEBEBE" + property color bg1: root.dark ? "#2E2E2E" : "#F7F7F7" + property color bg1Hover: root.dark ? "#292929" : "#F7F7F7" + property color bg1Active: root.dark ? "#252525" : "#F3F3F3" + property color bg1Border: root.dark ? "#333333" : "#E9E9E9" + property color fg: root.dark ? "#FFFFFF" : "#000000" property color brand: Appearance.m3colors.m3primary } @@ -71,6 +71,14 @@ Singleton { } } + property Component opacity: Component { + NumberAnimation{ + duration: 80 + easing.type: Easing.BezierSpline + easing.bezierCurve: transition.easing.bezierCurve.easeIn + } + } + property Component enter: Component { NumberAnimation { duration: 250 @@ -97,9 +105,9 @@ Singleton { property Component anchor: Component { AnchorAnimation { - duration: 250 + duration: 160 easing.type: Easing.BezierSpline - easing.bezierCurve: transition.easing.bezierCurve.easeInOut + easing.bezierCurve: transition.easing.bezierCurve.easeIn } } }