From 7b81af43b13daf3900fc5f5780dbcb0104a3c2f7 Mon Sep 17 00:00:00 2001 From: James Graham Date: Fri, 30 Sep 2022 15:02:19 +0000 Subject: [PATCH] Timeline Container Highlight Update Moves the highlight to the timeline container object itself so the whole delegate is highlighted. This was suggested for compact mode but I also left it visible for bubble as I think it still works and adds some user feedback. Fine tunes the hover actions as follows: - In compact mode as long as the screen is wide enough they are inset further so they don't overlap the up and down buttons. - In bubble mode for a user message on the right they are inset slightly further so that they don't overlap the scrollbar Fine tuned the spacing around the avatar and highlight. Based upon the suggestions here network/neochat#550 Bubble Before - no highlight can be seen ![bubble_highlight_before](/uploads/4417d80d62881ff7256bd18a1760002e/bubble_highlight_before.png) Bubble After ![bubble_highlight_after](/uploads/817e8c749809bf07362af4c9dcdf7087/bubble_highlight_after.png) Compact Before ![compact_highlight_before](/uploads/aada5d39cfd69563753e5048bd4c248d/compact_highlight_before.png) Compact After ![compact_highlight_after](/uploads/d3b6c066e86910e7cd2162a970d77ca6/compact_highlight_after.png) --- .../Component/Timeline/TimelineContainer.qml | 30 +++++++++++-------- imports/NeoChat/Page/RoomPage.qml | 4 +-- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/imports/NeoChat/Component/Timeline/TimelineContainer.qml b/imports/NeoChat/Component/Timeline/TimelineContainer.qml index b9aa294b1..cccc4d67e 100644 --- a/imports/NeoChat/Component/Timeline/TimelineContainer.qml +++ b/imports/NeoChat/Component/Timeline/TimelineContainer.qml @@ -42,9 +42,16 @@ QQC2.ItemDelegate { topPadding: 0 bottomPadding: 0 + topInset: showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing) + leftInset: Kirigami.Units.smallSpacing + rightInset: Kirigami.Units.smallSpacing width: delegateMaxWidth - height: sectionDelegate.height + Math.max(model.showAuthor ? avatar.height : 0, bubble.implicitHeight) + loader.height + (showAuthor ? Kirigami.Units.largeSpacing : 0) - background: null + height: sectionDelegate.height + Math.max(model.showAuthor ? avatar.height : 0, bubble.implicitHeight) + loader.height + (showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing)) + background: Rectangle { + visible: timelineContainer.hovered + color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15) + radius: Kirigami.Units.smallSpacing + } property Item hoverComponent @@ -103,15 +110,20 @@ QQC2.ItemDelegate { Kirigami.Avatar { id: avatar - width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0 + width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 + Kirigami.Units.smallSpacing * 2 : 0 height: width + padding: Kirigami.Units.smallSpacing + topInset: Kirigami.Units.smallSpacing + bottomInset: Kirigami.Units.smallSpacing + leftInset: Kirigami.Units.smallSpacing + rightInset: Kirigami.Units.smallSpacing sourceSize.width: width sourceSize.height: width anchors { top: sectionDelegate.bottom - topMargin: model.showAuthor ? Kirigami.Units.largeSpacing : 0 + topMargin: model.showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing) left: parent.left - leftMargin: Kirigami.Units.largeSpacing + leftMargin: Kirigami.Units.smallSpacing } visible: model.showAuthor && @@ -146,7 +158,7 @@ QQC2.ItemDelegate { anchors { top: avatar.top - leftMargin: Kirigami.Units.largeSpacing + leftMargin: Kirigami.Units.smallSpacing rightMargin: showUserMessageOnRight ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing } // HACK: anchoring didn't reset anchors.right when switching from parent.right to undefined reliably @@ -249,12 +261,6 @@ QQC2.ItemDelegate { } background: Item { - Rectangle { - visible: timelineContainer.hovered - color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15) - radius: Kirigami.Units.smallSpacing - anchors.fill: parent - } Kirigami.ShadowedRectangle { visible: cardBackground && !Config.compactLayout anchors.fill: parent diff --git a/imports/NeoChat/Page/RoomPage.qml b/imports/NeoChat/Page/RoomPage.qml index 55e2910aa..275245fc6 100644 --- a/imports/NeoChat/Page/RoomPage.qml +++ b/imports/NeoChat/Page/RoomPage.qml @@ -207,7 +207,7 @@ Kirigami.ScrollablePage { readonly property int largestVisibleIndex: count > 0 ? indexAt(contentX + (width / 2), contentY + height - 1) : -1 readonly property bool isLoaded: page.width * page.height > 10 - spacing: Config.compactLayout ? 1 : Kirigami.Units.smallSpacing + spacing: 0 verticalLayoutDirection: ListView.BottomToTop highlightMoveDuration: 500 @@ -456,7 +456,7 @@ Kirigami.ScrollablePage { } property int childOffset: userMsg && Config.showLocalMessagesOnRight && !Config.compactLayout ? (bubble ? bubble.width : 0) - childWidth : Math.max((bubble ? bubble.width : 0) - childWidth, 0) - x: delegate && bubble ? (delegate.x + bubble.x + Kirigami.Units.largeSpacing + childOffset - (Config.compactLayout ? Kirigami.Units.gridUnit * 3 : 0)) : 0 + x: delegate && bubble ? (delegate.x + bubble.x + Kirigami.Units.largeSpacing + childOffset - (Config.compactLayout ? Kirigami.Units.gridUnit * 3 + (delegate.width >= Kirigami.Units.gridUnit * 20 ? Kirigami.Units.gridUnit * 2 : 0 ): 0) - (userMsg && !Config.compactLayout ? Kirigami.Units.gridUnit : 0)) : 0 y: bubble ? bubble.mapToItem(parent, 0, 0).y - hoverActions.childHeight + Kirigami.Units.smallSpacing: 0; visible: false