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

14
web/templates/compose.hbs
View File

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