From 3a0e55e97b667feaf3d9e9e0296664db246d4033 Mon Sep 17 00:00:00 2001 From: Nicolas Werner Date: Mon, 26 Oct 2020 13:50:44 +0100 Subject: [PATCH] Qml message input mockup --- resources/qml/Avatar.qml | 2 +- resources/qml/Reactions.qml | 2 +- resources/qml/TimelineRow.qml | 2 +- resources/qml/TimelineView.qml | 549 +++++++++++------- resources/qml/delegates/FileMessage.qml | 2 +- resources/qml/delegates/Pill.qml | 2 +- .../qml/delegates/PlayableMediaMessage.qml | 2 +- resources/qml/emoji/EmojiPicker.qml | 4 +- src/UserSettingsPage.cpp | 20 +- 9 files changed, 342 insertions(+), 243 deletions(-) diff --git a/resources/qml/Avatar.qml b/resources/qml/Avatar.qml index a247bffe..34b029a6 100644 --- a/resources/qml/Avatar.qml +++ b/resources/qml/Avatar.qml @@ -13,7 +13,7 @@ Rectangle { width: 48 height: 48 radius: Settings.avatarCircles ? height / 2 : 3 - color: colors.base + color: colors.alternateBase Label { anchors.fill: parent diff --git a/resources/qml/Reactions.qml b/resources/qml/Reactions.qml index 6487f512..836087ef 100644 --- a/resources/qml/Reactions.qml +++ b/resources/qml/Reactions.qml @@ -83,7 +83,7 @@ Flow { implicitWidth: reaction.implicitWidth implicitHeight: reaction.implicitHeight 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 radius: reaction.height / 2 } diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml index 38597673..57fded90 100644 --- a/resources/qml/TimelineRow.qml +++ b/resources/qml/TimelineRow.qml @@ -48,7 +48,7 @@ Item { Reply { visible: model.replyTo 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 diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index 1f5f406a..3124d462 100644 --- a/resources/qml/TimelineView.qml +++ b/resources/qml/TimelineView.qml @@ -161,6 +161,7 @@ Page { ColumnLayout { visible: TimelineManager.timeline != null anchors.fill: parent + spacing: 0 Rectangle { id: topBar @@ -168,7 +169,7 @@ Page { Layout.fillWidth: true implicitHeight: topLayout.height + 16 z: 3 - color: colors.base + color: colors.window MouseArea { anchors.fill: parent @@ -283,143 +284,156 @@ Page { } - ListView { - id: chat + Rectangle { + 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) - - cacheBuffer: 400 + Rectangle { Layout.fillWidth: true Layout.fillHeight: true - model: TimelineManager.timeline - boundsBehavior: Flickable.StopAtBounds - pixelAligned: true - spacing: 4 - verticalLayoutDirection: ListView.BottomToTop - onCountChanged: { - if (atYEnd) - model.currentIndex = 0; + color: colors.base - } // Mark last event as read, since we are at the bottom + ListView { + id: chat - ScrollHelper { - flickable: parent + property int delegateMaxWidth: (Settings.timelineMaxWidth > 100 && (parent.width - Settings.timelineMaxWidth) > scrollbar.width * 2) ? Settings.timelineMaxWidth : (parent.width - scrollbar.width * 2) + + cacheBuffer: 400 anchors.fill: parent - } + model: TimelineManager.timeline + boundsBehavior: Flickable.StopAtBounds + pixelAligned: true + spacing: 4 + verticalLayoutDirection: ListView.BottomToTop + onCountChanged: { + if (atYEnd) + model.currentIndex = 0; - Shortcut { - sequence: StandardKey.MoveToPreviousPage - onActivated: { - chat.contentY = chat.contentY - chat.height / 2; - chat.returnToBounds(); - } - } + } // Mark last event as read, since we are at the bottom - Shortcut { - sequence: StandardKey.MoveToNextPage - onActivated: { - 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 { + ScrollHelper { + flickable: parent + anchors.fill: parent } - } + Shortcut { + sequence: StandardKey.MoveToPreviousPage + onActivated: { + chat.contentY = chat.contentY - chat.height / 2; + chat.returnToBounds(); + } + } - section { - property: "section" - } + Shortcut { + sequence: StandardKey.MoveToNextPage + onActivated: { + chat.contentY = chat.contentY + chat.height / 2; + chat.returnToBounds(); + } + } - Component { - id: sectionHeader + Shortcut { + sequence: StandardKey.Cancel + onActivated: chat.model.reply = undefined + } - Column { - property var modelData - property string section - property string nextSection + Shortcut { + sequence: "Alt+Up" + onActivated: chat.model.reply = chat.model.indexToId(chat.model.reply ? chat.model.idToIndex(chat.model.reply) + 1 : 0) + } - topPadding: 4 - bottomPadding: 4 - spacing: 8 - visible: !!modelData - width: parent.width - height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8 + 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; + } + } - Label { - id: dateBubble - - 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 - } + Component { + id: userProfileComponent + 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 - - 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 - } - - } + visible: !!modelData + width: parent.width + height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8 Label { - id: userName + id: dateBubble - text: TimelineManager.escapeEmoji(modelData.userName) - color: TimelineManager.userColor(modelData.userId, colors.window) - textFormat: Text.RichText + 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.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 - } - - 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; - } + ScrollBar.vertical: ScrollBar { + id: scrollbar } - TimelineRow { - id: timelinerow + delegate: Item { + id: wrapper - 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; + // 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 { + 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 { - id: chatFooter - - implicitHeight: Math.max(fontMetrics.height * 1.2, footerContent.height) + implicitHeight: Math.max(fontMetrics.height * 1.2, typingDisplay.height) Layout.fillWidth: true - z: 3 - Column { - id: footerContent + Rectangle { + id: typingRect + color: colors.base anchors.left: parent.left 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 - - 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 - } - + modelData: chat.model ? chat.model.getDump(chat.model.reply, chat.model.id) : { } + userColor: TimelineManager.userColor(modelData.userId, colors.window) + } - Rectangle { - id: replyPopup - - 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 - } - - } + 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 } } @@ -571,6 +575,99 @@ Page { 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 + } + + } + + } + } } diff --git a/resources/qml/delegates/FileMessage.qml b/resources/qml/delegates/FileMessage.qml index c6f213ee..ffd1e82b 100644 --- a/resources/qml/delegates/FileMessage.qml +++ b/resources/qml/delegates/FileMessage.qml @@ -65,7 +65,7 @@ Item { } Rectangle { - color: colors.dark + color: colors.alternateBase z: -1 radius: 10 height: row.height + 24 diff --git a/resources/qml/delegates/Pill.qml b/resources/qml/delegates/Pill.qml index 4acf2bef..88f6c7fd 100644 --- a/resources/qml/delegates/Pill.qml +++ b/resources/qml/delegates/Pill.qml @@ -9,7 +9,7 @@ Label { background: Rectangle { radius: parent.height / 2 - color: colors.dark + color: colors.alternateBase } } diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml index 9ad115c7..be22687f 100644 --- a/resources/qml/delegates/PlayableMediaMessage.qml +++ b/resources/qml/delegates/PlayableMediaMessage.qml @@ -8,7 +8,7 @@ Rectangle { id: bg radius: 10 - color: colors.dark + color: colors.alternateBase height: Math.round(content.height + 24) width: parent ? parent.width : undefined diff --git a/resources/qml/emoji/EmojiPicker.qml b/resources/qml/emoji/EmojiPicker.qml index 0e277415..afe16350 100644 --- a/resources/qml/emoji/EmojiPicker.qml +++ b/resources/qml/emoji/EmojiPicker.qml @@ -161,7 +161,7 @@ Popup { Rectangle { Layout.fillWidth: true Layout.preferredHeight: 1 - color: emojiPopup.colors.dark + color: emojiPopup.colors.alternateBase } // Category picker row @@ -281,7 +281,7 @@ Popup { Layout.preferredWidth: 1 implicitWidth: 1 height: parent.height - color: emojiPopup.colors.dark + color: emojiPopup.colors.alternateBase } // Search Button is special diff --git a/src/UserSettingsPage.cpp b/src/UserSettingsPage.cpp index 53539407..d4d5dcb9 100644 --- a/src/UserSettingsPage.cpp +++ b/src/UserSettingsPage.cpp @@ -339,17 +339,18 @@ UserSettings::applyTheme() /*windowText*/ QColor("#333"), /*button*/ QColor("#333"), /*light*/ QColor(0xef, 0xef, 0xef), - /*dark*/ QColor(220, 220, 220), - /*mid*/ QColor(110, 110, 110), + /*dark*/ QColor(110, 110, 110), + /*mid*/ QColor(220, 220, 220), /*text*/ QColor("#333"), /*bright_text*/ QColor("#333"), - /*base*/ QColor("#eee"), + /*base*/ QColor("#fff"), /*window*/ QColor("white")); + lightActive.setColor(QPalette::AlternateBase, QColor("#eee")); lightActive.setColor(QPalette::Highlight, QColor("#38a3d8")); lightActive.setColor(QPalette::ToolTipBase, lightActive.base().color()); lightActive.setColor(QPalette::ToolTipText, lightActive.text().color()); lightActive.setColor(QPalette::Link, QColor("#0077b5")); - lightActive.setColor(QPalette::ButtonText, QColor(Qt::gray)); + lightActive.setColor(QPalette::ButtonText, QColor("#495057")); QApplication::setPalette(lightActive); } else if (this->theme() == "dark") { stylefile.setFileName(":/styles/styles/nheko-dark.qss"); @@ -357,17 +358,18 @@ UserSettings::applyTheme() /*windowText*/ QColor("#caccd1"), /*button*/ QColor(0xff, 0xff, 0xff), /*light*/ QColor("#caccd1"), - /*dark*/ QColor("#2d3139"), - /*mid*/ QColor(110, 110, 110), + /*dark*/ QColor(110, 110, 110), + /*mid*/ QColor("#202228"), /*text*/ QColor("#caccd1"), /*bright_text*/ QColor(0xff, 0xff, 0xff), - /*base*/ QColor("#2d3139"), - /*window*/ QColor("#202228")); + /*base*/ QColor("#202228"), + /*window*/ QColor("#2d3139")); + darkActive.setColor(QPalette::AlternateBase, QColor("#2d3139")); darkActive.setColor(QPalette::Highlight, QColor("#38a3d8")); darkActive.setColor(QPalette::ToolTipBase, darkActive.base().color()); darkActive.setColor(QPalette::ToolTipText, darkActive.text().color()); darkActive.setColor(QPalette::Link, QColor("#38a3d8")); - darkActive.setColor(QPalette::ButtonText, QColor(0x90, 0x90, 0x90)); + darkActive.setColor(QPalette::ButtonText, "#727274"); QApplication::setPalette(darkActive); } else { stylefile.setFileName(":/styles/styles/system.qss");