Add way to round images
This commit is contained in:
parent
11604910c1
commit
abdaf13da5
|
@ -16,6 +16,7 @@ Rectangle {
|
||||||
theme.controls.avatar.background.opacity
|
theme.controls.avatar.background.opacity
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
property string name
|
property string name
|
||||||
property alias mxc: avatarImage.mxc
|
property alias mxc: avatarImage.mxc
|
||||||
property alias title: avatarImage.title
|
property alias title: avatarImage.title
|
||||||
|
@ -27,6 +28,8 @@ Rectangle {
|
||||||
property alias animate: avatarImage.animate
|
property alias animate: avatarImage.animate
|
||||||
|
|
||||||
readonly property alias hovered: hoverHandler.hovered
|
readonly property alias hovered: hoverHandler.hovered
|
||||||
|
readonly property alias circleRadius: avatarImage.circleRadius
|
||||||
|
|
||||||
|
|
||||||
HLabel {
|
HLabel {
|
||||||
z: 1
|
z: 1
|
||||||
|
@ -54,6 +57,7 @@ Rectangle {
|
||||||
sourceSize.height: parent.height
|
sourceSize.height: parent.height
|
||||||
fillMode: Image.PreserveAspectCrop
|
fillMode: Image.PreserveAspectCrop
|
||||||
animate: false
|
animate: false
|
||||||
|
radius: parent.radius
|
||||||
|
|
||||||
HoverHandler { id: hoverHandler }
|
HoverHandler { id: hoverHandler }
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
// SPDX-License-Identifier: LGPL-3.0-or-later
|
// SPDX-License-Identifier: LGPL-3.0-or-later
|
||||||
|
|
||||||
import QtQuick 2.12
|
import QtQuick 2.12
|
||||||
|
import QtGraphicalEffects 1.12
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: image
|
id: image
|
||||||
|
@ -11,15 +12,23 @@ Image {
|
||||||
cache: ! (animate && animated) &&
|
cache: ! (animate && animated) &&
|
||||||
(sourceSize.width + sourceSize.height) <= 512
|
(sourceSize.width + sourceSize.height) <= 512
|
||||||
|
|
||||||
|
layer.enabled: radius !== 0
|
||||||
|
layer.effect: OpacityMask { maskSource: roundMask }
|
||||||
|
|
||||||
|
|
||||||
|
property bool circle: radius === circleRadius
|
||||||
property bool broken: false
|
property bool broken: false
|
||||||
property bool animate: true
|
property bool animate: true
|
||||||
property bool animated:
|
property bool animated:
|
||||||
utils.urlExtension(image.source).toLowerCase() === "gif"
|
utils.urlExtension(image.source).toLowerCase() === "gif"
|
||||||
|
|
||||||
|
property alias radius: roundMask.radius
|
||||||
property alias showProgressBar: progressBarLoader.active
|
property alias showProgressBar: progressBarLoader.active
|
||||||
property bool inderterminateProgressBar: false
|
property bool inderterminateProgressBar: false
|
||||||
|
|
||||||
|
readonly property int circleRadius:
|
||||||
|
Math.ceil(Math.max(image.width, image.height))
|
||||||
|
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: animatedImageComponent
|
id: animatedImageComponent
|
||||||
|
@ -41,6 +50,9 @@ Image {
|
||||||
cache: ! Qt.resolvedUrl(source).startsWith("file://")
|
cache: ! Qt.resolvedUrl(source).startsWith("file://")
|
||||||
paused: ! visible || window.hidden || userPaused
|
paused: ! visible || window.hidden || userPaused
|
||||||
|
|
||||||
|
layer.enabled: image.radius !== 0
|
||||||
|
layer.effect: OpacityMask { maskSource: roundMask }
|
||||||
|
|
||||||
property bool userPaused: ! window.settings.media.autoPlayGIF
|
property bool userPaused: ! window.settings.media.autoPlayGIF
|
||||||
|
|
||||||
TapHandler {
|
TapHandler {
|
||||||
|
@ -90,4 +102,10 @@ Image {
|
||||||
svgName: "broken-image"
|
svgName: "broken-image"
|
||||||
colorize: theme.colors.negativeBackground
|
colorize: theme.colors.negativeBackground
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: roundMask
|
||||||
|
anchors.fill: parent
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,9 +23,9 @@ HTileDelegate {
|
||||||
userId: model.id
|
userId: model.id
|
||||||
displayName: model.display_name
|
displayName: model.display_name
|
||||||
mxc: model.avatar_url
|
mxc: model.avatar_url
|
||||||
rotation: mainPane.small ? -45 : 0
|
radius: mainPane.small ? circleRadius : 0
|
||||||
|
|
||||||
Behavior on rotation { HNumberAnimation {} }
|
Behavior on radius { HNumberAnimation {} }
|
||||||
}
|
}
|
||||||
|
|
||||||
contextMenu: HMenu {
|
contextMenu: HMenu {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user