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

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

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

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;

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

static/templates/set_status_overlay.hbs

@@ -1,18 +1,14 @@
-<div class="user_status_overlay overlay new-style" data-overlay="user_status_overlay" aria-hidden="true">
-    <div class="overlay-content modal-bg">
-        <div class="user-status-header">
-            <h1>{{t "Set a status" }}</h1>
-            <div class="exit">
-                <span class="exit-sign">&times;</span>
-            </div>
-        </div>
-        <div class="modal-body">
-            <label for="user_status">{{t "Status message" }}</label>
-            <input type="text" class="user_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 id="set_user_status_modal" class="modal modal-bg hide fade new-style" tabindex="-1" 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">
+        <label for="user_status">{{t "Status message" }}</label>
+        <input type="text" class="user_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 class="user-status-options">
             <button type="button" class="button no-style user-status-value">{{t "In a meeting" }}</button>
             <button type="button" class="button no-style user-status-value">{{t "Commuting" }}</button>
@@ -20,11 +16,11 @@
             <button type="button" class="button no-style user-status-value">{{t "Vacationing" }}</button>
             <button type="button" class="button no-style user-status-value">{{t "Working remotely" }}</button>
         </div>
-        <div class="modal-footer">
-            <button class="button exit small rounded">{{t "Cancel" }}</button>
-            <button class="sea-green small rounded button set_user_status">
-                {{t "Save" }}
-            </button>
-        </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>
 </div>