Better look for NImageRounded (hide the ugly rounding behind the border)
This commit is contained in:
parent
084ffa6b0d
commit
5054818ed7
2 changed files with 48 additions and 41 deletions
|
|
@ -294,13 +294,14 @@ Loader {
|
||||||
|
|
||||||
// Animated avatar with glow effect or audio visualizer
|
// Animated avatar with glow effect or audio visualizer
|
||||||
Rectangle {
|
Rectangle {
|
||||||
width: 120 * scaling
|
width: 108 * scaling
|
||||||
height: 120 * scaling
|
height: 108 * scaling
|
||||||
radius: width * 0.5
|
radius: width * 0.5
|
||||||
color: Color.transparent
|
color: Color.transparent
|
||||||
border.color: Color.mPrimary
|
border.color: Color.mPrimary
|
||||||
border.width: Math.max(1, Style.borderL * scaling)
|
border.width: Math.max(1, Style.borderL * scaling)
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
z: 10
|
||||||
|
|
||||||
// Circular audio visualizer when music is playing
|
// Circular audio visualizer when music is playing
|
||||||
Loader {
|
Loader {
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,51 @@ Rectangle {
|
||||||
radius: scaledRadius
|
radius: scaledRadius
|
||||||
anchors.margins: Style.marginXXS * scaling
|
anchors.margins: Style.marginXXS * scaling
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
color: Color.transparent
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.margins: borderWidth
|
||||||
|
|
||||||
|
Image {
|
||||||
|
id: img
|
||||||
|
anchors.fill: parent
|
||||||
|
source: imagePath
|
||||||
|
visible: false
|
||||||
|
mipmap: true
|
||||||
|
smooth: true
|
||||||
|
asynchronous: true
|
||||||
|
fillMode: Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
|
||||||
|
MultiEffect {
|
||||||
|
anchors.fill: parent
|
||||||
|
source: img
|
||||||
|
maskEnabled: true
|
||||||
|
maskSource: mask
|
||||||
|
visible: imagePath !== ""
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: mask
|
||||||
|
anchors.fill: parent
|
||||||
|
layer.enabled: true
|
||||||
|
visible: false
|
||||||
|
Rectangle {
|
||||||
|
anchors.fill: parent
|
||||||
|
radius: scaledRadius
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback icon
|
||||||
|
NIcon {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
text: fallbackIcon
|
||||||
|
font.pointSize: Style.fontSizeXXL * scaling
|
||||||
|
visible: fallbackIcon !== undefined && fallbackIcon !== "" && (imagePath === undefined || imagePath === "")
|
||||||
|
z: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Border
|
// Border
|
||||||
Rectangle {
|
Rectangle {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
@ -29,43 +74,4 @@ Rectangle {
|
||||||
border.width: parent.borderWidth
|
border.width: parent.borderWidth
|
||||||
z: 10
|
z: 10
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
|
||||||
id: img
|
|
||||||
anchors.fill: parent
|
|
||||||
source: imagePath
|
|
||||||
visible: false
|
|
||||||
mipmap: true
|
|
||||||
smooth: true
|
|
||||||
asynchronous: true
|
|
||||||
fillMode: Image.PreserveAspectCrop
|
|
||||||
}
|
|
||||||
|
|
||||||
MultiEffect {
|
|
||||||
anchors.fill: parent
|
|
||||||
source: img
|
|
||||||
maskEnabled: true
|
|
||||||
maskSource: mask
|
|
||||||
visible: imagePath !== ""
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
id: mask
|
|
||||||
anchors.fill: parent
|
|
||||||
layer.enabled: true
|
|
||||||
visible: false
|
|
||||||
Rectangle {
|
|
||||||
anchors.fill: parent
|
|
||||||
radius: scaledRadius
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback icon
|
|
||||||
NIcon {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
text: fallbackIcon
|
|
||||||
font.pointSize: Style.fontSizeXXL * scaling
|
|
||||||
visible: fallbackIcon !== undefined && fallbackIcon !== "" && (imagePath === undefined || imagePath === "")
|
|
||||||
z: 0
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue