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

compose_box: Implement redesigned vdots-button styles.

This commit is contained in:
Karl Stolley 2023-11-02 13:07:32 -05:00 committed by Tim Abbott
parent bf0e806fed
commit 609106e2d0
3 changed files with 73 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
web/styles/compose.css
View File

@ -274,6 +274,10 @@
expands or contracts. */
display: flex;
flex-direction: column;
/* We add 6px of margin to the grid-gap of
6px, for 12px of space between the Send
button and the textarea. */
margin-left: 6px;
}
#message-formatting-controls-container {
@ -843,6 +847,11 @@ textarea.new_message_textarea,
display: flex;
align-items: center;
justify-content: center;
/* Flex items respect z-index values;
this is needed to keep the send
button over top of the vdots
background */
z-index: 1;
.zulip-icon-send {
display: block;
@ -1158,6 +1167,10 @@ textarea.new_message_textarea,
outline: 0;
}
&:focus-visible {
outline: 2px solid var(--color-outline-focus);
}
&:hover {
/* We need to use !important here, regrettably, to keep the default
dark-mode hover colors from showing. */
@ -1171,32 +1184,55 @@ textarea.new_message_textarea,
}
}
/* vdots icon located next to `Send` / `Scheduled` button which shows
/* vdots icon located next to `Send` button which shows
options to schedule the message. */
#send_later {
display: flex;
align-items: center;
float: right;
color: hsl(0deg 0% 100%);
justify-content: center;
width: 40px;
/* Allow to grow but not shrink */
flex: 1 0 auto;
/* TODO: Set this as a variable shared with
the send button. */
height: 28px;
/* Make the vdots appear to extend from
beneath the send button when an
interactive background is present. */
margin-left: -4px;
padding: 0 0 0 4px;
border-radius: 0 4px 4px 0;
padding: 0;
margin: 0;
/* Flex items respect z-index values;
this is needed to keep the vdots
background beneath the send button. */
z-index: 0;
&:focus-visible {
/* Use a border, not an outline, to preserve the
conjoined layout with the Send button. Flexbox
will handle the dimension change, so there won't
be any movement of the vdots in this state. */
outline: 0;
border: 2px solid var(--color-outline-focus);
}
.zulip-icon {
padding: 5px 3px;
font-size: 17px;
}
}
.separator-line {
background-color: hsl(0deg 0% 100% / 65%);
height: 70%;
width: 1px;
}
&:hover,
&:focus {
box-shadow: none;
}
#compose-drafts-button {
/* In a columnar flex, we need to
use alignment to keep the Drafts
button from expanding the full
width of the column. */
align-self: flex-start;
/* Keep the Drafts button text
aligned with the Send button's
lefthand edge */
padding: 0 8px;
margin-left: -8px;
}
@media (width < $xl_min) {

20
web/styles/zulip.css
View File

@ -227,6 +227,15 @@ body {
--color-compose-send-button-background-interactive: hsl(226deg 99% 60%);
--color-compose-send-button-focus-border: hsl(232deg 20% 10%);
--color-compose-send-button-focus-shadow: hsl(230deg 100% 20%);
--color-compose-message-control-button: hsl(240deg 30% 50% / 80%);
--color-compose-message-control-button-background: transparent;
--color-compose-message-control-button-interactive: hsl(240deg 30% 50%);
--color-compose-message-control-button-background-interactive: hsl(
240deg 100% 30% / 5%
);
--color-compose-message-control-button-focus-shadow: var(
--color-compose-send-button-focus-shadow
);
--color-compose-collapsed-reply-button-area-background: hsl(0deg 0% 100%);
--color-compose-collapsed-reply-button-area-background-interactive: var(
--color-compose-collapsed-reply-button-area-background
@ -436,6 +445,17 @@ body {
--color-compose-send-button-background: hsl(226deg 60% 45%);
--color-compose-send-button-background-interactive: hsl(226deg 65% 50%);
--color-compose-send-button-focus-shadow: hsl(0deg 0% 100% / 80%);
--color-compose-message-control-button: hsl(240deg 30% 70%);
--color-compose-message-control-button-background: transparent;
--color-compose-message-control-button-interactive: var(
--color-compose-message-control-button
);
--color-compose-message-control-button-background-interactive: hsl(
235deg 100% 70% / 11%
);
--color-compose-message-control-button-focus-shadow: var(
--color-compose-send-button-focus-shadow
);
--color-compose-collapsed-reply-button-area-background: hsl(
0deg 0% 0% / 20%
);

5
web/templates/compose.hbs
View File

@ -85,7 +85,7 @@
<div class="drag"></div>
<div id="message-send-controls-container">
<a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template">
<a id="compose-drafts-button" role="button" class="compose_control_button message-control-button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template">
{{t 'Drafts' }}
</a>
<span id="compose-limit-indicator"></span>
@ -94,8 +94,7 @@
<img class="loader" alt="" src="" />
<i class="zulip-icon zulip-icon-send"></i>
</button>
<button class="animated-purple-button message-control-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send later' }}">
<div class="separator-line"></div>
<button class="message-control-button send-related-action-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send later' }}">
<i class="zulip-icon zulip-icon-more-vertical"></i>
</button>
</div>