Login loading icon

Add standard mechanism in HButton for loading icon display;
have HImage and HIcon base components.

harmonyqml/backend/client_manager.py

@@ -60,14 +60,15 @@ class ClientManager(QObject):
                   .add_done_callback(lambda _, c=client: self._on_connected(c))
 
 
-    @pyqtSlot(str, str, str)
+    @pyqtSlot(str, str, str, result="QVariant")
-    @pyqtSlot(str, str, str, str)
+    @pyqtSlot(str, str, str, str, result="QVariant")
     def new(self, hostname: str, username: str, password: str,
             device_id: str = "") -> None:
 
         client = Client(self, hostname, username, device_id)
-        client.login(password, self.defaultDeviceName)\
+        future = client.login(password, self.defaultDeviceName)
-              .add_done_callback(lambda _: self._on_connected(client))
+        future.add_done_callback(lambda _: self._on_connected(client))
+        return future
 
 
     def _on_connected(self, client: Client) -> None:

harmonyqml/backend/signal_manager.py

@@ -33,7 +33,6 @@ class SignalManager(QObject):
 
 
     def onClientAdded(self, client: Client) -> None:
-        print(client)
         self.connectClient(client)
         self.backend.models.accounts.append(User(
             userId      = client.userId,
@@ -196,7 +195,6 @@ class SignalManager(QObject):
             new_event = RoomEvent(type=etype, dateTime=date_time, dict=edict)
 
             if etype == "RoomCreateEvent":
-                print(room_id, "ff")
                 self.backend.fully_loaded_rooms.add(room_id)
 
             if self._events_in_transfer:

harmonyqml/components/base/HButton.qml

@@ -3,11 +3,19 @@ import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
 
 Button {
-    property alias fontSize: buttonLabel.font.pixelSize
+    property int fontSize: HStyle.fontSize.normal
     property color backgroundColor: "lightgray"
     property alias overlayOpacity: buttonBackgroundOverlay.opacity
     property string iconName: ""
     property bool circle: false
+    property bool loading: false
+
+    property int contentWidth: 0
+
+    function loadingUntilFutureDone(future) {
+        loading = true
+        future.onGotResult.connect(function() { loading = false })
+    }
 
     id: button
     display: Button.TextBesideIcon
@@ -26,37 +34,44 @@ Button {
         }
     }
 
-    contentItem: HRowLayout {
+    Component {
-        spacing: button.text && iconName ? 5 : 0
+        id: buttonContent
 
-        Component {
+        HRowLayout {
-            id: buttonIcon
+            id: contentLayout
-            Image {
+            spacing: button.text && iconName ? 5 : 0
-                cache: true
+            Component.onCompleted: contentWidth = implicitWidth
-                mipmap: true
+
-                source: "../../icons/" + iconName + ".svg"
+            HIcon {
-                fillMode: Image.PreserveAspectFit
+                svgName: loading ? "hourglass" : iconName
-                width: button.text ? 20 : 24
+                dimension: contentLayout.height
-                height: width
+            }
+
+            HLabel {
+                text: button.text
+                font.pixelSize: fontSize
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             }
         }
-        Loader {
+    }
-            sourceComponent: iconName ? buttonIcon : undefined
+
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+    Component {
+        id: loadingOverlay
+        HRowLayout {
+            HIcon {
+                svgName: "hourglass"
+                Layout.preferredWidth: contentWidth || -1
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
         }
+    }
 
-        HLabel {
+    contentItem: Loader {
-            id: buttonLabel
+        sourceComponent:
-
+            loading && ! iconName ? loadingOverlay : buttonContent
-            text: button.text
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-
-            elide: Text.ElideRight
-            maximumLineCount: 1
-            Layout.maximumWidth: button.width - buttonIcon.width
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        }
     }
 
     MouseArea {

harmonyqml/components/base/HIcon.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.7
+
+HImage {
+    property var svgName: null
+    property int dimension: 20
+
+    source: "../../icons/" + (svgName || "none") + ".svg"
+    sourceSize.width: svgName ? dimension : 0
+    sourceSize.height: svgName ? dimension : 0
+}

harmonyqml/components/base/HImage.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.7
+
+Image {
+    asynchronous: true
+    cache: true
+    mipmap: true
+    fillMode: Image.PreserveAspectFit
+}

harmonyqml/components/pages/LoginPage.qml

@@ -11,9 +11,9 @@ Image {
     source: "../../images/login_background.jpg"
 
     function login() {
-        Backend.clientManager.new(
+        loginButton.loadingUntilFutureDone(Backend.clientManager.new(
             "matrix.org", identifierField.text, passwordField.text
-        )
+        ))
     }
 
     Rectangle {
@@ -119,10 +119,13 @@ Image {
                 Base.HButton {
                     text: qsTr("Register")
                     Layout.fillWidth: true
+                    Layout.preferredHeight: 32
                 }
                 Base.HButton {
+                    id: loginButton
                     text: qsTr("Login")
                     Layout.fillWidth: true
+                    Layout.preferredHeight: 32
 
                     MouseArea {
                         anchors.fill: parent
@@ -132,6 +135,7 @@ Image {
                 Base.HButton {
                     text: qsTr("Forgot?")
                     Layout.fillWidth: true
+                    Layout.preferredHeight: 32
                 }
             }
         }

harmonyqml/icons/none.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>