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 { #compose-direct-recipient {
flex-grow: 1; flex-grow: 1;
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
} }
.message_header { .message_header {
@ -754,7 +757,9 @@ textarea.new_message_textarea,
} }
#compose_recipient_box { #compose_recipient_box {
display: flex; display: grid;
grid-template-columns: 1fr auto;
align-items: stretch;
flex: 1 1 0; flex: 1 1 0;
border-radius: 3px; border-radius: 3px;
background: hsl(0deg 0% 100%); background: hsl(0deg 0% 100%);
@ -776,12 +781,7 @@ textarea.new_message_textarea,
/* Styles for input in the recipient_box */ /* Styles for input in the recipient_box */
#stream_message_recipient_topic { #stream_message_recipient_topic {
/* Override inherited widths; flexbox will ensure /* Override grid's effective `max-content` min-width */
that it grows to fit. */
width: 0;
flex: 1 1 0;
/* Override flexbox's effective `max-content` min-width */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -789,6 +789,8 @@ textarea.new_message_textarea,
outline: none; outline: none;
padding: 4px 6px; 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 */ /* 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; background-color: hsl(0deg 86% 14%) !important;
} }
#compose-direct-recipient.pill-container { #compose-direct-recipient .pill-container {
background-color: hsl(0deg 0% 0% / 20%); 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; padding: 0 2px;
flex-grow: 1;
align-content: center;
border: 1px solid hsl(0deg 0% 0% / 20%); border: 1px solid hsl(0deg 0% 0% / 20%);
background-color: hsl(0deg 0% 100%); 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> <i class="zulip-icon zulip-icon-close"></i>
</button> </button>
</div> </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="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 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>
</div> </div>