Add way to round images

src/gui/Base/HAvatar.qml

@@ -16,6 +16,7 @@ Rectangle {
        theme.controls.avatar.background.opacity
    )
 
+
     property string name
     property alias mxc: avatarImage.mxc
     property alias title: avatarImage.title
@@ -27,6 +28,8 @@ Rectangle {
     property alias animate: avatarImage.animate
 
     readonly property alias hovered: hoverHandler.hovered
+    readonly property alias circleRadius: avatarImage.circleRadius
+
 
     HLabel {
         z: 1
@@ -54,6 +57,7 @@ Rectangle {
         sourceSize.height: parent.height
         fillMode: Image.PreserveAspectCrop
         animate: false
+        radius: parent.radius
 
         HoverHandler { id: hoverHandler }
 

src/gui/Base/HImage.qml

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
 import QtQuick 2.12
+import QtGraphicalEffects 1.12
 
 Image {
     id: image
@@ -11,15 +12,23 @@ Image {
     cache: ! (animate && animated) &&
            (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 animate: true
     property bool animated:
         utils.urlExtension(image.source).toLowerCase() === "gif"
 
+    property alias radius: roundMask.radius
     property alias showProgressBar: progressBarLoader.active
     property bool inderterminateProgressBar: false
 
+    readonly property int circleRadius:
+        Math.ceil(Math.max(image.width, image.height))
+
 
     Component {
         id: animatedImageComponent
@@ -41,6 +50,9 @@ Image {
             cache: ! Qt.resolvedUrl(source).startsWith("file://")
             paused: ! visible || window.hidden || userPaused
 
+            layer.enabled: image.radius !== 0
+            layer.effect: OpacityMask { maskSource: roundMask }
+
             property bool userPaused: ! window.settings.media.autoPlayGIF
 
             TapHandler {
@@ -90,4 +102,10 @@ Image {
         svgName: "broken-image"
         colorize: theme.colors.negativeBackground
     }
+
+    Rectangle {
+        id: roundMask
+        anchors.fill: parent
+        visible: false
+    }
 }

src/gui/MainPane/Account.qml

@@ -23,9 +23,9 @@ HTileDelegate {
         userId: model.id
         displayName: model.display_name
         mxc: model.avatar_url
-        rotation: mainPane.small ? -45 : 0
+        radius: mainPane.small ? circleRadius : 0
 
-        Behavior on rotation { HNumberAnimation {} }
+        Behavior on radius { HNumberAnimation {} }
     }
 
     contextMenu: HMenu {