Update/refactor Chat components and banner

2019-04-28 14:20:30 -04:00 · 2019-04-28 14:20:30 -04:00 · 99ab6a817a
commit 99ab6a817a
parent bf9eb7dbc9
15 changed files with 89 additions and 118 deletions
--- a/TODO.md
+++ b/TODO.md
@ -11,8 +11,10 @@
  - Icons aren't reloaded
  - Bug when resizing window being tiled (i3), can't figure it out
  - HStyle singleton isn't reloaded
+  - `MessageDelegate.qml:63: TypeError: 'reloadPreviousItem' not a function`

 - UI
+  - Use nested listview for categories instead of section property
  - Server selection
  - Register/Forgot? for SignIn dialog
  - Scaling
--- a/harmonyqml/backend/client.py
+++ b/harmonyqml/backend/client.py
@ -4,7 +4,7 @@
 import time
 from concurrent.futures import ThreadPoolExecutor
 from threading import Event
-from typing import Any, DefaultDict, Dict, Optional, Tuple
+from typing import DefaultDict, Tuple

 from PyQt5.QtCore import QObject, pyqtProperty, pyqtSignal, pyqtSlot

@ -78,16 +78,6 @@ class Client(QObject):
        return self.nio.user_id


-    @pyqtSlot(str, result="QVariant")
-    @pyqtSlot(str, list, result="QVariant")
-    @pyqtSlot(str, list, "QVariantMap", result="QVariant")
-    def call(self,
-             method: str,
-             args:   Optional[list]           = None,
-             kwargs: Optional[Dict[str, Any]] = None) -> Any:
-        return getattr(self, method)(*args or [], **kwargs or {})
-
-
    @pyqtSlot(str, result="QVariant")
    @pyqtSlot(str, str, result="QVariant")
    @futurize()
@ -246,19 +236,19 @@ class Client(QObject):
        return send(self)


-    @pyqtSlot(str)
+    @pyqtSlot(str, result="QVariant")
    @futurize()
    def joinRoom(self, room_id: str) -> None:
        return self.net.talk(self.nio.join, room_id=room_id)


-    @pyqtSlot(str)
+    @pyqtSlot(str, result="QVariant")
    @futurize()
    def leaveRoom(self, room_id: str) -> None:
        return self.net.talk(self.nio.room_leave, room_id=room_id)


-    @pyqtSlot(str)
+    @pyqtSlot(str, result="QVariant")
    @futurize()
    def forgetRoom(self, room_id: str) -> None:
        self.roomAboutToBeForgotten.emit(room_id)
--- a/harmonyqml/components/Base/HAvatar.qml
+++ b/harmonyqml/components/Base/HAvatar.qml
@ -9,6 +9,7 @@ Rectangle {
    property var imageSource: null
    property int dimension: 48

+
    readonly property string resolvedName:
        ! name ? "?" :
        typeof(name) == "string" ? name :
@ -16,6 +17,9 @@ Rectangle {

    width: dimension
    height: hidden ? 1 : dimension
+    implicitWidth: dimension
+    implicitHeight: hidden ? 1 : dimension
+
    opacity: hidden ? 0 : 1

    color: resolvedName === "?" ?
--- a/harmonyqml/components/Base/HButton.qml
+++ b/harmonyqml/components/Base/HButton.qml
@ -15,6 +15,9 @@ Button {

    property int contentWidth: 0

+    readonly property alias visibility: button.visible
+    onVisibilityChanged: if (! visibility) { loading = false }
+
    signal canceled
    signal clicked
    signal doubleClicked
@ -30,7 +33,6 @@ Button {
    }

    id: button
-    display: Button.TextBesideIcon

    background: Rectangle {
        id: buttonBackground
--- a/harmonyqml/components/Base/HStyle.qml
+++ b/harmonyqml/components/Base/HStyle.qml
@ -21,7 +21,8 @@ QtObject {
    }

    readonly property QtObject colors: QtObject {
-        property color background0: Qt.hsla(0, 0, 0.8, 0.7)
+        property color background0: Qt.hsla(0, 0, 0.8, 0.5)
+        property color background1: Qt.hsla(0, 0, 0.8, 0.7)
        property color foreground: "black"
        property color foregroundDim: Qt.hsla(0, 0, 0.2, 1)
        property color foregroundError: Qt.hsla(0.95, 0.64, 0.32, 1)
@ -30,52 +31,56 @@ QtObject {
    property int radius: 5

    readonly property QtObject sidePane: QtObject {
-        property color background: colors.background0
+        property color background: colors.background1
    }

    readonly property QtObject chat: QtObject {
        readonly property QtObject roomHeader: QtObject {
-            property color background: colors.background0
+            property color background: colors.background1
        }

        readonly property QtObject messageList: QtObject {
-            property color background: colors.background0
+            property color background: "transparent"
        }

        readonly property QtObject message: QtObject {
-            property color background: colors.background0
+            property color background: colors.background1
            property color body: colors.foreground
            property color date: colors.foregroundDim
        }

        readonly property QtObject event: QtObject {
-            property color background: colors.background0
+            property color background: colors.background1
            property real saturation: 0.22
            property real lightness: 0.24
            property color date: colors.foregroundDim
        }

        readonly property QtObject daybreak: QtObject {
-            property color background: colors.background0
+            property color background: colors.background1
            property color foreground: colors.foreground
            property int radius: style.radius
        }

        readonly property QtObject inviteBanner: QtObject {
-            property color background: colors.background0
+            property color background: colors.background1
        }

        readonly property QtObject leftBanner: QtObject {
+            property color background: colors.background1
+        }
+
+        readonly property QtObject typingUsers: QtObject {
            property color background: colors.background0
        }

        readonly property QtObject sendBox: QtObject {
-            property color background: colors.background0
+            property color background: colors.background1
        }
    }

    readonly property QtObject box: QtObject {
-        property color background: colors.background0
+        property color background: colors.background1
        property int radius: style.radius
    }

--- a/harmonyqml/components/Chat/Banner.qml
+++ b/harmonyqml/components/Chat/Banner.qml
@ -8,12 +8,11 @@ Base.HGlassRectangle {
    Layout.fillWidth: true
    Layout.preferredHeight: 32

-    signal buttonClicked(string signalId)
-
    property alias avatarName: bannerAvatar.name
    property alias avatarSource: bannerAvatar.imageSource
    property alias labelText: bannerLabel.text
    property alias buttonModel: bannerRepeater.model
+    property var buttonCallbacks: []

    Base.HRowLayout {
        id: bannerRow
@ -66,48 +65,15 @@ Base.HGlassRectangle {
                bannerLabel.Layout.rightMargin +
                getButtonsWidth()

-             property int displayMode:
-                 compact ? Button.IconOnly : Button.TextBesideIcon
-
            Repeater {
                id: bannerRepeater
                model: []

                Base.HButton {
-                    property bool alreadyClicked: false
-
+                    id: button
                    text: modelData.text
                    iconName: modelData.iconName
-                    display: bannerButtons.displayMode
-
-                    MouseArea {
-                        anchors.fill: parent
-                        propagateComposedEvents: true
-                        onClicked: {
-                            if (alreadyClicked) { return }
-
-                            iconName       = "hourglass"
-                            alreadyClicked = true
-
-                            // modelData might be undefined after Backend call
-                            var signalId = modelData.signalId
-                            var isForget =
-                                modelData.clientFunction === "forgetRoom"
-
-                            var future =
-                                Backend.clientManager.clients[chatPage.userId].
-                                call(modelData.clientFunction,
-                                     modelData.clientArgs)
-
-                            if (! isForget) {
-                                future.onGotResult.connect(function() {
-                                    iconName = modelData.iconName
-                                })
-                            }
-
-                            if (signalId) { buttonClicked(signalId) }
-                        }
-                    }
+                    onClicked: buttonCallbacks[modelData.name](button)

                    Layout.maximumWidth: bannerButtons.compact ? height : -1
                    Layout.fillHeight: true
--- a/harmonyqml/components/Chat/Chat.qml
+++ b/harmonyqml/components/Chat/Chat.qml
@ -13,7 +13,6 @@ ColumnLayout {

    Component.onCompleted: console.log("replaced")

-
    id: chatPage
    spacing: 0
    onFocusChanged: sendBox.setFocus()
--- a/harmonyqml/components/Chat/Daybreak.qml
+++ b/harmonyqml/components/Chat/Daybreak.qml
@ -8,7 +8,4 @@ Base.HNoticeLabel {
    radius: Base.HStyle.chat.daybreak.radius

    width: messageDelegate.width
-    //topPadding: messageDelegate.isFirstMessage ?
-                //0 : messageDelegate.standardSpacing
-    //bottomPadding: messageDelegate.standardSpacing
 }
--- a/harmonyqml/components/Chat/InviteBanner.qml
+++ b/harmonyqml/components/Chat/InviteBanner.qml
@ -18,18 +18,30 @@ Banner {

    buttonModel: [
        {
-            text: "Accept",
+            name: "accept",
+            text: qsTr("Accept"),
            iconName: "invite_accept",
-            //iconColor: Qt.hsla(0.45, 0.9, 0.3, 1),
-            clientFunction: "joinRoom",
-            clientArgs: [chatPage.roomId],
        },
        {
-            text: "Decline",
+            name: "decline",
+            text: qsTr("Decline"),
            iconName: "invite_decline",
-            //iconColor: Qt.hsla(0.95, 0.9, 0.35, 1),
-            clientFunction: "leaveRoom",
-            clientArgs: [chatPage.roomId],
        }
    ]
+
+    buttonCallbacks: {
+        "accept": function(button) {
+            button.loading = true
+            Backend.clientManager.clients[chatPage.userId].joinRoom(
+                chatPage.roomId
+            )
+        },
+
+        "decline": function(button) {
+            button.loading = true
+            Backend.clientManager.clients[chatPage.userId].leaveRoom(
+                chatPage.roomId
+            )
+        }
+    }
 }
--- a/harmonyqml/components/Chat/LeftBanner.qml
+++ b/harmonyqml/components/Chat/LeftBanner.qml
@ -9,22 +9,25 @@ Banner {

    color: Base.HStyle.chat.leftBanner.background

-    onButtonClicked: if (signalId === "forget") {
-        chatPage.canLoadPastEvents = false
-        pageStack.clear()
-    }
-
    avatarName: ChatJS.getLeftBannerAvatarName(leftEvent, chatPage.userId)
    labelText: ChatJS.getLeftBannerText(leftEvent)

    buttonModel: [
        {
-            signalId: "forget",
-            text: "Forget",
+            name: "forget",
+            text: qsTr("Forget"),
            iconName: "forget_room",
-            //iconColor: Qt.hsla(0.95, 0.9, 0.35, 1),
-            clientFunction: "forgetRoom",
-            clientArgs: [chatPage.roomId],
        }
    ]
+
+    buttonCallbacks: {
+        "forget": function(button) {
+            button.loading = true
+            chatPage.canLoadPastEvents = false
+            Backend.clientManager.clients[chatPage.userId].forgetRoom(
+                chatPage.roomId
+            )
+            pageStack.clear()
+        },
+    }
 }
--- a/harmonyqml/components/Chat/MessageList.qml
+++ b/harmonyqml/components/Chat/MessageList.qml
@ -7,7 +7,7 @@ Base.HGlassRectangle {
    property bool canLoadPastEvents: true
    property int space: 8

-    color: "transparent"
+    color: Base.HStyle.chat.messageList.background

    Layout.fillWidth: true
    Layout.fillHeight: true
@ -40,16 +40,10 @@ Base.HGlassRectangle {
        }
    }

-    Base.HLabel {
+    Base.HNoticeLabel {
+        text: qsTr("Nothing to show here yet...")
+
        visible: messageListView.model.count < 1
        anchors.centerIn: parent
-        text: qsTr("Nothing to see here yet…")
-        padding: 10
-        topPadding: padding / 3
-        bottomPadding: topPadding
-        background: Rectangle {
-            color: Base.HStyle.chat.messageList.background
-            radius: 5
-        }
    }
 }
--- a/harmonyqml/components/Chat/RoomHeader.qml
+++ b/harmonyqml/components/Chat/RoomHeader.qml
@ -7,22 +7,22 @@ Base.HGlassRectangle {
    property string displayName: ""
    property string topic: ""

-    id: root
-    Layout.fillWidth: true
-    Layout.minimumHeight: 36
-    Layout.maximumHeight: Layout.minimumHeight
+    id: roomHeader
    color: Base.HStyle.chat.roomHeader.background

-    RowLayout {
+    Layout.fillWidth: true
+    Layout.preferredHeight: 32
+
+    Base.HRowLayout {
        id: row
-        spacing: 12
+        spacing: 8
        anchors.fill: parent

        Base.HAvatar {
            id: avatar
-            Layout.alignment: Qt.AlignTop
-            dimension: root.Layout.minimumHeight
            name: displayName
+            dimension: roomHeader.height
+            Layout.alignment: Qt.AlignTop
        }

        Base.HLabel {
@ -31,9 +31,7 @@ Base.HGlassRectangle {
            font.pixelSize: Base.HStyle.fontSize.big
            elide: Text.ElideRight
            maximumLineCount: 1
-            Layout.maximumWidth:
-                row.width - row.spacing * (row.children.length - 1) -
-                avatar.width
+            Layout.maximumWidth: row.width - row.totalSpacing - avatar.width
        }

        Base.HLabel {
@ -43,10 +41,7 @@ Base.HGlassRectangle {
            elide: Text.ElideRight
            maximumLineCount: 1
            Layout.maximumWidth:
-                row.width -
-                row.spacing * (row.children.length - 1) -
-                avatar.width -
-                roomName.width
+                row.width - row.totalSpacing - avatar.width - roomName.width
        }

        Item { Layout.fillWidth: true }
--- a/harmonyqml/components/Chat/TypingUsersBar.qml
+++ b/harmonyqml/components/Chat/TypingUsersBar.qml
@ -4,20 +4,20 @@ import QtQuick.Layouts 1.4
 import "../Base" as Base
 import "utils.js" as ChatJS

-Rectangle {
-    id: root
+Base.HGlassRectangle {
+    property var typingUsers: chatPage.roomInfo.typingUsers
+
+    color: Base.HStyle.chat.typingUsers.background
+
    Layout.fillWidth: true
    Layout.minimumHeight: usersLabel.text ? usersLabel.implicitHeight : 0
    Layout.maximumHeight: Layout.minimumHeight
-    color: "#BBB"
-
-    property var typingUsers: chatPage.roomInfo.typingUsers

    Base.HLabel {
        id: usersLabel
        anchors.fill: parent
-        text: ChatJS.getTypingUsersText(typingUsers, chatPage.userId)

+        text: ChatJS.getTypingUsersText(typingUsers, chatPage.userId)
        elide: Text.ElideMiddle
        maximumLineCount: 1
    }
--- a/harmonyqml/components/SidePane/AccountList.qml
+++ b/harmonyqml/components/SidePane/AccountList.qml
@ -9,7 +9,7 @@ ListView {
    spacing: 8
    Layout.leftMargin: spacing
    topMargin: spacing
-    bottomMargin: spacing
+    bottomMargin: topMargin

    model: Backend.models.accounts
    delegate: AccountDelegate {}
--- a/harmonyqml/components/UI.qml
+++ b/harmonyqml/components/UI.qml
@ -21,8 +21,10 @@ Item {
        anchors.fill: parent

        SidePane.SidePane {
+            property int parentWidth: parent.width
+            onParentWidthChanged: width = Math.min(parent.width * 0.3, 300)
+
            Layout.minimumWidth: 36
-            width: Math.min(parent.width * 0.33, 300)
            Layout.maximumWidth: parent.width
            visible: accountsLoggedIn
        }
@ -38,7 +40,7 @@ Item {

            function showRoom(userId, roomId) {
                pageStack.replace(
-                    "Chat/Root.qml", { userId: userId, roomId: roomId }
+                    "Chat/Chat.qml", { userId: userId, roomId: roomId }
                )
            }