From 166bfa4cf83bcb012d2cc613e05ef64e27ba00df Mon Sep 17 00:00:00 2001 From: Ganesh Pawar Date: Thu, 24 Jun 2021 22:16:59 +0530 Subject: [PATCH] user_status: Migrate from overlay to modal. This also migrates from loading the modal dynamically rather than statically once at page initialization. With styling changes by tabbott to preserve the original look of the UI. Fixes #18278. --- static/js/popovers.js | 2 +- static/js/user_status_ui.js | 33 +++++++-------- static/styles/app_components.css | 2 +- static/styles/user_status.css | 56 +++---------------------- static/templates/set_status_overlay.hbs | 38 ++++++++--------- 5 files changed, 39 insertions(+), 92 deletions(-) diff --git a/static/js/popovers.js b/static/js/popovers.js index 79aec1aec9..a23238032e 100644 --- a/static/js/popovers.js +++ b/static/js/popovers.js @@ -932,7 +932,7 @@ export function register_click_handlers() { $("body").on("click", ".update_status_text", (e) => { hide_all(); - user_status_ui.open_overlay(); + user_status_ui.open_user_status_modal(); e.stopPropagation(); e.preventDefault(); diff --git a/static/js/user_status_ui.js b/static/js/user_status_ui.js index b27dd4d06d..afc8460d5f 100644 --- a/static/js/user_status_ui.js +++ b/static/js/user_status_ui.js @@ -7,20 +7,18 @@ import * as people from "./people"; import * as user_status from "./user_status"; export function input_field() { - return $(".user_status_overlay input.user_status"); + return $("#set_user_status_modal input.user_status"); } export function submit_button() { - return $(".user_status_overlay .set_user_status"); + return $("#set_user_status_modal .set_user_status"); } -export function open_overlay() { - const overlay = $(".user_status_overlay"); - overlays.open_overlay({ - name: "user_status_overlay", - overlay, - on_close() {}, - }); +export function open_user_status_modal() { + const rendered_set_status_overlay = render_set_status_overlay(); + $(".app").append(rendered_set_status_overlay); + + overlays.open_modal("#set_user_status_modal", {autoremove: true}); const user_id = people.my_current_user_id(); const old_status_text = user_status.get_status_text(user_id); @@ -34,8 +32,8 @@ export function open_overlay() { button.prop("disabled", true); } -export function close_overlay() { - overlays.close_overlay("user_status_overlay"); +export function close_user_status_modal() { + overlays.close_modal("#set_user_status_modal"); } export function submit_new_status() { @@ -45,14 +43,14 @@ export function submit_new_status() { const new_status_text = input_field().val().trim(); if (old_status_text === new_status_text) { - close_overlay(); + close_user_status_modal(); return; } user_status.server_update({ status_text: new_status_text, success() { - close_overlay(); + close_user_status_modal(); }, }); } @@ -86,9 +84,6 @@ export function clear_message() { } export function initialize() { - const rendered_set_status_overlay = render_set_status_overlay(); - $(".app").append(rendered_set_status_overlay); - $("body").on("click", ".user-status-value", (event) => { event.stopPropagation(); const user_status_value = $(event.currentTarget).text(); @@ -97,11 +92,11 @@ export function initialize() { update_button(); }); - $("body").on("click", ".user_status_overlay .set_user_status", () => { + $("body").on("click", "#set_user_status_modal .set_user_status", () => { submit_new_status(); }); - $("body").on("keypress", ".user_status_overlay .user_status", (event) => { + $("body").on("keypress", "#set_user_status_modal .user_status", (event) => { if (event.key === "Enter") { event.preventDefault(); @@ -109,7 +104,7 @@ export function initialize() { } }); - $("body").on("keyup", ".user_status_overlay input.user_status", () => { + $("body").on("keyup", "#set_user_status_modal input.user_status", () => { update_button(); toggle_clear_message_button(); }); diff --git a/static/styles/app_components.css b/static/styles/app_components.css index 69b56f53ba..3c2a41ec3a 100644 --- a/static/styles/app_components.css +++ b/static/styles/app_components.css @@ -367,7 +367,7 @@ div.overlay { box-shadow: none; z-index: 5; - .user_status_overlay & { + #set_user_status_modal & { margin-left: -26px; right: 0; padding-top: 6px; diff --git a/static/styles/user_status.css b/static/styles/user_status.css index 05acd3e8d1..c527c0aaeb 100644 --- a/static/styles/user_status.css +++ b/static/styles/user_status.css @@ -1,60 +1,16 @@ -.user_status_overlay { - .overlay-content { - width: 384px; - margin: 0 auto; - position: relative; - top: calc((30vh - 50px) / 2); - border-radius: 4px; - overflow: hidden; - background-color: hsl(0, 0%, 100%); - - @media (width < $ml_min) { - width: 100%; - } - } +#set_user_status_modal { + /* A narrower width is more attractive for this modal. */ + width: 384px; input.user_status { - width: 336px; + width: 95%; @media (width < $ml_min) { - width: 94%; + width: 92%; } } - .user-status-header { - padding-top: 4px; - padding-bottom: 4px; - height: 5%; - width: 100%; - text-align: center; - border-bottom: 1px solid hsl(0, 0%, 87%); - } - - .user-status-header h1 { - margin: 0; - font-size: 1.5em; - } - - .user-status-header .exit { - font-weight: 400; - position: absolute; - top: 10px; - right: 10px; - color: hsl(0, 0%, 67%); - cursor: pointer; - } - - .user-status-header .exit-sign { - position: relative; - top: 1px; - margin-left: 3px; - font-size: 1.5rem; - line-height: 1; - font-weight: 600; - cursor: pointer; - } - .user-status-options { - padding: 0 20px 3px; + padding: 0 5px 3px; button.user-status-value:hover { /* Important is required for generic night them styling to not diff --git a/static/templates/set_status_overlay.hbs b/static/templates/set_status_overlay.hbs index 71c04c8573..5d2eb5f368 100644 --- a/static/templates/set_status_overlay.hbs +++ b/static/templates/set_status_overlay.hbs @@ -1,18 +1,14 @@ -