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

user_status: Migrate modal to dialog_widget.

This commit is contained in:
Ganesh Pawar 2021-07-07 12:46:19 +05:30 committed by Tim Abbott
parent f43d3b9986
commit 49e9cf10de
5 changed files with 88 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend_tests/puppeteer_tests/user-status.ts
View File

@ -25,7 +25,7 @@ async function open_set_user_status_modal(page: Page): Promise<void> {
);
// Wait for the modal to completely open.
await page.waitForFunction(() => document.activeElement?.classList.contains("user_status"));
await common.wait_for_micromodal_to_open(page);
}
async function test_user_status(page: Page): Promise<void> {
@ -55,7 +55,7 @@ async function test_user_status(page: Page): Promise<void> {
await page.waitForSelector(".emoji-info-popover", {hidden: true});
await page.waitForSelector(`.selected_emoji${tada_emoji_selector}`);
await page.click(".set_user_status");
await page.click("#set_user_status_modal .dialog_submit_button");
// It should close the modal after saving.
await page.waitForSelector("#set_user_status_modal", {hidden: true});

4
static/js/emoji_picker.js
View File

@ -195,7 +195,7 @@ export function hide_emoji_popover() {
// Re-enable clicking events for other elements after closing
// the popover. This is the inverse of the hack of in the
// handler that opens the "user status modal" emoji picker.
$(".app, .header, .modal-backdrop, #set_user_status_modal").css("pointer-events", "all");
$(".app, .header, .modal__overlay, #set_user_status_modal").css("pointer-events", "all");
}
if (reactions_popped()) {
current_message_emoji_popover_elem.popover("destroy");
@ -779,7 +779,7 @@ export function register_click_handlers() {
// status modal, we need this hack to make clicking outside
// the emoji picker only close the emoji picker, and not the
// whole user status modal.
$(".app, .header, .modal-backdrop, #set_user_status_modal").css("pointer-events", "none");
$(".app, .header, .modal__overlay, #set_user_status_modal").css("pointer-events", "none");
});
$(document).on("click", ".emoji-popover-emoji.status_emoji", function (e) {

123
static/js/user_status_ui.js
View File

@ -4,8 +4,8 @@ import * as emoji from "../shared/js/emoji";
import render_set_status_overlay from "../templates/set_status_overlay.hbs";
import render_status_emoji_selector from "../templates/status_emoji_selector.hbs";
import {$t} from "./i18n";
import * as overlays from "./overlays";
import * as dialog_widget from "./dialog_widget";
import {$t, $t_html} from "./i18n";
import * as people from "./people";
import * as user_status from "./user_status";
@ -21,7 +21,7 @@ export function input_field() {
}
export function submit_button() {
return $("#set_user_status_modal .set_user_status");
return $("#set_user_status_modal .dialog_submit_button");
}
export function open_user_status_modal() {
@ -31,24 +31,18 @@ export function open_user_status_modal() {
default_status_messages_and_emoji_info,
selected_emoji_info,
});
$(".app").append(rendered_set_status_overlay);
overlays.open_modal("#set_user_status_modal", {autoremove: true});
const old_status_text = user_status.get_status_text(user_id);
const old_emoji_info = user_status.get_status_emoji(user_id) || {};
set_selected_emoji_info(old_emoji_info);
const field = input_field();
field.val(old_status_text);
field.trigger("select");
toggle_clear_message_button();
const button = submit_button();
button.prop("disabled", true);
}
export function close_user_status_modal() {
overlays.close_modal("#set_user_status_modal");
dialog_widget.launch({
html_heading: $t_html({defaultMessage: "Set status"}),
html_body: rendered_set_status_overlay,
html_submit_button: $t_html({defaultMessage: "Save"}),
id: "set_user_status_modal",
on_click: submit_new_status,
post_render: user_status_post_render,
on_shown: () => {
input_field().trigger("focus");
},
});
}
export function submit_new_status() {
@ -64,7 +58,7 @@ export function submit_new_status() {
old_emoji_info.reaction_type === selected_emoji_info.reaction_type &&
old_emoji_info.emoji_code === selected_emoji_info.emoji_code
) {
close_user_status_modal();
dialog_widget.close_modal();
return;
}
@ -74,7 +68,7 @@ export function submit_new_status() {
emoji_code: selected_emoji_info.emoji_code || "",
reaction_type: selected_emoji_info.reaction_type || "",
success() {
close_user_status_modal();
dialog_widget.close_modal();
},
});
}
@ -126,6 +120,51 @@ function rebuild_status_emoji_selector_ui(selected_emoji_info) {
$("#set_user_status_modal .status_emoji_wrapper").html(rendered_status_emoji_selector);
}
function user_status_post_render() {
const user_id = people.my_current_user_id();
const old_status_text = user_status.get_status_text(user_id);
const old_emoji_info = user_status.get_status_emoji(user_id) || {};
set_selected_emoji_info(old_emoji_info);
const field = input_field();
field.val(old_status_text);
toggle_clear_message_button();
const button = submit_button();
button.prop("disabled", true);
$("#set_user_status_modal .user-status-value").on("click", (event) => {
event.stopPropagation();
const user_status_value = $(event.currentTarget).text().trim();
$("input.user_status").val(user_status_value);
const emoji_info = default_status_messages_and_emoji_info.find(
(status) => status.status_text === user_status_value,
).emoji;
set_selected_emoji_info(emoji_info);
toggle_clear_message_button();
update_button();
});
input_field().on("keypress", (event) => {
if (event.key === "Enter") {
event.preventDefault();
submit_new_status();
}
});
input_field().on("keyup", () => {
update_button();
toggle_clear_message_button();
});
$("#clear_status_message_button").on("click", () => {
clear_message();
set_selected_emoji_info();
update_button();
});
}
export function initialize() {
default_status_messages_and_emoji_info = [
{
@ -149,44 +188,4 @@ export function initialize() {
emoji: emoji.get_emoji_details_by_name("house"),
},
];
$("body").on("click", ".user-status-value", (event) => {
event.stopPropagation();
const user_status_value = $(event.currentTarget).text().trim();
$("input.user_status").val(user_status_value);
const emoji_info = default_status_messages_and_emoji_info.find(
(status) => status.status_text === user_status_value,
).emoji;
set_selected_emoji_info(emoji_info);
toggle_clear_message_button();
update_button();
});
$("body").on("click", "#set_user_status_modal .set_user_status", () => {
submit_new_status();
});
$("body").on("shown.bs.modal", "#set_user_status_modal", () => {
const field = input_field();
field.trigger("focus");
});
$("body").on("keypress", "#set_user_status_modal .user_status", (event) => {
if (event.key === "Enter") {
event.preventDefault();
submit_new_status();
}
});
$("body").on("keyup", "#set_user_status_modal input.user_status", () => {
update_button();
toggle_clear_message_button();
});
$("body").on("click", "#clear_status_message_button", () => {
clear_message();
set_selected_emoji_info();
update_button();
});
}

10
static/styles/user_status.css
View File

@ -1,16 +1,6 @@
#set_user_status_modal {
/* A narrower width is more attractive for this modal. */
width: 384px;
@media (width < $ml_min) {
width: 100%;
}
/* Center `position-fixed` modal */
left: 50%;
transform: translate(-50%, -50%);
margin-left: 0;
/* We are setting a z-index so emoji popover can be visible on top of it. */
z-index: 105;
.user_status_content_wrapper {
display: flex;

60
static/templates/set_status_overlay.hbs
View File

@ -1,39 +1,25 @@
<div id="set_user_status_modal" class="modal modal-bg hide fade new-style" role="dialog" aria-labelledby="set_user_status_modal_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close close-modal-btn" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
<h3 id="set_user_status_modal_label">{{t "Set status" }} </h3>
</div>
<div class="modal-body">
<div class="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">
{{> status_emoji_selector}}
</div>
<input type="text" class="user_status" placeholder="{{t 'Your status' }}" maxlength="60"/>
<button type="button" class="btn clear_search_button" id="clear_status_message_button" disabled="disabled">
<i class="fa fa-remove" aria-hidden="true"></i>
</button>
</div>
<div class="user-status-options">
{{#each default_status_messages_and_emoji_info}}
<button type="button" class="button no-style user-status-value">
{{#if emoji.emoji_alt_code}}
<div class="emoji_alt_code">&nbsp:{{emoji.emoji_name}}:</div>
{{else}}
{{#if emoji.url}}
<img src="{{emoji.url}}" class="emoji status_emoji" />
{{else}}
<div class="emoji status_emoji emoji-{{emoji.emoji_code}}"></div>
{{/if}}
{{/if}}
{{status_text}}
</button>
{{/each}}
</div>
</div>
<div class="modal-footer">
<button class="button rounded close-modal-btn" data-dismiss="modal">{{t "Cancel" }}</button>
<button class="button rounded sea-green set_user_status">
{{t "Save" }}
</button>
<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">
{{> status_emoji_selector}}
</div>
<input type="text" class="user_status" placeholder="{{t 'Your status' }}" maxlength="60"/>
<button type="button" class="btn clear_search_button" id="clear_status_message_button" disabled="disabled">
<i class="fa fa-remove" aria-hidden="true"></i>
</button>
</div>
<div class="new-style user-status-options">
{{#each default_status_messages_and_emoji_info}}
<button type="button" class="button no-style user-status-value">
{{#if emoji.emoji_alt_code}}
<div class="emoji_alt_code">&nbsp:{{emoji.emoji_name}}:</div>
{{else}}
{{#if emoji.url}}
<img src="{{emoji.url}}" class="emoji status_emoji" />
{{else}}
<div class="emoji status_emoji emoji-{{emoji.emoji_code}}"></div>
{{/if}}
{{/if}}
{{status_text}}
</button>
{{/each}}
</div>