Improve message bubble.

This commit is contained in:
Black Hat 2019-05-10 19:26:17 +08:00
parent 50445bccf1
commit b5d51ebbf2
5 changed files with 255 additions and 215 deletions

View File

@ -45,7 +45,9 @@ Item {
color: "white" color: "white"
text: hint[0].toUpperCase() text: hint[0].toUpperCase()
font.pixelSize: root.width / 2 font.pixelSize: root.width / 2
font.bold: true font.weight: Font.Light
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
} }
} }

View File

@ -11,7 +11,7 @@ import Spectral.Dialog 2.0
import Spectral.Menu.Timeline 2.0 import Spectral.Menu.Timeline 2.0
import Spectral.Effect 2.0 import Spectral.Effect 2.0
RowLayout { ColumnLayout {
readonly property bool avatarVisible: !sentByMe && showAuthor readonly property bool avatarVisible: !sentByMe && showAuthor
readonly property bool sentByMe: author === currentRoom.localUser readonly property bool sentByMe: author === currentRoom.localUser
readonly property bool darkBackground: !sentByMe readonly property bool darkBackground: !sentByMe
@ -24,6 +24,11 @@ RowLayout {
z: -5 z: -5
spacing: 0
RowLayout {
id: messageRow
spacing: 4 spacing: 4
Avatar { Avatar {
@ -58,7 +63,7 @@ RowLayout {
} }
Control { Control {
Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + root.spacing : 0) - 48 Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48
verticalPadding: 8 verticalPadding: 8
horizontalPadding: 16 horizontalPadding: 16
@ -250,3 +255,27 @@ RowLayout {
} }
} }
} }
RowLayout {
Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
Layout.leftMargin: sentByMe ? undefined : 32 + messageRow.spacing + 12
Layout.rightMargin: sentByMe ? 12 : undefined
Layout.bottomMargin: 4
visible: showTimestamp || (showAuthor && !sentByMe)
Label {
visible: showTimestamp
text: Qt.formatDateTime(time, "hh:mm")
color: MPalette.lighter
}
Label {
visible: showAuthor && !sentByMe
text: author.displayName
color: MPalette.lighter
}
}
}

View File

@ -201,8 +201,6 @@ Item {
background: Rectangle { background: Rectangle {
color: Material.background color: Material.background
opacity: listView.atYBeginning ? 0 : 1
layer.enabled: true layer.enabled: true
layer.effect: ElevationEffect { layer.effect: ElevationEffect {
elevation: 2 elevation: 2

View File

@ -31,7 +31,7 @@ Control {
layer.enabled: true layer.enabled: true
layer.effect: ElevationEffect { layer.effect: ElevationEffect {
elevation: 2 elevation: 1
} }
} }

View File

@ -415,40 +415,51 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
return {}; return {};
} }
if (role == ShowTimestampRole || role == ShowAuthorRole) if (role == ShowTimestampRole) {
for (auto r = row + 1; r < rowCount(); ++r) {
auto i = index(r);
if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
switch (role) {
case ShowTimestampRole:
return data(i, TimeRole)
.toDateTime()
.msecsTo(data(idx, TimeRole).toDateTime()) > 600000;
case ShowAuthorRole:
return data(i, AuthorRole) != data(idx, AuthorRole);
}
}
}
if (role == BubbleShapeRole) { // TODO: Convoluted logic.
int belowRow = -1; // Invalid
for (auto r = row - 1; r >= 0; --r) { for (auto r = row - 1; r >= 0; --r) {
auto i = index(r); auto i = index(r);
if (data(i, SpecialMarksRole) != EventStatus::Hidden) { if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
belowRow = r; return data(idx, TimeRole)
.toDateTime()
.msecsTo(data(i, TimeRole).toDateTime()) > 600000;
}
}
return true;
}
if (role == ShowAuthorRole) {
for (auto r = row - 1; r >= 0; --r) {
auto i = index(r);
if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
return data(i, AuthorRole) != data(idx, AuthorRole) ||
data(i, EventTypeRole) != data(idx, EventTypeRole);
}
}
return true;
}
if (role == BubbleShapeRole) { // TODO: Convoluted logic.
int aboveRow = -1; // Invalid
for (auto r = row + 1; r < rowCount(); ++r) {
auto i = index(r);
if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
aboveRow = r;
break; break;
} }
} }
bool aboveShow, belowShow; bool aboveShow, belowShow;
aboveShow = data(idx, ShowAuthorRole).toBool() || if (aboveRow == -1) {
aboveShow = true;
} else {
aboveShow = data(index(aboveRow), ShowAuthorRole).toBool() ||
data(index(aboveRow), ShowTimestampRole).toBool();
}
belowShow = data(idx, ShowAuthorRole).toBool() ||
data(idx, ShowTimestampRole).toBool(); data(idx, ShowTimestampRole).toBool();
if (belowRow == -1)
belowShow = true;
else
belowShow = data(index(belowRow), ShowAuthorRole).toBool() ||
data(index(belowRow), ShowTimestampRole).toBool();
if (aboveShow && belowShow) if (aboveShow && belowShow)
return BubbleShapes::NoShape; return BubbleShapes::NoShape;