compose: Change preview_message_area and preview_content to classes.

Preview box is to be reused in message edit. ID does not remain the
same in message-edit section so the styles are changed to classes.
This commit is contained in:
Vaibhav
2019-02-05 19:14:16 +05:30
committed by Tim Abbott
parent e91f22c416
commit 5e4bd9f57d
3 changed files with 11 additions and 8 deletions

View File

@@ -453,24 +453,27 @@ a.message-control-button:hover {
margin-left: 5px; margin-left: 5px;
} }
#preview_message_area { .preview_message_area {
/* minus 5px padding. */ /* minus 5px padding. */
width: calc(100% - 12px); 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;
/* the minimum height the textarea collapses to. */ /* the minimum height the textarea collapses to. */
min-height: 42px; min-height: 36px;
overflow: auto; overflow: auto;
margin-top: 5px;
border: 1px solid hsl(0, 0%, 67%); border: 1px solid hsl(0, 0%, 67%);
border-radius: 4px; border-radius: 4px;
background-color: hsla(0, 0%, 0%, 0.02); background-color: hsla(0, 0%, 0%, 0.02);
cursor: not-allowed; cursor: not-allowed;
} }
#preview_message_area {
margin-top: 5px;
min-height: 42px;
}
a#markdown_preview, a#markdown_preview,
a#undo_markdown_preview { a#undo_markdown_preview {
text-decoration: none; text-decoration: none;

View File

@@ -177,7 +177,7 @@ on a dark background, and don't change the dark labels dark either. */
.message_list .recipient_row, .message_list .recipient_row,
.message_row, .message_row,
.draft-row .draft-info-box, .draft-row .draft-info-box,
#preview_message_area { .preview_message_area {
border-color: hsla(0, 0%, 0%, 0.2); border-color: hsla(0, 0%, 0%, 0.2);
} }
@@ -484,7 +484,7 @@ on a dark background, and don't change the dark labels dark either. */
#feedback_container, #feedback_container,
.message_content code, .message_content code,
.message_edit_content code, .message_edit_content code,
#preview_content code, .preview_content code,
#settings_page code, #settings_page code,
.typeahead.dropdown-menu { .typeahead.dropdown-menu {
background-color: hsl(212, 25%, 15%); background-color: hsl(212, 25%, 15%);

View File

@@ -88,9 +88,9 @@
<div> <div>
<div class="messagebox"> <div class="messagebox">
<textarea class="new_message_textarea" name="content" id='compose-textarea' placeholder="{{ _('Compose your message here') }}" tabindex="0" maxlength="10000" aria-label="{{ _('Compose your message here...') }}"></textarea> <textarea class="new_message_textarea" name="content" id='compose-textarea' placeholder="{{ _('Compose your message here') }}" tabindex="0" maxlength="10000" aria-label="{{ _('Compose your message here...') }}"></textarea>
<div class="scrolling_list" id="preview_message_area" style="display:none;"> <div class="scrolling_list preview_message_area" id="preview_message_area" style="display:none;">
<div id="markdown_preview_spinner"></div> <div id="markdown_preview_spinner"></div>
<div id="preview_content"></div> <div id="preview_content" class="preview_content"></div>
</div> </div>
<div class="drag"></div> <div class="drag"></div>
<div id="below-compose-content"> <div id="below-compose-content">