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,12 +15,31 @@ HRectangle {
     property alias buttonModel: bannerRepeater.model
     property var buttonCallbacks: []
 
+    HGridLayout {
+        id: bannerGrid
+        width: parent.width
+        flow: bannerAvatarWrapper.width +
+              bannerIcon.width +
+              bannerLabel.implicitWidth +
+              bannerButtons.width >
+              parent.width ?
+              GridLayout.TopToBottom : GridLayout.LeftToRight
+
         HRowLayout {
             id: bannerRow
-        anchors.fill: parent
+
+            HRectangle {
+                id: bannerAvatarWrapper
+                color: "black"
+
+                Layout.preferredWidth: bannerAvatar.width
+                Layout.minimumHeight: bannerAvatar.height
+                Layout.preferredHeight: bannerLabel.height
 
                 HUserAvatar {
                     id: bannerAvatar
+                    anchors.centerIn: parent
+                }
             }
 
             HIcon {
@@ -35,10 +53,7 @@ HRectangle {
             HLabel {
                 id: bannerLabel
                 textFormat: Text.StyledText
-            elide: Text.ElideRight
+                wrapMode: Text.Wrap
-
-            visible:
-                bannerRow.width - bannerAvatar.width - bannerButtons.width > 30
 
                 Layout.fillWidth: true
                 Layout.leftMargin: bannerIcon.Layout.leftMargin
@@ -46,28 +61,12 @@ HRectangle {
             }
 
             HSpacer {}
+        }
 
+        HRowLayout {
             HRowLayout {
                 id: bannerButtons
 
-            function getButtonsWidth() {
-                var total = 0
-
-                for (var i = 0; i < bannerRepeater.count; i++) {
-                    total += bannerRepeater.itemAt(i).implicitWidth
-                }
-
-                return total
-            }
-
-            property bool compact:
-                bannerRow.width <
-                bannerAvatar.width +
-                bannerLabel.implicitWidth +
-                bannerLabel.Layout.leftMargin +
-                bannerLabel.Layout.rightMargin +
-                getButtonsWidth()
-
                 Repeater {
                     id: bannerRepeater
                     model: []
@@ -78,11 +77,19 @@ HRectangle {
                         iconName: modelData.iconName
                         onClicked: buttonCallbacks[modelData.name](button)
 
-                    clip: true
+                        Layout.preferredHeight: theme.baseElementsHeight
-                    Layout.maximumWidth: bannerButtons.compact ? height : -1
+                    }
+                }
+            }
+
+            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",