CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-06-30 21:11:04 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

compose: Use flexbox to align items in compose top right.

Browse Source 
This will help us align components on compose box top better
on small screen sizes.

We also center align the compose_top elements.
This commit is contained in:
Aman Agrawal 2022-02-01 13:29:57 +00:00 committed by Tim Abbott
parent 1f812df0d2
commit acbfdb1c36
2 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/styles/compose.css
View File

@ -73,7 +73,7 @@
.message_comp {
display: none;
padding: 10px 10px 0 5px;
padding: 5px 10px 0 5px;
}
.autocomplete_secondary {
@ -228,10 +228,15 @@
margin: auto;
}
#compose_top {
display: flex;
justify-content: space-between;
padding-bottom: 5px;
}
#compose_top_right {
position: absolute;
right: 0;
float: right;
display: flex;
align-items: center;
button {
background: transparent;
@ -416,7 +421,10 @@ input.recipient_box {
width: 20%;
border-radius: 0 3px 3px 0;
border-left: 0;
min-width: 120px;
@media (width > $sm_min) {
min-width: 120px;
}
&:focus {
border-left: none;
@ -528,6 +536,7 @@ input.recipient_box {
#private-message {
align-items: center;
width: 100%;
}
.tippy-content .compose_control_buttons_container {
@ -699,7 +708,7 @@ a.compose_control_button.hide {
@media (width < $mm_min) {
#stream_message_recipient_topic.recipient_box {
width: calc(100% - 192px);
min-width: 75px;
min-width: 110px;
}
#compose-content {

54
static/templates/compose.hbs
View File

@ -51,39 +51,41 @@
<div id="compose_private_stream_alert" class="alert home-error-bar"></div>
<div id="out-of-view-notification" class="notification-alert"></div>
<div class="composition-area">
<div id="compose_top_right">
<button type="button" class="expand_composebox_button fa fa-angle-up" aria-label="{{t 'Expand compose' }}" tabindex=0 data-tippy-content="{{t 'Expand compose' }}"></button>
<button type="button" class="collapse_composebox_button fa fa-angle-down" aria-label="{{t 'Collapse compose' }}" tabindex=0 data-tippy-content="{{t 'Collapse compose' }}"></button>
<button type="button" class="close" id='compose_close' data-tippy-content="{{t 'Cancel compose' }} <span class='hotkey-hint'>(Esc)</span>">&times;</button>
</div>
<form id="send_message_form" action="/json/messages" method="post">
{{ csrf_input }}
<div class="compose_table">
<div id="stream-message">
<div class="stream-selection-header-colorblock message_header_stream left_part"></div>
<div class="right_part">
<span id="compose-lock-icon">
<i class="fa fa-lock" title="{{t 'This is a private stream' }}" aria-hidden="true"></i>
</span>
<span id="compose-globe-icon">
<i class="fa fa-globe" title="{{t 'This is a web-public stream' }}" aria-hidden="true"></i>
</span>
<input type="text" class="recipient_box" name="stream_message_recipient_stream" id="stream_message_recipient_stream" maxlength="30" value="" placeholder="{{t 'Stream' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Stream' }}" />
<i class="fa fa-angle-right" aria-hidden="true"></i>
<input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="60" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
<div id="compose_top">
<div id="stream-message">
<div class="stream-selection-header-colorblock message_header_stream left_part"></div>
<div class="right_part">
<span id="compose-lock-icon">
<i class="fa fa-lock" title="{{t 'This is a private stream' }}" aria-hidden="true"></i>
</span>
<span id="compose-globe-icon">
<i class="fa fa-globe" title="{{t 'This is a web-public stream' }}" aria-hidden="true"></i>
</span>
<input type="text" class="recipient_box" name="stream_message_recipient_stream" id="stream_message_recipient_stream" maxlength="30" value="" placeholder="{{t 'Stream' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Stream' }}" />
<i class="fa fa-angle-right" aria-hidden="true"></i>
<input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="60" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
</div>
</div>
</div>
<div id="private-message">
<div class="to_text">
<span>{{t 'To' }}:</span>
</div>
<div class="right_part">
<div class="pm_recipient">
<div class="pill-container" data-before="{{t 'You and' }}">
<div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{t 'Add one or more users' }}" data-some-recipients-text="{{t 'Add another user...' }}"></div>
<div id="private-message">
<div class="to_text">
<span>{{t 'To' }}:</span>
</div>
<div class="right_part">
<div class="pm_recipient">
<div class="pill-container" data-before="{{t 'You and' }}">
<div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{t 'Add one or more users' }}" data-some-recipients-text="{{t 'Add another user...' }}"></div>
</div>
</div>
</div>
</div>
<div id="compose_top_right">
<button type="button" class="expand_composebox_button fa fa-angle-up" aria-label="{{t 'Expand compose' }}" tabindex=0 data-tippy-content="{{t 'Expand compose' }}"></button>
<button type="button" class="collapse_composebox_button fa fa-angle-down" aria-label="{{t 'Collapse compose' }}" tabindex=0 data-tippy-content="{{t 'Collapse compose' }}"></button>
<button type="button" class="close" id='compose_close' data-tippy-content="{{t 'Cancel compose' }} <span class='hotkey-hint'>(Esc)</span>">&times;</button>
</div>
</div>
<div class="messagebox-wrapper">
<div class="messagebox">