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

compose: Restructure HTML for common compose textarea/preview parent. 

Earlier, the compose textarea and the preview (container) occupied the
same grid area, 1 at a time. Now, they are both children of a common div
which is assigned the same grid area. This allows adding more elements
to the same grid area in the future.

This is purely a code change and should have no visible effects.

This is a prep commit for relocating the compose expand / collapse
buttons to the top right inside corner of the textarea / preview.
This commit is contained in:
N-Shar-ma 2024-04-22 22:33:08 +05:30 committed by Tim Abbott
parent 91bd6e2b12
commit 1121d317c2
2 changed files with 15 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/styles/compose.css
View File

@ -246,9 +246,10 @@
TODO: get this value into a CSS variable. */ TODO: get this value into a CSS variable. */
grid-template: minmax(0, 1fr) 32px / minmax(0, 1fr) 112px; grid-template: minmax(0, 1fr) 32px / minmax(0, 1fr) 112px;
grid-template-areas: grid-template-areas:
"compose-textarea message-send-controls-container" "message-content-container message-send-controls-container"
"message-formatting-controls-container . "; "message-formatting-controls-container . ";
gap: 4px 6px; gap: 4px 6px;
margin-top: 5px;
@media ((width >= $sm_min) and (width < $mc_min)) { @media ((width >= $sm_min) and (width < $mc_min)) {
/* Drop to a 62px wide send column. */ /* Drop to a 62px wide send column. */
@ -266,14 +267,10 @@
} }
} }
#compose-textarea, #message-content-container {
#preview-message-area-container { grid-area: message-content-container;
grid-area: compose-textarea; display: grid;
/* When the compose box is full screen, this grid-template: minmax(0, 1fr) / minmax(0, 1fr);
auto height will kick in and make sure that
the textarea opens to fill its whole grid
area. */
height: auto;
} }
#preview-message-area-container { #preview-message-area-container {
@ -709,13 +706,11 @@
textarea.new_message_textarea { textarea.new_message_textarea {
display: table-cell; display: table-cell;
width: calc(100% - 12px);
padding: 5px; padding: 5px;
height: 1.5em; height: 1.5em;
max-height: 22em; max-height: 22em;
margin-bottom: 0; margin: 0;
resize: vertical !important; resize: vertical !important;
margin-top: 5px;
border-radius: 4px; border-radius: 4px;
color: hsl(0deg 0% 33%); color: hsl(0deg 0% 33%);
background-color: hsl(0deg 0% 100%); background-color: hsl(0deg 0% 100%);
@ -1129,8 +1124,6 @@ textarea.new_message_textarea,
} }
.preview_message_area { .preview_message_area {
/* minus 5px padding. */
width: calc(100% - 12px);
padding: 5px; padding: 5px;
/* the maximum height the textarea gets to. */ /* the maximum height the textarea gets to. */
max-height: 308px; max-height: 308px;
@ -1380,9 +1373,6 @@ textarea.new_message_textarea,
.preview_mode { .preview_mode {
#preview-message-area-container { #preview-message-area-container {
/* Maintain same top alignment as the
compose textarea. */
margin-top: 5px;
/* When in preview mode, we display the /* When in preview mode, we display the
preview container as a columnar flexbox. preview container as a columnar flexbox.
This containing element is necessary This containing element is necessary

2
web/templates/compose.hbs
View File

@ -78,6 +78,7 @@
</div> </div>
<div class="messagebox-wrapper"> <div class="messagebox-wrapper">
<div class="messagebox"> <div class="messagebox">
<div id="message-content-container">
<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> <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>
<div id="preview-message-area-container"> <div id="preview-message-area-container">
<div class="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;"> <div class="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;">
@ -86,6 +87,7 @@
</div> </div>
</div> </div>
<div class="drag"></div> <div class="drag"></div>
</div>
<div id="message-send-controls-container"> <div id="message-send-controls-container">
<a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts"> <a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">