send_later: Move some options to a modal.

web/src/popover_menus.js

@@ -15,6 +15,7 @@ import render_delete_topic_modal from "../templates/confirm_dialog/confirm_delet
 import render_drafts_sidebar_actions from "../templates/drafts_sidebar_action.hbs";
 import render_left_sidebar_stream_setting_popover from "../templates/left_sidebar_stream_setting_popover.hbs";
 import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
+import render_send_later_modal from "../templates/send_later_modal.hbs";
 import render_send_later_popover from "../templates/send_later_popover.hbs";
 import render_starred_messages_sidebar_actions from "../templates/starred_messages_sidebar_actions.hbs";
 import render_topic_sidebar_actions from "../templates/topic_sidebar_actions.hbs";
@@ -36,6 +37,7 @@ import * as message_edit_history from "./message_edit_history";
 import * as message_lists from "./message_lists";
 import * as message_viewport from "./message_viewport";
 import * as narrow_state from "./narrow_state";
+import * as overlays from "./overlays";
 import * as popover_menus_data from "./popover_menus_data";
 import * as popovers from "./popovers";
 import * as read_receipts from "./read_receipts";
@@ -246,6 +248,11 @@ export function show_schedule_confirm_button(send_at_time, not_from_flatpickr =
     $("#compose-send-button").hide();
 }
 
+function update_scheduled_date_from_modal(send_at_time, not_from_flatpickr = false) {
+    overlays.close_active_modal();
+    show_schedule_confirm_button(send_at_time, not_from_flatpickr);
+}
+
 export function initialize() {
     tippy_no_propagation("#streams_inline_icon", {
         onShow(instance) {
@@ -858,7 +865,21 @@ export function initialize() {
         },
         onShow(instance) {
             popovers.hide_all_except_sidebars(instance);
+            const formatted_send_later_time = get_formatted_selected_send_later_time();
+            instance.setContent(
+                parse_html(
+                    render_send_later_popover({
+                        formatted_send_later_time,
+                    }),
+                ),
+            );
+            popover_instances.send_later = instance;
+            $(instance.popper).one("click", instance.hide);
+        },
+        onMount(instance) {
+            const $popper = $(instance.popper);
 
+            $popper.one("click", ".open_send_later_modal", () => {
                 // Only show send later options that are possible today.
                 const date = new Date();
                 const hours = date.getHours();
@@ -871,45 +892,53 @@ export function initialize() {
                     possible_send_later_today = false;
                 }
 
-            const formatted_send_later_time = get_formatted_selected_send_later_time();
+                const formatted_send_later_time = get_selected_send_later_time();
-
+                $("body").append(
-            instance.setContent(
+                    render_send_later_modal({
-                parse_html(
-                    render_send_later_popover({
                         possible_send_later_today,
                         send_later_tomorrow,
                         send_later_custom,
                         formatted_send_later_time,
                     }),
-                ),
                 );
-            popover_instances.send_later = instance;
+                overlays.open_modal("send_later_modal", {
-            $(instance.popper).one("click", instance.hide);
+                    autoremove: true,
-        },
+                    on_show() {
-        onMount(instance) {
+                        const $send_later_modal = $("#send_later_modal");
-            const $popper = $(instance.popper);
+                        $send_later_modal.on("keydown", (e) => {
-            $popper.one("click", "#send-later-custom-input", () => {
+                            if (e.key === "Enter") {
+                                e.target.click();
+                            }
+                        });
+                        $send_later_modal.one("click", ".send_later_date_input", (e) => {
                             flatpickr.show_flatpickr(
-                    $("#send_later")[0],
+                                $(".send_later_date_input")[0],
-                    show_schedule_confirm_button,
+                                update_scheduled_date_from_modal,
                                 new Date(),
                             );
+                            e.preventDefault();
+                            e.stopPropagation();
                         });
-
+                        $send_later_modal.one(
-            $popper.one("click", ".send_later_today, .send_later_tomorrow", (e) => {
+                            "click",
+                            ".send_later_today, .send_later_tomorrow",
+                            (e) => {
                                 const send_at_time = set_compose_box_schedule(e.currentTarget);
                                 const not_from_flatpickr = true;
-                show_schedule_confirm_button(send_at_time, not_from_flatpickr);
+                                update_scheduled_date_from_modal(send_at_time, not_from_flatpickr);
-
-                instance.hide();
-                e.stopPropagation();
                                 e.preventDefault();
-            });
+                                e.stopPropagation();
+                            },
+                        );
 
-            $popper.one("click", "#clear_compose_schedule_state", () => {
+                        $send_later_modal.one("click", "#clear_compose_schedule_state", (e) => {
-                // We don't to want to reset the edit state of the scheduled message when
+                            overlays.close_active_modal();
-                // clicks "Now", since the user can still change the date to a future date.
                             compose.reset_compose_scheduling_state(false);
+                            e.preventDefault();
+                            e.stopPropagation();
+                        });
+                    },
+                });
             });
         },
         onHidden(instance) {

web/styles/dark_theme.css

@@ -888,9 +888,10 @@
         color: inherit;
     }
 
-    .send_later_popover_header,
+    #send_later_modal .send_later_input_group .send_later_date_input {
-    .selected_send_later_time {
+        opacity: 0.8;
-        color: hsl(236deg 33% 90%);
+        color: hsl(0deg 0% 100%);
+        background-color: hsl(0deg 0% 0% / 20%);
     }
 
     .nav-list > li > a,

web/styles/popovers.css

@@ -861,14 +861,24 @@ ul {
     & hr {
         margin: 5px 0;
     }
+}
 
-    .send_later_popover_header {
+#send_later_modal {
-        text-align: center;
+    .modal__content {
-        font-weight: bold;
+        padding-bottom: 16px;
     }
 
-    .selected_send_later_time {
+    .send_later_input_group {
-        text-align: center;
+        display: flex;
-        margin-top: 3px;
+
+        .send_later_date_input {
+            width: 100%;
+            cursor: pointer;
+            background: hsl(0deg 0% 100%);
+
+            &:focus {
+                box-shadow: none;
+            }
+        }
     }
 }

web/templates/send_later_modal.hbs

@@ -0,0 +1,39 @@
+<div class="micromodal" id="send_later_modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1">
+        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="send_later_modal_label">
+            <header class="modal__header">
+                <h1 class="modal__title" id="send_later_modal_label">
+                    {{t "Schedule message" }}
+                </h1>
+                <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
+            </header>
+            <main class="modal__content">
+                <div class="send_later_input_group">
+                    <input class="send_later_date_input" type="text" placeholder="{{t 'Select Date and time' }}" readonly="readonly"
+                      {{#if formatted_send_later_time }}value="{{formatted_send_later_time}}"{{/if}} />
+                </div>
+                <div class="send_later_options">
+                    <ul class="nav nav-list">
+                        {{#if formatted_send_later_time }}
+                        <li>
+                            <a id="clear_compose_schedule_state" tabindex="0">{{t "Now" }}</a>
+                        </li>
+                        {{/if}}
+                        {{#if possible_send_later_today}}
+                            {{#each possible_send_later_today}}
+                                <li>
+                                    <a id="{{@key}}" class="send_later_today" tabindex="0">{{this.text}}</a>
+                                </li>
+                            {{/each}}
+                        {{/if}}
+                        {{#each send_later_tomorrow}}
+                            <li>
+                                <a id="{{@key}}" class="send_later_tomorrow" tabindex="0">{{this.text}}</a>
+                            </li>
+                        {{/each}}
+                    </ul>
+                </div>
+            </main>
+        </div>
+    </div>
+</div>

web/templates/send_later_popover.hbs

@@ -1,36 +1,9 @@
 <ul id="send_later_popover" class="nav nav-list">
-    <li class="send_later_popover_header">
+    <li>
-        {{t "Schedule message" }}
+        <a class="open_send_later_modal" tabindex="0">{{t "Schedule message" }}</a>
-    </li>
-    {{#if formatted_send_later_time }}
-    <li class="selected_send_later_time">
-        {{ formatted_send_later_time }}
     </li>
     <hr />
     <li>
-        <a id="clear_compose_schedule_state">{{t "Now" }}</a>
+        <a href="#scheduled" tabindex="0">{{t "View scheduled messages" }}</a>
-    </li>
-    {{/if}}
-    <hr />
-    {{#if possible_send_later_today}}
-        {{#each possible_send_later_today}}
-            <li>
-                <a id="{{@key}}" class="send_later_today">{{this.text}}</a>
-            </li>
-        {{/each}}
-        <hr />
-    {{/if}}
-    {{#each send_later_tomorrow}}
-        <li>
-            <a id="{{@key}}" class="send_later_tomorrow">{{this.text}}</a>
-        </li>
-    {{/each}}
-    <hr />
-    <li>
-        <a id="send-later-custom-input">{{send_later_custom.text}}</a>
-    </li>
-    <hr />
-    <li>
-        <a href="#scheduled">{{t "View scheduled messages" }}</a>
     </li>
 </ul>