Files
neochat/src/qml/Component/Timeline/SectionDelegate.qml
James Graham a4c445d1a5 Add a section label at the top which shows the date label of the next section
**Updated**

Add a section label at the top which shows the date label of the next section up. This means that the user will always be able to see the date of all messages on screen.

![image](/uploads/ecbcdc0740877ea0d72e735176353036/image.png)

From the feedback given I've added a background at the top. I also added an underline to the heading which applies both at the top and in the listView since they use the same component. I added it originally for the top because I felt it looked a bit weird having messages appear from behind a heading background the same colour as the listView background.

Note: I know the gaps between messages are not right. I had to set the spacing in the listView to 0 to prevent itemAt returning null. I plan to add it back in as part of the delegate code before it would be merge.

Fixes BUG:454880
2022-11-08 19:40:56 +00:00

48 lines
1.3 KiB
QML

// SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
// SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
// SPDX-License-Identifier: GPL-3.0-only
import QtQuick 2.15
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.15 as Kirigami
import org.kde.neochat 1.0
QQC2.ItemDelegate {
id: sectionDelegate
property alias labelText: sectionLabel.text
property var maxWidth: Number.POSITIVE_INFINITY
topPadding: Kirigami.Units.largeSpacing
bottomPadding: 0 // Note not 0 by default
contentItem: ColumnLayout {
spacing: Kirigami.Units.smallSpacing
Layout.fillWidth: true
Kirigami.Heading {
id: sectionLabel
level: 4
color: Kirigami.Theme.disabledTextColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
Layout.fillWidth: true
Layout.maximumWidth: maxWidth
}
Kirigami.Separator {
Layout.minimumHeight: 2
Layout.fillWidth: true
Layout.maximumWidth: maxWidth
}
}
background: Rectangle {
color: Config.blur ? "transparent" : Kirigami.Theme.backgroundColor
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Window
}
}