mirror of https://github.com/zulip/zulip.git
compose: Migrate out-of-view-notification to new banner style.
This commit is contained in:
evykassirer
Tim Abbott
parent
d9723a3dd4
commit
ea9c4682a8
|
|
@ -7,7 +7,13 @@ import render_stream_does_not_exist_error from "../templates/compose_banner/stre
|
|||
export const WARNING = "warning";
|
||||
export const ERROR = "error";
|
||||
|
||||
const MESSAGE_SENT_CLASSNAMES = {
|
||||
sent_scroll_to_view: "sent_scroll_to_view",
|
||||
narrow_to_recipient: "narrow_to_recipient",
|
||||
};
|
||||
|
||||
export const CLASSNAMES = {
|
||||
...MESSAGE_SENT_CLASSNAMES,
|
||||
// warnings
|
||||
topic_resolved: "topic_resolved",
|
||||
recipient_not_subscribed: "recipient_not_subscribed",
|
||||
|
|
@ -32,6 +38,12 @@ export const CLASSNAMES = {
|
|||
user_not_subscribed: "user_not_subscribed",
|
||||
};
|
||||
|
||||
export function clear_message_sent_banners(): void {
|
||||
for (const classname of Object.values(MESSAGE_SENT_CLASSNAMES)) {
|
||||
$(`#compose_banners .${classname}`).remove();
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Replace with compose_ui.hide_compose_spinner() when it is converted to ts.
|
||||
function hide_compose_spinner(): void {
|
||||
$("#compose-send-button .loader").hide();
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import render_message_sent_banner from "../templates/compose_banner/message_sent
|
|||
import * as alert_words from "./alert_words";
|
||||
import * as blueslip from "./blueslip";
|
||||
import * as channel from "./channel";
|
||||
import * as compose_banner from "./compose_banner";
|
||||
import * as favicon from "./favicon";
|
||||
import * as hash_util from "./hash_util";
|
||||
import {$t} from "./i18n";
|
||||
|
|
@ -182,8 +183,7 @@ export function notify_above_composebox(
|
|||
}),
|
||||
);
|
||||
clear_compose_notifications();
|
||||
$("#out-of-view-notification").append($notification);
|
||||
$("#out-of-view-notification").show();
|
||||
$("#compose_banners").append($notification);
|
||||
}
|
||||
|
||||
if (window.electron_bridge !== undefined) {
|
||||
|
|
@ -620,7 +620,7 @@ export function notify_local_mixes(messages, need_user_to_scroll) {
|
|||
const link_text = $t({defaultMessage: "Scroll down to view your message."});
|
||||
notify_above_composebox(
|
||||
banner_text,
|
||||
"compose_notification_scroll_to_message",
|
||||
compose_banner.CLASSNAMES.sent_scroll_to_view,
|
||||
// Don't display a URL on hover for the "Scroll to bottom" link.
|
||||
null,
|
||||
link_msg_id,
|
||||
|
|
@ -634,8 +634,6 @@ export function notify_local_mixes(messages, need_user_to_scroll) {
|
|||
continue;
|
||||
}
|
||||
|
||||
const above_composebox_narrow_url = get_above_composebox_narrow_url(message);
|
||||
const classname = "compose_notification_narrow_by_topic";
|
||||
const link_text = $t(
|
||||
{defaultMessage: "Narrow to {message_recipient}"},
|
||||
{message_recipient: get_message_header(message)},
|
||||
|
|
@ -643,8 +641,8 @@ export function notify_local_mixes(messages, need_user_to_scroll) {
|
|||
|
||||
notify_above_composebox(
|
||||
banner_text,
|
||||
classname,
|
||||
above_composebox_narrow_url,
|
||||
compose_banner.CLASSNAMES.narrow_to_recipient,
|
||||
get_above_composebox_narrow_url(message),
|
||||
link_msg_id,
|
||||
link_text,
|
||||
);
|
||||
|
|
@ -678,7 +676,7 @@ export function notify_messages_outside_current_search(messages) {
|
|||
);
|
||||
notify_above_composebox(
|
||||
$t({defaultMessage: "Sent! Your recent message is outside the current search."}),
|
||||
"compose_notification_narrow_by_topic",
|
||||
compose_banner.CLASSNAMES.narrow_to_recipient,
|
||||
above_composebox_narrow_url,
|
||||
message.id,
|
||||
link_text,
|
||||
|
|
@ -687,9 +685,7 @@ export function notify_messages_outside_current_search(messages) {
|
|||
}
|
||||
|
||||
export function clear_compose_notifications() {
|
||||
$("#out-of-view-notification").empty();
|
||||
$("#out-of-view-notification").stop(true, true);
|
||||
$("#out-of-view-notification").hide();
|
||||
compose_banner.clear_message_sent_banners();
|
||||
scroll_to_message_banner_message_id = null;
|
||||
}
|
||||
|
||||
|
|
@ -699,7 +695,7 @@ export function reify_message_id(opts) {
|
|||
|
||||
// If a message ID that we're currently storing (as a link) has changed,
|
||||
// update that link as well
|
||||
for (const e of $("#out-of-view-notification a")) {
|
||||
for (const e of $("#compose_banners a")) {
|
||||
const $elem = $(e);
|
||||
const message_id = $elem.data("message-id");
|
||||
|
||||
|
|
@ -711,25 +707,28 @@ export function reify_message_id(opts) {
|
|||
}
|
||||
|
||||
export function register_click_handlers() {
|
||||
$("#out-of-view-notification").on("click", ".compose_notification_narrow_by_topic", (e) => {
|
||||
const message_id = $(e.currentTarget).data("message-id");
|
||||
narrow.by_topic(message_id, {trigger: "compose_notification"});
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
$("#out-of-view-notification").on("click", ".compose_notification_scroll_to_message", (e) => {
|
||||
const message_id = $(e.currentTarget).data("message-id");
|
||||
message_lists.current.select_id(message_id);
|
||||
navigate.scroll_to_selected();
|
||||
clear_compose_notifications();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
$("#out-of-view-notification").on("click", ".out-of-view-notification-close", (e) => {
|
||||
clear_compose_notifications();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
$("#compose_banners").on(
|
||||
"click",
|
||||
".narrow_to_recipient .above_compose_banner_action_link",
|
||||
(e) => {
|
||||
const message_id = $(e.currentTarget).data("message-id");
|
||||
narrow.by_topic(message_id, {trigger: "compose_notification"});
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
);
|
||||
$("#compose_banners").on(
|
||||
"click",
|
||||
".sent_scroll_to_view .above_compose_banner_action_link",
|
||||
(e) => {
|
||||
const message_id = $(e.currentTarget).data("message-id");
|
||||
message_lists.current.select_id(message_id);
|
||||
navigate.scroll_to_selected();
|
||||
clear_compose_notifications();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
export function handle_global_notification_updates(notification_name, setting) {
|
||||
|
|
|
|||
|
|
@ -320,6 +320,24 @@
|
|||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: hsl(147, 43%, 92%);
|
||||
border: 1px solid hsla(147, 57%, 25%, 0.4);
|
||||
color: hsl(147, 57%, 25%);
|
||||
|
||||
.compose_banner_close_button {
|
||||
color: hsla(147, 57%, 25%, 0.5);
|
||||
|
||||
&:hover {
|
||||
color: hsl(147, 57%, 25%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: hsla(147, 57%, 25%, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: hsl(50, 75%, 92%);
|
||||
border-color: hsla(38, 44%, 27%, 0.4);
|
||||
|
|
@ -414,31 +432,6 @@ div[id^="message-edit-send-status"],
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#out-of-view-notification {
|
||||
position: relative;
|
||||
margin-bottom: 6px;
|
||||
|
||||
background-color: hsla(152, 51%, 63%, 0.25);
|
||||
border: 1px solid hsla(0, 0%, 0%, 0.1);
|
||||
border-radius: 4px;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 4px;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
color: hsl(0, 0%, 0%);
|
||||
text-shadow: 0 1px 0 hsl(0, 0%, 100%);
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-notifications-content {
|
||||
padding: 4px 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.composition-area {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -172,6 +172,24 @@
|
|||
}
|
||||
|
||||
.compose_banner {
|
||||
&.success {
|
||||
background-color: hsl(147, 100%, 8%);
|
||||
border-color: hsla(149, 48%, 52%, 0.4);
|
||||
color: hsl(147, 51%, 55%);
|
||||
|
||||
.compose_banner_close_button {
|
||||
color: hsl(147, 51%, 55%, 0.5);
|
||||
|
||||
&:hover {
|
||||
color: hsl(147, 51%, 55%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: hsl(147, 51%, 55%, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: hsl(53, 100%, 11%);
|
||||
border-color: hsla(38, 44%, 60%, 0.4);
|
||||
|
|
@ -1289,10 +1307,6 @@
|
|||
color: hsla(126, 66%, 72%, 0.75);
|
||||
}
|
||||
|
||||
#out-of-view-notification {
|
||||
border: 1px solid hsl(144, 45%, 62%);
|
||||
}
|
||||
|
||||
#bots_lists_navbar .active a {
|
||||
color: hsl(0, 0%, 87%);
|
||||
background-color: hsl(212, 28%, 18%);
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@
|
|||
<span class="compose-send-status-close">×</span>
|
||||
<span id="compose-error-msg"></span>
|
||||
</div>
|
||||
<div id="out-of-view-notification" class="notification-alert"></div>
|
||||
<div class="composition-area">
|
||||
<form id="send_message_form" action="/json/messages" method="post">
|
||||
{{ csrf_input }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
<div class="compose-notifications-content">
|
||||
{{banner_text}} {{#if link_text}}<a {{#if above_composebox_narrow_url}}href="{{above_composebox_narrow_url}}"{{/if}} class="{{classname}}" data-message-id="{{link_msg_id}}">{{link_text}}</a>{{/if}}
|
||||
<button type="button" class="out-of-view-notification-close close">×</button>
|
||||
<div class="above_compose_banner compose_banner success {{classname}}">
|
||||
<p>
|
||||
{{banner_text}}
|
||||
{{#if link_text}} <a class="above_compose_banner_action_link" {{#if above_composebox_narrow_url}}href="{{above_composebox_narrow_url}}"{{/if}} data-message-id="{{link_msg_id}}">{{link_text}}</a>{{/if}}
|
||||
</p>
|
||||
<a role="button" class="zulip-icon zulip-icon-close compose_banner_close_button"></a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue