lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-09-10 12:03:18 +02:00
Code Activity

Patch menu: standardize with design

Browse source 
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
This commit is contained in:
lcoursodon 2023-10-30 09:38:56 -04:00 • committed by Sébastien Blin
parent 86d55fa985
commit d4d34ad4fc
8 changed files with 69 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/icons/reply.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 216 B

4
resources/icons/reply_black_24dp.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 364 B

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

@ -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;

45
src/app/commoncomponents/SBSMessageBase.qml
View file

@ -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

27
src/app/commoncomponents/ShowMoreMenu.qml
View file

@ -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();
}
}

7
src/app/commoncomponents/contextmenu/BaseContextMenu.qml
View file

@ -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 {

15
src/app/commoncomponents/contextmenu/GeneralMenuItemList.qml
View file

@ -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

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

@ -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
}
}
}