lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-07-19 15:05:40 +02:00
Code Activity

TextEditor: General upgrade

Browse source 
Implement new design
Add multiline button
Use correct color and implement dark theme

GitLab: #1096
Change-Id: I5699c81fbc41e50300ca8b32b93ee47cd17ceee1
This commit is contained in:
lcoursodon 2023-07-06 14:48:03 -04:00
parent bbdd68fb1d
commit 83039abc1b
17 changed files with 1133 additions and 757 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
resources/icons/Preview_Black_24dp.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g id="noun-overview-4287788" transform="translate(-112.49 -112.51)">
<path id="Path_272" d="M134.5,133.4l-3.5-3.5c3.3-3.9,2.8-9.8-1.1-13.2c-3.9-3.3-9.8-2.8-13.2,1.1c-3.3,3.9-2.8,9.8,1.1,13.2
c3.5,2.9,8.6,2.9,12.1,0l3.5,3.5L134.5,133.4z M123.8,131.6c-4.3,0-7.8-3.5-7.8-7.8s3.5-7.8,7.8-7.8c4.3,0,7.8,3.5,7.8,7.8l0,0
C131.6,128.2,128.1,131.6,123.8,131.6L123.8,131.6z"/>
<path id="Path_273" d="M123.8,119.7c-3.5,0-6.2,1.8-6.2,4.1s2.7,4.1,6.2,4.1c3.5,0,6.2-1.8,6.2-4.1S127.3,119.7,123.8,119.7z
M123.8,126.6c-2.6,0-4.8-1.3-4.8-2.8s2.2-2.8,4.8-2.8c2.6,0,4.8,1.3,4.8,2.8S126.5,126.6,123.8,126.6z"/>
<path id="Path_274" d="M126.1,123.9c0,1.3-1,2.3-2.3,2.3c-1.3,0-2.3-1-2.3-2.3c0-1.3,1-2.3,2.3-2.3
C125.1,121.6,126.1,122.6,126.1,123.9L126.1,123.9"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

7
resources/icons/Shift-Enter_Black_24dp.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path d="M5.8,4.7h12.5c0.7,0,1.2,0.6,1.2,1.2v7.5c0,0.7-0.6,1.2-1.2,1.2h-12l2.9-2.9l-1.8-1.8l-5,5c-0.1,0.1-0.2,0.3-0.3,0.4
c-0.2,0.5-0.1,1,0.3,1.4l5,5L9.1,20l-2.9-2.9h12c2.1,0,3.7-1.7,3.7-3.7V5.9c0-2.1-1.7-3.7-3.7-3.7H5.8V4.7z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 582 B

13
resources/icons/more_Menu_Black_24dp.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g id="noun-add-929469" transform="translate(-102.6 -102.6)">
<path id="Path_270" d="M107.5,107.5c-3.9,3.9-3.9,10.2,0,14.1c3.9,3.9,10.2,3.9,14.1,0c3.9-3.9,3.9-10.2,0-14.1
C117.8,103.6,111.4,103.6,107.5,107.5C107.5,107.5,107.5,107.5,107.5,107.5z M120.5,120.5c-3.3,3.3-8.5,3.3-11.8,0
c-3.3-3.3-3.3-8.5,0-11.8c3.3-3.3,8.5-3.3,11.8,0C123.7,112,123.7,117.2,120.5,120.5z"/>
<path id="Path_271" d="M114.6,109.8c-0.4,0-0.8,0.4-0.8,0.8c0,0,0,0,0,0v3.1h-3.1c-0.5,0-0.8,0.4-0.8,0.8c0,0.5,0.4,0.8,0.8,0.8
h3.1v3.1c0,0.4,0.4,0.8,0.8,0.8c0,0,0,0,0,0c0.5,0,0.8-0.4,0.8-0.8v-3.1h3.1c0.5,0,0.8-0.4,0.8-0.8c0-0.4-0.4-0.8-0.8-0.8
c0,0,0,0,0,0h-3.1v-3.1C115.4,110.2,115.1,109.8,114.6,109.8C114.6,109.8,114.6,109.8,114.6,109.8z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/app/appsettingsmanager.h
View file

@ -60,6 +60,7 @@ extern const QString defaultDownloadPath;
X(PositionShareLimit, true) \
X(FlipSelf, true) \
X(ShowMardownOption, false) \
X(ChatViewEnterIsNewLine, false) \
X(ShowSendOption, false)
/*

2
src/app/commoncomponents/MarkdownPopup.qml
View file

@ -67,7 +67,7 @@ Popup {
focusPolicy: Qt.TabFocus
normalColor: JamiTheme.chatViewFooterListColor
imageColor: JamiTheme.chatViewFooterImgColor
imageColor: JamiTheme.chatViewFooterImgHoverColor
hoveredColor: JamiTheme.showMoreButtonOpenColor
pressedColor: hoveredColor

134
src/app/commoncomponents/SharePopup.qml Normal file
View file

@ -0,0 +1,134 @@
/*
* Copyright (C) 2023 Savoir-faire Linux Inc.
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Qt.labs.platform
import Qt5Compat.GraphicalEffects
import net.jami.Models 1.1
import net.jami.Adapters 1.1
import net.jami.Constants 1.1
import "../mainview/components"
Popup {
id: root
padding: 0
property list<Action> menuMoreButton
height: childrenRect.height
width: childrenRect.width
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
Rectangle {
id: rect
color: JamiTheme.primaryBackgroundColor
border.color: JamiTheme.chatViewFooterRectangleBorderColor
border.width: 2
radius: 5
height: listViewMoreButton.childrenRect.height + 16
width: listViewMoreButton.childrenRect.width + 16
ListView {
id: listViewMoreButton
anchors.centerIn: parent
orientation: ListView.Vertical
spacing: 5
width: contentItem.childrenRect.width
height: contentHeight
model: menuMoreButton
Rectangle {
z: -1
anchors.fill: parent
color: "transparent"
}
delegate: ItemDelegate {
width: control.width
height: control.height
AbstractButton {
id: control
anchors.centerIn: parent
height: JamiTheme.chatViewFooterRealButtonSize + 10
text: modelData.toolTip
contentItem: RowLayout {
Rectangle {
id: image
width: 26
height: 26
radius: 5
color: JamiTheme.transparentColor
ResponsiveImage {
anchors.fill: parent
source: modelData.iconSrc
color: control.hovered ? JamiTheme.chatViewFooterImgHoverColor : JamiTheme.chatViewFooterImgColor
}
}
Text {
text: control.text
color: control.hovered ? JamiTheme.chatViewFooterImgHoverColor : "#7f7f7f"
}
}
background: Rectangle {
color: control.hovered ? JamiTheme.showMoreButtonOpenColor : JamiTheme.transparentColor
}
action: modelData
onClicked: {
root.close();
}
}
}
}
}
background: Rectangle {
anchors.fill: parent
color: JamiTheme.transparentColor
radius: 5
z: -1
}
enter: Transition {
NumberAnimation {
properties: "opacity"
from: 0.0
to: 1.0
duration: JamiTheme.shortFadeDuration
}
}
exit: Transition {
NumberAnimation {
properties: "opacity"
from: 1.0
to: 0.0
duration: JamiTheme.shortFadeDuration
}
}
}

7
src/app/constant/JamiStrings.qml
View file

@ -790,8 +790,8 @@ Item {
property string addEmoji: qsTr("Add emoji")
property string moreEmojis: qsTr("more emojis")
property string sendFile: qsTr("Send file")
property string leaveAudioMessage: qsTr("Leave audio message")
property string leaveVideoMessage: qsTr("Leave video message")
property string leaveAudioMessage: qsTr("Audio message")
property string leaveVideoMessage: qsTr("Video message")
property string showMore: qsTr("Show more")
property string showLess: qsTr("Show less")
@ -806,7 +806,8 @@ Item {
property string orderedList: qsTr("Ordered list")
property string showFormating: qsTr("Show Formating")
property string hideFormating: qsTr("Hide Formating")
property string shiftEnterNewLine: qsTr("Press Shift+Enter to insert a new line")
property string enterNewLine: qsTr("Press Enter to insert a new line")
property string send: qsTr("Send")
property string remove: qsTr("Remove")
property string replyTo: qsTr("Reply to")

18
src/app/constant/JamiTheme.qml
View file

@ -219,6 +219,7 @@ Item {
property color fileInTimestampColor: darkTheme ? "#999" : "#555"
property color chatviewBgColor: darkTheme ? bgDarkMode_ : whiteColor
property color bgInvitationRectColor: darkTheme ? "#222222" : whiteColor
property color messageBarPlaceholderTextColor: darkTheme ? "#909090" : "#7e7e7e"
property color placeholderTextColor: darkTheme ? "#7a7a7a" : "black" //Qt.rgba(0, 0, 0, 0.2)
property color placeholderTextColorWhite: "#cccccc"
property color inviteHoverColor: darkTheme ? blackColor : whiteColor
@ -233,11 +234,14 @@ Item {
// ChatView Footer
property color chatViewFooterListColor: darkTheme ? blackColor : "#E5E5E5"
property color chatViewFooterImgColor: darkTheme ? whiteColor : blackColor
property color showMoreButtonOpenColor: darkTheme ? "#123F4A" : "#CCCCCC"
property color chatViewFooterImgHoverColor: darkTheme ? whiteColor : blackColor
property color chatViewFooterImgColor: darkTheme ? "#909090" : "#7e7e7e"
property color chatViewFooterImgDisableColor: darkTheme ? "#4d4d4d" : "#cbcbcb"
property color showMoreButtonOpenColor: darkTheme ? "#4d4d4d" : "#e5e5e5"
property color chatViewFooterSeparateLineColor: darkTheme ? "#5c5c5c" : "#929292"
property color chatViewFooterSendButtonColor: darkTheme ? "#03B9E9" : "#005699"
property color chatViewFooterSendButtonImgColor: darkTheme ? blackColor : whiteColor
property color chatViewFooterRectangleBorderColor: darkTheme ? "#4d4d4d" : "#e5e5e5"
// ChatView Header
property real chatViewHeaderButtonRadius: 5
@ -299,7 +303,7 @@ Item {
// Sizes
property real mainViewLeftPaneMinWidth: 300
property real mainViewPaneMinWidth: 430
property real mainViewPaneMinWidth: 490
property real qrCodeImageSize: 256
property real splitViewHandlePreferredWidth: 4
property real indicatorFontSize: calcSize(6)
@ -433,14 +437,14 @@ Item {
property real chatViewHairLineSize: 1
property real chatViewMaximumWidth: 900
property real chatViewHeaderPreferredHeight: 64
property real chatViewFooterPreferredHeight: 50
property real chatViewFooterMaximumHeight: 280
property real chatViewFooterPreferredHeight: 35
property real chatViewFooterMaximumHeight: 315
property real chatViewFooterRowSpacing: 4
property real chatViewFooterButtonSize: 36
property real chatViewFooterRealButtonSize: 26
property real chatViewFooterButtonIconSize: 48
property real chatViewFooterButtonRadius: 5
property real chatViewFooterTextAreaMaximumHeight: 130
property real chatViewFooterTextAreaMaximumHeight: 260
property real chatViewScrollToBottomButtonBottomMargin: 8
property real usernameBlockFontSize: calcSize(12)
@ -581,7 +585,7 @@ Item {
property int keyboardShortcutDelegateSize: 50
// Main application spec
property real mainViewMinWidth: 430
property real mainViewMinWidth: 490
property real mainViewMinHeight: 500
property real wizardViewMinWidth: 500

5
src/app/mainview/components/ChatView.qml
View file

@ -263,6 +263,7 @@ Rectangle {
currentIndex: CurrentConversation.isRequest || CurrentConversation.needsSyncing
Loader {
id: loader
active: CurrentConversation.id !== ""
sourceComponent: MessageListView {
DropArea {
@ -302,6 +303,10 @@ Rectangle {
return CurrentConversation.isSwarm || CurrentConversation.isTemporary;
}
onHeightChanged: {
Qt.callLater(loader.item.scrollToBottom);
}
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.preferredHeight: implicitHeight

11
src/app/mainview/components/ChatViewFooter.qml
View file

@ -25,10 +25,10 @@ import "../../commoncomponents"
Rectangle {
id: root
property alias textInput: messageBar.textAreaObj
property string previousConvId
property string previousAccountId
property bool showTypo: messageBar.showTypo
function setFilePathsToSend(filePaths) {
for (var index = 0; index < filePaths.length; ++index) {
@ -96,7 +96,6 @@ Rectangle {
ColumnLayout {
id: footerColumnLayout
anchors.centerIn: root
width: root.width
@ -130,6 +129,8 @@ Rectangle {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: footerColumnLayout.width
Layout.preferredHeight: height
property var emojiPicker
Connections {
@ -156,11 +157,7 @@ Rectangle {
}
function setXposition() {
if (UtilsAdapter.isRTL) {
return messageBar.width - JamiTheme.emojiPickerWidth;
} else {
return 0;
}
return messageBar.width - JamiTheme.emojiPickerWidth;
}
function setYposition() {

3
src/app/mainview/components/ChatViewHeader.qml
View file

@ -93,9 +93,6 @@ Rectangle {
source: JamiResources.back_24dp_svg
toolTipText: CurrentConversation.inCall ? JamiStrings.backCall : JamiStrings.hideChat
normalColor: JamiTheme.chatviewBgColor
imageColor: JamiTheme.chatviewButtonColor
onClicked: root.backClicked()
}

2
src/app/mainview/components/JamiPushButton.qml
View file

@ -24,5 +24,5 @@ PushButton {
radius: JamiTheme.chatViewHeaderButtonRadius
normalColor: JamiTheme.chatviewBgColor
imageColor: JamiTheme.chatviewButtonColor
imageColor: hovered ? JamiTheme.chatviewButtonColor : JamiTheme.chatViewFooterImgColor
}

1640
src/app/mainview/components/MessageBar.qml
View file

File diff suppressed because it is too large Load diff

12
src/app/mainview/components/MessageBarTextArea.qml
View file

@ -19,11 +19,17 @@ import QtQuick
import QtQuick.Controls
import net.jami.Adapters 1.1
import net.jami.Constants 1.1
import net.jami.Enums 1.1
import net.jami.Models 1.1
import "../../commoncomponents"
JamiFlickable {
id: root
property int maxWidth: 330
property bool tooMuch: {
return textArea.contentWidth > maxWidth;
}
property alias text: textArea.text
property var textAreaObj: textArea
property alias placeholderText: textArea.placeholderText
@ -86,7 +92,7 @@ JamiFlickable {
wrapMode: TextEdit.Wrap
selectByMouse: true
textFormat: TextEdit.PlainText
placeholderTextColor: JamiTheme.placeholderTextColor
placeholderTextColor: JamiTheme.messageBarPlaceholderTextColor
horizontalAlignment: Text.AlignLeft
background: Rectangle {
@ -121,7 +127,9 @@ JamiFlickable {
MessagesAdapter.editId = CurrentConversation.lastSelfMessageId;
keyEvent.accepted = true;
} else if (keyEvent.key === Qt.Key_Enter || keyEvent.key === Qt.Key_Return) {
if (!(keyEvent.modifiers & Qt.ShiftModifier)) {
const isEnterNewLine = UtilsAdapter.getAppValue(Settings.Key.ChatViewEnterIsNewLine);
const isShiftPressed = (keyEvent.modifiers & Qt.ShiftModifier);
if ((isEnterNewLine && isShiftPressed) || (!isEnterNewLine && !isShiftPressed)) {
root.sendMessagesRequired();
keyEvent.accepted = true;
}

6
src/app/mainview/components/MessageListView.qml
View file

@ -54,6 +54,10 @@ JamiListView {
return false
}
function scrollToBottom() {
verticalScrollBar.position = 1 - verticalScrollBar.size;
}
function computeChatview(item, itemIndex) {
if (!root) return
var rootItem = root.itemAtIndex(0)
@ -277,7 +281,7 @@ JamiListView {
anchors.horizontalCenter: root.horizontalCenter
visible: 1 - verticalScrollBar.position >= verticalScrollBar.size * 2
onClicked: verticalScrollBar.position = 1 - verticalScrollBar.size
onClicked: scrollToBottom()
}
header: Control {

14
src/app/mainview/components/Searchbar.qml
View file

@ -76,7 +76,17 @@ Rectangle {
hoveredColor: JamiTheme.hoveredButtonColor
source: JamiResources.ic_baseline_search_24dp_svg
normalColor: "transparent"
imageColor: JamiTheme.chatviewButtonColor
imageColor: {
if (reductionEnabled) {
if (hovered) {
JamiTheme.chatviewButtonColor;
} else {
JamiTheme.chatViewFooterImgColor;
}
} else {
JamiTheme.chatviewButtonColor;
}
}
onClicked: root.searchClicked()
}
@ -99,7 +109,7 @@ Rectangle {
}
width: isOpen ? JamiTheme.searchbarSize : 0
Behavior on width {
Behavior on width {
NumberAnimation {
duration: 150
}

1
src/app/messagesadapter.h
View file

@ -78,6 +78,7 @@ Q_SIGNALS:
void moreMessagesLoaded(qint32 loadingRequestId);
void timestampUpdated();
void fileCopied(const QString& dest);
void messageParsed(const QString& msgId, const QString& msg);
protected:
Q_INVOKABLE bool isDocument(const interaction::Type& type);