From 5cc701113e12d4790a6e904482ad4ba34d565e27 Mon Sep 17 00:00:00 2001 From: miruka Date: Tue, 16 Jul 2019 08:10:37 -0400 Subject: [PATCH] Fix banners, adapt to app width --- TODO.md | 8 +-- src/qml/Base/HAvatar.qml | 6 +- src/qml/Base/HUIButton.qml | 7 +- src/qml/Chat/Banners/Banner.qml | 121 +++++++++++++++++--------------- src/qml/Chat/Chat.qml | 6 ++ src/qml/UI.qml | 6 +- 6 files changed, 84 insertions(+), 70 deletions(-) diff --git a/TODO.md b/TODO.md index fb6c1437..c0ef71de 100644 --- a/TODO.md +++ b/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 - 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 diff --git a/src/qml/Base/HAvatar.qml b/src/qml/Base/HAvatar.qml index 88d7b57d..160c364b 100644 --- a/src/qml/Base/HAvatar.qml +++ b/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 diff --git a/src/qml/Base/HUIButton.qml b/src/qml/Base/HUIButton.qml index 47f77567..81050926 100644 --- a/src/qml/Base/HUIButton.qml +++ b/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 diff --git a/src/qml/Chat/Banners/Banner.qml b/src/qml/Chat/Banners/Banner.qml index 1f19d441..58d6efbb 100644 --- a/src/qml/Chat/Banners/Banner.qml +++ b/src/qml/Chat/Banners/Banner.qml @@ -7,8 +7,7 @@ import "../../Base" HRectangle { id: banner - Layout.fillWidth: true - Layout.preferredHeight: theme.baseElementsHeight + implicitHeight: childrenRect.height property alias avatar: bannerAvatar property alias icon: bannerIcon @@ -16,73 +15,81 @@ HRectangle { property alias buttonModel: bannerRepeater.model property var buttonCallbacks: [] - HRowLayout { - id: bannerRow - anchors.fill: parent - - HUserAvatar { - id: bannerAvatar - } - - HIcon { - 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 {} + HGridLayout { + id: bannerGrid + width: parent.width + flow: bannerAvatarWrapper.width + + bannerIcon.width + + bannerLabel.implicitWidth + + bannerButtons.width > + parent.width ? + GridLayout.TopToBottom : GridLayout.LeftToRight HRowLayout { - id: bannerButtons + id: bannerRow - function getButtonsWidth() { - var total = 0 + HRectangle { + id: bannerAvatarWrapper + color: "black" - for (var i = 0; i < bannerRepeater.count; i++) { - total += bannerRepeater.itemAt(i).implicitWidth + Layout.preferredWidth: bannerAvatar.width + Layout.minimumHeight: bannerAvatar.height + Layout.preferredHeight: bannerLabel.height + + HUserAvatar { + id: bannerAvatar + anchors.centerIn: parent } - - return total } - property bool compact: - bannerRow.width < - bannerAvatar.width + - bannerLabel.implicitWidth + - bannerLabel.Layout.leftMargin + - bannerLabel.Layout.rightMargin + - getButtonsWidth() + HIcon { + id: bannerIcon + dimension: bannerLabel.implicitHeight + visible: Boolean(svgName) - Repeater { - id: bannerRepeater - model: [] + Layout.leftMargin: theme.spacing / 2 + } - HUIButton { - id: button - text: modelData.text - iconName: modelData.iconName - onClicked: buttonCallbacks[modelData.name](button) + HLabel { + id: bannerLabel + textFormat: Text.StyledText + wrapMode: Text.Wrap - clip: true - Layout.maximumWidth: bannerButtons.compact ? height : -1 - Layout.fillHeight: true + Layout.fillWidth: true + Layout.leftMargin: bannerIcon.Layout.leftMargin + 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 + } } } } diff --git a/src/qml/Chat/Chat.qml b/src/qml/Chat/Chat.qml index 7ce12716..4ab06fc9 100644 --- a/src/qml/Chat/Chat.qml +++ b/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 } } diff --git a/src/qml/UI.qml b/src/qml/UI.qml index 14402577..214ed1cb 100644 --- a/src/qml/UI.qml +++ b/src/qml/UI.qml @@ -90,8 +90,10 @@ Item { repeat: false onTriggered: pageStack.showRoom( "@test_mary:matrix.org", - "Rooms", - "!TSXGsbBbdwsdylIOJZ:matrix.org" + // "Rooms", + // "!TSXGsbBbdwsdylIOJZ:matrix.org" + "Invites", + "!xjqvLOGhMVutPXpAqi:matrix.org" ) // onTriggered: pageStack.showPage( // "EditAccount/EditAccount",