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

compose: Rearrange compose bottom to separate out enter sends. 

* We move enter sends into its own row separate from compose
control buttons and send button. This makes sure compose control
icons don't wrap on narrow widths.

* Move char limit indicator parallel to enter sends button.

* Left align character exceeded count at bottom.
This commit is contained in:
Aman Agrawal 2021-11-30 05:29:59 +00:00 committed by Tim Abbott
parent a64f6edc2a
commit 63c3f74056
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/styles/compose.css
View File

@ -181,9 +181,19 @@
#below-compose-content {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 6px;
margin-bottom: -2px;
.compose_bottom_top_container {
display: flex;
}
.compose_bottom_bottom_container {
display: flex;
justify-content: space-between;
}
}
#compose_limit_indicator {

12
static/templates/compose.hbs
View File

@ -93,12 +93,18 @@
</div>
<div class="drag"></div>
<div id="below-compose-content">
<div class="compose_bottom_top_container">
<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)">
<img class="loader" alt="" src="" />
<span>{{t 'Send' }}</span>
</button>
<div class="enter_sends order-2">
</div>
{{> compose_control_buttons }}
</div>
<div class="compose_bottom_bottom_container">
<span id="compose_limit_indicator"></span>
<div class="enter_sends">
<label id="enter-sends-label" class="compose_checkbox_label tippy-zulip-tooltip" data-tippy-content="Click to switch">
<span class="enter_sends_true">
{{t 'Enter to send' }}
@ -116,10 +122,6 @@
</label>
</div>
</div>
{{> compose_control_buttons }}
<div class="compose_right_float_container order-2">
<span id="compose_limit_indicator"></span>
</div>
</div>
</div>
</div>