diff --git a/web/src/popover_menus.js b/web/src/popover_menus.js index c292fd8f5a..364aac18e6 100644 --- a/web/src/popover_menus.js +++ b/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( - $("#send_later")[0], - show_schedule_confirm_button, - new Date(), + + $popper.one("click", ".open_send_later_modal", () => { + // 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_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) => { - 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); - - 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); + $send_later_modal.one("click", "#clear_compose_schedule_state", (e) => { + overlays.close_active_modal(); + compose.reset_compose_scheduling_state(false); + e.preventDefault(); + e.stopPropagation(); + }); + }, + }); }); }, onHidden(instance) { diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index f4469dd694..b6215a351b 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -888,9 +888,10 @@ color: inherit; } - .send_later_popover_header, - .selected_send_later_time { - color: hsl(236deg 33% 90%); + #send_later_modal .send_later_input_group .send_later_date_input { + opacity: 0.8; + color: hsl(0deg 0% 100%); + background-color: hsl(0deg 0% 0% / 20%); } .nav-list > li > a, diff --git a/web/styles/popovers.css b/web/styles/popovers.css index c577c67b78..300a078d2e 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -861,14 +861,24 @@ ul { & hr { margin: 5px 0; } +} - .send_later_popover_header { - text-align: center; - font-weight: bold; +#send_later_modal { + .modal__content { + padding-bottom: 16px; } - .selected_send_later_time { - text-align: center; - margin-top: 3px; + .send_later_input_group { + display: flex; + + .send_later_date_input { + width: 100%; + cursor: pointer; + background: hsl(0deg 0% 100%); + + &:focus { + box-shadow: none; + } + } } } diff --git a/web/templates/send_later_modal.hbs b/web/templates/send_later_modal.hbs new file mode 100644 index 0000000000..a3002d0785 --- /dev/null +++ b/web/templates/send_later_modal.hbs @@ -0,0 +1,39 @@ + diff --git a/web/templates/send_later_popover.hbs b/web/templates/send_later_popover.hbs index e8abc27e2b..c17e603a10 100644 --- a/web/templates/send_later_popover.hbs +++ b/web/templates/send_later_popover.hbs @@ -1,36 +1,9 @@