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

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

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
Show Stats 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/dark_theme.css
View File

@ -476,7 +476,7 @@
background-color: hsl(0deg 86% 14%) !important;
}
#compose-direct-recipient.pill-container {
#compose-direct-recipient .pill-container {
background-color: hsl(0deg 0% 0% / 20%);
}

4
web/styles/input_pill.css
View File

@ -121,10 +121,8 @@
}
}
#compose-direct-recipient.pill-container {
#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%);

6
web/templates/compose.hbs
View File

@ -69,8 +69,10 @@
<i class="zulip-icon zulip-icon-close"></i>
</button>
</div>
<div id="compose-direct-recipient" 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="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>