Differentiate invited members in room pane

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

src/icons/thin/user-invited.svg

@@ -0,0 +1,3 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m24 22.917h-24v-13.275l2-1.456v-7.269h20v7.272l2 1.453zm-21-10.472v-10.528h18v10.526l-9 5.474zm9.003578-8.8922656 1.672031 3.0878125 3.452969.6355-2.419 2.5445625.46125 3.4811566-3.16725-1.515719-3.1672503 1.515719.46125-3.4811566-2.419-2.5445625 3.4529693-.6355z"/>
+</svg>

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

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")
+            svgName:
-            colorize: admin ?
+                invited ? "user-invited" :
-                      theme.chat.roomPane.member.adminIcon :
+                admin ? "user-power-100" :
-                      theme.chat.roomPane.member.moderatorIcon
+                "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
+                visible: membershipIcon.hovered
-                text: admin ?
+                text:
-                      qsTr("Admin (%1 power)").arg(powerLevel) :
+                    invited ? qsTr("Invited") :
-                      qsTr("Moderator (%1 power)").arg(powerLevel)
+                    admin ? qsTr("Admin (%1 power)").arg(powerLevel) :
+                    qsTr("Moderator (%1 power)").arg(powerLevel)
             }
         }
     }

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 {} }
 }

src/themes/Default.qpl

@@ -298,11 +298,15 @@ chat:
         color background: colors.mediumBackground
 
         member:
-            color background:    "transparent"
+            real invitedOpacity: 0.5
-            color name:          colors.text
+
-            color subtitle:      colors.dimText
+            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