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

compose_box: Handle compose and preview expansion.

This commit is contained in:
Karl Stolley 2023-11-01 15:40:50 -05:00 committed by Tim Abbott
parent ec38c7b5be
commit a3c1399924
2 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/styles/compose.css
View File

@ -237,7 +237,7 @@
4px outside padding.
TODO: get this value into a CSS variable. */
grid-template: auto 32px / minmax(0, 1fr) 112px;
grid-template: minmax(0, 1fr) 32px / minmax(0, 1fr) 112px;
grid-template-areas:
"compose-textarea message-send-controls-container"
"message-formatting-controls-container . ";
@ -249,8 +249,20 @@
}
}
#compose-textarea {
#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;
}
#preview-message-area-container {
/* Keep preview container invisible outside
of preview mode. */
display: none;
}
#message-send-controls-container {
@ -1141,17 +1153,35 @@ textarea.new_message_textarea,
}
#compose-textarea,
#preview_message_area {
/* When in full screen, override any height-
related properties set on the textarea itself,
e.g., from manually resizing the textarea. */
max-height: none !important;
height: auto !important;
}
#preview_message_area {
/* Setting height to 0 is necessary to make the flex+Simplebar
combination work correctly, without pushing the compose
controls offscreen when previewing a very tall message. */
max-height: none !important;
height: 0;
flex: 1;
}
}
.preview_mode {
#preview-message-area-container {
/* When in preview mode, we display the
preview container as a columnar flexbox.
This containing element is necessary
because Simplebar on its own will cause
a grid blowout despite a minmax(0, 1fr)
row definition. */
display: flex;
flex-flow: column;
}
.preview_mode_disabled {
cursor: not-allowed;
opacity: 0.3;

8
web/templates/compose.hbs
View File

@ -76,9 +76,11 @@
<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 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="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>