Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

send_later: Move some options to a modal.

This commit is contained in:
Aman Agrawal 2023-04-24 18:29:07 +00:00 committed by Tim Abbott
parent 13592b4495
commit e89cbf0ac1
5 changed files with 128 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
web/src/popover_menus.js
View File

@ -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) {

7
web/styles/dark_theme.css
View File

@ -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,

22
web/styles/popovers.css
View File

@ -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;
}
}
}
}

39
web/templates/send_later_modal.hbs Normal file
View File

@ -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>

33
web/templates/send_later_popover.hbs
View File

@ -1,36 +1,9 @@
<ul id="send_later_popover" class="nav nav-list">
<li class="send_later_popover_header">
{{t "Schedule message" }}
</li>
{{#if formatted_send_later_time }}
<li class="selected_send_later_time">
{{ formatted_send_later_time }}
<li>
<a class="open_send_later_modal" tabindex="0">{{t "Schedule message" }}</a>
</li>
<hr />
<li>
<a id="clear_compose_schedule_state">{{t "Now" }}</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>
<a href="#scheduled" tabindex="0">{{t "View scheduled messages" }}</a>
</li>
</ul>