More changes in MessageDelegate.

square-messages
Black Hat 2019-05-17 15:01:01 +08:00
parent cab82d7b8a
commit b7d8f70a5f
9 changed files with 168 additions and 103 deletions

View File

@ -0,0 +1,71 @@
import QtQuick 2.12
Rectangle {
property alias topLeftRadius: topLeftRect.radius
property alias topRightRadius: topRightRect.radius
property alias bottomLeftRadius: bottomLeftRect.radius
property alias bottomRightRadius: bottomRightRect.radius
property alias topLeftVisible: topLeftRect.visible
property alias topRightVisible: topRightRect.visible
property alias bottomLeftVisible: bottomLeftRect.visible
property alias bottomRightVisible: bottomRightRect.visible
antialiasing: true
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
width: parent.width / 2
height: parent.height / 2
id: topLeftRect
antialiasing: true
color: parent.color
}
Rectangle {
anchors.top: parent.top
anchors.right: parent.right
width: parent.width / 2
height: parent.height / 2
id: topRightRect
antialiasing: true
color: parent.color
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
width: parent.width / 2
height: parent.height / 2
id: bottomLeftRect
antialiasing: true
color: parent.color
}
Rectangle {
anchors.bottom: parent.bottom
anchors.right: parent.right
width: parent.width / 2
height: parent.height / 2
id: bottomRightRect
antialiasing: true
color: parent.color
}
}

View File

@ -2,6 +2,8 @@ import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
import Spectral.Setting 0.1
Item {
property string hint: "H"
property string source: ""
@ -35,7 +37,7 @@ Item {
visible: !realSource || image.status != Image.Ready
radius: height / 2
color: stringToColor(hint)
color: MPalette.accent
antialiasing: true
Label {
@ -50,16 +52,16 @@ Item {
}
}
function stringToColor(str) {
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
var colour = '#';
for (var j = 0; j < 3; j++) {
var value = (hash >> (j * 8)) & 0xFF;
colour += ('00' + value.toString(16)).substr(-2);
}
return colour;
}
// function stringToColor(str) {
// var hash = 0;
// for (var i = 0; i < str.length; i++) {
// hash = str.charCodeAt(i) + ((hash << 5) - hash);
// }
// var colour = '#';
// for (var j = 0; j < 3; j++) {
// var value = (hash >> (j * 8)) & 0xFF;
// colour += ('00' + value.toString(16)).substr(-2);
// }
// return colour;
// }
}

View File

@ -67,65 +67,25 @@ ColumnLayout {
Control {
Layout.maximumWidth: messageListView.width - (!sentByMe ? 36 + messageRow.spacing : 0) - 48
verticalPadding: 8
horizontalPadding: 16
padding: 0
background: AutoRectangle {
readonly property int minorRadius: 2
id: bubbleBackground
background: Rectangle {
color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
radius: 18
antialiasing: true
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
topLeftVisible: !sentByMe && (bubbleShape == 3 || bubbleShape == 2)
topRightVisible: sentByMe && (bubbleShape == 3 || bubbleShape == 2)
bottomLeftVisible: !sentByMe && (bubbleShape == 1 || bubbleShape == 2)
bottomRightVisible: sentByMe && (bubbleShape == 1 || bubbleShape == 2)
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
}
topLeftRadius: minorRadius
topRightRadius: minorRadius
bottomLeftRadius: minorRadius
bottomRightRadius: minorRadius
AutoMouseArea {
anchors.fill: parent
@ -166,60 +126,74 @@ ColumnLayout {
}
contentItem: ColumnLayout {
RowLayout {
spacing: 0
Control {
Layout.fillWidth: true
padding: 8
visible: replyVisible
Avatar {
Layout.preferredWidth: 28
Layout.preferredHeight: 28
Layout.alignment: Qt.AlignTop
contentItem: RowLayout {
Avatar {
Layout.preferredWidth: 28
Layout.preferredHeight: 28
Layout.alignment: Qt.AlignTop
source: replyVisible ? replyAuthor.avatarMediaId : ""
hint: replyVisible ? replyAuthor.displayName : "H"
source: replyVisible ? replyAuthor.avatarMediaId : ""
hint: replyVisible ? replyAuthor.displayName : "H"
RippleEffect {
anchors.fill: parent
RippleEffect {
anchors.fill: parent
circular: true
circular: true
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": replyAuthor}).open()
}
}
Control {
Layout.fillWidth: true
visible: replyVisible
padding: 0
background: RippleEffect {
onClicked: goToEvent(replyEventId)
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": replyAuthor}).open()
}
}
contentItem: Label {
color: darkBackground ? "white" : MPalette.lighter
Label {
Layout.fillWidth: true
color: !sentByMe ? MPalette.foreground : "white"
text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + (replyDisplay || "")
wrapMode: Label.Wrap
textFormat: Label.RichText
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 1
background: AutoRectangle {
color: sentByMe ? MPalette.accent : MPalette.background
radius: 16
visible: replyVisible
color: darkBackground ? "white" : MPalette.lighter
topLeftRadius: 2
topRightRadius: 2
bottomLeftRadius: 0
bottomRightRadius: 0
topLeftVisible: bubbleBackground.topLeftVisible
topRightVisible: bubbleBackground.topRightVisible
bottomLeftVisible: true
bottomRightVisible: true
AutoMouseArea {
anchors.fill: parent
onClicked: goToEvent(replyEventId)
}
}
}
TextEdit {
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: 16
Layout.topMargin: 8
Layout.bottomMargin: 8
id: contentLabel
text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + display

View File

@ -7,3 +7,4 @@ AutoListView 2.0 AutoListView.qml
AutoTextField 2.0 AutoTextField.qml
Avatar 2.0 Avatar.qml
FullScreenImage 2.0 FullScreenImage.qml
AutoRectangle 2.0 AutoRectangle.qml

View File

@ -27,8 +27,8 @@ Dialog {
Layout.preferredWidth: 72
Layout.preferredHeight: 72
hint: user ? user.displayName : "No name"
source: user ? user.avatarMediaId : null
hint: user.displayName
source: user.avatarMediaId
RippleEffect {
anchors.fill: parent
@ -50,10 +50,19 @@ Dialog {
elide: Text.ElideRight
wrapMode: Text.NoWrap
text: user ? user.displayName : "No Name"
text: user.displayName
color: MPalette.foreground
}
Label {
Layout.fillWidth: true
visible: user.bridgeName
text: user.bridgeName
color: MPalette.lighter
}
Label {
Layout.fillWidth: true
@ -89,7 +98,7 @@ Dialog {
elide: Text.ElideRight
wrapMode: Text.NoWrap
text: user ? user.id : "No ID"
text: user.id
color: MPalette.accent
}

@ -1 +1 @@
Subproject commit 52a81dfa8a5415be369d819837f445479b833cde
Subproject commit d6f39dcb0de69322479f287514a8c36afcb3fe7b

View File

@ -58,5 +58,6 @@
<file>imports/Spectral/Dialog/OpenFileDialog.qml</file>
<file>imports/Spectral/Dialog/OpenFolderDialog.qml</file>
<file>imports/Spectral/Component/Timeline/VideoDelegate.qml</file>
<file>imports/Spectral/Component/AutoRectangle.qml</file>
</qresource>
</RCC>

View File

@ -1 +1,5 @@
#include "spectraluser.h"
QColor SpectralUser::color() {
return QColor::fromHslF(hueF(), 0.7, 0.5, 1);
}

View File

@ -10,9 +10,12 @@ using namespace QMatrixClient;
class SpectralUser : public User {
Q_OBJECT
Q_PROPERTY(QColor color READ color CONSTANT)
public:
SpectralUser(QString userId, Connection* connection)
: User(userId, connection) {}
QColor color();
};
#endif // SpectralUser_H