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;
}
#preview_message_area {
.preview_message_area {
/* minus 5px padding. */
width: calc(100% - 12px);
padding: 5px;
/* the maximum height the textarea gets to. */
max-height: 308px;
/* the minimum height the textarea collapses to. */
min-height: 42px;
min-height: 36px;
overflow: auto;
margin-top: 5px;
border: 1px solid hsl(0, 0%, 67%);
border-radius: 4px;
background-color: hsla(0, 0%, 0%, 0.02);
cursor: not-allowed;
}
#preview_message_area {
margin-top: 5px;
min-height: 42px;
}
a#markdown_preview,
a#undo_markdown_preview {
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_row,
.draft-row .draft-info-box,
#preview_message_area {
.preview_message_area {
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,
.message_content code,
.message_edit_content code,
#preview_content code,
.preview_content code,
#settings_page code,
.typeahead.dropdown-menu {
background-color: hsl(212, 25%, 15%);

View File

@@ -88,9 +88,9 @@
<div>
<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>
<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="preview_content"></div>
<div id="preview_content" class="preview_content"></div>
</div>
<div class="drag"></div>
<div id="below-compose-content">