From 2c0c936e40121493111a693e77b2c42a7260a787 Mon Sep 17 00:00:00 2001
From: vaibhavrajsingh2001 <vaibhavrajsingh2001@gmail.com>
Date: Tue, 21 Apr 2020 02:11:03 +0530
Subject: [PATCH] stream settings: Correct alignment of filter streams div.

The div containing options for filtering streams was placed in the
centre. Aligned it towards the right. Had to pass a special check
variable in subs.js:540 to add the specific class for this purpose.
This was a specific scenario where this sort of CSS was to be added,
hence had to make a specific case.

Also, fixed the bottom border color of the search streams bar for night
mode.
---
 frontend_tests/node_tests/components.js | 12 ++++++++++++
 static/js/components.js                 |  5 +++++
 static/js/subs.js                       |  1 +
 static/styles/app_components.scss       |  4 ++++
 static/styles/night_mode.scss           |  1 +
 5 files changed, 23 insertions(+)

diff --git a/frontend_tests/node_tests/components.js b/frontend_tests/node_tests/components.js
index f0e4f138e2..68ae175647 100644
--- a/frontend_tests/node_tests/components.js
+++ b/frontend_tests/node_tests/components.js
@@ -85,10 +85,17 @@ run_test('basics', () => {
 
         self.children = [];
 
+        self.classList = new Set();
+
         self.append = function (child) {
             self.children.push(child);
         };
 
+        self.addClass = function (c) {
+            self.classList.add(c);
+            self.addedClass = c;
+        };
+
         self.find = function (sel) {
             switch (sel) {
             case ".ind-tab":
@@ -110,6 +117,8 @@ run_test('basics', () => {
         switch (sel) {
         case "<div class='tab-switcher'></div>":
             return switcher;
+        case "<div class='tab-switcher stream_sorter_toggle'></div>":
+            return switcher;
         case "<div class='ind-tab' data-tab-key='keyboard-shortcuts' data-tab-id='0' tabindex='0'>translated: Keyboard shortcuts</div>":
             return make_tab(0);
         case "<div class='ind-tab' data-tab-key='message-formatting' data-tab-id='1' tabindex='0'>translated: Message formatting</div>":
@@ -131,6 +140,7 @@ run_test('basics', () => {
             { label: i18n.t("Message formatting"), key: "message-formatting" },
             { label: i18n.t("Search operators"), key: "search-operators" },
         ],
+        html_class: "stream_sorter_toggle",
         callback: function (name, key) {
             assert.equal(callback_args, undefined);
             callback_args = [name, key];
@@ -147,6 +157,8 @@ run_test('basics', () => {
 
     assert.deepEqual(switcher.children, tabs);
 
+    assert.equal(switcher.addedClass, 'stream_sorter_toggle');
+
     assert.equal(focused_tab, 0);
     assert.equal(tabs[0].class, 'first selected');
     assert.equal(tabs[1].class, 'middle');
diff --git a/static/js/components.js b/static/js/components.js
index 06b450d24b..6575de2cd4 100644
--- a/static/js/components.js
+++ b/static/js/components.js
@@ -13,6 +13,11 @@
 exports.toggle = function (opts) {
     const component = (function render_component(opts) {
         const _component = $("<div class='tab-switcher'></div>");
+        if (opts.html_class) {
+            // add a check inside passed arguments in case some extra
+            // classes need to be added for correct alignment or other purposes
+            _component.addClass(opts.html_class);
+        }
         opts.values.forEach(function (value, i) {
             // create a tab with a tab-id so they don't have to be referenced
             // by text value which can be inconsistent.
diff --git a/static/js/subs.js b/static/js/subs.js
index 383630a9d5..94a994b2ac 100644
--- a/static/js/subs.js
+++ b/static/js/subs.js
@@ -537,6 +537,7 @@ exports.setup_page = function (callback) {
                 { label: `<i class="fa fa-user-o" title="${i18n.t("Sort by number of subscribers")}"></i>`, key: "by-subscriber-count" },
                 { label: `<i class="fa fa-bar-chart" title="${i18n.t("Sort by estimated weekly traffic")}"></i>`, key: "by-weekly-traffic" },
             ],
+            html_class: "stream_sorter_toggle",
             callback: function (value, key) {
                 exports.switch_stream_sort(key);
             },
diff --git a/static/styles/app_components.scss b/static/styles/app_components.scss
index 3aac383ff1..4b6e09d0b0 100644
--- a/static/styles/app_components.scss
+++ b/static/styles/app_components.scss
@@ -257,6 +257,10 @@
             }
         }
     }
+
+    .stream_sorter_toggle {
+        margin-left: auto;
+    }
 }
 
 /* -- unified overlay design component -- */
diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss
index e51a969fe0..ca71d0d6e8 100644
--- a/static/styles/night_mode.scss
+++ b/static/styles/night_mode.scss
@@ -34,6 +34,7 @@ body.night-mode {
 
     .column-left .left-sidebar,
     #settings_page .form-sidebar,
+    .stream_name_search_section,
     .column-right .right-sidebar {
         border-color: hsla(0, 0%, 0%, 0.2);
     }