From 21f3479a9639b603015c9bd7430abae6e907bbb6 Mon Sep 17 00:00:00 2001 From: Aline Gondim Santos <aline.gondimsantos@savoirfairelinux.com> Date: Tue, 1 Aug 2023 09:33:01 -0300 Subject: [PATCH] messagebar: fix rtl layout GitLab: #1279 Change-Id: I746fd86a4cf32cbb369ba2c5d57182800d7da0d0 --- src/app/commoncomponents/JamiIdentifier.qml | 1 - src/app/commoncomponents/MarkdownPopup.qml | 5 +- .../mainview/components/ChatViewFooter.qml | 3 + src/app/mainview/components/MessageBar.qml | 221 ++++++++---------- .../components/MessageBarTextArea.qml | 4 +- 5 files changed, 112 insertions(+), 122 deletions(-) diff --git a/src/app/commoncomponents/JamiIdentifier.qml b/src/app/commoncomponents/JamiIdentifier.qml index 5c656b373..f583d2169 100644 --- a/src/app/commoncomponents/JamiIdentifier.qml +++ b/src/app/commoncomponents/JamiIdentifier.qml @@ -130,7 +130,6 @@ Item { id: controlsLayout height: childrenRect.height - width: childrenRect.width anchors.verticalCenter: parent.verticalCenter anchors.rightMargin: JamiTheme.pushButtonMargins anchors.leftMargin: JamiTheme.pushButtonMargins diff --git a/src/app/commoncomponents/MarkdownPopup.qml b/src/app/commoncomponents/MarkdownPopup.qml index 2411fc1b3..b9ad50eb7 100644 --- a/src/app/commoncomponents/MarkdownPopup.qml +++ b/src/app/commoncomponents/MarkdownPopup.qml @@ -36,11 +36,12 @@ Popup { contentItem: ListView { id: listViewTypoSecond - width: contentWidth + leftMargin + width: contentWidth + leftMargin + rightMargin height: JamiTheme.chatViewFooterButtonSize orientation: ListView.Horizontal interactive: false leftMargin: 10 + rightMargin: 10 spacing: 10 Rectangle { @@ -53,7 +54,7 @@ Popup { model: menuTypoActionsSecond delegate: PushButton { - anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenter: parent ? parent.verticalCenter : undefined preferredSize: JamiTheme.chatViewFooterRealButtonSize imageContainerWidth: 20 diff --git a/src/app/mainview/components/ChatViewFooter.qml b/src/app/mainview/components/ChatViewFooter.qml index 8fe83bd33..8668e9c85 100644 --- a/src/app/mainview/components/ChatViewFooter.qml +++ b/src/app/mainview/components/ChatViewFooter.qml @@ -129,6 +129,9 @@ Rectangle { Layout.alignment: Qt.AlignHCenter Layout.preferredWidth: footerColumnLayout.width + Layout.leftMargin: marginSize + Layout.rightMargin: marginSize + Layout.bottomMargin: marginSize Layout.preferredHeight: height property var emojiPicker diff --git a/src/app/mainview/components/MessageBar.qml b/src/app/mainview/components/MessageBar.qml index 0bbeb60d2..054710fb2 100644 --- a/src/app/mainview/components/MessageBar.qml +++ b/src/app/mainview/components/MessageBar.qml @@ -25,16 +25,11 @@ import net.jami.Enums 1.1 import net.jami.Constants 1.1 import "../../commoncomponents" -Rectangle { +RowLayout { id: root - Layout.fillWidth: true - Layout.leftMargin: marginSize - Layout.rightMargin: marginSize - Layout.bottomMargin: marginSize - - property alias text: textArea.text - property var textAreaObj: textArea + property alias text: messageBarTextArea.text + property var textAreaObj: messageBarTextArea property real marginSize: JamiTheme.messageBarMarginSize property bool sendButtonVisibility: true property bool animate: false @@ -43,7 +38,7 @@ Rectangle { property bool chatViewEnterIsNewLine: UtilsAdapter.getAppValue(Settings.Key.ChatViewEnterIsNewLine) property bool showTypoSecond: false property bool showPreview: false - property bool multiLine: textArea.tooMuch + property bool multiLine: messageBarTextArea.tooMuch property int messageBarLayoutMaximumWidth: 486 @@ -56,61 +51,62 @@ Rectangle { signal showMapClicked signal emojiButtonClicked - color: JamiTheme.transparentColor - height: showTypo || multiLine ? textArea.height + 25 + 3 * marginSize + 1 : textArea.height + marginSize + 1 + height: showTypo || multiLine ? textAreaObj.height + 25 + 3 * marginSize + 1 : textAreaObj.height + marginSize + 1 - ComboBox { - id: showMoreButton + Rectangle { + Layout.preferredHeight: parent.height + Layout.preferredWidth: childrenRect.width visible: !CurrentConversation.isSip - width: CurrentConversation.isSip ? 0 : JamiTheme.chatViewFooterButtonSize - height: JamiTheme.chatViewFooterButtonSize - - anchors.leftMargin: marginSize - anchors.bottom: parent.bottom - anchors.bottomMargin: marginSize / 2 - - background: Rectangle { - implicitWidth: showMoreButton.width - implicitHeight: showMoreButton.height - radius: 5 - color: JamiTheme.transparentColor - } + ComboBox { + id: showMoreButton + width: JamiTheme.chatViewFooterButtonSize + height: JamiTheme.chatViewFooterButtonSize + anchors.bottom: parent.bottom + anchors.bottomMargin: marginSize / 2 - MaterialToolTip { - id: toolTipMoreButton + background: Rectangle { + implicitWidth: showMoreButton.width + implicitHeight: showMoreButton.height + radius: 5 + color: JamiTheme.transparentColor + } - parent: showMoreButton - visible: showMoreButton.hovered && (text.length > 0) - delay: Qt.styleHints.mousePressAndHoldInterval - text: JamiStrings.showMore - } + MaterialToolTip { + id: toolTipMoreButton - indicator: ResponsiveImage { + parent: showMoreButton + visible: showMoreButton.hovered && (text.length > 0) + delay: Qt.styleHints.mousePressAndHoldInterval + text: JamiStrings.showMore + } - width: 25 - height: 25 + indicator: ResponsiveImage { - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter + width: 25 + height: 25 - source: JamiResources.more_menu_black_24dp_svg + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter - color: JamiTheme.chatViewFooterImgColor - } + source: JamiResources.more_menu_black_24dp_svg - onHoveredChanged: { - if (!sharePopup.opened) { - showMoreButton.indicator.color = hovered ? JamiTheme.chatViewFooterImgHoverColor : JamiTheme.chatViewFooterImgColor; - showMoreButton.background.color = hovered ? JamiTheme.hoveredButtonColor : JamiTheme.transparentColor; + color: JamiTheme.chatViewFooterImgColor + } + + onHoveredChanged: { + if (!sharePopup.opened) { + showMoreButton.indicator.color = hovered ? JamiTheme.chatViewFooterImgHoverColor : JamiTheme.chatViewFooterImgColor; + showMoreButton.background.color = hovered ? JamiTheme.hoveredButtonColor : JamiTheme.transparentColor; + } } - } - popup: SharePopup { - id: sharePopup - y: -180 - x: -20 + popup: SharePopup { + id: sharePopup + y: -180 + x: -20 - menuMoreButton: listViewMoreButton.menuMoreButton + menuMoreButton: listViewMoreButton.menuMoreButton + } } } @@ -125,11 +121,10 @@ Rectangle { Rectangle { id: rectangle - anchors.top: parent.top - anchors.left: showMoreButton.right - anchors.right: sendButtonRow.left - anchors.rightMargin: marginSize - anchors.leftMargin: marginSize + Layout.fillWidth: true + Layout.fillHeight: true + Layout.rightMargin: marginSize + Layout.leftMargin: marginSize radius: 5 color: JamiTheme.transparentColor @@ -158,7 +153,7 @@ Rectangle { anchors.fill: parent MessageBarTextArea { - id: textArea + id: messageBarTextArea objectName: "messageBarTextArea" maxWidth: rectangle.width - messageBarRowLayout.width - 35 @@ -179,14 +174,13 @@ Rectangle { Layout.topMargin: marginSize / 2 Layout.bottomMargin: marginSize / 2 Layout.rightMargin: marginSize / 2 - Layout.preferredHeight: { - JamiTheme.chatViewFooterPreferredHeight > contentHeight ? JamiTheme.chatViewFooterPreferredHeight : contentHeight; - } + Layout.minimumHeight: JamiTheme.chatViewFooterPreferredHeight + Layout.preferredHeight: contentHeight Layout.maximumHeight: JamiTheme.chatViewFooterTextAreaMaximumHeight - marginSize / 2 onSendMessagesRequired: { sendMessageButtonClicked(); - textArea.heightBinding(); + messageBarTextArea.heightBinding(); } onTextChanged: MessagesAdapter.userIsComposing(text ? true : false) @@ -246,55 +240,55 @@ Rectangle { Shortcut { sequence: "Ctrl+B" context: Qt.ApplicationShortcut - onActivated: textArea.markdownShortCut["Bold"]() + onActivated: messageBarTextArea.markdownShortCut["Bold"]() } Shortcut { sequence: "Ctrl+I" context: Qt.ApplicationShortcut - onActivated: textArea.markdownShortCut["Italic"]() + onActivated: messageBarTextArea.markdownShortCut["Italic"]() } Shortcut { sequence: "Shift+Alt+X" context: Qt.ApplicationShortcut - onActivated: textArea.markdownShortCut["Barre"]() + onActivated: messageBarTextArea.markdownShortCut["Barre"]() } Shortcut { sequence: "Ctrl+Alt+H" context: Qt.ApplicationShortcut - onActivated: textArea.markdownShortCut["Heading"]() + onActivated: messageBarTextArea.markdownShortCut["Heading"]() } Shortcut { sequence: "Ctrl+Alt+K" context: Qt.ApplicationShortcut - onActivated: textArea.markdownShortCut["Link"]() + onActivated: messageBarTextArea.markdownShortCut["Link"]() } Shortcut { sequence: "Ctrl+Alt+C" context: Qt.ApplicationShortcut - onActivated: textArea.markdownShortCut["Code"]() + onActivated: messageBarTextArea.markdownShortCut["Code"]() } Shortcut { sequence: "Shift+Alt+9" context: Qt.ApplicationShortcut - onActivated: textArea.markdownShortCut["Quote"]() + onActivated: messageBarTextArea.markdownShortCut["Quote"]() } Shortcut { sequence: "Shift+Alt+8" context: Qt.ApplicationShortcut - onActivated: textArea.markdownShortCut["Unordered list"]() + onActivated: messageBarTextArea.markdownShortCut["Unordered list"]() } Shortcut { sequence: "Shift+Alt+7" context: Qt.ApplicationShortcut - onActivated: textArea.markdownShortCut["Ordered list"]() + onActivated: messageBarTextArea.markdownShortCut["Ordered list"]() } Shortcut { @@ -310,7 +304,7 @@ Rectangle { context: Qt.ApplicationShortcut onActivated: { showPreview = !showPreview; - textArea.showPreview = showPreview; + messageBarTextArea.showPreview = showPreview; } } } @@ -326,7 +320,6 @@ Rectangle { Layout.rightMargin: 0 Row { - anchors.bottom: parent.bottom anchors.bottomMargin: marginSize / 2 @@ -370,11 +363,11 @@ Rectangle { // If the selected text is already formatted with the given characters, remove them selectedText = text.substring(start, end); root.text = text.substring(0, start - char1.length) + selectedText + text.substring(end + char2.length); - textArea.selectText(start - char1.length, end - char1.length); + messageBarTextArea.selectText(start - char1.length, end - char1.length); } else { // Otherwise, add the formatting characters to the selected text root.text = text.substring(0, start) + char1 + text.substring(start, end) + char2 + text.substring(end); - textArea.selectText(start + char1.length, end + char1.length); + messageBarTextArea.selectText(start + char1.length, end + char1.length); } } @@ -558,7 +551,7 @@ Rectangle { newEnd = Math.max(startPos + multilineSelectionLength, 0); } root.text = newValue; - textArea.selectText(newStart, newEnd); + messageBarTextArea.selectText(newStart, newEnd); } ListView { @@ -566,8 +559,8 @@ Rectangle { objectName: "listViewTypoFirst" - visible: width > 0 - width: showTypo ? contentWidth + 2 * leftMargin : 0 + visible: showTypo + width: contentWidth + 2 * leftMargin Behavior on width { NumberAnimation { @@ -588,9 +581,9 @@ Rectangle { property var iconSrc: JamiResources.bold_black_24dp_svg property var shortcutText: JamiStrings.bold property string shortcutKey: "Ctrl+B" - property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "**", "**", /\\*\*.+\\*\*/) + property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "**", "**", /\\*\*.+\\*\*/) onTriggered: function clickAction() { - listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "**", "**", /\\*\*.+\\*\*/); + listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "**", "**", /\\*\*.+\\*\*/); } }, Action { @@ -598,9 +591,9 @@ Rectangle { property var iconSrc: JamiResources.italic_black_24dp_svg property var shortcutText: JamiStrings.italic property string shortcutKey: "Ctrl+I" - property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "*", "*", /(?:\*.+\*|\*\*\*.+\*\*\*)/) + property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "*", "*", /(?:\*.+\*|\*\*\*.+\*\*\*)/) onTriggered: function clickAction() { - listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "*", "*", /(?:\*.+\*|\*\*\*.+\*\*\*)/); + listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "*", "*", /(?:\*.+\*|\*\*\*.+\*\*\*)/); } }, Action { @@ -608,9 +601,9 @@ Rectangle { property var iconSrc: JamiResources.s_barre_black_24dp_svg property var shortcutText: JamiStrings.strikethrough property string shortcutKey: "Shift+Alt+X" - property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "~~", "~~", /\~\~.+\~\~/) + property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "~~", "~~", /\~\~.+\~\~/) onTriggered: function clickAction() { - listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "~~", "~~", /\~\~.+\~\~/); + listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "~~", "~~", /\~\~.+\~\~/); } }, Action { @@ -618,9 +611,9 @@ Rectangle { property var iconSrc: JamiResources.title_black_24dp_svg property var shortcutText: JamiStrings.title property string shortcutKey: "Ctrl+Alt+H" - property bool isStyle: listViewTypo.isPrefixSyle(root.text, textArea.selectionStart, textArea.selectionEnd, "### ", false) + property bool isStyle: listViewTypo.isPrefixSyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "### ", false) onTriggered: function clickAction() { - listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "### ", false); + listViewTypo.addPrefixStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "### ", false); } }, Action { @@ -628,9 +621,9 @@ Rectangle { property var iconSrc: JamiResources.link_web_black_24dp_svg property var shortcutText: JamiStrings.link property string shortcutKey: "Ctrl+Alt+K" - property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "[", "](url)", /\[.+\]\(.+\)/) + property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "[", "](url)", /\[.+\]\(.+\)/) onTriggered: function clickAction() { - listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "[", "](url)", /\[.+\]\(.+\)/); + listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "[", "](url)", /\[.+\]\(.+\)/); } }, Action { @@ -638,9 +631,9 @@ Rectangle { property var iconSrc: JamiResources.code_black_24dp_svg property var shortcutText: JamiStrings.code property string shortcutKey: "Ctrl+Alt+C" - property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "```", "```", /\`\`\`.+\`\`\`/) + property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "```", "```", /\`\`\`.+\`\`\`/) onTriggered: function clickAction() { - listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "```", "```", /\`\`\`.+\`\`\`/); + listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "```", "```", /\`\`\`.+\`\`\`/); } } ] @@ -648,8 +641,7 @@ Rectangle { model: menuTypoActionsFirst delegate: PushButton { - anchors.verticalCenter: parent.verticalCenter - + anchors.verticalCenter: parent ? parent.verticalCenter : undefined preferredSize: JamiTheme.chatViewFooterRealButtonSize imageContainerWidth: 15 imageContainerHeight: 15 @@ -693,11 +685,10 @@ Rectangle { } Rectangle { - height: JamiTheme.chatViewFooterButtonSize color: JamiTheme.transparentColor - visible: width > 0 - width: showTypo && showTypoSecond ? 2 : 0 + visible: showTypo && showTypoSecond + width: 2 Rectangle { anchors.verticalCenter: parent.verticalCenter @@ -721,6 +712,7 @@ Rectangle { width: JamiTheme.chatViewFooterRealButtonSize height: width anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter enabled: !showPreview hoverEnabled: !showPreview @@ -768,8 +760,8 @@ Rectangle { ListView { id: listViewTypoSecond - visible: width > 0 - width: showTypo && showTypoSecond ? contentWidth + 2 * leftMargin : 0 + visible: showTypo && showTypoSecond + width: contentWidth + 2 * leftMargin height: JamiTheme.chatViewFooterButtonSize orientation: ListView.Horizontal @@ -790,9 +782,9 @@ Rectangle { property var iconSrc: JamiResources.quote_black_24dp_svg property var shortcutText: JamiStrings.quote property string shortcutKey: "Shift+Alt+9" - property bool isStyle: listViewTypo.isPrefixSyle(root.text, textArea.selectionStart, textArea.selectionEnd, "> ", false) + property bool isStyle: listViewTypo.isPrefixSyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "> ", false) onTriggered: function clickAction() { - listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "> ", false); + listViewTypo.addPrefixStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "> ", false); } }, Action { @@ -800,9 +792,9 @@ Rectangle { property var iconSrc: JamiResources.bullet_point_black_24dp_svg property var shortcutText: JamiStrings.unorderedList property string shortcutKey: "Shift+Alt+8" - property bool isStyle: listViewTypo.isPrefixSyle(root.text, textArea.selectionStart, textArea.selectionEnd, "- ", false) + property bool isStyle: listViewTypo.isPrefixSyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "- ", false) onTriggered: function clickAction() { - listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "- ", false); + listViewTypo.addPrefixStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "- ", false); } }, Action { @@ -810,9 +802,9 @@ Rectangle { property var iconSrc: JamiResources.bullet_number_black_24dp_svg property var shortcutText: JamiStrings.orderedList property string shortcutKey: "Shift+Alt+7" - property bool isStyle: listViewTypo.isPrefixSyle(root.text, textArea.selectionStart, textArea.selectionEnd, "", true) + property bool isStyle: listViewTypo.isPrefixSyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "", true) onTriggered: function clickAction() { - listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "", true); + listViewTypo.addPrefixStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "", true); } }, Action { @@ -834,8 +826,7 @@ Rectangle { model: menuTypoActionsSecond delegate: PushButton { - anchors.verticalCenter: parent.verticalCenter - + anchors.verticalCenter: parent ? parent.verticalCenter : undefined preferredSize: JamiTheme.chatViewFooterRealButtonSize imageContainerWidth: 20 imageContainerHeight: 20 @@ -904,7 +895,7 @@ Rectangle { onClicked: { showTypo = !showTypo; - if (messageBar.width < messageBarLayoutMaximumWidth + sendButtonRow.width + 2 * JamiTheme.preferredMarginSize) + if (messageBar.width < messageBarLayoutMaximumWidth + sendMessageButton.width + 2 * JamiTheme.preferredMarginSize) showTypoSecond = false; if (!showDefault) showDefault = true; @@ -922,7 +913,6 @@ Rectangle { } Row { - anchors.bottom: parent.bottom anchors.bottomMargin: marginSize / 2 @@ -1165,27 +1155,23 @@ Rectangle { onClicked: { showPreview = !showPreview; - textArea.showPreview = showPreview; + messageBarTextArea.showPreview = showPreview; } } } } } - Row { - id: sendButtonRow - - spacing: JamiTheme.chatViewFooterRowSpacing - - anchors.bottom: parent.bottom - anchors.right: parent.right - anchors.rightMargin: sendMessageButton.visible ? marginSize / 2 : 0 - anchors.bottomMargin: marginSize / 2 - + Rectangle { + Layout.preferredHeight: parent.height + Layout.preferredWidth: childrenRect.width + visible: sendButtonVisibility PushButton { id: sendMessageButton objectName: "sendMessageButton" + anchors.bottom: parent.bottom + anchors.bottomMargin: marginSize / 2 enabled: sendButtonVisibility hoverEnabled: enabled @@ -1210,7 +1196,6 @@ Rectangle { pressedColor: hoveredColor opacity: 1 - visible: opacity scale: opacity Behavior on opacity { diff --git a/src/app/mainview/components/MessageBarTextArea.qml b/src/app/mainview/components/MessageBarTextArea.qml index c924a4f1a..3e439910e 100644 --- a/src/app/mainview/components/MessageBarTextArea.qml +++ b/src/app/mainview/components/MessageBarTextArea.qml @@ -30,7 +30,9 @@ JamiFlickable { property int maxWidth: 330 property bool tooMuch: { - return textArea.contentWidth > maxWidth; + if (maxWidth > 0) + return textArea.contentWidth > maxWidth; + return false; } property alias text: textArea.text property var textAreaObj: textArea -- GitLab