Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

user_status: Fix press enter to open status emoji picker. 

As reported on #27270, the emoji picker in the set status modal was
not opening when pressing enter. This commit adds a keypress event
listener to the emoji picker in the set status modal, and opens the
emoji picker when the enter key is pressed.

Fixes part of #27270.
This commit is contained in:
Sayam Samal 2023-11-03 05:31:42 +05:30 committed by Tim Abbott
parent bcb7c0a65a
commit b9202ee1db
3 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/emoji_picker.js
View File

@ -796,10 +796,10 @@ function register_click_handlers() {
); );
}); });
$("body").on("click", "#set-user-status-modal #selected_emoji", (e) => { $("body").on("click", "#set-user-status-modal #selected_emoji .status-emoji-wrapper", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
toggle_emoji_popover(e.target, undefined, {placement: "bottom"}); toggle_emoji_popover(e.currentTarget, undefined, {placement: "bottom"});
if (is_open()) { if (is_open()) {
// Because the emoji picker gets drawn on top of the user // Because the emoji picker gets drawn on top of the user
// status modal, we need this hack to make clicking outside // status modal, we need this hack to make clicking outside
@ -812,6 +812,12 @@ function register_click_handlers() {
} }
}); });
$("body").on(
"keydown",
"#set-user-status-modal #selected_emoji .status-emoji-wrapper",
ui_util.convert_enter_to_click,
);
$(document).on("click", ".emoji-popover-emoji.status-emoji", function (e) { $(document).on("click", ".emoji-popover-emoji.status-emoji", function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

2
web/styles/user_status.css
View File

@ -23,7 +23,7 @@
.status-emoji-wrapper { .status-emoji-wrapper {
padding: 4px 8px; padding: 4px 8px;
border-right: 1px solid; border-right: 1px solid;
border-color: inherit; border-color: hsl(0deg 0% 0% / 60%);
cursor: pointer; cursor: pointer;
.selected-emoji { .selected-emoji {

4
web/templates/set_status_overlay.hbs
View File

@ -1,7 +1,9 @@
<div class="new-style user-status-content-wrapper"> <div class="new-style user-status-content-wrapper">
<div class="status-emoji-wrapper tippy-zulip-tooltip" data-tippy-content="{{t 'Select emoji' }}" data-tippy-placement="top" aria-label="{{t 'Select emoji' }}" tabindex="0" id="selected_emoji"> <div class="tippy-zulip-tooltip" data-tippy-content="{{t 'Select emoji' }}" data-tippy-placement="top" aria-label="{{t 'Select emoji' }}" id="selected_emoji">
<div class="status-emoji-wrapper" tabindex="0">
{{> status_emoji_selector}} {{> status_emoji_selector}}
</div> </div>
</div>
<input type="text" class="user-status modal_text_input" placeholder="{{t 'Your status' }}" maxlength="60"/> <input type="text" class="user-status modal_text_input" placeholder="{{t 'Your status' }}" maxlength="60"/>
<button type="button" class="btn clear_search_button" id="clear_status_message_button" disabled="disabled"> <button type="button" class="btn clear_search_button" id="clear_status_message_button" disabled="disabled">
<i class="fa fa-remove" aria-hidden="true"></i> <i class="fa fa-remove" aria-hidden="true"></i>