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

Use spinner as message preview loader.

This commit is contained in:
hackerkid 2016-09-27 01:33:42 +05:30 committed by Tim Abbott
parent c833265fae
commit 9a2e24a458
4 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend_tests/casper_tests/04-compose.js
View File

@ -151,7 +151,7 @@ casper.then(function () {
casper.then(function () {
casper.waitWhileVisible("#markdown_preview", function () {
casper.test.assertVisible('#undo_markdown_preview', 'Write button is visible');
casper.test.assertEquals(casper.getHTML('#preview_message_area'), "Nothing to preview", "Nothing to preview");
casper.test.assertEquals(casper.getHTML('#preview_content'), "Nothing to preview", "Nothing to preview");
casper.click("#undo_markdown_preview");
});
});
@ -160,7 +160,7 @@ casper.then(function () {
casper.waitWhileVisible("#undo_markdown_preview", function () {
casper.test.assertVisible('#markdown_preview', 'Preview button is visible.');
casper.test.assertNotVisible('#undo_markdown_preview', 'Write button is hidden.');
casper.test.assertEquals(casper.getHTML('#preview_message_area'), "", "Markdown preview area is empty");
casper.test.assertEquals(casper.getHTML('#preview_content'), "", "Markdown preview area is empty");
casper.fill('form[action^="/json/messages"]', {
content: '**Markdown Preview** >> Test for markdown preview'
@ -172,7 +172,7 @@ casper.then(function () {
casper.then(function () {
casper.waitWhileVisible("#markdown_preview", function () {
casper.test.assertEquals(casper.getHTML('#preview_message_area'), "<p><strong>Markdown Preview</strong> &gt;&gt; Test for markdown preview</p>", "Check markdown is previewed properly");
casper.test.assertEquals(casper.getHTML('#preview_content'), "<p><strong>Markdown Preview</strong> &gt;&gt; Test for markdown preview</p>", "Check markdown is previewed properly");
});
});

19
static/js/compose.js
View File

@ -133,7 +133,7 @@ function clear_preview_area () {
$("#new_message_content").show();
$("#undo_markdown_preview").hide();
$("#preview_message_area").hide();
$("#preview_message_area").empty();
$("#preview_content").empty();
$("#markdown_preview").show();
}
@ -1010,10 +1010,11 @@ $(function () {
$("#preview_message_area").show();
if (message.length === 0) {
$("#preview_message_area").html(i18n.t("Nothing to preview"));
$("#preview_content").html(i18n.t("Nothing to preview"));
} else {
if (echo.contains_bugdown(message)) {
$("#preview_message_area").html(i18n.t("Loading preview..."));
var spinner = $("#markdown_preview_spinner").expectOne();
loading.make_indicator(spinner);
} else {
// For messages that don't appear to contain
// bugdown-specific syntax not present in our
@ -1022,17 +1023,23 @@ $(function () {
// render server-side to ensure the preview is
// accurate; if the `echo.contains_bugdown` logic is
// incorrect wrong, users will see a brief flicker).
$("#preview_message_area").html(echo.apply_markdown(message));
$("#preview_content").html(echo.apply_markdown(message));
}
channel.get({
url: '/json/messages/render',
idempotent: true,
data: {content: message},
success: function (response_data) {
$("#preview_message_area").html(response_data.rendered);
if (echo.contains_bugdown(message)) {
loading.destroy_indicator($("#markdown_preview_spinner"));
}
$("#preview_content").html(response_data.rendered);
},
error: function () {
$("#preview_message_area").html(i18n.t("Failed to generate preview"));
if (echo.contains_bugdown(message)) {
loading.destroy_indicator($("#markdown_preview_spinner"));
}
$("#preview_content").html(i18n.t("Failed to generate preview"));
}
});
}

4
static/styles/zulip.css
View File

@ -3685,3 +3685,7 @@ a#undo_markdown_preview {
font-size: 16px;
color: #777;
}
#markdown_preview_spinner {
margin: auto;
}

5
templates/zerver/compose.html
View File

@ -70,7 +70,10 @@
<td class="messagebox" colspan="2">
<textarea class="new_message_textarea" name="content" id="new_message_content"
value="" placeholder="{{ _('Compose your message here') }}..." tabindex="140" maxlength="10000"></textarea>
<div class="scrolling_list" id="preview_message_area" style="display:none;"></div>
<div class="scrolling_list" id="preview_message_area" style="display:none;">
<div id="markdown_preview_spinner"></div>
<div id="preview_content"></div>
</div>
<div id="below-compose-content">
<input type="file" id="file_input" class="notvisible pull-left" multiple />
<a class="message-control-button icon-vector-dropbox notdisplayed"