Skip to content

Commit f473bef

Browse files
committed
fix(StatusMessage): bigger emoji reactions + mobile context menu
- use StatusTextArea for StatusTextMessage; need this for the context menu on mobile - rework the context menu to ContextMenu + pressAndHold handler (the only combo that works on mobile) - use edge-to-edge separators in the profile context menu
1 parent af1d06b commit f473bef

File tree

9 files changed

+34
-22
lines changed

9 files changed

+34
-22
lines changed

ui/StatusQ/src/StatusQ/Components/StatusMessage.qml

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ Control {
4545
property var statusChatInput
4646
property alias linksComponent: linksLoader.sourceComponent
4747
property alias invitationComponent: invitationBubbleLoader.sourceComponent
48-
property alias mouseArea: mouseArea
4948

5049
property string pinnedMsgInfoText: ""
5150

@@ -89,6 +88,7 @@ Control {
8988
signal senderNameClicked(var sender)
9089
signal replyProfileClicked(var sender, var mouse)
9190
signal replyMessageClicked(var mouse)
91+
signal pressAndHold(var mouse)
9292

9393
signal addReactionClicked(var sender, var mouse)
9494
signal toggleReactionClicked(string hexcode)
@@ -192,11 +192,6 @@ Control {
192192
implicitWidth: messageLayout.implicitWidth
193193
implicitHeight: messageLayout.implicitHeight
194194

195-
StatusMouseArea {
196-
id: mouseArea
197-
anchors.fill: parent
198-
}
199-
200195
ColumnLayout {
201196
id: messageLayout
202197
anchors.fill: parent
@@ -294,6 +289,7 @@ Control {
294289
textField.onHoveredLinkChanged: {
295290
root.hoveredLink = hoveredLink;
296291
}
292+
onPressAndHold: mouse => root.pressAndHold(mouse)
297293
}
298294
}
299295
Loader {

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,19 @@ Flow {
4646
Repeater {
4747
model: root.reactionsModel
4848

49-
Button {
49+
StatusButton {
5050
id: reactionDelegate
5151

52-
verticalPadding: Theme.halfPadding
52+
size: StatusBaseButton.Size.Small
53+
implicitHeight: 32
54+
55+
verticalPadding: Theme.halfPadding / 2
5356
leftPadding: Theme.halfPadding
5457
rightPadding: Theme.halfPadding / 2
5558
spacing: Theme.halfPadding / 2
5659

5760
background: Rectangle {
61+
implicitWidth: 36
5862
radius: Theme.radius
5963
color: {
6064
if (reactionDelegate.hovered) {
@@ -111,7 +115,7 @@ Flow {
111115
// We use a MouseArea because we need to pass the mouse event to the signal
112116
StatusMouseArea {
113117
anchors.fill: parent
114-
cursorShape: !root.limitReached ? Qt.PointingHandCursor : Qt.ArrowCursor
118+
cursorShape: !root.limitReached ? Qt.PointingHandCursor : Qt.ForbiddenCursor
115119
onClicked: (mouse) => {
116120
mouse.accepted = true
117121
if (root.limitReached)

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import QtQuick
2+
import QtQuick.Controls
23
import Qt5Compat.GraphicalEffects
34

45
import StatusQ.Components
@@ -30,6 +31,8 @@ Item {
3031
implicitWidth: chatText.implicitWidth
3132
implicitHeight: chatText.height + d.showMoreHeight / 2
3233

34+
signal pressAndHold(var mouseEvent)
35+
3336
QtObject {
3437
id: d
3538
property string hoveredLink: chatText.hoveredLink || root.highlightedLink
@@ -86,7 +89,7 @@ Item {
8689
color: Theme.palette.baseColor1
8790
}
8891

89-
TextEdit {
92+
StatusTextArea {
9093
id: chatText
9194
objectName: "StatusTextMessage_chatText"
9295

@@ -99,17 +102,18 @@ Item {
99102
anchors.leftMargin: d.isQuote ? Theme.halfPadding : 0
100103
anchors.right: parent.right
101104
opacity: !showMoreOpacityMask.active && !horizontalOpacityMask.active ? 1 : 0
105+
background: null
106+
leftPadding: 0
107+
rightPadding: 0
108+
topPadding: 0
109+
bottomPadding: 0
102110
text: d.text
103111
selectedTextColor: Theme.palette.directColor1
104-
selectionColor: Theme.palette.primaryColor3
105112
color: d.isQuote ? Theme.palette.baseColor1 : Theme.palette.directColor1
106-
font.family: Theme.baseFont.name
107-
font.pixelSize: Theme.primaryTextFontSize
108113
textFormat: Text.RichText
109114
wrapMode: root.convertToSingleLine ? Text.NoWrap : Text.Wrap
110115
readOnly: true
111-
selectByMouse: true // applies to mouse only, not touch
112-
enabled: !Utils.isMobile // eats the touch events, thus breaking the context menu since this is an edit (albeit readonly)
116+
selectByMouse: !Utils.isMobile // applies to mouse only, not touch
113117
onLinkActivated: function(link) {
114118
if(d.showDisabledTooltipForAddressEnsName(link)) {
115119
return
@@ -127,6 +131,7 @@ Item {
127131
x: hoverHandler.point.position.x - 60
128132
y: -disabledLinkTooltip.height + hoverHandler.point.position.y - 10
129133
}
134+
onPressAndHold: mouseEvent => root.pressAndHold(mouseEvent)
130135
}
131136

132137
StatusSyntaxHighlighter {

ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ TextArea {
7171
pixelSize: Theme.primaryTextFontSize
7272
}
7373

74-
selectByMouse: true
7574
persistentSelection: true
7675
wrapMode: TextEdit.WordWrap
7776

ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ ToolTip {
3030
margins: Theme.halfPadding
3131
delay: Utils.isMobile ? Application.styleHints.mousePressAndHoldInterval
3232
: 200
33+
timeout: Utils.isMobile ? 2500 : -1
3334

3435
background: Item {
3536
id: statusToolTipBackground

ui/imports/shared/controls/chat/EmojiReaction.qml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ Rectangle {
2626
StatusEmoji {
2727
id: statusEmoji
2828
anchors.centerIn: parent
29-
width: Theme.fontSize24
30-
height: Theme.fontSize24
29+
width: Theme.fontSize23
30+
height: Theme.fontSize23
3131
emojiId: root.emojiId
3232
}
3333

ui/imports/shared/status/StatusChatInput.qml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1036,7 +1036,10 @@ Rectangle {
10361036
}
10371037
}
10381038

1039-
closeHandler: () => commandBtn.highlighted = false
1039+
closeHandler: () => {
1040+
commandBtn.highlighted = false
1041+
destroy()
1042+
}
10401043
}
10411044
}
10421045

ui/imports/shared/views/chat/MessageView.qml

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import QtQuick
2+
import QtQuick.Controls
23
import QtQuick.Window
34
import QtQuick.Layouts
45
import QtModelsToolkit
@@ -879,9 +880,10 @@ Loader {
879880
root.messageStore.resendMessage(root.messageId)
880881
}
881882

882-
mouseArea {
883-
acceptedButtons: Qt.RightButton
884-
onClicked: mouse => root.openMessageContextMenu(mouse.x, mouse.y)
883+
ContextMenu.onRequested: pos => root.openMessageContextMenu(pos.x, pos.y)
884+
onPressAndHold: function (mouse) {
885+
if (mouse.wasHeld)
886+
root.openMessageContextMenu(mouse.x, mouse.y)
885887
}
886888

887889
messageDetails: StatusMessageDetails {

ui/imports/shared/views/chat/ProfileContextMenu.qml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ StatusMenu {
6666
StatusMenuSeparator {
6767
visible: root.profileType !== Constants.profileType.bridged
6868
topPadding: root.topPadding
69+
horizontalPadding: 0
6970
}
7071

7172
ViewProfileMenuItem {
@@ -129,6 +130,7 @@ StatusMenu {
129130
topPadding: root.topPadding
130131
visible: root.profileType !== Constants.profileType.bridged &&
131132
(removeNicknameAction.enabled || unblockAction.enabled || markUntrustworthyMenuItem.enabled || removeUntrustworthyMarkMenuItem.enabled || removeContactAction.enabled || blockMenuItem.enabled)
133+
horizontalPadding: 0
132134
}
133135

134136
// Remove Nickname

0 commit comments

Comments
 (0)