replace multieffect shadows with rectangularshadow ones

This commit is contained in:
end-4
2025-05-27 09:40:26 +02:00
parent 4ea6474cb6
commit 8ede97a278
11 changed files with 293 additions and 326 deletions
@@ -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()
@@ -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 {
@@ -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
@@ -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)
}
}
}
@@ -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
@@ -49,7 +49,14 @@ Item {
property Component windowComponent: OverviewWindow {}
property list<OverviewWindow> 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
@@ -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
@@ -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)
}
@@ -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
@@ -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
}
}
}
}
@@ -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 {