Add InviteOffer component

TODO.md

@@ -15,8 +15,12 @@
   - ![A picture](https://picsum.photos/256/256) not clickable?
 
 - UI
+  - Use HRowLayout and its totalSpacing wherever possible
+  - Spacer component
   - One line label componant
+  - Proper button background componant
   - Collapsible roomList sections, + button
+  - Prevent using the SendBox if no permission (power levels)
   - Reorganize SidePane
   - Proper theme, with components taking their colors from theme settings
   - Settings page

harmonyqml/backend/backend.py

@@ -103,6 +103,12 @@ class Backend(QObject):
     def pdb(self, additional_data: Sequence = ()) -> None:
         # pylint: disable=all
         ad = additional_data
+        cm = self.clientManager
+        cl = self.clientManager.clients
+        m  = self.models
+
+        tcl = lambda user: cl[f"@test_{user}:matrix.org"]
+
         import pdb
         from PyQt5.QtCore import pyqtRemoveInputHook
         pyqtRemoveInputHook()

harmonyqml/components/UI.qml

@@ -15,7 +15,7 @@ Controls1.SplitView {
     }
 
     StackView {
-        function showRoom(userId, roomId) {
+        function showRoom(userId, roomId, isInvite) {
             pageStack.replace(
                 "chat/Root.qml", { userId: userId, roomId: roomId }
             )
@@ -26,9 +26,9 @@ Controls1.SplitView {
 
         onCurrentItemChanged: currentItem.forceActiveFocus()
 
-        initialItem: MouseArea {  // TODO: (test, remove)
+        initialItem: Item {  // TODO: (test, remove)
-            onClicked: pageStack.showRoom(
+            Keys.onPressed: pageStack.showRoom(
-                "@test_mary:matrix.org", "!VDSsFIzQnXARSCVNxS:matrix.org"
+                "@test_mary:matrix.org", "!TSXGsbBbdwsdylIOJZ:matrix.org"
             )
         }
 

harmonyqml/components/base/HButton.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+Button {
+    property string iconName: ""
+
+    id: button
+    display: Button.TextBesideIcon
+    icon.source: "../../icons/" + iconName + ".svg"
+}

harmonyqml/components/base/HRowLayout.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+RowLayout {
+    id: rowLayout
+    spacing: 0
+
+    property int totalSpacing:
+        spacing * Math.max(0, (rowLayout.visibleChildren.length - 1))
+}

harmonyqml/components/chat/InviteOffer.qml

@@ -0,0 +1,80 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+import "../base" as Base
+
+Rectangle {
+    id: inviteOffer
+    Layout.fillWidth: true
+    Layout.preferredHeight: 32
+    color: "#BBB"
+
+    Base.HRowLayout {
+        id: inviteRow
+        anchors.fill: parent
+
+        Base.Avatar {
+            id: inviteAvatar
+            name: ""
+            dimmension: inviteOffer.Layout.preferredHeight
+        }
+
+        Base.HLabel {
+            id: inviteLabel
+            text: "<b>" + "Person" + "</b> " +
+                  qsTr("invited you to join the room.")
+            textFormat: Text.StyledText
+            maximumLineCount: 1
+            elide: Text.ElideRight
+
+            visible:
+                inviteRow.width - inviteAvatar.width - inviteButtons.width > 30
+
+            Layout.maximumWidth:
+                inviteRow.width -
+                inviteAvatar.width - inviteButtons.width -
+                Layout.leftMargin - Layout.rightMargin
+
+            Layout.leftMargin: 10
+            Layout.rightMargin: Layout.leftMargin
+        }
+
+        Item { Layout.fillWidth: true }
+
+        Base.HRowLayout {
+            id: inviteButtons
+            spacing: 0
+
+            property bool compact:
+                inviteRow.width <
+                inviteAvatar.width + inviteLabel.implicitWidth +
+                acceptButton.implicitWidth + declineButton.implicitWidth
+
+             property int displayMode:
+                 compact ? Button.IconOnly : Button.TextBesideIcon
+
+            Base.HButton {
+                id: acceptButton
+                text: qsTr("Accept")
+                iconName: "accept"
+                icon.color: Qt.hsla(0.45, 0.9, 0.3, 1)
+                display: inviteButtons.displayMode
+
+                Layout.maximumWidth: inviteButtons.compact ? height : -1
+                Layout.fillHeight: true
+            }
+
+            Base.HButton {
+                id: declineButton
+                text: qsTr("Decline")
+                iconName: "decline"
+                icon.color: Qt.hsla(0.95, 0.9, 0.35, 1)
+                icon.width: 32
+                display: inviteButtons.displayMode
+
+                Layout.maximumWidth: inviteButtons.compact ? height : -1
+                Layout.fillHeight: true
+            }
+        }
+    }
+}

harmonyqml/components/chat/Root.qml

@@ -3,23 +3,35 @@ import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
 
 ColumnLayout {
-    property var userId: null
+    property string userId: ""
-    property var roomId: null
+    property string roomId: ""
 
-    property var roomInfo:
+    readonly property var roomInfo:
         Backend.models.rooms.get(userId).getWhere("roomId", roomId)
 
+    property bool isInvite: roomInfo.category === "Invites"
+
     id: chatPage
     spacing: 0
     onFocusChanged: sendBox.setFocus()
 
     RoomHeader {
-        id: roomHeader
         displayName: roomInfo.displayName
         topic: roomInfo.topic
     }
 
+
     MessageList {}
+
+
     TypingUsersBar {}
-    SendBox { id: sendBox }
+
+    InviteOffer {
+        visible: isInvite
+    }
+
+    SendBox {
+        id: sendBox
+        visible: ! isInvite
+    }
 }

harmonyqml/components/chat/SendBox.qml

@@ -39,6 +39,7 @@ Rectangle {
                 placeholderText: qsTr("Type a message...")
                 wrapMode: TextEdit.Wrap
                 selectByMouse: true
+                readOnly: ! visible
                 font.family: "Roboto"
                 font.pixelSize: 16
                 focus: true

harmonyqml/icons/accept.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z"/></svg>

harmonyqml/icons/decline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23 20.168l-8.185-8.187 8.185-8.174-2.832-2.807-8.182 8.179-8.176-8.179-2.81 2.81 8.186 8.196-8.186 8.184 2.81 2.81 8.203-8.192 8.18 8.192z"/></svg>