zoriya/noctalia-shell
1
0
Fork 0
mirror of https://github.com/zoriya/noctalia-shell.git synced 2026-08-15 18:43:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

NImageRounded/Circled: removed shaders and used a simpler ClippingWrapperRectangle

Browse Source
This commit is contained in:
ItsLemmy
2025-11-25 19:38:23 -05:00
parent 12fe6c5559
commit b7d4e74012
15 changed files with 69 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Bar/Widgets/MediaMini.qml
+5 -3
View File
@@ -409,16 +409,17 @@ Item {
anchors.fill: parent
anchors.margins: showProgressRing ? (3 * scaling) : 0.5 // Adjusted to align with progress circle better
NImageCircled {
NImageRounded {
id: trackArt
anchors.fill: parent
anchors.margins: showProgressRing ? 0 : -1 * scaling // Add negative margin to make album art larger when no progress ring
radius: width * 0.5
visible: showAlbumArt && hasActivePlayer
imagePath: MediaService.trackArtUrl
fallbackIcon: MediaService.isPlaying ? "media-pause" : "media-play"
fallbackIconSize: showProgressRing ? 10 : 12 // Larger fallback icon when no progress ring
borderWidth: 0
border.color: Color.transparent
borderColor: Color.transparent
z: 1 // In front of the progress circle
}
@@ -649,9 +650,10 @@ Item {
z: 1 // Above the visualizer and progress ring
// Album Art
NImageCircled {
NImageRounded {
anchors.fill: parent
visible: showAlbumArt && hasActivePlayer
radius: width * 0.5
imagePath: MediaService.trackArtUrl
fallbackIcon: MediaService.isPlaying ? "media-pause" : "media-play"
fallbackIconSize: 12
Modules/LockScreen/LockScreen.qml
+4 -2
View File
@@ -301,10 +301,11 @@ Loader {
}
}
NImageCircled {
NImageRounded {
anchors.centerIn: parent
width: 66
height: 66
radius: width * 0.5
imagePath: Settings.preprocessPath(Settings.data.general.avatarImage)
fallbackIcon: "person"
@@ -631,9 +632,10 @@ Loader {
color: Color.transparent
clip: true
NImageCircled {
NImageRounded {
anchors.fill: parent
anchors.margins: 2
radius: width * 0.5
imagePath: MediaService.trackArtUrl
fallbackIcon: "disc"
fallbackIconSize: Style.fontSizeM
Modules/Notification/Notification.qml
+10 -11
View File
@@ -398,17 +398,16 @@ Variants {
Layout.topMargin: Style.marginM
Layout.bottomMargin: Style.marginM
ColumnLayout {
NImageCircled {
Layout.preferredWidth: Math.round(40 * Style.uiScaleRatio)
Layout.preferredHeight: Math.round(40 * Style.uiScaleRatio)
Layout.alignment: Qt.AlignVCenter
imagePath: model.originalImage || ""
borderColor: Color.transparent
borderWidth: 0
fallbackIcon: "bell"
fallbackIconSize: 24
}
NImageRounded {
Layout.preferredWidth: Math.round(40 * Style.uiScaleRatio)
Layout.preferredHeight: Math.round(40 * Style.uiScaleRatio)
Layout.alignment: Qt.AlignVCenter
radius: width * 0.5
imagePath: model.originalImage || ""
borderColor: Color.transparent
borderWidth: 0
fallbackIcon: "bell"
fallbackIconSize: 24
}
ColumnLayout {
Modules/Panels/ControlCenter/Cards/ProfileCard.qml
+2 -1
View File
@@ -25,9 +25,10 @@ NBox {
anchors.margins: Style.marginM
spacing: Style.marginM
NImageCircled {
NImageRounded {
Layout.preferredWidth: Math.round(Style.baseWidgetSize * 1.25 * Style.uiScaleRatio)
Layout.preferredHeight: Math.round(Style.baseWidgetSize * 1.25 * Style.uiScaleRatio)
radius: width * 0.5
imagePath: Settings.preprocessPath(Settings.data.general.avatarImage)
fallbackIcon: "person"
borderColor: Color.mPrimary
Modules/Panels/Launcher/Launcher.qml
+2 -2
View File
@@ -689,7 +689,7 @@ SmartPanel {
id: imagePreview
anchors.fill: parent
visible: modelData.isImage && !modelData.emojiChar
imageRadius: Style.radiusM
radius: Style.radiusM
// This property creates a dependency on the service's revision counter
readonly property int _rev: ClipboardService.revision
@@ -934,7 +934,7 @@ SmartPanel {
id: gridImagePreview
anchors.fill: parent
visible: modelData.isImage && !modelData.emojiChar
imageRadius: Style.radiusM
radius: Style.radiusM
readonly property int _rev: ClipboardService.revision
Modules/Panels/NotificationHistory/NotificationHistoryPanel.qml
+3 -2
View File
@@ -197,10 +197,11 @@ SmartPanel {
spacing: Style.marginM
// Icon
NImageCircled {
NImageRounded {
anchors.verticalCenter: parent.verticalCenter
width: Math.round(40 * Style.uiScaleRatio)
height: Math.round(40 * Style.uiScaleRatio)
anchors.verticalCenter: parent.verticalCenter
radius: width * 0.5
imagePath: model.cachedImage || model.originalImage || ""
borderColor: Color.transparent
borderWidth: 0
Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml
+2 -1
View File
@@ -59,10 +59,11 @@ ColumnLayout {
description: I18n.tr("bar.widget-settings.control-center.icon.description")
}
NImageCircled {
NImageRounded {
Layout.preferredWidth: Style.fontSizeXL * 2
Layout.preferredHeight: Style.fontSizeXL * 2
Layout.alignment: Qt.AlignVCenter
radius: width * 0.5
imagePath: valueCustomIconPath
visible: valueCustomIconPath !== ""
}
Modules/Panels/Settings/Tabs/AboutTab.qml
+3 -2
View File
@@ -189,10 +189,11 @@ ColumnLayout {
Layout.preferredWidth: Style.baseWidgetSize * 2 * Style.uiScaleRatio
Layout.preferredHeight: Style.baseWidgetSize * 2 * Style.uiScaleRatio
NImageCircled {
imagePath: modelData.avatar_url || ""
NImageRounded {
anchors.fill: parent
anchors.margins: Style.marginXS
radius: width * 0.5
imagePath: modelData.avatar_url || ""
fallbackIcon: "person"
borderColor: contributorArea.containsMouse ? Color.mOnHover : Color.mPrimary
borderWidth: Style.borderM
Modules/Panels/Settings/Tabs/GeneralTab.qml
+2 -1
View File
@@ -21,9 +21,10 @@ ColumnLayout {
spacing: Style.marginL
// Avatar preview
NImageCircled {
NImageRounded {
Layout.preferredWidth: 88 * Style.uiScaleRatio
Layout.preferredHeight: width
radius: width * 0.5
imagePath: Settings.preprocessPath(Settings.data.general.avatarImage)
fallbackIcon: "person"
borderColor: Color.mPrimary
Shaders/frag/circled_image.frag
-30
View File
@@ -1,30 +0,0 @@
#version 450
layout(location = 0) in vec2 qt_TexCoord0;
layout(location = 0) out vec4 fragColor;
layout(binding = 1) uniform sampler2D source;
layout(std140, binding = 0) uniform buf {
mat4 qt_Matrix;
float qt_Opacity;
float imageOpacity;
} ubuf;
void main() {
// Center coordinates around (0, 0)
vec2 uv = qt_TexCoord0 - 0.5;
// Calculate distance from center
float distance = length(uv);
// Create circular mask - anything beyond radius 0.5 is transparent
float mask = 1.0 - smoothstep(0.48, 0.52, distance);
// Sample the texture
vec4 color = texture(source, qt_TexCoord0);
// Apply the circular mask and opacity
float finalAlpha = color.a * mask * ubuf.imageOpacity * ubuf.qt_Opacity;
fragColor = vec4(color.rgb * finalAlpha, finalAlpha);
}
Shaders/frag/rounded_image.frag
-56
View File
@@ -1,56 +0,0 @@
#version 450
layout(location = 0) in vec2 qt_TexCoord0;
layout(location = 0) out vec4 fragColor;
layout(binding = 1) uniform sampler2D source;
layout(std140, binding = 0) uniform buf {
mat4 qt_Matrix;
float qt_Opacity;
// Custom properties with non-conflicting names
float itemWidth;
float itemHeight;
float cornerRadius;
float imageOpacity;
} ubuf;
// Function to calculate the signed distance from a point to a rounded box
float roundedBoxSDF(vec2 centerPos, vec2 boxSize, float radius) {
vec2 d = abs(centerPos) - boxSize + radius;
return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0) - radius;
}
void main() {
// Get size from uniforms
vec2 itemSize = vec2(ubuf.itemWidth, ubuf.itemHeight);
float cornerRadius = ubuf.cornerRadius;
float itemOpacity = ubuf.imageOpacity;
// Normalize coordinates to [-0.5, 0.5] range
vec2 uv = qt_TexCoord0 - 0.5;
// Scale by aspect ratio to maintain uniform rounding
vec2 aspectRatio = itemSize / max(itemSize.x, itemSize.y);
uv *= aspectRatio;
// Calculate half size in normalized space
vec2 halfSize = 0.5 * aspectRatio;
// Normalize the corner radius
float normalizedRadius = cornerRadius / max(itemSize.x, itemSize.y);
// Calculate distance to rounded rectangle
float distance = roundedBoxSDF(uv, halfSize, normalizedRadius);
// Create smooth alpha mask
float smoothedAlpha = 1.0 - smoothstep(0.0, fwidth(distance), distance);
// Sample the texture
vec4 color = texture(source, qt_TexCoord0);
// Apply the rounded mask and opacity
// Make sure areas outside the rounded rect are completely transparent
float finalAlpha = color.a * smoothedAlpha * itemOpacity * ubuf.qt_Opacity;
fragColor = vec4(color.rgb * finalAlpha, finalAlpha);
}
Shaders/qsb/circled_image.frag.qsb
BIN
View File
Binary file not shown.
Shaders/qsb/rounded_image.frag.qsb
BIN
View File
Binary file not shown.
Widgets/NImageCircled.qml
-76
View File
@@ -1,76 +0,0 @@
import QtQuick
import QtQuick.Effects
import Quickshell
import Quickshell.Widgets
import qs.Commons
Rectangle {
id: root
property string imagePath: ""
property color borderColor: Color.transparent
property real borderWidth: 0
property string fallbackIcon: ""
property real fallbackIconSize: Style.fontSizeXXL
color: Color.transparent
radius: parent.width * 0.5
anchors.margins: Style.marginXXS
Rectangle {
color: Color.transparent
anchors.fill: parent
Image {
id: img
anchors.fill: parent
source: imagePath
visible: false // Hide since we're using it as shader source
mipmap: true
smooth: true
asynchronous: true
antialiasing: true
fillMode: Image.PreserveAspectCrop
}
ShaderEffect {
anchors.fill: parent
property var source: ShaderEffectSource {
sourceItem: img
hideSource: true
live: true
recursive: false
format: ShaderEffectSource.RGBA
}
property real imageOpacity: root.opacity
fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/circled_image.frag.qsb")
supportsAtlasTextures: false
blending: true
}
// Fallback icon
Loader {
active: fallbackIcon !== undefined && fallbackIcon !== "" && (imagePath === undefined || imagePath === "")
anchors.centerIn: parent
sourceComponent: NIcon {
anchors.centerIn: parent
icon: fallbackIcon
pointSize: fallbackIconSize
z: 0
}
}
}
// Border
Rectangle {
anchors.fill: parent
radius: parent.radius
color: Color.transparent
border.color: parent.borderColor
border.width: parent.borderWidth
antialiasing: true
z: 10
}
}
Widgets/NImageRounded.qml
+36 -71
View File
@@ -4,91 +4,56 @@ import Quickshell
import Quickshell.Widgets
import qs.Commons
Rectangle {
Item {
id: root
property real radius: 0
property string imagePath: ""
property color borderColor: Color.transparent
property real borderWidth: 0
property real imageRadius: width * 0.5
property int imageFillMode: Image.PreserveAspectCrop
property string fallbackIcon: ""
property real fallbackIconSize: Style.fontSizeXXL
property real borderWidth: 0
property color borderColor: Color.transparent
property real scaledRadius: imageRadius * Settings.data.general.radiusRatio
readonly property bool showFallback: (fallbackIcon !== undefined && fallbackIcon !== "") && (imagePath === undefined || imagePath === "")
signal statusChanged(int status)
color: Color.transparent
radius: scaledRadius
anchors.margins: Style.marginXXS
Rectangle {
color: Color.transparent
ClippingWrapperRectangle {
anchors.fill: parent
color: Color.transparent
radius: root.radius
border.color: root.borderColor
border.width: root.borderWidth
Image {
id: img
Item {
anchors.fill: parent
source: imagePath
visible: false
mipmap: true
smooth: true
asynchronous: true
antialiasing: true
fillMode: root.imageFillMode
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
onStatusChanged: root.statusChanged(status)
}
ShaderEffect {
anchors.fill: parent
property var source: ShaderEffectSource {
sourceItem: img
hideSource: true
live: true
recursive: false
format: ShaderEffectSource.RGBA
}
property real itemWidth: root.width
property real itemHeight: root.height
property real cornerRadius: root.radius
property real imageOpacity: root.opacity
fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/rounded_image.frag.qsb")
supportsAtlasTextures: false
blending: true
Rectangle {
id: background
Loader {
active: true
anchors.fill: parent
color: Color.transparent
z: -1
sourceComponent: showFallback ? fallback : image
}
Component {
id: image
Image {
source: imagePath
mipmap: true
smooth: true
asynchronous: true
antialiasing: true
fillMode: Image.PreserveAspectCrop
onStatusChanged: root.statusChanged(status)
}
}
Component {
id: fallback
NIcon {
anchors.centerIn: parent
icon: fallbackIcon
pointSize: fallbackIconSize
}
}
}
Loader {
active: fallbackIcon !== undefined && fallbackIcon !== "" && (imagePath === undefined || imagePath === "")
anchors.centerIn: parent
sourceComponent: NIcon {
anchors.centerIn: parent
icon: fallbackIcon
pointSize: fallbackIconSize
z: 0
}
}
}
Rectangle {
anchors.fill: parent
radius: parent.radius
color: Color.transparent
border.color: parent.borderColor
border.width: parent.borderWidth
antialiasing: true
z: 10
}
}