From 31998a6c32f4d45652f364548eb3d18600424097 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sat, 22 Nov 2025 12:34:16 +0100 Subject: [PATCH] waffles: transparency --- .../models/quickToggles/BluetoothToggle.qml | 2 +- .../ii/sessionScreen/SessionScreen.qml | 4 +- .../waffle/actionCenter/FooterRectangle.qml | 2 +- .../actionCenter/mainPage/MainPageFooter.qml | 6 +- .../ii/modules/waffle/bar/BarButton.qml | 5 +- .../ii/modules/waffle/bar/BarPopup.qml | 2 +- .../ii/modules/waffle/bar/SystemButton.qml | 6 +- .../ii/modules/waffle/bar/TimeButton.qml | 5 +- .../modules/waffle/bar/tasks/TaskPreview.qml | 2 +- .../modules/waffle/looks/AcrylicRectangle.qml | 2 +- .../ii/modules/waffle/looks/Looks.qml | 104 ++++++++++++++---- .../waffle/looks/WBarAttachedPanelContent.qml | 4 + .../ii/modules/waffle/looks/WButton.qml | 4 +- .../ii/modules/waffle/looks/WIcons.qml | 7 +- .../waffle/looks/WRectangularShadow.qml | 11 ++ .../ii/modules/waffle/looks/WStackView.qml | 6 +- .../modules/waffle/looks/WToolTipContent.qml | 2 +- 17 files changed, 133 insertions(+), 41 deletions(-) create mode 100644 dots/.config/quickshell/ii/modules/waffle/looks/WRectangularShadow.qml diff --git a/dots/.config/quickshell/ii/modules/common/models/quickToggles/BluetoothToggle.qml b/dots/.config/quickshell/ii/modules/common/models/quickToggles/BluetoothToggle.qml index 11b920cb2..c56b82675 100644 --- a/dots/.config/quickshell/ii/modules/common/models/quickToggles/BluetoothToggle.qml +++ b/dots/.config/quickshell/ii/modules/common/models/quickToggles/BluetoothToggle.qml @@ -7,7 +7,7 @@ import qs.modules.common.widgets QuickToggleModel { name: Translation.tr("Bluetooth") - statusText: BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("No device") + statusText: BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("Not connected") tooltipText: Translation.tr("%1 | Right-click to configure").arg( (BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("Bluetooth")) + (BluetoothStatus.activeDeviceCount > 1 ? ` +${BluetoothStatus.activeDeviceCount - 1}` : "") diff --git a/dots/.config/quickshell/ii/modules/ii/sessionScreen/SessionScreen.qml b/dots/.config/quickshell/ii/modules/ii/sessionScreen/SessionScreen.qml index 6c8707a23..8899c3e75 100644 --- a/dots/.config/quickshell/ii/modules/ii/sessionScreen/SessionScreen.qml +++ b/dots/.config/quickshell/ii/modules/ii/sessionScreen/SessionScreen.qml @@ -93,7 +93,9 @@ Scope { WlrLayershell.namespace: "quickshell:session" WlrLayershell.layer: WlrLayer.Overlay WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive - color: ColorUtils.transparentize(Appearance.m3colors.m3background, 0.3) + // This is a big surface so we needa carefully choose the transparency, + // or we'll get a large scary rgb blob + color: ColorUtils.transparentize(Appearance.m3colors.m3background, Appearance.m3colors.darkmode ? 0.04 : 0.12) anchors { top: true diff --git a/dots/.config/quickshell/ii/modules/waffle/actionCenter/FooterRectangle.qml b/dots/.config/quickshell/ii/modules/waffle/actionCenter/FooterRectangle.qml index f58ea6c9a..e3f7cd120 100644 --- a/dots/.config/quickshell/ii/modules/waffle/actionCenter/FooterRectangle.qml +++ b/dots/.config/quickshell/ii/modules/waffle/actionCenter/FooterRectangle.qml @@ -10,7 +10,7 @@ import qs.modules.waffle.looks Rectangle { Layout.fillHeight: false Layout.fillWidth: true - color: Looks.colors.bgPanelFooter + color: "transparent" implicitWidth: 360 implicitHeight: 47 diff --git a/dots/.config/quickshell/ii/modules/waffle/actionCenter/mainPage/MainPageFooter.qml b/dots/.config/quickshell/ii/modules/waffle/actionCenter/mainPage/MainPageFooter.qml index feeb744c3..1190bd38e 100644 --- a/dots/.config/quickshell/ii/modules/waffle/actionCenter/mainPage/MainPageFooter.qml +++ b/dots/.config/quickshell/ii/modules/waffle/actionCenter/mainPage/MainPageFooter.qml @@ -22,7 +22,11 @@ FooterRectangle { FluentIcon { anchors.verticalCenter: parent.verticalCenter - icon: WIcons.batteryIcon + icon: WIcons.batteryLevelIcon + FluentIcon { + anchors.fill: parent + icon: WIcons.batteryIcon + } } WText { anchors.verticalCenter: parent.verticalCenter diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/BarButton.qml b/dots/.config/quickshell/ii/modules/waffle/bar/BarButton.qml index a2e745072..53a37cba0 100644 --- a/dots/.config/quickshell/ii/modules/waffle/bar/BarButton.qml +++ b/dots/.config/quickshell/ii/modules/waffle/bar/BarButton.qml @@ -19,8 +19,11 @@ WButton { Layout.fillHeight: true topInset: 4 bottomInset: 4 + leftInset: 0 + rightInset: 0 + horizontalPadding: 8 - colBackgroundBorder: ColorUtils.transparentize(Looks.colors.bg1Border, (root.checked || root.hovered) ? Looks.contentTransparency : 1) + colBackgroundBorder: ColorUtils.transparentize(Looks.colors.bg1Border, (root.checked || root.hovered) ? Looks.backgroundTransparency : 1) color: { if (root.down) { return root.colBackgroundActive diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/BarPopup.qml b/dots/.config/quickshell/ii/modules/waffle/bar/BarPopup.qml index a46811b82..37aaece92 100644 --- a/dots/.config/quickshell/ii/modules/waffle/bar/BarPopup.qml +++ b/dots/.config/quickshell/ii/modules/waffle/bar/BarPopup.qml @@ -118,7 +118,7 @@ Loader { bottomMargin: root.barAtBottom ? popupWindow.sourceEdgeMargin : (root.ambientShadowWidth + root.visualMargin) topMargin: root.barAtBottom ? (root.ambientShadowWidth + root.visualMargin) : popupWindow.sourceEdgeMargin } - color: Looks.colors.bg1 + color: Looks.colors.bg1Base radius: Looks.radius.large // test diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/SystemButton.qml b/dots/.config/quickshell/ii/modules/waffle/bar/SystemButton.qml index 956d25ce7..da5e464d2 100644 --- a/dots/.config/quickshell/ii/modules/waffle/bar/SystemButton.qml +++ b/dots/.config/quickshell/ii/modules/waffle/bar/SystemButton.qml @@ -50,7 +50,11 @@ BarButton { visible: Battery?.available ?? false iconItem: FluentIcon { anchors.verticalCenter: parent.verticalCenter - icon: WIcons.batteryIcon + icon: WIcons.batteryLevelIcon + FluentIcon { + anchors.fill: parent + icon: WIcons.batteryIcon + } } } } diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/TimeButton.qml b/dots/.config/quickshell/ii/modules/waffle/bar/TimeButton.qml index bf4c5c614..ec2e89e97 100644 --- a/dots/.config/quickshell/ii/modules/waffle/bar/TimeButton.qml +++ b/dots/.config/quickshell/ii/modules/waffle/bar/TimeButton.qml @@ -9,7 +9,8 @@ BarButton { id: root rightInset: 12 // For now this is the rightmost button. Desktop peek is useless. (for now) - padding: 12 + leftPadding: 12 + rightPadding: 22 checked: GlobalStates.sidebarRightOpen onClicked: { @@ -17,7 +18,7 @@ BarButton { } contentItem: Item { - anchors.centerIn: root.background + // anchors.centerIn: parent implicitHeight: contentLayout.implicitHeight implicitWidth: contentLayout.implicitWidth Row { diff --git a/dots/.config/quickshell/ii/modules/waffle/bar/tasks/TaskPreview.qml b/dots/.config/quickshell/ii/modules/waffle/bar/tasks/TaskPreview.qml index 18b11caee..6c42ad94c 100644 --- a/dots/.config/quickshell/ii/modules/waffle/bar/tasks/TaskPreview.qml +++ b/dots/.config/quickshell/ii/modules/waffle/bar/tasks/TaskPreview.qml @@ -85,7 +85,7 @@ PopupWindow { bottomMargin: root.bottom ? sourceEdgeMargin : (root.ambientShadowWidth + root.visualMargin) topMargin: root.bottom ? (root.ambientShadowWidth + root.visualMargin) : sourceEdgeMargin } - color: Looks.colors.bg1 + color: Looks.colors.bg1Base radius: Looks.radius.large layer.enabled: true diff --git a/dots/.config/quickshell/ii/modules/waffle/looks/AcrylicRectangle.qml b/dots/.config/quickshell/ii/modules/waffle/looks/AcrylicRectangle.qml index 3720d6186..62a8d954e 100644 --- a/dots/.config/quickshell/ii/modules/waffle/looks/AcrylicRectangle.qml +++ b/dots/.config/quickshell/ii/modules/waffle/looks/AcrylicRectangle.qml @@ -9,7 +9,7 @@ Rectangle { id: root property bool shiny: true // Top border - property color borderColor: ColorUtils.transparentize(Looks.colors.bg1Border, shiny ? Looks.contentTransparency : 1) + property color borderColor: ColorUtils.transparentize(Looks.colors.bg1Border, shiny ? 0.5 : 1) color: Looks.colors.bg1Hover radius: Looks.radius.medium Behavior on color { diff --git a/dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml b/dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml index 5ef0031f8..6554deb0d 100644 --- a/dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml +++ b/dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml @@ -8,6 +8,8 @@ import qs.modules.common.functions Singleton { id: root + property QtObject darkColors + property QtObject lightColors property QtObject colors property QtObject radius property QtObject font @@ -15,44 +17,100 @@ Singleton { property string iconsPath: `${Directories.assetsPath}/icons/fluent` property bool dark: Appearance.m3colors.darkmode - property real backgroundTransparency: 0.17 - property real contentTransparency: 0.25 + property real backgroundTransparency: 0.15 + property real panelBackgroundTransparency: 0.12 + property real panelLayerTransparency: root.dark ? 0.9 : 0.7 + property real contentTransparency: root.dark ? 0.9 : 0.5 function applyBackgroundTransparency(col) { return ColorUtils.applyAlpha(col, 1 - root.backgroundTransparency) } function applyContentTransparency(col) { return ColorUtils.applyAlpha(col, 1 - root.contentTransparency) } + lightColors: QtObject { // TODO: figure out transparency + id: lightColors + property color bgPanelFooter: "#EEEEEE" + property color bgPanelBody: "#F2F2F2" + property color bgPanelSeparator: "#E0E0E0" + property color bg0: "#EEEEEE" + property color bg0Border: "#BEBEBE" + property color bg1: "#F7F7F7" + property color bg1Base: "#F7F7F7" + property color bg1Hover: "#F7F7F7" + property color bg1Active: '#EFEFEF' + property color bg1Border: '#141414' + property color bg2: "#FBFBFB" + property color bg2Base: "#FBFBFB" + property color bg2Hover: "#FDFDFD" + property color bg2Active: "#FDFDFD" + property color bg2Border: "#EEEEEE" + property color subfg: "#5C5C5C" + property color fg: "#000000" + property color fg1: "#626262" + property color inactiveIcon: "#C4C4C4" + property color controlBg: '#b18484' + property color controlFg: "#FFFFFF" + property color accentUnfocused: "#848484" + } + darkColors: QtObject { + id: darkColors + property color bgPanelFooter: "#1C1C1C" + property color bgPanelBody: '#616161' + property color bgPanelSeparator: "#191919" + property color bg0: "#1C1C1C" + property color bg0Border: "#404040" + property color bg1Base: "#2C2C2C" + property color bg1: "#a8a8a8" + property color bg1Hover: "#b3b3b3" + property color bg1Active: '#727272' + property color bg1Border: '#bebebe' + property color bg2Base: "#313131" + property color bg2: '#8a8a8a' + property color bg2Hover: '#b1b1b1' + property color bg2Active: '#919191' + property color bg2Border: "#bebebe" + property color subfg: "#CED1D7" + property color fg: "#FFFFFF" + property color fg1: "#D1D1D1" + property color inactiveIcon: "#494949" + property color controlBg: "#9B9B9B" + property color controlFg: "#454545" + property color accentUnfocused: "#989898" + } colors: QtObject { id: colors + property color shadow: ColorUtils.transparentize("#000000", 0.62) property color ambientShadow: ColorUtils.transparentize("#000000", 0.75) - property color bgPanelFooter: root.dark ? "#1C1C1C" : "#EEEEEE" - property color bgPanelBody: root.dark ? "#242424" : "#F2F2F2" - property color bgPanelSeparator: root.dark ? "#191919" : "#E0E0E0" - property color bg0: root.dark ? "#1C1C1C" : "#EEEEEE" - property color bg0Border: root.dark ? "#404040" : "#BEBEBE" - property color bg1: root.dark ? "#2C2C2C" : "#F7F7F7" - property color bg1Hover: root.dark ? "#292929" : "#F7F7F7" - property color bg1Active: root.dark ? "#252525" : "#F3F3F3" - property color bg1Border: root.dark ? "#333333" : "#E9E9E9" - property color bg2: root.dark ? "#313131" : "#FBFBFB" - property color bg2Hover: root.dark ? "#383838" : "#FDFDFD" - property color bg2Active: root.dark ? "#333333" : "#FDFDFD" - property color bg2Border: root.dark ? "#464646" : "#EEEEEE" - property color subfg: root.dark ? "#CED1D7" : "#5C5C5C" - property color fg: root.dark ? "#FFFFFF" : "#000000" - property color fg1: root.dark ? "#D1D1D1" : "#626262" - property color inactiveIcon: root.dark ? "#494949" : "#C4C4C4" - property color controlBg: root.dark ? "#9B9B9B" : "#868686" - property color controlFg: root.dark ? "#454545" : "#FFFFFF" + property color bgPanelFooterBase: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelFooter : root.lightColors.bgPanelFooter, root.panelBackgroundTransparency) + 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 bg0Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg0Border : root.lightColors.bg0Border, root.backgroundTransparency) + property color bg1Base: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Base : root.lightColors.bg1Base, root.backgroundTransparency) + property color bg1: ColorUtils.transparentize(root.dark ? root.darkColors.bg1 : root.lightColors.bg1, root.contentTransparency) + property color bg1Hover: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Hover : root.lightColors.bg1Hover, root.contentTransparency) + property color bg1Active: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Active : root.lightColors.bg1Active, root.contentTransparency) + property color bg1Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Border : root.lightColors.bg1Border, root.contentTransparency) + property color bg2Base: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Base : root.lightColors.bg2Base, root.backgroundTransparency) + property color bg2: ColorUtils.transparentize(root.dark ? root.darkColors.bg2 : root.lightColors.bg2, root.contentTransparency) + property color bg2Hover: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Hover : root.lightColors.bg2Hover, root.contentTransparency) + property color bg2Active: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Active : root.lightColors.bg2Active, root.contentTransparency) + property color bg2Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Border : root.lightColors.bg2Border, root.contentTransparency) + property color subfg: root.dark ? root.darkColors.subfg : root.lightColors.subfg + property color fg: root.dark ? root.darkColors.fg : root.lightColors.fg + property color fg1: root.dark ? root.darkColors.fg1 : root.lightColors.fg1 + property color inactiveIcon: root.dark ? root.darkColors.inactiveIcon : root.lightColors.inactiveIcon + property color controlBg: root.dark ? root.darkColors.controlBg : root.lightColors.controlBg + property color controlFg: root.dark ? root.darkColors.controlFg : root.lightColors.controlFg property color danger: "#C42B1C" property color dangerActive: "#B62D1F" property color warning: "#FF9900" - // property color accent: root.dark ? "#A5C6D8" : "#5377A3" property color accent: Appearance.colors.colPrimary property color accentHover: Appearance.colors.colPrimaryHover property color accentActive: Appearance.colors.colPrimaryActive - property color accentUnfocused: root.dark ? "#989898" : "#848484" + property color accentUnfocused: root.dark ? root.darkColors.accentUnfocused : root.lightColors.accentUnfocused property color accentFg: ColorUtils.isDark(accent) ? "#FFFFFF" : "#000000" } diff --git a/dots/.config/quickshell/ii/modules/waffle/looks/WBarAttachedPanelContent.qml b/dots/.config/quickshell/ii/modules/waffle/looks/WBarAttachedPanelContent.qml index ee2c91ff5..ca8fa16a6 100644 --- a/dots/.config/quickshell/ii/modules/waffle/looks/WBarAttachedPanelContent.qml +++ b/dots/.config/quickshell/ii/modules/waffle/looks/WBarAttachedPanelContent.qml @@ -25,6 +25,10 @@ Item { implicitHeight: borderRect.implicitHeight implicitWidth: borderRect.implicitWidth + WRectangularShadow { + target: borderRect + } + Rectangle { id: borderRect z: 1 diff --git a/dots/.config/quickshell/ii/modules/waffle/looks/WButton.qml b/dots/.config/quickshell/ii/modules/waffle/looks/WButton.qml index 76cf00e49..dd50d725a 100644 --- a/dots/.config/quickshell/ii/modules/waffle/looks/WButton.qml +++ b/dots/.config/quickshell/ii/modules/waffle/looks/WButton.qml @@ -85,8 +85,8 @@ Button { property alias border: backgroundRect.border horizontalPadding: 10 verticalPadding: 6 - implicitHeight: contentItem.implicitHeight + verticalPadding * 2 - implicitWidth: contentItem.implicitWidth + horizontalPadding * 2 + implicitHeight: contentItem.implicitHeight + verticalPadding * 2 + topInset + bottomInset + implicitWidth: contentItem.implicitWidth + horizontalPadding * 2 + leftInset + rightInset background: Rectangle { id: backgroundRect diff --git a/dots/.config/quickshell/ii/modules/waffle/looks/WIcons.qml b/dots/.config/quickshell/ii/modules/waffle/looks/WIcons.qml index 6a5814bbc..c8a609d82 100644 --- a/dots/.config/quickshell/ii/modules/waffle/looks/WIcons.qml +++ b/dots/.config/quickshell/ii/modules/waffle/looks/WIcons.qml @@ -40,7 +40,12 @@ Singleton { return "battery-warning"; if (Battery.percentage >= 0.9) return "battery-full"; - return `battery-${Math.ceil(Battery.percentage * 10)}`; + return `battery-0`; + } + + property string batteryLevelIcon: { + const discreteLevel = Math.ceil(Battery.percentage * 10) + return `battery-${discreteLevel > 9 ? "full" : discreteLevel}`; } property string volumeIcon: { diff --git a/dots/.config/quickshell/ii/modules/waffle/looks/WRectangularShadow.qml b/dots/.config/quickshell/ii/modules/waffle/looks/WRectangularShadow.qml new file mode 100644 index 000000000..ba8a648c6 --- /dev/null +++ b/dots/.config/quickshell/ii/modules/waffle/looks/WRectangularShadow.qml @@ -0,0 +1,11 @@ +import QtQuick +import QtQuick.Effects +import qs.modules.common +import qs.modules.common.widgets + +StyledRectangularShadow { + blur: 10 + spread: 2 + offset: Qt.vector2d(0.0, 4) + color: Looks.colors.shadow +} diff --git a/dots/.config/quickshell/ii/modules/waffle/looks/WStackView.qml b/dots/.config/quickshell/ii/modules/waffle/looks/WStackView.qml index 52a703792..0e396821d 100644 --- a/dots/.config/quickshell/ii/modules/waffle/looks/WStackView.qml +++ b/dots/.config/quickshell/ii/modules/waffle/looks/WStackView.qml @@ -4,15 +4,15 @@ import qs.modules.waffle.looks StackView { id: root - property real moveDistance: 20 - property int pushDuration: 100 + property real moveDistance: 30 + property int pushDuration: 220 property list bezierCurve: Looks.transition.easing.bezierCurve.easeIn clip: true property alias color: background.color background: Rectangle { id: background - color: Looks.colors.bgPanelBody + color: Looks.colors.bgPanelFooterBase } pushEnter: Transition { diff --git a/dots/.config/quickshell/ii/modules/waffle/looks/WToolTipContent.qml b/dots/.config/quickshell/ii/modules/waffle/looks/WToolTipContent.qml index 57396fef5..13c78fc7e 100644 --- a/dots/.config/quickshell/ii/modules/waffle/looks/WToolTipContent.qml +++ b/dots/.config/quickshell/ii/modules/waffle/looks/WToolTipContent.qml @@ -21,7 +21,7 @@ Item { anchors.centerIn: parent implicitWidth: root.realContentItem.implicitWidth + root.horizontalPadding * 2 implicitHeight: root.realContentItem.implicitHeight + root.verticalPadding * 2 - color: Looks.colors.bg1 + color: Looks.colors.bg1Base radius: Looks.radius.medium children: [root.realContentItem]