paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Refactor recipient area to use grid layout instead of flexbox.

Browse Source 
This is a prep commit for moving the narrow to compose recipients button
before the input, and also aids in the overall compose area redesign.
This commit is contained in:
N-Shar-ma
2024-02-16 14:30:54 +05:30
committed by Tim Abbott
parent 0a756c652c
commit 1ba3cda229
4 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/styles/compose.css
View File

@@ -204,6 +204,9 @@
#compose-direct-recipient {
flex-grow: 1;
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
}
.message_header {
@@ -754,7 +757,9 @@ textarea.new_message_textarea,
}
#compose_recipient_box {
display: flex;
display: grid;
grid-template-columns: 1fr auto;
align-items: stretch;
flex: 1 1 0;
border-radius: 3px;
background: hsl(0deg 0% 100%);
@@ -776,12 +781,7 @@ textarea.new_message_textarea,
/* Styles for input in the recipient_box */
#stream_message_recipient_topic {
/* Override inherited widths; flexbox will ensure
that it grows to fit. */
width: 0;
flex: 1 1 0;
/* Override flexbox's effective `max-content` min-width */
/* Override grid's effective `max-content` min-width */
overflow: hidden;
text-overflow: ellipsis;
@@ -789,6 +789,8 @@ textarea.new_message_textarea,
outline: none;
padding: 4px 6px;
/* Reset height to let `align-items: stretch` on the grid parent handle this. */
height: auto;
}
/* Styles for new conversation button in the recipient_box */

2
web/styles/input_pill.css
View File

@@ -123,8 +123,6 @@
#compose-direct-recipient .pill-container {
padding: 0 2px;
flex-grow: 1;
align-content: center;
border: 1px solid hsl(0deg 0% 0% / 20%);
background-color: hsl(0deg 0% 100%);

4
web/templates/compose.hbs
View File

@@ -69,11 +69,13 @@
<i class="zulip-icon zulip-icon-close"></i>
</button>
</div>
<div id="compose-direct-recipient" class="pill-container" data-before="{{t 'You and' }}">
<div id="compose-direct-recipient" data-before="{{t 'You and' }}">
<div class="pill-container">
<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 class="messagebox-wrapper">
<div class="messagebox">
<textarea class="new_message_textarea" name="content" id='compose-textarea' placeholder="{{t 'Compose your message here' }}" tabindex="0" aria-label="{{t 'Compose your message here...' }}"></textarea>