From d4d34ad4fcbafa3abea7dc52192c55f9a4747386 Mon Sep 17 00:00:00 2001
From: lcoursodon <liam.coursodon@savoirfairelinux.com>
Date: Mon, 30 Oct 2023 09:38:56 -0400
Subject: [PATCH] Patch menu: standardize with design
Positionning the menu, change reply icon, close menu when click a second time on the button, and add animation for all menu's buttons
Change-Id: I8567a74ba53de214305cbcf432541803d921f60e
---
resources/icons/reply.svg | 1 -
resources/icons/reply_black_24dp.svg | 4 ++
src/app/commoncomponents/SBSContextMenu.qml | 2 +-
src/app/commoncomponents/SBSMessageBase.qml | 45 +++++++++++++------
src/app/commoncomponents/ShowMoreMenu.qml | 27 ++++++-----
.../contextmenu/BaseContextMenu.qml | 7 +--
.../contextmenu/GeneralMenuItemList.qml | 15 +++++++
src/app/mainview/components/MessageBar.qml | 10 +----
8 files changed, 69 insertions(+), 42 deletions(-)
delete mode 100644 resources/icons/reply.svg
create mode 100644 resources/icons/reply_black_24dp.svg
diff --git a/resources/icons/reply.svg b/resources/icons/reply.svg
deleted file mode 100644
index 59f3c8927..000000000
--- a/resources/icons/reply.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M39 38v-8.7q0-2.7-1.9-4.6-1.9-1.9-4.6-1.9H11.7l7.7 7.7-2.1 2.1L6 21.3 17.3 10l2.1 2.1-7.7 7.7h20.8q3.9 0 6.7 2.775Q42 25.35 42 29.3V38Z"/></svg>
\ No newline at end of file
diff --git a/resources/icons/reply_black_24dp.svg b/resources/icons/reply_black_24dp.svg
new file mode 100644
index 000000000..a5061a456
--- /dev/null
+++ b/resources/icons/reply_black_24dp.svg
@@ -0,0 +1,4 @@
+<svg id="reply_black_24dp" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path id="Path_333" data-name="Path 333" d="M0,0H24V24H0Z" fill="none"/>
+ <path id="Path_334" data-name="Path 334" d="M10,9V5L3,12l7,7V14.9c5,0,8.5,1.6,11,5.1C20,15,17,10,10,9Z" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
+</svg>
diff --git a/src/app/commoncomponents/SBSContextMenu.qml b/src/app/commoncomponents/SBSContextMenu.qml
index 941c0e5fd..2198396db 100644
--- a/src/app/commoncomponents/SBSContextMenu.qml
+++ b/src/app/commoncomponents/SBSContextMenu.qml
@@ -54,7 +54,7 @@ ContextMenuAutoLoader {
id: reply
itemName: JamiStrings.reply
- iconSource: JamiResources.reply_svg
+ iconSource: JamiResources.reply_black_24dp_svg
onClicked: {
MessagesAdapter.editId = "";
MessagesAdapter.replyToId = root.msgId;
diff --git a/src/app/commoncomponents/SBSMessageBase.qml b/src/app/commoncomponents/SBSMessageBase.qml
index 869dbf5cb..3c0f0ff84 100644
--- a/src/app/commoncomponents/SBSMessageBase.qml
+++ b/src/app/commoncomponents/SBSMessageBase.qml
@@ -243,6 +243,7 @@ Control {
anchors.fill: bubble
hoverEnabled: true
+
onClicked: function (mouse) {
if (root.hoveredLink) {
MessagesAdapter.openUrl(root.hoveredLink);
@@ -288,20 +289,38 @@ Control {
width: optionButtonItem.width / 2
height: optionButtonItem.height
circled: false
+ property bool isOpen: false
+ property var obj: undefined
+
+ function bind() {
+ more.isOpen = false;
+ visible = Qt.binding(() => CurrentAccount.type !== Profile.Type.SIP && Body !== "" && (bubbleArea.bubbleHovered || hovered || reply.hovered || bgHandler.hovered));
+ imageColor = Qt.binding(() => hovered ? JamiTheme.chatViewFooterImgHoverColor : JamiTheme.chatViewFooterImgColor);
+ normalColor = Qt.binding(() => JamiTheme.primaryBackgroundColor);
+ }
onClicked: {
- var component = Qt.createComponent("qrc:/commoncomponents/ShowMoreMenu.qml");
- var obj = component.createObject(bubble, {
- "emojiReactions": emojiReactions,
- "isOutgoing": isOutgoing,
- "msgId": Id,
- "msgBody": Body,
- "type": Type,
- "transferName": TransferName,
- "msgBubble": bubble,
- "listView": listView
- });
- obj.open();
+ if (more.isOpen) {
+ more.bind();
+ obj.close();
+ } else {
+ var component = Qt.createComponent("qrc:/commoncomponents/ShowMoreMenu.qml");
+ obj = component.createObject(more, {
+ "emojiReactions": emojiReactions,
+ "isOutgoing": isOutgoing,
+ "msgId": Id,
+ "msgBody": Body,
+ "type": Type,
+ "transferName": TransferName,
+ "msgBubble": bubble,
+ "listView": listView
+ });
+ obj.open();
+ more.isOpen = true;
+ visible = true;
+ imageColor = JamiTheme.chatViewFooterImgHoverColor;
+ normalColor = JamiTheme.hoveredButtonColor;
+ }
}
}
@@ -312,7 +331,7 @@ Control {
imageColor: hovered ? JamiTheme.chatViewFooterImgHoverColor : JamiTheme.chatViewFooterImgColor
normalColor: JamiTheme.primaryBackgroundColor
toolTipText: JamiStrings.reply
- source: JamiResources.reply_svg
+ source: JamiResources.reply_black_24dp_svg
width: optionButtonItem.width / 2
height: optionButtonItem.height
anchors.verticalCenter: parent.verticalCenter
diff --git a/src/app/commoncomponents/ShowMoreMenu.qml b/src/app/commoncomponents/ShowMoreMenu.qml
index 28ff3012f..d908e325d 100644
--- a/src/app/commoncomponents/ShowMoreMenu.qml
+++ b/src/app/commoncomponents/ShowMoreMenu.qml
@@ -43,25 +43,16 @@ BaseContextMenu {
function xPositionProvider(width) {
// Use the width at function scope to retrigger property evaluation.
const listViewWidth = listView.width;
+ const parentX = parent.x;
if (isOutgoing) {
- const leftMargin = msgBubble.mapToItem(listView, 0, 0).x;
- return width > leftMargin ? -leftMargin - 35 : -width - 35;
+ return parentX - width - 21;
} else {
- const rightMargin = listViewWidth - (msgBubble.x + msgBubble.width);
- return width > rightMargin ? msgBubble.width - width + 35 : msgBubble.width + 35;
+ return parentX + 21;
}
}
- function yPositionProvider(height) {
- const topOffset = msgBubble.mapToItem(listView, 0, 0).y;
- if (topOffset < 0)
- return -topOffset;
- const bottomOffset = topOffset + height - listView.height;
- if (bottomOffset > 0)
- return -bottomOffset;
- return 0;
- }
+
x: xPositionProvider(width)
- y: yPositionProvider(height)
+ y: parent.y
signal addMoreEmoji
onAddMoreEmoji: {
@@ -188,4 +179,12 @@ BaseContextMenu {
Component.onCompleted: {
root.loadMenuItems(menuItems);
}
+
+ onAboutToHide: {
+ root.destroy();
+ }
+
+ Component.onDestruction: {
+ parent.bind();
+ }
}
diff --git a/src/app/commoncomponents/contextmenu/BaseContextMenu.qml b/src/app/commoncomponents/contextmenu/BaseContextMenu.qml
index 58a77eaa8..f43008e36 100644
--- a/src/app/commoncomponents/contextmenu/BaseContextMenu.qml
+++ b/src/app/commoncomponents/contextmenu/BaseContextMenu.qml
@@ -23,6 +23,8 @@ import net.jami.Constants 1.1
Menu {
id: root
+ closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside | Popup.CloseOnPressOutsideParent
+
property int menuPreferredWidth: 0
property int menuItemsPreferredHeight: 0
property int menuSeparatorPreferredHeight: 0
@@ -86,11 +88,6 @@ Menu {
root.close();
}
- modal: true
- Overlay.modal: Rectangle {
- color: "transparent"
- }
-
font.pointSize: JamiTheme.menuFontSize
background: Rectangle {
diff --git a/src/app/commoncomponents/contextmenu/GeneralMenuItemList.qml b/src/app/commoncomponents/contextmenu/GeneralMenuItemList.qml
index a1ff7d2ee..99725f4a4 100644
--- a/src/app/commoncomponents/contextmenu/GeneralMenuItemList.qml
+++ b/src/app/commoncomponents/contextmenu/GeneralMenuItemList.qml
@@ -73,6 +73,11 @@ MenuItem {
width: 36
color: emojiReplied.includes(modelList[0]) ? JamiTheme.hoveredButtonColor : JamiTheme.primaryBackgroundColor
radius: 5
+ Behavior on color {
+ ColorAnimation {
+ duration: JamiTheme.shortFadeDuration
+ }
+ }
Text {
anchors.centerIn: parent
@@ -108,6 +113,11 @@ MenuItem {
width: 36
color: emojiReplied.includes(modelList[1]) ? JamiTheme.hoveredButtonColor : JamiTheme.primaryBackgroundColor
radius: 5
+ Behavior on color {
+ ColorAnimation {
+ duration: JamiTheme.shortFadeDuration
+ }
+ }
Text {
anchors.centerIn: parent
@@ -143,6 +153,11 @@ MenuItem {
width: 36
color: emojiReplied.includes(modelList[2]) ? JamiTheme.hoveredButtonColor : JamiTheme.primaryBackgroundColor
radius: 5
+ Behavior on color {
+ ColorAnimation {
+ duration: JamiTheme.shortFadeDuration
+ }
+ }
Text {
anchors.centerIn: parent
diff --git a/src/app/mainview/components/MessageBar.qml b/src/app/mainview/components/MessageBar.qml
index afad161e4..8d6e45c08 100644
--- a/src/app/mainview/components/MessageBar.qml
+++ b/src/app/mainview/components/MessageBar.qml
@@ -97,7 +97,6 @@ RowLayout {
}
onHoveredChanged: {
- console.log("Hovered changed");
if (!sharePopup.opened) {
showMoreButton.indicator.color = hovered ? JamiTheme.chatViewFooterImgHoverColor : JamiTheme.chatViewFooterImgColor;
showMoreButton.background.color = hovered ? JamiTheme.hoveredButtonColor : JamiTheme.transparentColor;
@@ -105,12 +104,6 @@ RowLayout {
toolTipMoreButton.text = sharePopup.opened ? JamiStrings.showLess : JamiStrings.showMore;
}
- onPressedChanged: {
- console.log("Pressed changed");
- if (sharePopup.enabled)
- sharePopup.close();
- }
-
popup: ShareMenu {
id: sharePopup
onAudioRecordMessageButtonClicked: {
@@ -123,7 +116,8 @@ RowLayout {
root.showMapClicked();
}
modelList: listViewMoreButton.menuMoreButton
- y: -140
+ y: showMoreButton.y + 31
+ x: showMoreButton.x - 3
}
}
}
--
GitLab