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

compose: Add dividers. 

These improves the visual organization of the compose controls.

This is consistent with the divider we have for the navbar.
This commit is contained in:
Aman Agrawal 2021-11-13 04:44:28 +00:00 committed by Tim Abbott
parent 2b8aa5ce2d
commit 061e274716
3 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/styles/compose.css
View File

@ -468,6 +468,12 @@ input.recipient_box {
padding: 0 4px;
align-self: center;
}
.divider {
color: hsl(0, 0%, 88%);
font-size: 20px;
margin: 0 3px;
}
}
.compose_right_float_container {

4
static/styles/dark_theme.css
View File

@ -342,6 +342,10 @@ body.night-mode {
border-color: transparent;
}
.compose_control_buttons_container .divider {
color: hsla(236, 33%, 90%, 0.5);
}
/* Not that .message_row (below) needs to be more contrast on dark mode */
#compose-content,
.message_list .recipient_row,

2
static/templates/compose_control_buttons.hbs
View File

@ -9,9 +9,11 @@
<a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
<a role="button" class="compose_control_button compose_gif_icon {{#unless giphy_enabled }} hide {{/unless}} zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0 data-tippy-content="{{t 'Add GIF' }}"></a>
<a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tippy-content="{{t 'Add global time<br />Everyone sees global times in their own time zone.' }}" data-tippy-maxWidth="none" data-tippy-allowHtml="true"></a>
<div class="divider">|</div>
<a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" tabindex=0 data-tippy-content="{{t 'Bold' }}"></a>
<a role="button" data-format-type="italic" class="compose_control_button fa fa-italic formatting_button" aria-label="{{t 'Italic' }}" tabindex=0 data-tippy-content="{{t 'Italic' }}"></a>
<a role="button" data-format-type="link" class="compose_control_button fa fa-link formatting_button" aria-label="{{t 'Link' }}" tabindex=0 data-tippy-content="{{t 'Link' }}"></a>
<div class="divider">|</div>
<a role="button" class="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>
<span id="sending-indicator"></span>
</div>