Commit 31ea5630 authored by Linus Jahn's avatar Linus Jahn Committed by GitHub
Browse files

ChatPage: Show real avatars using new RoundImage (#124)

This adds a new RoundImage QML type, that has a QtGraphicalEffect for
removing the corners and making it rounded (this is currently the only
way doing it, since an Image has no radius property as a Rectangle).

The avatar is now also a bit larger, I think it looks better so.
I removed mipmap filtering for the avatars on the ChatPage, because it
looked not good and a bit blurred on the avatars I tested it with. Maybe
I'll change that later again.
parent e3de6116
......@@ -11,6 +11,7 @@
<file alias="qml/elements/RosterListItem.qml">src/qml/elements/RosterListItem.qml</file>
<file alias="qml/elements/MessageCounter.qml">src/qml/elements/MessageCounter.qml</file>
<file alias="qml/elements/ChatMessage.qml">src/qml/elements/ChatMessage.qml</file>
<file alias="qml/elements/RoundImage.qml">src/qml/elements/RoundImage.qml</file>
<file alias="qtquickcontrols2.conf">misc/qtquickcontrols2.conf</file>
......@@ -73,6 +73,9 @@ Kirigami.Page {
messageBody: model.message
dateTime: new Date(timestamp)
isRead: model.isDelivered
recipientAvatarUrl: kaidan.avatarStorage.getHashOfJid(recipient) != "" ?
kaidan.avatarStorage.getAvatarUrl(recipient) :
......@@ -27,19 +27,18 @@ Row {
property string messageBody: ""
property date dateTime: new Date()
property bool isRead: false
property string recipientAvatarUrl: ""
anchors.right: sentByMe ? parent.right : undefined
spacing: Kirigami.Units.gridUnit * 0.5
layoutDirection: sentByMe ? Qt.RightToLeft : Qt.LeftToRight
Rectangle {
RoundImage {
id: avatar
width: Kirigami.Units.gridUnit * 2
height: Kirigami.Units.gridUnit * 2
radius: width * 0.5
visible: !sentByMe
color: "grey"
width: Kirigami.Units.gridUnit * 2.2
height: Kirigami.Units.gridUnit * 2.2
source: recipientAvatarUrl
Item {
* Kaidan - A user-friendly XMPP client for every device!
* Copyright (C) 2017 LNJ <>
* Kaidan is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* Kaidan is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* GNU General Public License for more details.
* You should have received a copy of the GNU General Public License
* along with Kaidan. If not, see <>.
import QtQuick 2.6
import QtGraphicalEffects 1.0
Image {
id: img
property bool isRound: true
layer.enabled: isRound
layer.effect: OpacityMask {
maskSource: Item {
width: img.width
height: img.height
Rectangle {
anchors.centerIn: parent
width: Math.min(img.width, img.height)
height: width
radius: Math.min(width, height)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment