From 89539d6fb548c6376093b406d009b1c9f4d8ad2b Mon Sep 17 00:00:00 2001
From: Siddharth Varshney <siddharth.98varshney@gmail.com>
Date: Thu, 21 May 2020 01:42:29 +0530
Subject: [PATCH] stream-popover: Change design of stream popover.

Extracts the stream name from the list items and display
it in the popover title.
---
 static/styles/popovers.scss                 |  6 +++++
 static/templates/stream_sidebar_actions.hbs | 27 +++++++++++++++------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/static/styles/popovers.scss b/static/styles/popovers.scss
index b082334588..06dcdf1903 100644
--- a/static/styles/popovers.scss
+++ b/static/styles/popovers.scss
@@ -55,6 +55,12 @@
 }
 
 .streams_popover {
+    .topic-name {
+        text-align: center;
+        margin-top: 5px;
+        margin-bottom: 5px;
+    }
+
     .colorpicker-container {
         display: none;
         margin-right: 10px;
diff --git a/static/templates/stream_sidebar_actions.hbs b/static/templates/stream_sidebar_actions.hbs
index 55db07292c..285c029438 100644
--- a/static/templates/stream_sidebar_actions.hbs
+++ b/static/templates/stream_sidebar_actions.hbs
@@ -1,5 +1,18 @@
 {{! Contents of the "stream actions" popup }}
 <ul class="nav nav-list streams_popover" data-stream-id="{{ stream.stream_id }}" data-name="{{ stream.name }}">
+    <li>
+        <p class="topic-name">
+            <span id="stream_sidebar_privacy_swatch_{{stream.stream_id}}" class="stream-privacy filter-icon" style="color: {{stream.color}}">
+                {{> stream_privacy
+                  invite_only=stream.invite_only
+                  is_web_public=stream.is_web_public }}
+            </span>
+            <b>{{stream.name}}</b>
+        </p>
+    </li>
+
+    <hr>
+
     <li>
         <a class="open_stream_settings">
             <i class="fa fa-cog" aria-hidden="true"></i>
@@ -10,26 +23,26 @@
         <a class="pin_to_top">
             <i class="fa fa-thumb-tack stream-pin-icon" aria-hidden="true"></i>
             {{#if stream.pin_to_top}}
-                {{#tr this}}Unpin stream <b>__stream.name__</b> from top{{/tr}}
+            {{t "Unpin stream from top"}}
             {{else}}
-                {{#tr this}}Pin stream <b>__stream.name__</b> to top{{/tr}}
+            {{t "Pin stream to top"}}
             {{/if}}
         </a>
     </li>
     <li>
         <a class="mark_stream_as_read">
             <i class="fa fa-book" aria-hidden="true"></i>
-            {{#tr this}}Mark all messages in <b>__stream.name__</b> as read{{/tr}}
+            {{t "Mark all messages as read"}}
         </a>
     </li>
     <li>
         <a class="toggle_home">
             {{#if stream.is_muted}}
-                <i class="fa fa-bell" aria-hidden="true"></i>
-                {{#tr this}}Unmute the stream <b>__stream.name__</b>{{/tr}}
+            <i class="fa fa-bell" aria-hidden="true"></i>
+            {{t "Unmute stream"}}
             {{else}}
-                <i class="fa fa-bell-slash" aria-hidden="true"></i>
-                {{#tr this}}Mute the stream <b>__stream.name__</b>{{/tr}}
+            <i class="fa fa-bell-slash" aria-hidden="true"></i>
+            {{t "Mute stream"}}
             {{/if}}
         </a>
     </li>