From 33ace41ffe323cca86645b4883db0ec2ea10c7b6 Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Fri, 29 May 2020 20:52:53 +0530 Subject: [PATCH] recent_topics: Add filter button to show muted topics. We don't show muted streams/topics by defualt. Only when user turns on muted filter. --- frontend_tests/node_tests/recent_topics.js | 23 +++++++++++++++------- static/js/click_handlers.js | 7 +++++++ static/js/muting_ui.js | 4 ++-- static/js/recent_topics.js | 17 ++++++++-------- static/styles/zulip.scss | 1 + static/templates/recent_topic_row.hbs | 4 ++++ static/templates/recent_topics_filters.hbs | 8 ++++++++ 7 files changed, 47 insertions(+), 17 deletions(-) diff --git a/frontend_tests/node_tests/recent_topics.js b/frontend_tests/node_tests/recent_topics.js index e3dbb1d48b..b7940e0bcf 100644 --- a/frontend_tests/node_tests/recent_topics.js +++ b/frontend_tests/node_tests/recent_topics.js @@ -14,6 +14,11 @@ set_global('stream_data', { is_web_public: true, }; }, + is_muted: () => { + // We only test via muted topics for now. + // TODO: Make muted streams and test them. + return false; + }, }); set_global('overlays', { open_overlay: (opts) => { @@ -257,6 +262,7 @@ function generate_topic_data(topic_info_array) { topic_url: 'https://www.example.com', unread_count: unread_count, muted: muted, + topic_muted: muted, participated: participated, }); } @@ -279,6 +285,7 @@ run_test("test_recent_topics_launch", () => { const expected = { filter_participated: false, filter_unread: false, + filter_muted: false, recent_topics: generate_topic_data([ // stream_id, topic, unread_count, muted, participated [1, 'topic-7', 1, true, true], @@ -337,6 +344,7 @@ run_test('test_filter_unread', () => { let expected = { filter_participated: false, filter_unread: true, + filter_muted: false, recent_topics: generate_topic_data([ // stream_id, topic, unread_count, muted, participated [1, 'topic-7', 1, true, true], @@ -436,12 +444,15 @@ run_test('test_filter_participated', () => { rt.set_filter('all'); }); +// TODO: Add tests for filter_muted. + run_test('test_search_keyword', () => { // TODO: Test search mechanism properly. // This is only intended to pass coverage currently. const expected = { filter_participated: false, filter_unread: false, + filter_muted: false, recent_topics: generate_topic_data([ // stream_id, topic, unread_count, muted, participated [1, 'topic-7', 1, true, true], @@ -548,14 +559,12 @@ run_test('basic assertions', () => { assert.equal(Array.from(all_topics.keys()).toString(), '1:topic-7,1:topic-3,1:topic-6,1:topic-5,1:topic-4,1:topic-2,1:topic-1'); - // unmute topic7 - assert.equal(rt.update_topic_is_muted(stream1, topic7, false), true); - - // mute topic7 - assert.equal(rt.update_topic_is_muted(stream1, topic7, true), true); - + // update_topic_is_muted now relies on external libraries completely + // so we don't need to check anythere here. + generate_topic_data([[1, topic1, 0, false, true]]); + assert.equal(rt.update_topic_is_muted(stream1, topic1), true); // a topic gets muted which we are not tracking - assert.equal(rt.update_topic_is_muted(stream1, "topic-10", true), false); + assert.equal(rt.update_topic_is_muted(stream1, "topic-10"), false); }); run_test('test_reify_local_echo_message', () => { diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index c5bca870e8..641dfd7f06 100644 --- a/static/js/click_handlers.js +++ b/static/js/click_handlers.js @@ -346,6 +346,13 @@ exports.initialize = function () { muting_ui.mute(stream_id, topic); }); + $('body').on('click', '.on_hover_topic_unmute', function (e) { + e.stopPropagation(); + const stream_id = parseInt($(e.currentTarget).attr('data-stream-id'), 10); + const topic = $(e.currentTarget).attr('data-topic-name'); + muting_ui.unmute(stream_id, topic); + }); + // RECENT TOPICS $('body').on('click', '.on_hover_topic_read', function (e) { diff --git a/static/js/muting_ui.js b/static/js/muting_ui.js index 15176a9407..d1daccfd65 100644 --- a/static/js/muting_ui.js +++ b/static/js/muting_ui.js @@ -112,7 +112,7 @@ exports.mute = function (stream_id, topic) { title_text: i18n.t("Topic muted"), undo_button_text: i18n.t("Unmute"), }); - recent_topics.update_topic_is_muted(stream_id, topic, true); + recent_topics.update_topic_is_muted(stream_id, topic); }; exports.unmute = function (stream_id, topic) { @@ -125,7 +125,7 @@ exports.unmute = function (stream_id, topic) { exports.rerender(); exports.persist_unmute(stream_id, topic); feedback_widget.dismiss(); - recent_topics.update_topic_is_muted(stream_id, topic, false); + recent_topics.update_topic_is_muted(stream_id, topic); }; exports.toggle_mute = function (message) { diff --git a/static/js/recent_topics.js b/static/js/recent_topics.js index 83484d07bc..d979a4608a 100644 --- a/static/js/recent_topics.js +++ b/static/js/recent_topics.js @@ -88,7 +88,9 @@ function format_topic(topic_data) { // We only supply the data to the topic rows and let jquery // display / hide them according to filters instead of // doing complete re-render. - const muted = !!muting.is_topic_muted(stream_id, topic); + const topic_muted = !!muting.is_topic_muted(stream_id, topic); + const stream_muted = stream_data.is_muted(stream_id); + const muted = topic_muted || stream_muted; const unread_count = unread.unread_topic_counter.get(stream_id, topic); // Display in most recent sender first order @@ -112,6 +114,7 @@ function format_topic(topic_data) { senders: senders_info, count_senders: Math.max(0, all_senders.length - MAX_AVATAR), muted: muted, + topic_muted: topic_muted, participated: topic_data.participated, }; } @@ -149,7 +152,7 @@ function is_row_hidden(data) { return true; } else if (!participated && filters.has('participated')) { return true; - } else if (muted) { + } else if (muted && !filters.has('muted')) { return true; } return false; @@ -196,7 +199,7 @@ exports.inplace_rerender = function (topic_key) { } }; -exports.update_topic_is_muted = function (stream_id, topic, is_muted) { +exports.update_topic_is_muted = function (stream_id, topic) { const key = stream_id + ":" + topic; if (!topics.has(key)) { // we receive mute request for a topic we are @@ -204,11 +207,7 @@ exports.update_topic_is_muted = function (stream_id, topic, is_muted) { return false; } - if (is_muted) { - get_topic_row(key).hide(); - } else { - get_topic_row(key).show(); - } + exports.inplace_rerender(key); return true; }; @@ -262,6 +261,7 @@ exports.update_filters_view = function () { const rendered_filters = render_recent_topics_filters({ filter_participated: filters.has('participated'), filter_unread: filters.has('unread'), + filter_muted: filters.has('muted'), }); $("#recent_filters_group").html(rendered_filters); @@ -297,6 +297,7 @@ exports.complete_rerender = function () { recent_topics: format_all_topics(), filter_participated: filters.has('participated'), filter_unread: filters.has('unread'), + filter_muted: filters.has('muted'), }); $('#recent_topics_table').html(rendered_body); exports.update_filters_view(); diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss index 71161a8105..96c1bfaa62 100644 --- a/static/styles/zulip.scss +++ b/static/styles/zulip.scss @@ -1128,6 +1128,7 @@ td.pointer { .on_hover_topic_edit, .always_visible_topic_edit, .on_hover_topic_mute, +.on_hover_topic_unmute, .on_hover_topic_read { &:hover { cursor: pointer; diff --git a/static/templates/recent_topic_row.hbs b/static/templates/recent_topic_row.hbs index 9e442240f1..41c56c9c6f 100644 --- a/static/templates/recent_topic_row.hbs +++ b/static/templates/recent_topic_row.hbs @@ -10,7 +10,11 @@ {{#if unread_count}}+{{unread_count}}{{/if}} + {{#if topic_muted}} + + {{else}} + {{/if}} diff --git a/static/templates/recent_topics_filters.hbs b/static/templates/recent_topics_filters.hbs index a34de546f2..90a369422e 100644 --- a/static/templates/recent_topics_filters.hbs +++ b/static/templates/recent_topics_filters.hbs @@ -15,3 +15,11 @@ {{/if}} {{t 'Participated' }} +