diff --git a/TODO.md b/TODO.md index 23b773c6..3d6916dd 100644 --- a/TODO.md +++ b/TODO.md @@ -77,9 +77,7 @@ ## Interface -- Differentiate invited room members - https://doc.qt.io/qt-5/qml-qtquick-smoothedanimation.html for progress bars -- - Make all "Cancel" buttons able to cancel running Backend coroutines set `disabledWhileLoading` to `false` for all "OK" buttons where it makes sense - Use a loader of the swipeview containing members, settings, etc views diff --git a/src/icons/thin/user-invited.svg b/src/icons/thin/user-invited.svg new file mode 100644 index 00000000..67c5f186 --- /dev/null +++ b/src/icons/thin/user-invited.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/qml/Base/HTile.qml b/src/qml/Base/HTile.qml index 3a619010..fcaa19a1 100644 --- a/src/qml/Base/HTile.qml +++ b/src/qml/Base/HTile.qml @@ -10,6 +10,8 @@ HButton { default property alias additionalData: contentItem.data + property real contentOpacity: 1 + readonly property alias title: title readonly property alias additionalInfo: additionalInfo readonly property alias rightInfo: rightInfo @@ -19,10 +21,10 @@ HButton { property Component image - contentItem: HRowLayout { id: contentItem spacing: tile.spacing + opacity: tile.contentOpacity HLoader { sourceComponent: image diff --git a/src/qml/Base/HUserAvatar.qml b/src/qml/Base/HUserAvatar.qml index 0b8d505b..48ed6ffd 100644 --- a/src/qml/Base/HUserAvatar.qml +++ b/src/qml/Base/HUserAvatar.qml @@ -7,17 +7,18 @@ HAvatar { property string userId property string displayName property int powerLevel: 0 - property bool shiftPowerIconPosition: true + property bool shiftMembershipIconPosition: true + property bool invited: false readonly property bool admin: powerLevel >= 100 readonly property bool moderator: powerLevel >= 50 && ! admin HLoader { - active: admin || moderator + active: admin || moderator || invited anchors.top: parent.top anchors.left: parent.left - anchors.topMargin: shiftPowerIconPosition ? -16 / 2 : 0 + anchors.topMargin: shiftMembershipIconPosition ? -16 / 2 : 0 anchors.leftMargin: anchors.topMargin z: 100 @@ -25,18 +26,24 @@ HAvatar { sourceComponent: HIcon { small: true - svgName: "user-power-" + (admin ? "100" : "50") - colorize: admin ? - theme.chat.roomPane.member.adminIcon : - theme.chat.roomPane.member.moderatorIcon + svgName: + invited ? "user-invited" : + admin ? "user-power-100" : + "user-power-50" - HoverHandler { id: powerIconHover } + colorize: + invited ? theme.chat.roomPane.member.invitedIcon : + admin ? theme.chat.roomPane.member.adminIcon : + theme.chat.roomPane.member.moderatorIcon + + HoverHandler { id: membershipIcon } HToolTip { - visible: powerIconHover.hovered - text: admin ? - qsTr("Admin (%1 power)").arg(powerLevel) : - qsTr("Moderator (%1 power)").arg(powerLevel) + visible: membershipIcon.hovered + text: + invited ? qsTr("Invited") : + admin ? qsTr("Admin (%1 power)").arg(powerLevel) : + qsTr("Moderator (%1 power)").arg(powerLevel) } } } diff --git a/src/qml/Chat/RoomPane/MemberDelegate.qml b/src/qml/Chat/RoomPane/MemberDelegate.qml index 99f82b37..ce33816a 100644 --- a/src/qml/Chat/RoomPane/MemberDelegate.qml +++ b/src/qml/Chat/RoomPane/MemberDelegate.qml @@ -5,13 +5,16 @@ import "../../utils.js" as Utils HTileDelegate { id: memberDelegate backgroundColor: theme.chat.roomPane.member.background + contentOpacity: + model.invited ? theme.chat.roomPane.member.invitedOpacity : 1 image: HUserAvatar { userId: model.user_id displayName: model.display_name mxc: model.avatar_url powerLevel: model.power_level - shiftPowerIconPosition: ! roomPane.collapsed + shiftMembershipIconPosition: ! roomPane.collapsed + invited: model.invited } title.text: model.display_name || model.user_id @@ -33,4 +36,5 @@ HTileDelegate { Behavior on title.color { HColorAnimation {} } + Behavior on contentOpacity { HNumberAnimation {} } } diff --git a/src/themes/Default.qpl b/src/themes/Default.qpl index ab28715f..94f02fc8 100644 --- a/src/themes/Default.qpl +++ b/src/themes/Default.qpl @@ -298,11 +298,15 @@ chat: color background: colors.mediumBackground member: - color background: "transparent" - color name: colors.text - color subtitle: colors.dimText + real invitedOpacity: 0.5 + + color background: "transparent" + color name: colors.text + color subtitle: colors.dimText + color adminIcon: hsluv(60, colors.saturation * 2.25, 60) color moderatorIcon: adminIcon + color invitedIcon: hsluv(0, colors.saturation * 2.25, 60) inviteButton: color background: colors.inputBackground