d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-11-26 04:58:49 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Qml message input mockup

Browse source
This commit is contained in:
Nicolas Werner 2020-10-26 13:50:44 +01:00
parent da085db6d6
commit 3a0e55e97b
9 changed files with 342 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/qml/Avatar.qml
View file

@ -13,7 +13,7 @@ Rectangle {
width: 48 width: 48
height: 48 height: 48
radius: Settings.avatarCircles ? height / 2 : 3 radius: Settings.avatarCircles ? height / 2 : 3
color: colors.base color: colors.alternateBase
Label { Label {
anchors.fill: parent anchors.fill: parent

2
resources/qml/Reactions.qml
View file

@ -83,7 +83,7 @@ Flow {
implicitWidth: reaction.implicitWidth implicitWidth: reaction.implicitWidth
implicitHeight: reaction.implicitHeight implicitHeight: reaction.implicitHeight
border.color: (reaction.hovered || modelData.selfReactedEvent !== '') ? colors.highlight : colors.text border.color: (reaction.hovered || modelData.selfReactedEvent !== '') ? colors.highlight : colors.text
color: modelData.selfReactedEvent !== '' ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : colors.base color: modelData.selfReactedEvent !== '' ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : colors.window
border.width: 1 border.width: 1
radius: reaction.height / 2 radius: reaction.height / 2
} }

2
resources/qml/TimelineRow.qml
View file

@ -48,7 +48,7 @@ Item {
Reply { Reply {
visible: model.replyTo visible: model.replyTo
modelData: chat.model.getDump(model.replyTo, model.id) modelData: chat.model.getDump(model.replyTo, model.id)
userColor: TimelineManager.userColor(modelData.userId, colors.window) userColor: TimelineManager.userColor(modelData.userId, colors.base)
} }
// actual message content // actual message content

549
resources/qml/TimelineView.qml
View file

@ -161,6 +161,7 @@ Page {
ColumnLayout { ColumnLayout {
visible: TimelineManager.timeline != null visible: TimelineManager.timeline != null
anchors.fill: parent anchors.fill: parent
spacing: 0
Rectangle { Rectangle {
id: topBar id: topBar
@ -168,7 +169,7 @@ Page {
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: topLayout.height + 16 implicitHeight: topLayout.height + 16
z: 3 z: 3
color: colors.base color: colors.window
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -283,143 +284,156 @@ Page {
} }
ListView { Rectangle {
id: chat Layout.fillWidth: true
height: 1
z: 3
color: colors.mid
}
property int delegateMaxWidth: (Settings.timelineMaxWidth > 100 && (parent.width - Settings.timelineMaxWidth) > scrollbar.width * 2) ? Settings.timelineMaxWidth : (parent.width - scrollbar.width * 2) Rectangle {
cacheBuffer: 400
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
model: TimelineManager.timeline color: colors.base
boundsBehavior: Flickable.StopAtBounds
pixelAligned: true
spacing: 4
verticalLayoutDirection: ListView.BottomToTop
onCountChanged: {
if (atYEnd)
model.currentIndex = 0;
} // Mark last event as read, since we are at the bottom ListView {
id: chat
ScrollHelper { property int delegateMaxWidth: (Settings.timelineMaxWidth > 100 && (parent.width - Settings.timelineMaxWidth) > scrollbar.width * 2) ? Settings.timelineMaxWidth : (parent.width - scrollbar.width * 2)
flickable: parent
cacheBuffer: 400
anchors.fill: parent anchors.fill: parent
} model: TimelineManager.timeline
boundsBehavior: Flickable.StopAtBounds
pixelAligned: true
spacing: 4
verticalLayoutDirection: ListView.BottomToTop
onCountChanged: {
if (atYEnd)
model.currentIndex = 0;
Shortcut { } // Mark last event as read, since we are at the bottom
sequence: StandardKey.MoveToPreviousPage
onActivated: {
chat.contentY = chat.contentY - chat.height / 2;
chat.returnToBounds();
}
}
Shortcut { ScrollHelper {
sequence: StandardKey.MoveToNextPage flickable: parent
onActivated: { anchors.fill: parent
chat.contentY = chat.contentY + chat.height / 2;
chat.returnToBounds();
}
}
Shortcut {
sequence: StandardKey.Cancel
onActivated: chat.model.reply = undefined
}
Shortcut {
sequence: "Alt+Up"
onActivated: chat.model.reply = chat.model.indexToId(chat.model.reply ? chat.model.idToIndex(chat.model.reply) + 1 : 0)
}
Shortcut {
sequence: "Alt+Down"
onActivated: {
var idx = chat.model.reply ? chat.model.idToIndex(chat.model.reply) - 1 : -1;
chat.model.reply = idx >= 0 ? chat.model.indexToId(idx) : undefined;
}
}
Component {
id: userProfileComponent
UserProfile {
} }
} Shortcut {
sequence: StandardKey.MoveToPreviousPage
onActivated: {
chat.contentY = chat.contentY - chat.height / 2;
chat.returnToBounds();
}
}
section { Shortcut {
property: "section" sequence: StandardKey.MoveToNextPage
} onActivated: {
chat.contentY = chat.contentY + chat.height / 2;
chat.returnToBounds();
}
}
Component { Shortcut {
id: sectionHeader sequence: StandardKey.Cancel
onActivated: chat.model.reply = undefined
}
Column { Shortcut {
property var modelData sequence: "Alt+Up"
property string section onActivated: chat.model.reply = chat.model.indexToId(chat.model.reply ? chat.model.idToIndex(chat.model.reply) + 1 : 0)
property string nextSection }
topPadding: 4 Shortcut {
bottomPadding: 4 sequence: "Alt+Down"
spacing: 8 onActivated: {
visible: !!modelData var idx = chat.model.reply ? chat.model.idToIndex(chat.model.reply) - 1 : -1;
width: parent.width chat.model.reply = idx >= 0 ? chat.model.indexToId(idx) : undefined;
height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8 }
}
Label { Component {
id: dateBubble id: userProfileComponent
anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
visible: section.includes(" ")
text: chat.model.formatDateSeparator(modelData.timestamp)
color: colors.text
height: fontMetrics.height * 1.4
width: contentWidth * 1.2
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
background: Rectangle {
radius: parent.height / 2
color: colors.base
}
UserProfile {
} }
Row { }
height: userName.height
section {
property: "section"
}
Component {
id: sectionHeader
Column {
property var modelData
property string section
property string nextSection
topPadding: 4
bottomPadding: 4
spacing: 8 spacing: 8
visible: !!modelData
Avatar { width: parent.width
width: avatarSize height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8
height: avatarSize
url: chat.model.avatarUrl(modelData.userId).replace("mxc://", "image://MxcImage/")
displayName: modelData.userName
userid: modelData.userId
MouseArea {
anchors.fill: parent
onClicked: chat.model.openUserProfile(modelData.userId)
cursorShape: Qt.PointingHandCursor
propagateComposedEvents: true
}
}
Label { Label {
id: userName id: dateBubble
text: TimelineManager.escapeEmoji(modelData.userName) anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
color: TimelineManager.userColor(modelData.userId, colors.window) visible: section.includes(" ")
textFormat: Text.RichText text: chat.model.formatDateSeparator(modelData.timestamp)
color: colors.text
height: fontMetrics.height * 1.4
width: contentWidth * 1.2
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
background: Rectangle {
radius: parent.height / 2
color: colors.window
}
}
Row {
height: userName.height
spacing: 8
Avatar {
width: avatarSize
height: avatarSize
url: chat.model.avatarUrl(modelData.userId).replace("mxc://", "image://MxcImage/")
displayName: modelData.userName
userid: modelData.userId
MouseArea {
anchors.fill: parent
onClicked: chat.model.openUserProfile(modelData.userId)
cursorShape: Qt.PointingHandCursor
propagateComposedEvents: true
}
}
Label {
id: userName
text: TimelineManager.escapeEmoji(modelData.userName)
color: TimelineManager.userColor(modelData.userId, colors.window)
textFormat: Text.RichText
MouseArea {
anchors.fill: parent
Layout.alignment: Qt.AlignHCenter
onClicked: chat.model.openUserProfile(modelData.userId)
cursorShape: Qt.PointingHandCursor
propagateComposedEvents: true
}
MouseArea {
anchors.fill: parent
Layout.alignment: Qt.AlignHCenter
onClicked: chat.model.openUserProfile(modelData.userId)
cursorShape: Qt.PointingHandCursor
propagateComposedEvents: true
} }
} }
@ -428,140 +442,130 @@ Page {
} }
} ScrollBar.vertical: ScrollBar {
id: scrollbar
ScrollBar.vertical: ScrollBar {
id: scrollbar
}
delegate: Item {
id: wrapper
// This would normally be previousSection, but our model's order is inverted.
property bool sectionBoundary: (ListView.nextSection != "" && ListView.nextSection !== ListView.section) || model.index === chat.count - 1
property Item section
anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
width: chat.delegateMaxWidth
height: section ? section.height + timelinerow.height : timelinerow.height
onSectionBoundaryChanged: {
if (sectionBoundary) {
var properties = {
"modelData": model.dump,
"section": ListView.section,
"nextSection": ListView.nextSection
};
section = sectionHeader.createObject(wrapper, properties);
} else {
section.destroy();
section = null;
}
} }
TimelineRow { delegate: Item {
id: timelinerow id: wrapper
y: section ? section.y + section.height : 0 // This would normally be previousSection, but our model's order is inverted.
} property bool sectionBoundary: (ListView.nextSection != "" && ListView.nextSection !== ListView.section) || model.index === chat.count - 1
property Item section
Connections {
function onMovementEnded() {
if (y + height + 2 * chat.spacing > chat.contentY + chat.height && y < chat.contentY + chat.height)
chat.model.currentIndex = index;
anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
width: chat.delegateMaxWidth
height: section ? section.height + timelinerow.height : timelinerow.height
onSectionBoundaryChanged: {
if (sectionBoundary) {
var properties = {
"modelData": model.dump,
"section": ListView.section,
"nextSection": ListView.nextSection
};
section = sectionHeader.createObject(wrapper, properties);
} else {
section.destroy();
section = null;
}
}
TimelineRow {
id: timelinerow
y: section ? section.y + section.height : 0
}
Connections {
function onMovementEnded() {
if (y + height + 2 * chat.spacing > chat.contentY + chat.height && y < chat.contentY + chat.height)
chat.model.currentIndex = index;
}
target: chat
} }
target: chat
} }
} footer: BusyIndicator {
anchors.horizontalCenter: parent.horizontalCenter
running: chat.model && chat.model.paginationInProgress
height: 50
width: 50
z: 3
}
footer: BusyIndicator {
anchors.horizontalCenter: parent.horizontalCenter
running: chat.model && chat.model.paginationInProgress
height: 50
width: 50
z: 3
} }
} }
Item { Item {
id: chatFooter implicitHeight: Math.max(fontMetrics.height * 1.2, typingDisplay.height)
implicitHeight: Math.max(fontMetrics.height * 1.2, footerContent.height)
Layout.fillWidth: true Layout.fillWidth: true
z: 3
Column { Rectangle {
id: footerContent id: typingRect
color: colors.base
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: (chat.model && chat.model.typingUsers.length > 0) ? typingDisplay.height : 0
z: 3
Label {
id: typingDisplay
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: parent.right
anchors.rightMargin: 10
anchors.bottom: parent.bottom
color: colors.text
text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.base) : ""
textFormat: Text.RichText
}
}
}
Rectangle {
id: replyPopup
Layout.fillWidth: true
visible: chat.model && chat.model.reply
// Height of child, plus margins, plus border
implicitHeight: replyPreview.height + 10
color: colors.window
z: 3
Reply {
id: replyPreview
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: closeReplyButton.left
anchors.rightMargin: 20
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
modelData: chat.model ? chat.model.getDump(chat.model.reply, chat.model.id) : {
Rectangle {
id: typingRect
anchors.left: parent.left
anchors.right: parent.right
color: (chat.model && chat.model.typingUsers.length > 0) ? colors.window : "transparent"
height: typingDisplay.height
Label {
id: typingDisplay
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: parent.right
anchors.rightMargin: 10
color: colors.text
text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.window) : ""
textFormat: Text.RichText
}
} }
userColor: TimelineManager.userColor(modelData.userId, colors.window)
}
Rectangle { ImageButton {
id: replyPopup id: closeReplyButton
anchors.left: parent.left
anchors.right: parent.right
visible: chat.model && chat.model.reply
// Height of child, plus margins, plus border
height: replyPreview.height + 10
color: colors.base
Reply {
id: replyPreview
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: closeReplyButton.left
anchors.rightMargin: 20
anchors.bottom: parent.bottom
modelData: chat.model ? chat.model.getDump(chat.model.reply, chat.model.id) : {
}
userColor: TimelineManager.userColor(modelData.userId, colors.window)
}
ImageButton {
id: closeReplyButton
anchors.right: parent.right
anchors.rightMargin: 15
anchors.top: replyPreview.top
hoverEnabled: true
width: 16
height: 16
image: ":/icons/icons/ui/remove-symbol.png"
ToolTip.visible: closeReplyButton.hovered
ToolTip.text: qsTr("Close")
onClicked: chat.model.reply = undefined
}
}
anchors.right: parent.right
anchors.rightMargin: 15
anchors.top: replyPreview.top
hoverEnabled: true
width: 16
height: 16
image: ":/icons/icons/ui/remove-symbol.png"
ToolTip.visible: closeReplyButton.hovered
ToolTip.text: qsTr("Close")
onClicked: chat.model.reply = undefined
} }
} }
@ -571,6 +575,99 @@ Page {
z: 3 z: 3
} }
Rectangle {
Layout.fillWidth: true
z: 3
height: 1
color: colors.mid
}
Rectangle {
color: colors.window
Layout.fillWidth: true
Layout.preferredHeight: textInput.height
Layout.minimumHeight: 40
RowLayout {
id: inputBar
anchors.fill: parent
spacing: 16
ImageButton {
Layout.alignment: Qt.AlignBottom
hoverEnabled: true
width: 22
height: 22
image: ":/icons/icons/ui/place-call.png"
Layout.topMargin: 8
Layout.bottomMargin: 8
Layout.leftMargin: 16
}
ImageButton {
Layout.alignment: Qt.AlignBottom
hoverEnabled: true
width: 22
height: 22
image: ":/icons/icons/ui/paper-clip-outline.png"
Layout.topMargin: 8
Layout.bottomMargin: 8
}
ScrollView {
id: textInput
Layout.alignment: Qt.AlignBottom
Layout.maximumHeight: Window.height / 4
Layout.fillWidth: true
TextArea {
placeholderText: qsTr("Write a message...")
placeholderTextColor: colors.buttonText
color: colors.text
wrapMode: TextEdit.Wrap
MouseArea {
// workaround for wrong cursor shape on some platforms
anchors.fill: parent
acceptedButtons: Qt.NoButton
cursorShape: Qt.IBeamCursor
}
background: Rectangle {
color: colors.window
}
}
}
ImageButton {
Layout.alignment: Qt.AlignRight | Qt.AlignBottom
hoverEnabled: true
width: 22
height: 22
image: ":/icons/icons/ui/smile.png"
Layout.topMargin: 8
Layout.bottomMargin: 8
}
ImageButton {
Layout.alignment: Qt.AlignRight | Qt.AlignBottom
hoverEnabled: true
width: 22
height: 22
image: ":/icons/icons/ui/cursor.png"
Layout.topMargin: 8
Layout.bottomMargin: 8
Layout.rightMargin: 16
}
}
}
} }
} }

2
resources/qml/delegates/FileMessage.qml
View file

@ -65,7 +65,7 @@ Item {
} }
Rectangle { Rectangle {
color: colors.dark color: colors.alternateBase
z: -1 z: -1
radius: 10 radius: 10
height: row.height + 24 height: row.height + 24

2
resources/qml/delegates/Pill.qml
View file

@ -9,7 +9,7 @@ Label {
background: Rectangle { background: Rectangle {
radius: parent.height / 2 radius: parent.height / 2
color: colors.dark color: colors.alternateBase
} }
} }

2
resources/qml/delegates/PlayableMediaMessage.qml
View file

@ -8,7 +8,7 @@ Rectangle {
id: bg id: bg
radius: 10 radius: 10
color: colors.dark color: colors.alternateBase
height: Math.round(content.height + 24) height: Math.round(content.height + 24)
width: parent ? parent.width : undefined width: parent ? parent.width : undefined

4
resources/qml/emoji/EmojiPicker.qml
View file

@ -161,7 +161,7 @@ Popup {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 1 Layout.preferredHeight: 1
color: emojiPopup.colors.dark color: emojiPopup.colors.alternateBase
} }
// Category picker row // Category picker row
@ -281,7 +281,7 @@ Popup {
Layout.preferredWidth: 1 Layout.preferredWidth: 1
implicitWidth: 1 implicitWidth: 1
height: parent.height height: parent.height
color: emojiPopup.colors.dark color: emojiPopup.colors.alternateBase
} }
// Search Button is special // Search Button is special

20
src/UserSettingsPage.cpp
View file

@ -339,17 +339,18 @@ UserSettings::applyTheme()
/*windowText*/ QColor("#333"), /*windowText*/ QColor("#333"),
/*button*/ QColor("#333"), /*button*/ QColor("#333"),
/*light*/ QColor(0xef, 0xef, 0xef), /*light*/ QColor(0xef, 0xef, 0xef),
/*dark*/ QColor(220, 220, 220), /*dark*/ QColor(110, 110, 110),
/*mid*/ QColor(110, 110, 110), /*mid*/ QColor(220, 220, 220),
/*text*/ QColor("#333"), /*text*/ QColor("#333"),
/*bright_text*/ QColor("#333"), /*bright_text*/ QColor("#333"),
/*base*/ QColor("#eee"), /*base*/ QColor("#fff"),
/*window*/ QColor("white")); /*window*/ QColor("white"));
lightActive.setColor(QPalette::AlternateBase, QColor("#eee"));
lightActive.setColor(QPalette::Highlight, QColor("#38a3d8")); lightActive.setColor(QPalette::Highlight, QColor("#38a3d8"));
lightActive.setColor(QPalette::ToolTipBase, lightActive.base().color()); lightActive.setColor(QPalette::ToolTipBase, lightActive.base().color());
lightActive.setColor(QPalette::ToolTipText, lightActive.text().color()); lightActive.setColor(QPalette::ToolTipText, lightActive.text().color());
lightActive.setColor(QPalette::Link, QColor("#0077b5")); lightActive.setColor(QPalette::Link, QColor("#0077b5"));
lightActive.setColor(QPalette::ButtonText, QColor(Qt::gray)); lightActive.setColor(QPalette::ButtonText, QColor("#495057"));
QApplication::setPalette(lightActive); QApplication::setPalette(lightActive);
} else if (this->theme() == "dark") { } else if (this->theme() == "dark") {
stylefile.setFileName(":/styles/styles/nheko-dark.qss"); stylefile.setFileName(":/styles/styles/nheko-dark.qss");
@ -357,17 +358,18 @@ UserSettings::applyTheme()
/*windowText*/ QColor("#caccd1"), /*windowText*/ QColor("#caccd1"),
/*button*/ QColor(0xff, 0xff, 0xff), /*button*/ QColor(0xff, 0xff, 0xff),
/*light*/ QColor("#caccd1"), /*light*/ QColor("#caccd1"),
/*dark*/ QColor("#2d3139"), /*dark*/ QColor(110, 110, 110),
/*mid*/ QColor(110, 110, 110), /*mid*/ QColor("#202228"),
/*text*/ QColor("#caccd1"), /*text*/ QColor("#caccd1"),
/*bright_text*/ QColor(0xff, 0xff, 0xff), /*bright_text*/ QColor(0xff, 0xff, 0xff),
/*base*/ QColor("#2d3139"), /*base*/ QColor("#202228"),
/*window*/ QColor("#202228")); /*window*/ QColor("#2d3139"));
darkActive.setColor(QPalette::AlternateBase, QColor("#2d3139"));
darkActive.setColor(QPalette::Highlight, QColor("#38a3d8")); darkActive.setColor(QPalette::Highlight, QColor("#38a3d8"));
darkActive.setColor(QPalette::ToolTipBase, darkActive.base().color()); darkActive.setColor(QPalette::ToolTipBase, darkActive.base().color());
darkActive.setColor(QPalette::ToolTipText, darkActive.text().color()); darkActive.setColor(QPalette::ToolTipText, darkActive.text().color());
darkActive.setColor(QPalette::Link, QColor("#38a3d8")); darkActive.setColor(QPalette::Link, QColor("#38a3d8"));
darkActive.setColor(QPalette::ButtonText, QColor(0x90, 0x90, 0x90)); darkActive.setColor(QPalette::ButtonText, "#727274");
QApplication::setPalette(darkActive); QApplication::setPalette(darkActive);
} else { } else {
stylefile.setFileName(":/styles/styles/system.qss"); stylefile.setFileName(":/styles/styles/system.qss");