From 605916f6d73e8845fb8ddff03f7a901048ad6ebc Mon Sep 17 00:00:00 2001 From: Balaji2198 Date: Wed, 4 Apr 2018 23:08:09 +0530 Subject: [PATCH] compose: Add subscribe button to the not subscribed stream error message. Before that, we needed to go the stream settings to subscribe to a particular stream. Fixes #3877. --- frontend_tests/node_tests/compose.js | 8 +++-- frontend_tests/node_tests/templates.js | 7 +++++ static/js/compose.js | 29 +++++++++++++++++-- static/styles/compose.css | 15 ++++++++-- .../compose_not_subscribed.handlebars | 10 +++++++ templates/zerver/compose.html | 1 + 6 files changed, 64 insertions(+), 6 deletions(-) create mode 100644 static/templates/compose_not_subscribed.handlebars diff --git a/frontend_tests/node_tests/compose.js b/frontend_tests/node_tests/compose.js index 0e4bf6e5f9..be2b901920 100644 --- a/frontend_tests/node_tests/compose.js +++ b/frontend_tests/node_tests/compose.js @@ -101,8 +101,12 @@ people.add(bob); sub.subscribed = false; stream_data.add_sub('social', sub); + templates.render = function (template_name) { + assert.equal(template_name, 'compose_not_subscribed'); + return 'compose_not_subscribed_stub'; + }; assert(!compose.validate_stream_message_address_info('social')); - assert.equal($('#compose-error-msg').html(), "translated:

You're not subscribed to the stream social.

Manage your subscriptions on your Streams page.

"); + assert.equal($('#compose-error-msg').html(), 'compose_not_subscribed_stub'); global.page_params.narrow_stream = false; channel.post = function (payload) { @@ -121,7 +125,7 @@ people.add(bob); payload.success(payload.data); }; assert(!compose.validate_stream_message_address_info('Frontend')); - assert.equal($('#compose-error-msg').html(), "translated:

You're not subscribed to the stream Frontend.

Manage your subscriptions on your Streams page.

"); + assert.equal($('#compose-error-msg').html(), 'compose_not_subscribed_stub'); channel.post = function (payload) { assert.equal(payload.data.stream, 'Frontend'); diff --git a/frontend_tests/node_tests/templates.js b/frontend_tests/node_tests/templates.js index d650222503..e2e3f35a28 100644 --- a/frontend_tests/node_tests/templates.js +++ b/frontend_tests/node_tests/templates.js @@ -622,6 +622,13 @@ function render(template_name, args) { assert.equal(error_msg, "translated: This stream is reserved for announcements.\n \n Are you sure you want to message all 101 people in this stream?"); }()); +(function compose_not_subscribed() { + var html = render('compose_not_subscribed'); + global.write_handlebars_output("compose_not_subscribed", html); + var button = $(html).find("button:first"); + assert.equal(button.text(), "translated: Subscribe"); +}()); + (function compose_notification() { var args = { note: "You sent a message to a muted topic.", diff --git a/static/js/compose.js b/static/js/compose.js index ffb982b59c..ba7af4483f 100644 --- a/static/js/compose.js +++ b/static/js/compose.js @@ -185,6 +185,19 @@ function nonexistent_stream_reply_error() { }, 5000); } +function compose_not_subscribed_error(error_text, bad_input) { + $('#compose-send-status').removeClass(common.status_classes) + .addClass('home-error-bar') + .stop(true).fadeTo(0, 1); + $('#compose-error-msg').html(error_text); + $("#compose-send-button").prop('disabled', false); + $("#sending-indicator").hide(); + $(".compose-send-status-close").hide(); + if (bad_input !== undefined) { + bad_input.focus().select(); + } +} + exports.nonexistent_stream_reply_error = nonexistent_stream_reply_error; function clear_compose_box() { @@ -513,8 +526,8 @@ exports.validation_error = function (error_type, stream_name) { compose_error(i18n.t("Error checking subscription"), $("#stream")); return false; case "not-subscribed": - response = i18n.t("

You're not subscribed to the stream __stream_name__.

Manage your subscriptions on your Streams page.

", context); - compose_error(response, $('#stream')); + var new_row = templates.render("compose_not_subscribed"); + compose_not_subscribed_error(new_row, $('#stream')); return false; } return true; @@ -769,6 +782,18 @@ exports.initialize = function () { compose.finish(); }); + $("#compose-send-status").on('click', '.sub_unsub_button', function (event) { + event.preventDefault(); + + var stream_name = $('#stream').val(); + if (stream_name === undefined) { + return; + } + var sub = stream_data.get_sub(stream_name); + subs.sub_or_unsub(sub); + $("#compose-send-status").hide(); + }); + $("#compose_invite_users").on('click', '.compose_invite_link', function (event) { event.preventDefault(); diff --git a/static/styles/compose.css b/static/styles/compose.css index 55107dbdcd..744aae1f5f 100644 --- a/static/styles/compose.css +++ b/static/styles/compose.css @@ -193,13 +193,19 @@ table.compose_table { .compose_invite_user, .compose_private_stream_alert, .compose-all-everyone, -.compose-announce { +.compose-announce, +.compose_not_subscribed { padding: 4px 0px 4px 0px; display: flex; align-items: center; justify-content: space-between; } +#compose_not_subscribed_close { + top: 1px; + right: 10px; +} + .compose_invite_close, .compose_private_stream_alert_close { display: inline-block; @@ -216,12 +222,17 @@ table.compose_table { position: relative; } -.compose_invite_user p { +.compose_invite_user p, +.compose_not_subscribed p { margin: 0px; display: inline-block; max-width: calc(100% - 100px); } +#error-message-sub-button { + margin-right: 30px; +} + .compose_invite_user_error { margin-right: 10px; padding: 3px 8px 3px 8px; diff --git a/static/templates/compose_not_subscribed.handlebars b/static/templates/compose_not_subscribed.handlebars new file mode 100644 index 0000000000..2e57b6ca31 --- /dev/null +++ b/static/templates/compose_not_subscribed.handlebars @@ -0,0 +1,10 @@ +
+

+ {{#tr this}} + You're not subscribed to this stream. You will not be notified if other users reply to your message. + {{/tr}} +

+
+ +
+
diff --git a/templates/zerver/compose.html b/templates/zerver/compose.html index c46a40c507..bc733633c9 100644 --- a/templates/zerver/compose.html +++ b/templates/zerver/compose.html @@ -49,6 +49,7 @@
+