ESCA111/neochat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Timeline Container Highlight Update

Browse Source 
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)
This commit is contained in:
James Graham
2022-09-30 15:02:19 +00:00
parent 6bf69ae77e
commit 7b81af43b1
2 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
imports/NeoChat/Component/Timeline/TimelineContainer.qml
View File

@@ -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

4
imports/NeoChat/Page/RoomPage.qml
View File

@@ -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