templates: Show Overlay of Recent Topics.

* Show an empty overlay of recent topics.
* Register click event to open recent topics.
* Launch recent topics on "t" keypress.

This is based on the draft overlay.

frontend_tests/node_tests/hotkey.js

@@ -178,7 +178,7 @@ run_test('basic_chars', () => {
 
     // Unmapped keys should immediately return false, without
     // calling any functions outside of hotkey.js.
-    assert_unmapped('abfhlmotyz');
+    assert_unmapped('abfhlmoyz');
     assert_unmapped('BEFHILNOQTUWXYZ');
 
     // We have to skip some checks due to the way the code is
@@ -204,7 +204,7 @@ run_test('basic_chars', () => {
     hotkey.processing_text = return_true;
 
     function test_normal_typing() {
-        assert_unmapped('abcdefghijklmnopqrstuvwxyz');
+        assert_unmapped('abcdefghijklmnopqrsuvwxyz');
         assert_unmapped(' ');
         assert_unmapped('[]\\.,;');
         assert_unmapped('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
@@ -230,6 +230,7 @@ run_test('basic_chars', () => {
     overlays.streams_open = return_false;
     overlays.lightbox_open = return_false;
     overlays.drafts_open = return_false;
+    overlays.recent_topics = return_false;
 
     page_params.can_create_streams = true;
     overlays.streams_open = return_true;
@@ -264,6 +265,16 @@ run_test('basic_chars', () => {
     overlays.is_active = return_false;
     assert_mapping('d', 'drafts.launch');
 
+
+    // Test opening and closing of Recent Topics
+    overlays.is_active = return_true;
+    overlays.recent_topics_open = return_true;
+    assert_mapping('t', 'overlays.close_overlay');
+    overlays.recent_topics_open = return_false;
+    test_normal_typing();
+    overlays.is_active = return_false;
+    assert_mapping('t', 'hashchange.go_to_location');
+
     // Next, test keys that only work on a selected message.
     const message_view_only_keys = '@+>RjJkKsSuvi:GM';
 

frontend_tests/node_tests/recent_topics.js

@@ -1,6 +1,15 @@
 let rt = zrequire('recent_topics');
 zrequire('message_util');
 
+set_global('$', global.make_zjquery());
+set_global('hashchange', {
+    exit_overlay: () => {},
+});
+set_global('overlays', {
+    open_overlay: (opts) => {
+        overlays.close_callback = opts.on_close;
+    },
+});
 set_global('people', {
     is_my_user_id: function (id) {
         return id === 1;
@@ -293,3 +302,13 @@ run_test('test_topic_edit', () => {
     assert.equal(all_topics.get(stream2 + ":" + topic1), undefined);
     verify_topic_data(all_topics, stream3, topic9, messages[0].id, true, 0);
 });
+
+run_test("test_recent_topics_launch", () => {
+
+    global.stub_templates(function (template_name) {
+        assert.equal(template_name, 'recent_topics_table');
+        return '<recent_topics table stub>';
+    });
+    rt.launch();
+    overlays.close_callback();
+});

static/js/bundles/app.js

@@ -225,6 +225,7 @@ import "../../styles/left-sidebar.scss";
 import "../../styles/right-sidebar.scss";
 import "../../styles/lightbox.scss";
 import "../../styles/popovers.scss";
+import "../../styles/recent_topics.scss";
 import "../../styles/typing_notifications.scss";
 import "../../styles/hotspots.scss";
 import "../../styles/night_mode.scss";

static/js/click_handlers.js

@@ -602,6 +602,11 @@ exports.initialize = function () {
         compose_actions.cancel();
     });
 
+    $("#recent_topics_icon").click(function (e) {
+        e.stopPropagation();
+        hashchange.go_to_location('recent_topics');
+    });
+
     $("#streams_inline_cog").click(function (e) {
         e.stopPropagation();
         hashchange.go_to_location('streams/subscribed');

static/js/hashchange.js

@@ -63,7 +63,7 @@ const state = {
 
 function is_overlay_hash(hash) {
     // Hash changes within this list are overlays and should not unnarrow (etc.)
-    const overlay_list = ["streams", "drafts", "settings", "organization", "invite"];
+    const overlay_list = ["streams", "drafts", "settings", "organization", "invite", "recent_topics"];
     const main_hash = hash_util.get_hash_category(hash);
 
     return overlay_list.includes(main_hash);
@@ -122,6 +122,7 @@ function do_hashchange_normal(from_reload) {
     case "#streams":
     case "#organization":
     case "#settings":
+    case "#recent_topics":
         blueslip.error('overlay logic skipped for: ' + hash);
         break;
     }
@@ -225,6 +226,11 @@ function do_hashchange_overlay(old_hash) {
         invite.launch();
         return;
     }
+
+    if (base === 'recent_topics') {
+        recent_topics.launch();
+        return;
+    }
 }
 
 function hashchanged(from_reload, e) {

static/js/hotkey.js

@@ -104,6 +104,7 @@ const keypress_mappings = {
     113: {name: 'query_streams', message_view_only: true}, // 'q'
     114: {name: 'reply_message', message_view_only: true}, // 'r'
     115: {name: 'narrow_by_recipient', message_view_only: true}, // 's'
+    116: {name: 'open_recent_topics', message_view_only: true}, // 't'
     117: {name: 'show_sender_info', message_view_only: true}, // 'u'
     118: {name: 'show_lightbox', message_view_only: true}, // 'v'
     119: {name: 'query_users', message_view_only: true}, // 'w'
@@ -462,6 +463,10 @@ exports.process_hotkey = function (e, hotkey) {
             overlays.close_overlay('drafts');
             return true;
         }
+        if (event_name === 'open_recent_topics' && overlays.recent_topics_open()) {
+            overlays.close_overlay('recent_topics');
+            return true;
+        }
         return false;
     }
 
@@ -664,6 +669,9 @@ exports.process_hotkey = function (e, hotkey) {
     case 'copy_with_c':
         copy_and_paste.copy_handler();
         return true;
+    case 'open_recent_topics':
+        hashchange.go_to_location('recent_topics');
+        return true;
     }
 
     if (current_msg_list.empty()) {

static/js/overlays.js

@@ -36,6 +36,10 @@ exports.drafts_open = function () {
     return open_overlay_name === 'drafts';
 };
 
+exports.recent_topics_open = function () {
+    return open_overlay_name === 'recent_topics';
+};
+
 // To address bugs where mouse might apply to the streams/settings
 // overlays underneath an open modal within those settings UI, we add
 // this inline style to '.overlay.show', overriding the

static/js/recent_topics.js

@@ -1,3 +1,4 @@
+const render_recent_topics_body = require('../templates/recent_topics_table.hbs');
 const topics = new Map(); // Key is stream-id:topic.
 
 exports.process_messages = function (messages) {
@@ -67,4 +68,17 @@ exports.process_topic_edit = function (old_stream_id, old_topic, new_topic, new_
     exports.process_messages(new_topic_msgs);
 };
 
+exports.launch = function () {
+    const rendered_body = render_recent_topics_body();
+    $('#recent_topics_table').html(rendered_body);
+
+    overlays.open_overlay({
+        name: 'recent_topics',
+        overlay: $('#recent_topics_overlay'),
+        on_close: function () {
+            hashchange.exit_overlay();
+        },
+    });
+};
+
 window.recent_topics = exports;

static/styles/night_mode.scss

@@ -403,6 +403,7 @@ on a dark background, and don't change the dark labels dark either. */
 
     thead,
     .drafts-container .drafts-header,
+    .recent_topics_container .recent_topics_header,
     .nav > li > a:hover,
     .subscriptions-container .subscriptions-header,
     .grey-box,

static/styles/recent_topics.scss

@@ -0,0 +1,60 @@
+.recent_topics_container {
+    position: relative;
+    height: 95%;
+    width: 70%;
+    max-width: 1200px;
+    max-height: 1000px;
+    padding: 0px;
+    border-radius: 4px;
+    background-color: hsl(0, 0%, 100%);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    @media (max-width: 1130px) {
+        max-width: 90%;
+    }
+
+    @media (max-width: 700px) {
+        height: 95%;
+        max-width: none;
+        width: 90%;
+    }
+
+    .recent_topics_header {
+        padding-top: 4px;
+        padding-bottom: 8px;
+        text-align: center;
+        border-bottom: 1px solid hsl(0, 0%, 87%);
+
+        h1 {
+            margin: 0;
+            font-size: 1.1em;
+            text-transform: uppercase;
+        }
+
+        .exit {
+            font-weight: 400;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: hsl(0, 0%, 67%);
+            cursor: pointer;
+
+            .exit-sign {
+                position: relative;
+                top: 3px;
+                margin-left: 3px;
+                font-size: 1.5rem;
+                font-weight: 600;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .recent_topics_table {
+        margin: 0px;
+        padding: 15px;
+        overflow: auto;
+    }
+}

static/templates/recent_topics_table.hbs

@@ -0,0 +1,2 @@
+<table>
+</table>

templates/zerver/app/index.html

@@ -45,6 +45,7 @@
 {% include "zerver/app/lightbox_overlay.html" %}
 {% include "zerver/app/subscriptions.html" %}
 {% include "zerver/app/drafts.html" %}
+{% include "zerver/app/recent_topics.html" %}
 <div id="settings_overlay_container" class="overlay" data-overlay="settings" aria-hidden="true">
     {% include "zerver/app/settings_overlay.html" %}
 </div>

templates/zerver/app/recent_topics.html

@@ -0,0 +1,17 @@
+<div id="recent_topics_overlay" class="overlay new-style" data-overlay="recent_topics">
+    <div class="flex overlay-content">
+        <div class="recent_topics_container modal-bg">
+            <div class="recent_topics_header">
+                <h1>{% trans %}Recent topics (beta){% endtrans %}</h1>
+                <div class="exit">
+                    <span class="exit-sign">&times;</span>
+                </div>
+                <div class="recent-hotkey-reminder">
+                    {% trans %}Pro tip: You can use 't' to view recent topics.{% endtrans %}
+                </div>
+            </div>
+            <div class="recent_topics_table" id="recent_topics_table">
+            </div>
+        </div>
+    </div>
+</div>