forked from Shinonome/dots-hyprland
replace multieffect shadows with rectangularshadow ones
This commit is contained in:
@@ -55,7 +55,16 @@ Scope { // Scope
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Background
|
// Background
|
||||||
|
RectangularShadow {
|
||||||
|
anchors.fill: cheatsheetBackground
|
||||||
|
radius: cheatsheetBackground.radius
|
||||||
|
blur: 1.2 * Appearance.sizes.elevationMargin
|
||||||
|
spread: 1
|
||||||
|
color: Appearance.colors.colShadow
|
||||||
|
cached: true
|
||||||
|
}
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: cheatsheetBackground
|
id: cheatsheetBackground
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
@@ -65,16 +74,6 @@ Scope { // Scope
|
|||||||
implicitWidth: cheatsheetColumnLayout.implicitWidth + padding * 2
|
implicitWidth: cheatsheetColumnLayout.implicitWidth + padding * 2
|
||||||
implicitHeight: cheatsheetColumnLayout.implicitHeight + 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
|
Keys.onPressed: (event) => { // Esc to close
|
||||||
if (event.key === Qt.Key_Escape) {
|
if (event.key === Qt.Key_Escape) {
|
||||||
cheatsheetRoot.hide()
|
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 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 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 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 {
|
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
|
Rectangle { // Background of the notification
|
||||||
id: background
|
id: background
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
@@ -134,16 +141,6 @@ Item { // Notification group area
|
|||||||
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
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
|
RowLayout { // Left column for icon, right column for content
|
||||||
id: row
|
id: row
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
|
|||||||
@@ -74,12 +74,6 @@ Item { // Player instance
|
|||||||
id: coverArtDownloader
|
id: coverArtDownloader
|
||||||
property string targetFile: playerController.artUrl
|
property string targetFile: playerController.artUrl
|
||||||
command: [ "bash", "-c", `[ -f ${artFilePath} ] || curl -sSL '${targetFile}' -o '${artFilePath}'` ]
|
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) => {
|
onExited: (exitCode, exitStatus) => {
|
||||||
colorQuantizer.targetFile = playerController.artUrl // Yes this binding break is intentional
|
colorQuantizer.targetFile = playerController.artUrl // Yes this binding break is intentional
|
||||||
colorQuantizer.running = true
|
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` ]
|
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 {
|
stdout: SplitParser {
|
||||||
onRead: data => {
|
onRead: data => {
|
||||||
// console.log("Color quantizer output:", data)
|
|
||||||
playerController.artDominantColor = "#" + data
|
playerController.artDominantColor = "#" + data
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -115,190 +108,182 @@ Item { // Player instance
|
|||||||
property color colOnSecondaryContainer: ColorUtils.mix(Appearance.m3colors.m3onSecondaryContainer, artDominantColor, 0.2)
|
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.fill: parent
|
||||||
anchors.margins: Appearance.sizes.elevationMargin
|
anchors.margins: Appearance.sizes.elevationMargin
|
||||||
color: blendedColors.colLayer0
|
color: blendedColors.colLayer0
|
||||||
radius: root.popupRounding
|
radius: root.popupRounding
|
||||||
|
|
||||||
layer.enabled: true
|
layer.enabled: true
|
||||||
layer.effect: MultiEffect {
|
layer.effect: OpacityMask {
|
||||||
source: backgroundShadowLayer
|
maskSource: Rectangle {
|
||||||
anchors.fill: backgroundShadowLayer
|
width: background.width
|
||||||
shadowEnabled: true
|
height: background.height
|
||||||
shadowColor: Appearance.colors.colShadow
|
radius: background.radius
|
||||||
shadowVerticalOffset: 1
|
}
|
||||||
shadowBlur: 0.5
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle { // Background
|
Image {
|
||||||
id: background
|
id: blurredArt
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: blendedColors.colLayer0
|
visible: true
|
||||||
radius: root.popupRounding
|
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.enabled: true
|
||||||
layer.effect: OpacityMask {
|
layer.effect: MultiEffect {
|
||||||
maskSource: Rectangle {
|
source: blurredArt
|
||||||
width: background.width
|
anchors.fill: blurredArt
|
||||||
height: background.height
|
saturation: 0.2
|
||||||
radius: background.radius
|
blurEnabled: true
|
||||||
}
|
blurMax: 100
|
||||||
|
blur: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
Rectangle {
|
||||||
id: blurredArt
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
visible: true
|
color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25)
|
||||||
source: playerController.downloaded ? Qt.resolvedUrl(artFilePath) : ""
|
radius: root.popupRounding
|
||||||
sourceSize.width: background.width
|
}
|
||||||
sourceSize.height: background.height
|
}
|
||||||
fillMode: Image.PreserveAspectCrop
|
|
||||||
cache: false
|
RowLayout {
|
||||||
antialiasing: true
|
anchors.fill: parent
|
||||||
asynchronous: true
|
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.enabled: true
|
||||||
layer.effect: MultiEffect {
|
layer.effect: OpacityMask {
|
||||||
source: blurredArt
|
maskSource: Rectangle {
|
||||||
anchors.fill: blurredArt
|
width: artBackground.width
|
||||||
saturation: 0.2
|
height: artBackground.height
|
||||||
blurEnabled: true
|
radius: artBackground.radius
|
||||||
blurMax: 100
|
}
|
||||||
blur: 1
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Image { // Art image
|
||||||
|
id: mediaArt
|
||||||
|
property int size: parent.height
|
||||||
anchors.fill: parent
|
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 {
|
ColumnLayout { // Info & controls
|
||||||
anchors.fill: parent
|
Layout.fillHeight: true
|
||||||
anchors.margins: root.contentPadding
|
spacing: 2
|
||||||
spacing: 15
|
|
||||||
|
|
||||||
Rectangle { // Art background
|
StyledText {
|
||||||
id: artBackground
|
id: trackTitle
|
||||||
Layout.fillHeight: true
|
Layout.fillWidth: true
|
||||||
implicitWidth: height
|
font.pixelSize: Appearance.font.pixelSize.large
|
||||||
radius: root.artRounding
|
color: blendedColors.colOnLayer0
|
||||||
color: blendedColors.colLayer1
|
elide: Text.ElideRight
|
||||||
|
text: StringUtils.cleanMusicTitle(playerController.player?.trackTitle) || "Untitled"
|
||||||
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 {
|
||||||
ColumnLayout { // Info & controls
|
id: trackArtist
|
||||||
Layout.fillHeight: true
|
Layout.fillWidth: true
|
||||||
spacing: 2
|
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 {
|
StyledText {
|
||||||
id: trackTitle
|
id: trackTime
|
||||||
Layout.fillWidth: true
|
anchors.bottom: sliderRow.top
|
||||||
font.pixelSize: Appearance.font.pixelSize.large
|
anchors.bottomMargin: 5
|
||||||
color: blendedColors.colOnLayer0
|
anchors.left: parent.left
|
||||||
elide: Text.ElideRight
|
font.pixelSize: Appearance.font.pixelSize.small
|
||||||
text: StringUtils.cleanMusicTitle(playerController.player?.trackTitle) || "Untitled"
|
|
||||||
}
|
|
||||||
StyledText {
|
|
||||||
id: trackArtist
|
|
||||||
Layout.fillWidth: true
|
|
||||||
font.pixelSize: Appearance.font.pixelSize.smaller
|
|
||||||
color: blendedColors.colSubtext
|
color: blendedColors.colSubtext
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
text: playerController.player?.trackArtist
|
text: `${StringUtils.friendlyTimeForSeconds(playerController.player?.position)} / ${StringUtils.friendlyTimeForSeconds(playerController.player?.length)}`
|
||||||
}
|
}
|
||||||
Item { Layout.fillHeight: true }
|
RowLayout {
|
||||||
Item {
|
id: sliderRow
|
||||||
Layout.fillWidth: true
|
anchors {
|
||||||
implicitHeight: trackTime.implicitHeight + sliderRow.implicitHeight
|
bottom: parent.bottom
|
||||||
|
left: parent.left
|
||||||
StyledText {
|
right: parent.right
|
||||||
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 {
|
TrackChangeButton {
|
||||||
id: sliderRow
|
iconName: "skip_previous"
|
||||||
anchors {
|
onClicked: playerController.player?.previous()
|
||||||
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()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
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 {
|
RippleButton {
|
||||||
id: playPauseButton
|
id: playPauseButton
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.bottom: sliderRow.top
|
anchors.bottom: sliderRow.top
|
||||||
anchors.bottomMargin: 5
|
anchors.bottomMargin: 5
|
||||||
property real size: 44
|
property real size: 44
|
||||||
implicitWidth: size
|
implicitWidth: size
|
||||||
implicitHeight: size
|
implicitHeight: size
|
||||||
onClicked: playerController.player.togglePlaying();
|
onClicked: playerController.player.togglePlaying();
|
||||||
|
|
||||||
buttonRadius: playerController.player?.isPlaying ? Appearance?.rounding.normal : size / 2
|
buttonRadius: playerController.player?.isPlaying ? Appearance?.rounding.normal : size / 2
|
||||||
colBackground: playerController.player?.isPlaying ? blendedColors.colPrimary : blendedColors.colSecondaryContainer
|
colBackground: playerController.player?.isPlaying ? blendedColors.colPrimary : blendedColors.colSecondaryContainer
|
||||||
colBackgroundHover: playerController.player?.isPlaying ? blendedColors.colPrimaryHover : blendedColors.colSecondaryContainerHover
|
colBackgroundHover: playerController.player?.isPlaying ? blendedColors.colPrimaryHover : blendedColors.colSecondaryContainerHover
|
||||||
colRipple: playerController.player?.isPlaying ? blendedColors.colPrimaryActive : blendedColors.colSecondaryContainerActive
|
colRipple: playerController.player?.isPlaying ? blendedColors.colPrimaryActive : blendedColors.colSecondaryContainerActive
|
||||||
|
|
||||||
contentItem: MaterialSymbol {
|
contentItem: MaterialSymbol {
|
||||||
iconSize: Appearance.font.pixelSize.huge
|
iconSize: Appearance.font.pixelSize.huge
|
||||||
fill: 1
|
fill: 1
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
color: playerController.player?.isPlaying ? blendedColors.colOnPrimary : blendedColors.colOnSecondaryContainer
|
color: playerController.player?.isPlaying ? blendedColors.colOnPrimary : blendedColors.colOnSecondaryContainer
|
||||||
text: playerController.player?.isPlaying ? "pause" : "play_arrow"
|
text: playerController.player?.isPlaying ? "pause" : "play_arrow"
|
||||||
|
|
||||||
Behavior on color {
|
Behavior on color {
|
||||||
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
|
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,6 +25,13 @@ Item {
|
|||||||
implicitWidth: Appearance.sizes.osdWidth
|
implicitWidth: Appearance.sizes.osdWidth
|
||||||
implicitHeight: valueIndicator.implicitHeight
|
implicitHeight: valueIndicator.implicitHeight
|
||||||
|
|
||||||
|
RectangularShadow {
|
||||||
|
anchors.fill: valueIndicator
|
||||||
|
radius: valueIndicator.radius
|
||||||
|
blur: 1.2 * Appearance.sizes.elevationMargin
|
||||||
|
spread: 1
|
||||||
|
color: Appearance.colors.colShadow
|
||||||
|
}
|
||||||
WrapperRectangle {
|
WrapperRectangle {
|
||||||
id: valueIndicator
|
id: valueIndicator
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
@@ -32,16 +39,6 @@ Item {
|
|||||||
color: Appearance.colors.colLayer0
|
color: Appearance.colors.colLayer0
|
||||||
implicitWidth: valueRow.implicitWidth
|
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
|
RowLayout { // Icon on the left, stuff on the right
|
||||||
id: valueRow
|
id: valueRow
|
||||||
Layout.margins: 10
|
Layout.margins: 10
|
||||||
|
|||||||
@@ -49,7 +49,14 @@ Item {
|
|||||||
property Component windowComponent: OverviewWindow {}
|
property Component windowComponent: OverviewWindow {}
|
||||||
property list<OverviewWindow> windowWidgets: []
|
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
|
id: overviewBackground
|
||||||
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
@@ -59,16 +66,6 @@ Item {
|
|||||||
color: Appearance.colors.colLayer0
|
color: Appearance.colors.colLayer0
|
||||||
radius: Appearance.rounding.screenRounding * root.scale + 5 * 2
|
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 {
|
ColumnLayout {
|
||||||
id: workspaceColumnLayout
|
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
|
Rectangle { // Background
|
||||||
id: searchWidgetContent
|
id: searchWidgetContent
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
@@ -182,15 +189,6 @@ Item { // Wrapper
|
|||||||
implicitHeight: columnLayout.implicitHeight
|
implicitHeight: columnLayout.implicitHeight
|
||||||
radius: Appearance.rounding.large
|
radius: Appearance.rounding.large
|
||||||
color: Appearance.colors.colLayer0
|
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 {
|
ColumnLayout {
|
||||||
id: columnLayout
|
id: columnLayout
|
||||||
|
|||||||
@@ -65,6 +65,13 @@ Scope { // Scope
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Background
|
// Background
|
||||||
|
RectangularShadow { // Background shadow
|
||||||
|
anchors.fill: sidebarLeftBackground
|
||||||
|
radius: sidebarLeftBackground.radius
|
||||||
|
blur: 1.2 * Appearance.sizes.elevationMargin
|
||||||
|
spread: 1
|
||||||
|
color: Appearance.colors.colShadow
|
||||||
|
}
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: sidebarLeftBackground
|
id: sidebarLeftBackground
|
||||||
|
|
||||||
@@ -78,16 +85,6 @@ Scope { // Scope
|
|||||||
radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
|
radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
|
||||||
focus: sidebarRoot.visible
|
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 {
|
Behavior on width {
|
||||||
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
|
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -43,6 +43,10 @@ Button {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
StyledToolTip {
|
||||||
|
content: `${StringUtils.wordWrap(root.imageData.tags, root.maxTagStringLineLength)}`
|
||||||
|
}
|
||||||
|
|
||||||
padding: 0
|
padding: 0
|
||||||
implicitWidth: root.rowHeight * modelData.aspect_ratio
|
implicitWidth: root.rowHeight * modelData.aspect_ratio
|
||||||
implicitHeight: root.rowHeight
|
implicitHeight: root.rowHeight
|
||||||
@@ -97,10 +101,6 @@ Button {
|
|||||||
colBackgroundHover: ColorUtils.transparentize(ColorUtils.mix(Appearance.m3colors.m3surface, Appearance.m3colors.m3onSurface, 0.8), 0.2)
|
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)
|
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 {
|
contentItem: MaterialSymbol {
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
iconSize: Appearance.font.pixelSize.large
|
iconSize: Appearance.font.pixelSize.large
|
||||||
@@ -124,6 +124,13 @@ Button {
|
|||||||
width: contextMenu.width
|
width: contextMenu.width
|
||||||
height: contextMenu.height
|
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 {
|
Rectangle {
|
||||||
id: contextMenu
|
id: contextMenu
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
@@ -134,16 +141,6 @@ Button {
|
|||||||
implicitHeight: contextMenuColumnLayout.implicitHeight + radius * 2
|
implicitHeight: contextMenuColumnLayout.implicitHeight + radius * 2
|
||||||
implicitWidth: contextMenuColumnLayout.implicitWidth
|
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 {
|
Behavior on opacity {
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
duration: Appearance.animation.elementMoveFast.duration
|
duration: Appearance.animation.elementMoveFast.duration
|
||||||
|
|||||||
@@ -56,109 +56,112 @@ Scope {
|
|||||||
width: sidebarWidth - Appearance.sizes.hyprlandGapsOut * 2
|
width: sidebarWidth - Appearance.sizes.hyprlandGapsOut * 2
|
||||||
height: parent.height - Appearance.sizes.hyprlandGapsOut * 2
|
height: parent.height - Appearance.sizes.hyprlandGapsOut * 2
|
||||||
|
|
||||||
sourceComponent: Rectangle {
|
sourceComponent: Item {
|
||||||
id: sidebarRightBackground
|
implicitHeight: sidebarRightBackground.implicitHeight
|
||||||
|
implicitWidth: sidebarRightBackground.implicitWidth
|
||||||
|
|
||||||
implicitHeight: parent.height - Appearance.sizes.hyprlandGapsOut * 2
|
RectangularShadow { // Background shadow
|
||||||
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
|
|
||||||
anchors.fill: sidebarRightBackground
|
anchors.fill: sidebarRightBackground
|
||||||
shadowEnabled: true
|
radius: sidebarRightBackground.radius
|
||||||
shadowColor: Appearance.colors.colShadow
|
blur: 1.2 * Appearance.sizes.elevationMargin
|
||||||
shadowVerticalOffset: 1
|
spread: 1
|
||||||
shadowBlur: 0.5
|
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.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 {
|
Keys.onPressed: (event) => {
|
||||||
Layout.fillHeight: false
|
if (event.key === Qt.Key_Escape) {
|
||||||
spacing: 10
|
sidebarRoot.hide();
|
||||||
Layout.margins: 10
|
}
|
||||||
Layout.topMargin: 5
|
}
|
||||||
Layout.bottomMargin: 0
|
|
||||||
|
|
||||||
Item {
|
|
||||||
implicitWidth: distroIcon.width
|
ColumnLayout {
|
||||||
implicitHeight: distroIcon.height
|
spacing: sidebarPadding
|
||||||
CustomIcon {
|
anchors.fill: parent
|
||||||
id: distroIcon
|
anchors.margins: sidebarPadding
|
||||||
width: 25
|
|
||||||
height: 25
|
RowLayout {
|
||||||
source: SystemInfo.distroIcon
|
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
|
StyledText {
|
||||||
source: distroIcon
|
font.pixelSize: Appearance.font.pixelSize.normal
|
||||||
color: Appearance.colors.colOnLayer0
|
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 {
|
ButtonGroup {
|
||||||
font.pixelSize: Appearance.font.pixelSize.normal
|
Layout.alignment: Qt.AlignHCenter
|
||||||
color: Appearance.colors.colOnLayer0
|
spacing: 5
|
||||||
text: StringUtils.format(qsTr("Uptime: {0}"), DateTime.uptime)
|
padding: 5
|
||||||
textFormat: Text.MarkdownText
|
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
|
Layout.fillWidth: true
|
||||||
}
|
}
|
||||||
|
|
||||||
QuickToggleButton {
|
BottomWidgetGroup {
|
||||||
toggled: false
|
Layout.alignment: Qt.AlignHCenter
|
||||||
buttonIcon: "power_settings_new"
|
Layout.fillHeight: false
|
||||||
onClicked: {
|
Layout.fillWidth: true
|
||||||
Hyprland.dispatch("global quickshell:sessionOpen")
|
Layout.preferredHeight: implicitHeight
|
||||||
}
|
|
||||||
StyledToolTip {
|
|
||||||
content: qsTr("Session")
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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
|
// + FAB
|
||||||
|
RectangularShadow { // Background shadow
|
||||||
|
anchors.fill: fabButton
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
blur: 1.2 * Appearance.sizes.elevationMargin
|
||||||
|
spread: 1
|
||||||
|
color: Appearance.colors.colShadow
|
||||||
|
}
|
||||||
Button {
|
Button {
|
||||||
id: fabButton
|
id: fabButton
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
@@ -173,16 +180,6 @@ Item {
|
|||||||
Behavior on color {
|
Behavior on color {
|
||||||
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
|
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 {
|
contentItem: MaterialSymbol {
|
||||||
|
|||||||
Reference in New Issue
Block a user