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

compose: Rework alignment of upper elements, and redesign close icon. 

We now right align recipient input (even at very narrow widths) and
banners to the textbox, and move the close button to the absolute top
right corner of the compose box, updating the icon to be slimmer, bigger
and purplish, and adding a background highlight on hover.

This involved refactoring the send control area width into a responsive
css variable, and simplifying the html structure of the compose box.

Fixes: #28792.
This commit is contained in:
N-Shar-ma 2024-06-12 17:59:41 +05:30 committed by Tim Abbott
parent 7ebbdd942d
commit 906a9ca8f2
5 changed files with 48 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/compose_actions.ts
View File

@ -149,7 +149,6 @@ export function autosize_message_content(opts: ComposeActionsStartOpts): void {
export function expand_compose_box(): void {
$("#compose_close").attr("data-tooltip-template-id", "compose_close_tooltip_template");
$("#compose_close").show();
$("#compose_controls").hide();
$(".message_comp").show();
}
@ -395,7 +394,6 @@ export function cancel(): void {
return;
}
hide_box();
$("#compose_close").hide();
clear_box();
compose_banner.clear_message_sent_banners();
call_hooks(compose_cancel_hooks);

9
web/src/tippyjs.ts
View File

@ -258,12 +258,9 @@ export function initialize(): void {
});
tippy.delegate("body", {
target: [
"#compose_top_right [data-tippy-content]",
".expand-composebox-button",
".collapse-composebox-button",
"#compose_top_right [data-tooltip-template-id]",
].join(","),
target: ["#compose_close", ".expand-composebox-button", ".collapse-composebox-button"].join(
",",
),
delay: LONG_HOVER_DELAY,
appendTo: () => document.body,
onHidden(instance) {

14
web/styles/app_variables.css
View File

@ -166,6 +166,20 @@
*/
--composebox-buttons-width: 25px;
/*
Width of the send menu area with the Send button, Draft(s) button
and the vdots.
*/
--compose-send-controls-width: 112px;
@media ((width >= $sm_min) and (width < $mc_min)) {
--compose-send-controls-width: 62px;
}
@media (width < $sm_min) {
--compose-send-controls-width: 28px;
}
/*
Width to be reserved for document scrollbar when scrolling is disabled.
Using `scrollbar-gutter` would be more appropriate but doesn't has wide

86
web/styles/compose.css
View File

@ -142,6 +142,9 @@
#compose_banners {
max-height: min(25vh, 240px);
overflow-y: auto;
/* Align to compose controls; that's 112px width,
plus 6px of grid gap for 118px here. */
margin-right: calc(var(--compose-send-controls-width) + 6px);
}
}
@ -256,25 +259,15 @@
display: grid;
/* Vlad's design calls for 122px for the send column
at its widest; 112px accounts for 6px of gap and
4px outside padding.
TODO: get this value into a CSS variable. */
grid-template: minmax(0, 1fr) 32px / minmax(0, 1fr) 112px;
4px outside padding. */
grid-template: minmax(0, 1fr) 32px / minmax(0, 1fr) var(
--compose-send-controls-width
);
grid-template-areas:
"message-content-container message-send-controls-container"
"message-formatting-controls-container . ";
gap: 4px 6px;
margin-top: 5px;
@media ((width >= $sm_min) and (width < $mc_min)) {
/* Drop to a 62px wide send column. */
grid-template-columns: minmax(0, 1fr) 62px;
}
@media (width < $sm_min) {
/* Drop to a 28px wide send column. */
grid-template-columns: minmax(0, 1fr) 28px;
}
}
.message_content {
@ -419,53 +412,32 @@
align-items: flex-start;
/* Matched to 6px grid-gap on .messagebox grid. */
padding-bottom: 6px;
}
#compose_top_right {
display: flex;
align-items: center;
height: var(--compose-recipient-box-min-height);
/* Align to compose controls; that's 112px width,
plus 6px of grid gap for 118px here.
TODO: Make variables here; expanded use of grid
on the compose box will make these unnecessary,
eventually. */
width: calc(112px + 6px);
justify-content: flex-end;
@media ((width >= $sm_min) and (width < $mc_min)) {
/* Align to compose controls at narrower widths */
width: calc(62px + 6px);
}
@media (width < $sm_min) {
/* Don't attempt to control the width
at narrowest widths. */
width: auto;
}
& button {
background: transparent;
color: inherit;
font-size: 15px;
font-weight: normal;
line-height: 20px;
opacity: 0.7;
border: 0;
padding: 0;
margin-left: 4px;
vertical-align: unset;
text-shadow: none;
&:hover {
opacity: 1;
}
}
plus 6px of grid gap for 118px here. */
margin-right: calc(var(--compose-send-controls-width) + 6px);
}
#compose_close {
display: none;
position: absolute;
top: 0;
right: 0;
color: var(--color-compose-send-control-button);
background: transparent;
font-size: 15px;
font-weight: normal;
line-height: 20px;
opacity: 0.7;
border: 0;
padding: 5px 7px;
border-radius: 8px;
vertical-align: unset;
text-shadow: none;
&:hover {
opacity: 1;
background: var(--color-compose-embedded-button-background-hover);
color: var(--color-compose-send-control-button-interactive);
}
}
.main-view-banner {

6
web/templates/compose.hbs
View File

@ -49,10 +49,7 @@
<form id="send_message_form" action="/json/messages" method="post">
<div class="compose_table">
<div id="compose_top">
<div id="compose_top_right" class="order-2">
<button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
</div>
<div id="compose-recipient" class="order-1">
<div id="compose-recipient">
{{> dropdown_widget_wrapper
widget_name="compose_select_recipient"}}
<div class="topic-marker-container">
@ -110,5 +107,6 @@
</div>
</form>
</div>
<button type="button" class="close zulip-icon zulip-icon-close" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
</div>
</div>