mirror of https://github.com/zulip/zulip.git
compose: Refactor bottom part of compose box.
* We use flexbox instead of `position: relative` to align elements. * Increase clickable area of icons using more padding. * Increase space between elements. * Fix mobile compose box icon alignment.
This commit is contained in:
Aman Agrawal
Tim Abbott
parent
29cdd99220
commit
2af933678c
|
|
@ -41,6 +41,18 @@
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
.order-1 {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.order-2 {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.order-3 {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
/*
|
||||
Consistent placeholder styling, introduced to allow us to style the
|
||||
Reply box like a placeholder. Chrome uses color to set placeholder,
|
||||
|
|
|
|||
|
|
@ -152,12 +152,6 @@
|
|||
.messagebox {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.message-control-link {
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
#send_message_form {
|
||||
|
|
@ -186,17 +180,16 @@
|
|||
}
|
||||
|
||||
#below-compose-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#compose_limit_indicator {
|
||||
position: relative;
|
||||
margin-right: 8px;
|
||||
top: 3px;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
color: hsl(39, 100%, 50%);
|
||||
align-self: center;
|
||||
|
||||
&.over_limit {
|
||||
color: hsl(0, 100%, 50%);
|
||||
|
|
@ -427,21 +420,15 @@ input.recipient_box {
|
|||
}
|
||||
|
||||
#compose-send-button {
|
||||
/* To arrange the right tab order for the compose box keyboard UI,
|
||||
this element appears before its proper position in the DOM and is configured
|
||||
to float right, so that tabbing from the compose box goes here and then
|
||||
to the message controls to its left, to ensure "Tab then Enter" sends messages. */
|
||||
height: 25px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
float: right;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#send_controls {
|
||||
float: right;
|
||||
position: relative;
|
||||
font-size: 0.8em;
|
||||
height: 2.2em;
|
||||
|
||||
|
|
@ -461,30 +448,43 @@ input.recipient_box {
|
|||
}
|
||||
|
||||
#sending-indicator {
|
||||
top: 2px;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.compose_giphy_link .compose_gif_icon {
|
||||
position: relative;
|
||||
font-size: 23px;
|
||||
top: -4px;
|
||||
.compose_control_buttons_container {
|
||||
flex-wrap: wrap;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
|
||||
.compose_gif_icon {
|
||||
font-size: 22px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.message-control-link,
|
||||
#sending-indicator {
|
||||
padding: 0 4px;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.compose_right_float_container {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
gap: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
a.compose_control_button {
|
||||
padding: 5px;
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
width: auto;
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
padding-top: 5px;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -1482,7 +1482,7 @@ div.focused_table {
|
|||
|
||||
.message-edit-feature-group {
|
||||
display: inline-flex;
|
||||
margin: -10px auto -5px 10px;
|
||||
margin: 0 auto -5px 10px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
|
|
@ -2572,10 +2572,6 @@ div.topic_edit_spinner .loading_indicator_spinner {
|
|||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.compose_gif_icon {
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Override the default border-radius to properly align
|
||||
|
|
|
|||
|
|
@ -93,16 +93,19 @@
|
|||
</div>
|
||||
<div class="drag"></div>
|
||||
<div id="below-compose-content">
|
||||
<button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">{{t 'Send' }}</button>
|
||||
{{> compose_control_buttons }}
|
||||
<span id="sending-indicator"></span>
|
||||
<div id="send_controls" class="new-style">
|
||||
<label id="enter-sends-label" class="compose_checkbox_label checkbox">
|
||||
<input type="checkbox" id="enter_sends" />
|
||||
<span></span>{{t 'Press Enter to send' }}
|
||||
</label>
|
||||
<div class="compose_right_float_container order-3">
|
||||
<button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">{{t 'Send' }}</button>
|
||||
</div>
|
||||
{{> compose_control_buttons }}
|
||||
<div class="compose_right_float_container order-2">
|
||||
<span id="compose_limit_indicator"></span>
|
||||
<div id="send_controls" class="new-style">
|
||||
<label id="enter-sends-label" class="compose_checkbox_label checkbox">
|
||||
<input type="checkbox" tabindex="0" id="enter_sends" />
|
||||
<span></span>{{t 'Press Enter to send' }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<span id="compose_limit_indicator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<input type="file" class="file_input notvisible pull-left" multiple />
|
||||
{{#if file_upload_enabled }}
|
||||
<a role="button" class="compose_control_button compose_upload_file fa fa-paperclip notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0 data-tippy-content="{{t 'Upload files' }}"></a>
|
||||
{{/if}}
|
||||
<a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
|
||||
<a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
|
||||
<a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
|
||||
<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 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>
|
||||
<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="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>
|
||||
<div class="compose_control_buttons_container order-1">
|
||||
<input type="file" class="file_input notvisible pull-left" multiple />
|
||||
{{#if file_upload_enabled }}
|
||||
<a role="button" class="compose_control_button compose_upload_file fa fa-paperclip notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0 data-tippy-content="{{t 'Upload files' }}"></a>
|
||||
{{/if}}
|
||||
<a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
|
||||
<a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
|
||||
<a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
|
||||
<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 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>
|
||||
<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="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>
|
||||
<span id="sending-indicator"></span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue