forked from Shinonome/dots-hyprland
replace multieffect shadows with rectangularshadow ones
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user