From 8ede97a2786c1d1220797f35f022a7a14f4a5d47 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Tue, 27 May 2025 09:40:26 +0200 Subject: [PATCH] replace multieffect shadows with rectangularshadow ones --- .../modules/cheatsheet/Cheatsheet.qml | 19 +- .../quickshell/modules/common/Appearance.qml | 2 +- .../common/widgets/NotificationGroup.qml | 19 +- .../modules/mediaControls/PlayerControl.qml | 297 +++++++++--------- .../onScreenDisplay/OsdValueIndicator.qml | 17 +- .../modules/overview/OverviewWidget.qml | 19 +- .../modules/overview/SearchWidget.qml | 16 +- .../modules/sidebarLeft/SidebarLeft.qml | 17 +- .../modules/sidebarLeft/anime/BooruImage.qml | 25 +- .../modules/sidebarRight/SidebarRight.qml | 171 +++++----- .../modules/sidebarRight/todo/TodoWidget.qml | 17 +- 11 files changed, 293 insertions(+), 326 deletions(-) diff --git a/.config/quickshell/modules/cheatsheet/Cheatsheet.qml b/.config/quickshell/modules/cheatsheet/Cheatsheet.qml index f7a69266e..83af1f004 100644 --- a/.config/quickshell/modules/cheatsheet/Cheatsheet.qml +++ b/.config/quickshell/modules/cheatsheet/Cheatsheet.qml @@ -55,7 +55,16 @@ Scope { // Scope } } + // Background + RectangularShadow { + anchors.fill: cheatsheetBackground + radius: cheatsheetBackground.radius + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow + cached: true + } Rectangle { id: cheatsheetBackground anchors.centerIn: parent @@ -65,16 +74,6 @@ Scope { // Scope implicitWidth: cheatsheetColumnLayout.implicitWidth + padding * 2 implicitHeight: cheatsheetColumnLayout.implicitHeight + padding * 2 - layer.enabled: true - layer.effect: MultiEffect { - source: cheatsheetBackground - anchors.fill: cheatsheetBackground - shadowEnabled: true - shadowVerticalOffset: 1 - shadowColor: Appearance.colors.colShadow - shadowBlur: 0.5 - } - Keys.onPressed: (event) => { // Esc to close if (event.key === Qt.Key_Escape) { cheatsheetRoot.hide() diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index 940dd26ea..dcb3d2221 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -128,7 +128,7 @@ Singleton { property color colTooltip: "#3C4043" // m3colors.m3inverseSurface in the specs, but the m3 website actually uses this color property color colOnTooltip: "#F8F9FA" // m3colors.m3inverseOnSurface in the specs, but the m3 website actually uses this color property color colScrim: ColorUtils.transparentize(m3colors.m3scrim, 0.5) - property color colShadow: ColorUtils.transparentize(m3colors.m3shadow, 0.75) + property color colShadow: ColorUtils.transparentize(m3colors.m3shadow, 0.85) } rounding: QtObject { diff --git a/.config/quickshell/modules/common/widgets/NotificationGroup.qml b/.config/quickshell/modules/common/widgets/NotificationGroup.qml index 62677ae10..14669e99b 100644 --- a/.config/quickshell/modules/common/widgets/NotificationGroup.qml +++ b/.config/quickshell/modules/common/widgets/NotificationGroup.qml @@ -106,7 +106,14 @@ Item { // Notification group area } - + RectangularShadow { + visible: popup + anchors.fill: background + radius: background.radius + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow + } Rectangle { // Background of the notification id: background anchors.left: parent.left @@ -134,16 +141,6 @@ Item { // Notification group area animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) } - layer.enabled: true - layer.effect: MultiEffect { - source: background - anchors.fill: background - shadowEnabled: popup - shadowColor: Appearance.colors.colShadow - shadowVerticalOffset: 1 - shadowBlur: 0.5 - } - RowLayout { // Left column for icon, right column for content id: row anchors.top: parent.top diff --git a/.config/quickshell/modules/mediaControls/PlayerControl.qml b/.config/quickshell/modules/mediaControls/PlayerControl.qml index bdafb6a61..5c770192d 100644 --- a/.config/quickshell/modules/mediaControls/PlayerControl.qml +++ b/.config/quickshell/modules/mediaControls/PlayerControl.qml @@ -74,12 +74,6 @@ Item { // Player instance id: coverArtDownloader property string targetFile: playerController.artUrl command: [ "bash", "-c", `[ -f ${artFilePath} ] || curl -sSL '${targetFile}' -o '${artFilePath}'` ] - stdout: SplitParser { - onRead: data => { - // console.log("Color quantizer output:", data) - playerController.artDominantColor = "#" + data - } - } onExited: (exitCode, exitStatus) => { colorQuantizer.targetFile = playerController.artUrl // Yes this binding break is intentional colorQuantizer.running = true @@ -93,7 +87,6 @@ Item { // Player instance command: [ "sh", "-c", `magick '${targetFile}' -scale 1x1\\! -format '%[fx:int(255*r+.5)],%[fx:int(255*g+.5)],%[fx:int(255*b+.5)]' info: | sed 's/,/\\n/g' | xargs -L 1 printf '%02x' ; echo` ] stdout: SplitParser { onRead: data => { - // console.log("Color quantizer output:", data) playerController.artDominantColor = "#" + data } } @@ -115,190 +108,182 @@ Item { // Player instance property color colOnSecondaryContainer: ColorUtils.mix(Appearance.m3colors.m3onSecondaryContainer, artDominantColor, 0.2) } - Rectangle { // Background wrapper with shadow - id: backgroundShadowLayer + + RectangularShadow { + anchors.fill: background + radius: background.radius + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow + cached: true + } + Rectangle { // Background + id: background anchors.fill: parent anchors.margins: Appearance.sizes.elevationMargin color: blendedColors.colLayer0 radius: root.popupRounding layer.enabled: true - layer.effect: MultiEffect { - source: backgroundShadowLayer - anchors.fill: backgroundShadowLayer - shadowEnabled: true - shadowColor: Appearance.colors.colShadow - shadowVerticalOffset: 1 - shadowBlur: 0.5 + layer.effect: OpacityMask { + maskSource: Rectangle { + width: background.width + height: background.height + radius: background.radius + } } - Rectangle { // Background - id: background + Image { + id: blurredArt anchors.fill: parent - color: blendedColors.colLayer0 - radius: root.popupRounding + visible: true + source: playerController.downloaded ? Qt.resolvedUrl(artFilePath) : "" + sourceSize.width: background.width + sourceSize.height: background.height + fillMode: Image.PreserveAspectCrop + cache: false + antialiasing: true + asynchronous: true layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: background.width - height: background.height - radius: background.radius - } + layer.effect: MultiEffect { + source: blurredArt + anchors.fill: blurredArt + saturation: 0.2 + blurEnabled: true + blurMax: 100 + blur: 1 } - Image { - id: blurredArt + Rectangle { anchors.fill: parent - visible: true - source: playerController.downloaded ? Qt.resolvedUrl(artFilePath) : "" - sourceSize.width: background.width - sourceSize.height: background.height - fillMode: Image.PreserveAspectCrop - cache: false - antialiasing: true - asynchronous: true + color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25) + radius: root.popupRounding + } + } + + RowLayout { + anchors.fill: parent + anchors.margins: root.contentPadding + spacing: 15 + + Rectangle { // Art background + id: artBackground + Layout.fillHeight: true + implicitWidth: height + radius: root.artRounding + color: blendedColors.colLayer1 layer.enabled: true - layer.effect: MultiEffect { - source: blurredArt - anchors.fill: blurredArt - saturation: 0.2 - blurEnabled: true - blurMax: 100 - blur: 1 + layer.effect: OpacityMask { + maskSource: Rectangle { + width: artBackground.width + height: artBackground.height + radius: artBackground.radius + } } - Rectangle { + Image { // Art image + id: mediaArt + property int size: parent.height anchors.fill: parent - color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25) - radius: root.popupRounding + + source: playerController.downloaded ? Qt.resolvedUrl(artFilePath) : "" + fillMode: Image.PreserveAspectCrop + cache: false + antialiasing: true + asynchronous: true + + width: size + height: size + sourceSize.width: size + sourceSize.height: size } } - RowLayout { - anchors.fill: parent - anchors.margins: root.contentPadding - spacing: 15 + ColumnLayout { // Info & controls + Layout.fillHeight: true + spacing: 2 - Rectangle { // Art background - id: artBackground - Layout.fillHeight: true - implicitWidth: height - radius: root.artRounding - color: blendedColors.colLayer1 - - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: artBackground.width - height: artBackground.height - radius: artBackground.radius - } - } - - Image { // Art image - id: mediaArt - property int size: parent.height - anchors.fill: parent - - source: playerController.downloaded ? Qt.resolvedUrl(artFilePath) : "" - fillMode: Image.PreserveAspectCrop - cache: false - antialiasing: true - asynchronous: true - - width: size - height: size - sourceSize.width: size - sourceSize.height: size - } + StyledText { + id: trackTitle + Layout.fillWidth: true + font.pixelSize: Appearance.font.pixelSize.large + color: blendedColors.colOnLayer0 + elide: Text.ElideRight + text: StringUtils.cleanMusicTitle(playerController.player?.trackTitle) || "Untitled" } - - ColumnLayout { // Info & controls - Layout.fillHeight: true - spacing: 2 + StyledText { + id: trackArtist + Layout.fillWidth: true + font.pixelSize: Appearance.font.pixelSize.smaller + color: blendedColors.colSubtext + elide: Text.ElideRight + text: playerController.player?.trackArtist + } + Item { Layout.fillHeight: true } + Item { + Layout.fillWidth: true + implicitHeight: trackTime.implicitHeight + sliderRow.implicitHeight StyledText { - id: trackTitle - Layout.fillWidth: true - font.pixelSize: Appearance.font.pixelSize.large - color: blendedColors.colOnLayer0 - elide: Text.ElideRight - text: StringUtils.cleanMusicTitle(playerController.player?.trackTitle) || "Untitled" - } - StyledText { - id: trackArtist - Layout.fillWidth: true - font.pixelSize: Appearance.font.pixelSize.smaller + id: trackTime + anchors.bottom: sliderRow.top + anchors.bottomMargin: 5 + anchors.left: parent.left + font.pixelSize: Appearance.font.pixelSize.small color: blendedColors.colSubtext elide: Text.ElideRight - text: playerController.player?.trackArtist + text: `${StringUtils.friendlyTimeForSeconds(playerController.player?.position)} / ${StringUtils.friendlyTimeForSeconds(playerController.player?.length)}` } - Item { Layout.fillHeight: true } - Item { - Layout.fillWidth: true - implicitHeight: trackTime.implicitHeight + sliderRow.implicitHeight - - StyledText { - id: trackTime - anchors.bottom: sliderRow.top - anchors.bottomMargin: 5 - anchors.left: parent.left - font.pixelSize: Appearance.font.pixelSize.small - color: blendedColors.colSubtext - elide: Text.ElideRight - text: `${StringUtils.friendlyTimeForSeconds(playerController.player?.position)} / ${StringUtils.friendlyTimeForSeconds(playerController.player?.length)}` + RowLayout { + id: sliderRow + anchors { + bottom: parent.bottom + left: parent.left + right: parent.right } - RowLayout { - id: sliderRow - anchors { - bottom: parent.bottom - left: parent.left - right: parent.right - } - TrackChangeButton { - iconName: "skip_previous" - onClicked: playerController.player?.previous() - } - StyledProgressBar { - id: slider - Layout.fillWidth: true - highlightColor: blendedColors.colPrimary - trackColor: blendedColors.colSecondaryContainer - value: playerController.player?.position / playerController.player?.length - } - TrackChangeButton { - iconName: "skip_next" - onClicked: playerController.player?.next() - } + TrackChangeButton { + iconName: "skip_previous" + onClicked: playerController.player?.previous() } + StyledProgressBar { + id: slider + Layout.fillWidth: true + highlightColor: blendedColors.colPrimary + trackColor: blendedColors.colSecondaryContainer + value: playerController.player?.position / playerController.player?.length + } + TrackChangeButton { + iconName: "skip_next" + onClicked: playerController.player?.next() + } + } - RippleButton { - id: playPauseButton - anchors.right: parent.right - anchors.bottom: sliderRow.top - anchors.bottomMargin: 5 - property real size: 44 - implicitWidth: size - implicitHeight: size - onClicked: playerController.player.togglePlaying(); + RippleButton { + id: playPauseButton + anchors.right: parent.right + anchors.bottom: sliderRow.top + anchors.bottomMargin: 5 + property real size: 44 + implicitWidth: size + implicitHeight: size + onClicked: playerController.player.togglePlaying(); - buttonRadius: playerController.player?.isPlaying ? Appearance?.rounding.normal : size / 2 - colBackground: playerController.player?.isPlaying ? blendedColors.colPrimary : blendedColors.colSecondaryContainer - colBackgroundHover: playerController.player?.isPlaying ? blendedColors.colPrimaryHover : blendedColors.colSecondaryContainerHover - colRipple: playerController.player?.isPlaying ? blendedColors.colPrimaryActive : blendedColors.colSecondaryContainerActive + buttonRadius: playerController.player?.isPlaying ? Appearance?.rounding.normal : size / 2 + colBackground: playerController.player?.isPlaying ? blendedColors.colPrimary : blendedColors.colSecondaryContainer + colBackgroundHover: playerController.player?.isPlaying ? blendedColors.colPrimaryHover : blendedColors.colSecondaryContainerHover + colRipple: playerController.player?.isPlaying ? blendedColors.colPrimaryActive : blendedColors.colSecondaryContainerActive - contentItem: MaterialSymbol { - iconSize: Appearance.font.pixelSize.huge - fill: 1 - horizontalAlignment: Text.AlignHCenter - color: playerController.player?.isPlaying ? blendedColors.colOnPrimary : blendedColors.colOnSecondaryContainer - text: playerController.player?.isPlaying ? "pause" : "play_arrow" + contentItem: MaterialSymbol { + iconSize: Appearance.font.pixelSize.huge + fill: 1 + horizontalAlignment: Text.AlignHCenter + color: playerController.player?.isPlaying ? blendedColors.colOnPrimary : blendedColors.colOnSecondaryContainer + text: playerController.player?.isPlaying ? "pause" : "play_arrow" - Behavior on color { - animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) - } + Behavior on color { + animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) } } } diff --git a/.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml b/.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml index 58d4ac5ca..29829b43d 100644 --- a/.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml +++ b/.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml @@ -25,6 +25,13 @@ Item { implicitWidth: Appearance.sizes.osdWidth implicitHeight: valueIndicator.implicitHeight + RectangularShadow { + anchors.fill: valueIndicator + radius: valueIndicator.radius + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow + } WrapperRectangle { id: valueIndicator anchors.fill: parent @@ -32,16 +39,6 @@ Item { color: Appearance.colors.colLayer0 implicitWidth: valueRow.implicitWidth - layer.enabled: true - layer.effect: MultiEffect { - source: valueIndicator - anchors.fill: valueIndicator - shadowEnabled: true - shadowColor: Appearance.colors.colShadow - shadowVerticalOffset: 1 - shadowBlur: 0.5 - } - RowLayout { // Icon on the left, stuff on the right id: valueRow Layout.margins: 10 diff --git a/.config/quickshell/modules/overview/OverviewWidget.qml b/.config/quickshell/modules/overview/OverviewWidget.qml index f4498408e..85d83242a 100644 --- a/.config/quickshell/modules/overview/OverviewWidget.qml +++ b/.config/quickshell/modules/overview/OverviewWidget.qml @@ -49,7 +49,14 @@ Item { property Component windowComponent: OverviewWindow {} property list windowWidgets: [] - Rectangle { + RectangularShadow { // Background shadow + anchors.fill: overviewBackground + radius: overviewBackground.radius + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow + } + Rectangle { // Background id: overviewBackground anchors.fill: parent @@ -59,16 +66,6 @@ Item { color: Appearance.colors.colLayer0 radius: Appearance.rounding.screenRounding * root.scale + 5 * 2 - layer.enabled: true - layer.effect: MultiEffect { - source: overviewBackground - anchors.fill: overviewBackground - shadowEnabled: true - shadowColor: Appearance.colors.colShadow - shadowVerticalOffset: 1 - shadowBlur: 0.5 - } - ColumnLayout { id: workspaceColumnLayout diff --git a/.config/quickshell/modules/overview/SearchWidget.qml b/.config/quickshell/modules/overview/SearchWidget.qml index d649a42b5..38ee4e2ee 100644 --- a/.config/quickshell/modules/overview/SearchWidget.qml +++ b/.config/quickshell/modules/overview/SearchWidget.qml @@ -175,6 +175,13 @@ Item { // Wrapper } } + RectangularShadow { // Background shadow + anchors.fill: searchWidgetContent + radius: searchWidgetContent.radius + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow + } Rectangle { // Background id: searchWidgetContent anchors.centerIn: parent @@ -182,15 +189,6 @@ Item { // Wrapper implicitHeight: columnLayout.implicitHeight radius: Appearance.rounding.large color: Appearance.colors.colLayer0 - layer.enabled: true - layer.effect: MultiEffect { - source: searchWidgetContent - anchors.fill: searchWidgetContent - shadowEnabled: true - shadowColor: Appearance.colors.colShadow - shadowVerticalOffset: 1 - shadowBlur: 0.5 - } ColumnLayout { id: columnLayout diff --git a/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml b/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml index 6963c50ab..a5bb59d6f 100644 --- a/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml +++ b/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml @@ -65,6 +65,13 @@ Scope { // Scope } // Background + RectangularShadow { // Background shadow + anchors.fill: sidebarLeftBackground + radius: sidebarLeftBackground.radius + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow + } Rectangle { id: sidebarLeftBackground @@ -78,16 +85,6 @@ Scope { // Scope radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1 focus: sidebarRoot.visible - layer.enabled: true - layer.effect: MultiEffect { - source: sidebarLeftBackground - anchors.fill: sidebarLeftBackground - shadowEnabled: true - shadowColor: Appearance.colors.colShadow - shadowVerticalOffset: 1 - shadowBlur: 0.5 - } - Behavior on width { animation: Appearance.animation.elementMove.numberAnimation.createObject(this) } diff --git a/.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml b/.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml index f9e9f4eb8..29768cfb0 100644 --- a/.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml +++ b/.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml @@ -43,6 +43,10 @@ Button { } } + StyledToolTip { + content: `${StringUtils.wordWrap(root.imageData.tags, root.maxTagStringLineLength)}` + } + padding: 0 implicitWidth: root.rowHeight * modelData.aspect_ratio implicitHeight: root.rowHeight @@ -97,10 +101,6 @@ Button { colBackgroundHover: ColorUtils.transparentize(ColorUtils.mix(Appearance.m3colors.m3surface, Appearance.m3colors.m3onSurface, 0.8), 0.2) colRipple: ColorUtils.transparentize(ColorUtils.mix(Appearance.m3colors.m3surface, Appearance.m3colors.m3onSurface, 0.6), 0.1) - StyledToolTip { - content: `${StringUtils.wordWrap(root.imageData.tags, root.maxTagStringLineLength)}\n${qsTr("Click for options")}` - } - contentItem: MaterialSymbol { horizontalAlignment: Text.AlignHCenter iconSize: Appearance.font.pixelSize.large @@ -124,6 +124,13 @@ Button { width: contextMenu.width height: contextMenu.height + RectangularShadow { // Background shadow + anchors.fill: contextMenu + radius: contextMenu.radius + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow + } Rectangle { id: contextMenu anchors.centerIn: parent @@ -134,16 +141,6 @@ Button { implicitHeight: contextMenuColumnLayout.implicitHeight + radius * 2 implicitWidth: contextMenuColumnLayout.implicitWidth - layer.enabled: true - layer.effect: MultiEffect { - source: contextMenu - anchors.fill: contextMenu - shadowEnabled: true - shadowColor: Appearance.colors.colShadow - shadowVerticalOffset: 1 - shadowBlur: 0.5 - } - Behavior on opacity { NumberAnimation { duration: Appearance.animation.elementMoveFast.duration diff --git a/.config/quickshell/modules/sidebarRight/SidebarRight.qml b/.config/quickshell/modules/sidebarRight/SidebarRight.qml index e509efc67..d2dfa34a8 100644 --- a/.config/quickshell/modules/sidebarRight/SidebarRight.qml +++ b/.config/quickshell/modules/sidebarRight/SidebarRight.qml @@ -56,109 +56,112 @@ Scope { width: sidebarWidth - Appearance.sizes.hyprlandGapsOut * 2 height: parent.height - Appearance.sizes.hyprlandGapsOut * 2 - sourceComponent: Rectangle { - id: sidebarRightBackground + sourceComponent: Item { + implicitHeight: sidebarRightBackground.implicitHeight + implicitWidth: sidebarRightBackground.implicitWidth - implicitHeight: parent.height - Appearance.sizes.hyprlandGapsOut * 2 - implicitWidth: sidebarWidth - Appearance.sizes.hyprlandGapsOut * 2 - color: Appearance.colors.colLayer0 - radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1 - - layer.enabled: true - layer.effect: MultiEffect { - source: sidebarRightBackground + RectangularShadow { // Background shadow anchors.fill: sidebarRightBackground - shadowEnabled: true - shadowColor: Appearance.colors.colShadow - shadowVerticalOffset: 1 - shadowBlur: 0.5 + radius: sidebarRightBackground.radius + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow } + Rectangle { + id: sidebarRightBackground - Keys.onPressed: (event) => { - if (event.key === Qt.Key_Escape) { - sidebarRoot.hide(); - } - } - - - ColumnLayout { - spacing: sidebarPadding anchors.fill: parent - anchors.margins: sidebarPadding + implicitHeight: parent.height - Appearance.sizes.hyprlandGapsOut * 2 + implicitWidth: sidebarWidth - Appearance.sizes.hyprlandGapsOut * 2 + color: Appearance.colors.colLayer0 + radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1 - RowLayout { - Layout.fillHeight: false - spacing: 10 - Layout.margins: 10 - Layout.topMargin: 5 - Layout.bottomMargin: 0 + Keys.onPressed: (event) => { + if (event.key === Qt.Key_Escape) { + sidebarRoot.hide(); + } + } - Item { - implicitWidth: distroIcon.width - implicitHeight: distroIcon.height - CustomIcon { - id: distroIcon - width: 25 - height: 25 - source: SystemInfo.distroIcon + + ColumnLayout { + spacing: sidebarPadding + anchors.fill: parent + anchors.margins: sidebarPadding + + RowLayout { + Layout.fillHeight: false + spacing: 10 + Layout.margins: 10 + Layout.topMargin: 5 + Layout.bottomMargin: 0 + + Item { + implicitWidth: distroIcon.width + implicitHeight: distroIcon.height + CustomIcon { + id: distroIcon + width: 25 + height: 25 + source: SystemInfo.distroIcon + } + ColorOverlay { + anchors.fill: distroIcon + source: distroIcon + color: Appearance.colors.colOnLayer0 + } } - ColorOverlay { - anchors.fill: distroIcon - source: distroIcon + + StyledText { + font.pixelSize: Appearance.font.pixelSize.normal color: Appearance.colors.colOnLayer0 + text: StringUtils.format(qsTr("Uptime: {0}"), DateTime.uptime) + textFormat: Text.MarkdownText + } + + Item { + Layout.fillWidth: true + } + + QuickToggleButton { + toggled: false + buttonIcon: "power_settings_new" + onClicked: { + Hyprland.dispatch("global quickshell:sessionOpen") + } + StyledToolTip { + content: qsTr("Session") + } } } - StyledText { - font.pixelSize: Appearance.font.pixelSize.normal - color: Appearance.colors.colOnLayer0 - text: StringUtils.format(qsTr("Uptime: {0}"), DateTime.uptime) - textFormat: Text.MarkdownText + ButtonGroup { + Layout.alignment: Qt.AlignHCenter + spacing: 5 + padding: 5 + color: Appearance.colors.colLayer1 + + NetworkToggle {} + BluetoothToggle {} + NightLight {} + GameMode {} + IdleInhibitor {} } - Item { + // Center widget group + CenterWidgetGroup { + focus: sidebarRoot.visible + Layout.alignment: Qt.AlignHCenter + Layout.fillHeight: true Layout.fillWidth: true } - QuickToggleButton { - toggled: false - buttonIcon: "power_settings_new" - onClicked: { - Hyprland.dispatch("global quickshell:sessionOpen") - } - StyledToolTip { - content: qsTr("Session") - } + BottomWidgetGroup { + Layout.alignment: Qt.AlignHCenter + Layout.fillHeight: false + Layout.fillWidth: true + Layout.preferredHeight: implicitHeight } } - - ButtonGroup { - Layout.alignment: Qt.AlignHCenter - spacing: 5 - padding: 5 - color: Appearance.colors.colLayer1 - - NetworkToggle {} - BluetoothToggle {} - NightLight {} - GameMode {} - IdleInhibitor {} - } - - // Center widget group - CenterWidgetGroup { - focus: sidebarRoot.visible - Layout.alignment: Qt.AlignHCenter - Layout.fillHeight: true - Layout.fillWidth: true - } - - BottomWidgetGroup { - Layout.alignment: Qt.AlignHCenter - Layout.fillHeight: false - Layout.fillWidth: true - Layout.preferredHeight: implicitHeight - } } } } diff --git a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml index 96e96a5a7..e4f441b50 100644 --- a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml +++ b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml @@ -152,6 +152,13 @@ Item { } // + FAB + RectangularShadow { // Background shadow + anchors.fill: fabButton + radius: Appearance.rounding.normal + blur: 1.2 * Appearance.sizes.elevationMargin + spread: 1 + color: Appearance.colors.colShadow + } Button { id: fabButton anchors.right: parent.right @@ -173,16 +180,6 @@ Item { Behavior on color { animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) } - - layer.enabled: true - layer.effect: MultiEffect { - source: fabBackground - anchors.fill: fabBackground - shadowEnabled: true - shadowColor: Appearance.colors.colShadow - shadowBlur: 0.6 - shadowVerticalOffset: fabButton.hovered ? 4 : 2 - } } contentItem: MaterialSymbol {