Fix banners, adapt to app width

TODO.md

@@ -1,17 +1,16 @@
 - If avatar is set, name color from average color?
-- banner button repair
 - Wrong avatar for group rooms
 - Reduce messages ListView cacheBuffer height once http thumbnails
   downloading is implemented 
 - HTextField focus effect
 - Button can get "hoverEnabled: false" to let HoverHandlers work
-- Handle TimeoutError for all kind of async requests (nio)
 - Handle thumbnail response status 400
 - "Loading..." if going to edit account page while it's loading
 - Improve avatar tooltips position, add stuff to room tooltips (last msg?)
 - Accept drag and dropping a picture in account settings to set avatar
 - When all the events loaded on beginning in a room are name/avatar changes,
   no last event room text is displayed
+-  `QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling)` ?
 
 - Qt 5.12
   - See about ECMAScript 6 and 7 features
@@ -37,8 +36,6 @@
   - Don't put own messages to the right past certain width
 
   - Invite to room
-  - Accounts delegates background
-  - SidePane delegates hover effect
   - Server selection
   - Register/Forgot? for SignIn dialog
   - Scaling
@@ -49,7 +46,6 @@
   - Prevent using the SendBox if no permission (power levels)
   - Spinner when loading past room events, images or clicking buttons
   - Better theming/styling system
-    - See about <https://doc.qt.io/qt-5/qtquickcontrols2-configuration.html>
   - Settings page
     - Multiaccount aliases
   - Message/text selection
@@ -71,7 +67,6 @@
 
 - Client improvements
   - [debug mode](https://docs.python.org/3/library/asyncio-dev.html)
-  - Filtering rooms: search more than display names?
   - Initial sync filter and lazy load, see weechat-matrix `_handle_login()`
     - See also `handle_response()`'s `keys_query` request
   - Direct chats category
@@ -87,6 +82,7 @@
   - Room subtitle: show things like "*Image*" instead of blank, etc
 
 - Missing nio support
+  - Handle TimeoutError for all kind of async requests (nio)
   - MatrixRoom invited members list
   - Invite events are missing their timestamps (needed for sorting)
   - Left room events after client reboot

src/qml/Base/HAvatar.qml

@@ -51,7 +51,11 @@ HRectangle {
         HToolTip {
             id: avatarToolTip
             visible: toolTipImageUrl && hoverHandler.hovered
-            width: 192 + background.border.width * 2
+            width: Math.min(
+                mainUI.width / 1.25,
+                mainUI.height / 1.25,
+                192 + background.border.width * 2
+            )
             height: width
             delay: 1000
 

src/qml/Base/HUIButton.qml

@@ -7,19 +7,17 @@ import QtQuick.Layouts 1.12
 import QtGraphicalEffects 1.12
 
 HBaseButton {
+    property int contentWidth: 0
     property int horizontalMargin: 0
     property int verticalMargin: 0
+    property int fontSize: theme.fontSize.normal
 
     property string iconName: ""
     property var iconDimension: null
     property var iconTransform: null
 
-    property int fontSize: theme.fontSize.normal
-
     property bool loading: false
 
-    property int contentWidth: 0
-
     readonly property alias visibility: button.visible
     onVisibilityChanged: if (! visibility) { loading = false }
 
@@ -46,6 +44,7 @@ HBaseButton {
             }
 
             HLabel {
+                visible: Boolean(text)
                 text: button.text
                 font.pixelSize: fontSize
                 horizontalAlignment: Text.AlignHCenter

src/qml/Chat/Banners/Banner.qml

@@ -7,8 +7,7 @@ import "../../Base"
 
 HRectangle {
     id: banner
-    Layout.fillWidth: true
+    implicitHeight: childrenRect.height
-    Layout.preferredHeight: theme.baseElementsHeight
 
     property alias avatar: bannerAvatar
     property alias icon: bannerIcon
@@ -16,73 +15,81 @@ HRectangle {
     property alias buttonModel: bannerRepeater.model
     property var buttonCallbacks: []
 
-    HRowLayout {
+    HGridLayout {
-        id: bannerRow
+        id: bannerGrid
-        anchors.fill: parent
+        width: parent.width
-
+        flow: bannerAvatarWrapper.width +
-        HUserAvatar {
+              bannerIcon.width +
-            id: bannerAvatar
+              bannerLabel.implicitWidth +
-        }
+              bannerButtons.width >
-
+              parent.width ?
-        HIcon {
+              GridLayout.TopToBottom : GridLayout.LeftToRight
-            id: bannerIcon
-            dimension: bannerLabel.implicitHeight
-            visible: Boolean(svgName)
-
-            Layout.leftMargin: theme.spacing / 2
-        }
-
-        HLabel {
-            id: bannerLabel
-            textFormat: Text.StyledText
-            elide: Text.ElideRight
-
-            visible:
-                bannerRow.width - bannerAvatar.width - bannerButtons.width > 30
-
-            Layout.fillWidth: true
-            Layout.leftMargin: bannerIcon.Layout.leftMargin
-            Layout.rightMargin: Layout.leftMargin
-        }
-
-        HSpacer {}
 
         HRowLayout {
-            id: bannerButtons
+            id: bannerRow
 
-            function getButtonsWidth() {
+            HRectangle {
-                var total = 0
+                id: bannerAvatarWrapper
+                color: "black"
 
-                for (var i = 0; i < bannerRepeater.count; i++) {
+                Layout.preferredWidth: bannerAvatar.width
-                    total += bannerRepeater.itemAt(i).implicitWidth
+                Layout.minimumHeight: bannerAvatar.height
+                Layout.preferredHeight: bannerLabel.height
+
+                HUserAvatar {
+                    id: bannerAvatar
+                    anchors.centerIn: parent
                 }
-
-                return total
             }
 
-            property bool compact:
+            HIcon {
-                bannerRow.width <
+                id: bannerIcon
-                bannerAvatar.width +
+                dimension: bannerLabel.implicitHeight
-                bannerLabel.implicitWidth +
+                visible: Boolean(svgName)
-                bannerLabel.Layout.leftMargin +
-                bannerLabel.Layout.rightMargin +
-                getButtonsWidth()
 
-            Repeater {
+                Layout.leftMargin: theme.spacing / 2
-                id: bannerRepeater
+            }
-                model: []
 
-                HUIButton {
+            HLabel {
-                    id: button
+                id: bannerLabel
-                    text: modelData.text
+                textFormat: Text.StyledText
-                    iconName: modelData.iconName
+                wrapMode: Text.Wrap
-                    onClicked: buttonCallbacks[modelData.name](button)
 
-                    clip: true
+                Layout.fillWidth: true
-                    Layout.maximumWidth: bannerButtons.compact ? height : -1
+                Layout.leftMargin: bannerIcon.Layout.leftMargin
-                    Layout.fillHeight: true
+                Layout.rightMargin: Layout.leftMargin
+            }
+
+            HSpacer {}
+        }
+
+        HRowLayout {
+            HRowLayout {
+                id: bannerButtons
+
+                Repeater {
+                    id: bannerRepeater
+                    model: []
+
+                    HUIButton {
+                        id: button
+                        text: modelData.text
+                        iconName: modelData.iconName
+                        onClicked: buttonCallbacks[modelData.name](button)
+
+                        Layout.preferredHeight: theme.baseElementsHeight
+                    }
                 }
             }
+
+            HRectangle {
+                id: buttonsRightPadding
+                color: theme.controls.button.background
+                visible: bannerGrid.flow == GridLayout.TopToBottom
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
         }
     }
 }

src/qml/Chat/Chat.qml

@@ -55,10 +55,14 @@ HColumnLayout {
             InviteBanner {
                 visible: category == "Invites"
                 inviterId: roomInfo.inviterId
+
+                Layout.fillWidth: true
             }
 
             //UnknownDevicesBanner {
                 //visible: category == "Rooms" && hasUnknownDevices
+                //
+                //Layout.fillWidth: true
             //}
 
             SendBox {
@@ -69,6 +73,8 @@ HColumnLayout {
             LeftBanner {
                 visible: category == "Left"
                 userId: chatPage.userId
+
+                Layout.fillWidth: true
             }
         }
 

src/qml/UI.qml

@@ -90,8 +90,10 @@ Item {
                 repeat: false
                 onTriggered: pageStack.showRoom(
                     "@test_mary:matrix.org",
-                    "Rooms",
+                    // "Rooms",
-                    "!TSXGsbBbdwsdylIOJZ:matrix.org"
+                    // "!TSXGsbBbdwsdylIOJZ:matrix.org"
+                    "Invites",
+                    "!xjqvLOGhMVutPXpAqi:matrix.org"
                 )
                 // onTriggered: pageStack.showPage(
                 //     "EditAccount/EditAccount",