Better message bubbles.

This commit is contained in:
Black Hat
2019-05-09 21:18:04 +08:00
parent 927a0aa017
commit 50445bccf1
6 changed files with 134 additions and 44 deletions

View File

@@ -15,7 +15,7 @@ import Spectral.Font 0.1
import Spectral.Effect 2.0
ColumnLayout {
readonly property bool avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
readonly property bool avatarVisible: !sentByMe && showAuthor
readonly property bool sentByMe: author === currentRoom.localUser
property bool openOnFinished: false
@@ -39,8 +39,6 @@ ColumnLayout {
}
RowLayout {
Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
z: -5
id: messageRow
@@ -111,7 +109,7 @@ ColumnLayout {
}
Label {
text: progressInfo.active ? (progressInfo.progress + "/" + progressInfo.total) : content.info ? content.info.size : "Unknown"
text: progressInfo.active ? (humanSize(progressInfo.progress) + "/" + humanSize(progressInfo.total)) : humanSize(content.info ? content.info.size : 0)
color: MPalette.lighter
}
}
@@ -195,4 +193,20 @@ ColumnLayout {
if (Qt.openUrlExternally(progressInfo.localPath)) return;
if (Qt.openUrlExternally(progressInfo.localDir)) return;
}
function humanSize(bytes)
{
if (!bytes)
return qsTr("Unknown", "Unknown attachment size")
if (bytes < 4000)
return qsTr("%1 bytes").arg(bytes)
bytes = Math.round(bytes / 100) / 10
if (bytes < 2000)
return qsTr("%1 KB").arg(bytes)
bytes = Math.round(bytes / 100) / 10
if (bytes < 2000)
return qsTr("%1 MB").arg(bytes)
return qsTr("%1 GB").arg(Math.round(bytes / 100) / 10)
}
}

View File

@@ -15,7 +15,7 @@ import Spectral.Effect 2.0
import Spectral.Font 0.1
ColumnLayout {
readonly property bool avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
readonly property bool avatarVisible: !sentByMe && showAuthor
readonly property bool sentByMe: author === currentRoom.localUser
property bool openOnFinished: false
@@ -44,8 +44,6 @@ ColumnLayout {
}
RowLayout {
Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
z: -5
id: messageRow
@@ -121,17 +119,6 @@ ColumnLayout {
}
}
Rectangle {
anchors.fill: parent
color: "transparent"
radius: 24
antialiasing: true
border.width: 4
border.color: MPalette.background
}
Rectangle {
anchors.fill: parent

View File

@@ -12,7 +12,7 @@ import Spectral.Menu.Timeline 2.0
import Spectral.Effect 2.0
RowLayout {
readonly property bool avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
readonly property bool avatarVisible: !sentByMe && showAuthor
readonly property bool sentByMe: author === currentRoom.localUser
readonly property bool darkBackground: !sentByMe
readonly property bool replyVisible: replyEventId || false
@@ -68,6 +68,58 @@ RowLayout {
radius: 18
antialiasing: true
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
width: parent.width / 2
height: parent.height / 2
visible: !sentByMe && (bubbleShape == 3 || bubbleShape == 2)
color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
radius: 2
}
Rectangle {
anchors.top: parent.top
anchors.right: parent.right
width: parent.width / 2
height: parent.height / 2
visible: sentByMe && (bubbleShape == 3 || bubbleShape == 2)
color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
radius: 2
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
width: parent.width / 2
height: parent.height / 2
visible: !sentByMe && (bubbleShape == 1 || bubbleShape == 2)
color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
radius: 2
}
Rectangle {
anchors.bottom: parent.bottom
anchors.right: parent.right
width: parent.width / 2
height: parent.height / 2
visible: sentByMe && (bubbleShape == 1 || bubbleShape == 2)
color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
radius: 2
}
AutoMouseArea {
anchors.fill: parent