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,27 +865,10 @@ export function initialize() {
         },
         onShow(instance) {
             popovers.hide_all_except_sidebars(instance);
-
-            // Only show send later options that are possible today.
-            const date = new Date();
-            const hours = date.getHours();
-            let possible_send_later_today = {};
-            if (hours <= 8) {
-                possible_send_later_today = send_later_today;
-            } else if (hours <= 15) {
-                possible_send_later_today.today_four_pm = send_later_today.today_four_pm;
-            } else {
-                possible_send_later_today = false;
-            }
-
             const formatted_send_later_time = get_formatted_selected_send_later_time();
-
             instance.setContent(
                 parse_html(
                     render_send_later_popover({
-                        possible_send_later_today,
-                        send_later_tomorrow,
-                        send_later_custom,
                         formatted_send_later_time,
                     }),
                 ),
@@ -888,28 +878,67 @@ export function initialize() {
         },
         onMount(instance) {
             const $popper = $(instance.popper);
-            $popper.one("click", "#send-later-custom-input", () => {
+
-                flatpickr.show_flatpickr(
+            $popper.one("click", ".open_send_later_modal", () => {
-                    $("#send_later")[0],
+                // Only show send later options that are possible today.
-                    show_schedule_confirm_button,
+                const date = new Date();
-                    new Date(),
+                const hours = date.getHours();
+                let possible_send_later_today = {};
+                if (hours <= 8) {
+                    possible_send_later_today = send_later_today;
+                } else if (hours <= 15) {
+                    possible_send_later_today.today_four_pm = send_later_today.today_four_pm;
+                } else {
+                    possible_send_later_today = false;
+                }
+
+                const formatted_send_later_time = get_selected_send_later_time();
+                $("body").append(
+                    render_send_later_modal({
+                        possible_send_later_today,
+                        send_later_tomorrow,
+                        send_later_custom,
+                        formatted_send_later_time,
+                    }),
                 );
-            });
+                overlays.open_modal("send_later_modal", {
+                    autoremove: true,
+                    on_show() {
+                        const $send_later_modal = $("#send_later_modal");
+                        $send_later_modal.on("keydown", (e) => {
+                            if (e.key === "Enter") {
+                                e.target.click();
+                            }
+                        });
+                        $send_later_modal.one("click", ".send_later_date_input", (e) => {
+                            flatpickr.show_flatpickr(
+                                $(".send_later_date_input")[0],
+                                update_scheduled_date_from_modal,
+                                new Date(),
+                            );
+                            e.preventDefault();
+                            e.stopPropagation();
+                        });
+                        $send_later_modal.one(
+                            "click",
+                            ".send_later_today, .send_later_tomorrow",
+                            (e) => {
+                                const send_at_time = set_compose_box_schedule(e.currentTarget);
+                                const not_from_flatpickr = true;
+                                update_scheduled_date_from_modal(send_at_time, not_from_flatpickr);
+                                e.preventDefault();
+                                e.stopPropagation();
+                            },
+                        );
 
-            $popper.one("click", ".send_later_today, .send_later_tomorrow", (e) => {
+                        $send_later_modal.one("click", "#clear_compose_schedule_state", (e) => {
-                const send_at_time = set_compose_box_schedule(e.currentTarget);
+                            overlays.close_active_modal();
-                const not_from_flatpickr = true;
+                            compose.reset_compose_scheduling_state(false);
-                show_schedule_confirm_button(send_at_time, not_from_flatpickr);
+                            e.preventDefault();
-
+                            e.stopPropagation();
-                instance.hide();
+                        });
-                e.stopPropagation();
+                    },
-                e.preventDefault();
+                });
-            });
-
-            $popper.one("click", "#clear_compose_schedule_state", () => {
-                // We don't to want to reset the edit state of the scheduled message when
-                // clicks "Now", since the user can still change the date to a future date.
-                compose.reset_compose_scheduling_state(false);
             });
         },
         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>