From d30a6c64c31c178c9b676eb6da853b75f63145a6 Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Thu, 15 Feb 2018 16:47:38 -0800
Subject: [PATCH] Revert "Make recipient bar styling more compact and clean."

This reverts commit 8e2d9b8f680254f1df3a5a6e07e89c7213cf6d39.

This adds the arrows back to the recipient bars because even though
it's not our end state, it looks better than the boxy design that we
had in between.
---
 static/js/stream_color.js                 |  3 +-
 static/styles/zulip.css                   | 39 ++++++++++++++++++++++-
 static/templates/recipient_row.handlebars |  2 +-
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/static/js/stream_color.js b/static/js/stream_color.js
index d09ff67b44..2b2282a676 100644
--- a/static/js/stream_color.js
+++ b/static/js/stream_color.js
@@ -49,7 +49,8 @@ function update_table_stream_color(table, stream_name, color) {
         if ($.trim($label.text()) === stream_name) {
             var messages = $label.closest(".recipient_row").children(".message_row");
             messages.children(".messagebox").css("box-shadow", "inset 2px 0px 0px 0px " + style + ", -1px 0px 0px 0px " + style);
-            $label.css({background: style});
+            $label.css({background: style,
+                          "border-left-color": style});
             $label.removeClass(exports.color_classes);
             $label.addClass(color_class);
         }
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 8ac0e4e6c9..b6289898c1 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -746,7 +746,11 @@ td.pointer {
     font-weight: normal;
     height: 17px;
     line-height: 17px;
+    border-top-color: hsla(0, 0%, 0%, 0.0);
+    border-right-color: hsla(0, 0%, 0%, 0.0);
+    border-bottom-color: hsla(0, 0%, 0%, 0.0);
     background-color: hsl(0, 0%, 88%);
+    border-left-color: hsl(0, 0%, 88%);
     border-width: 0px;
     position: relative;
     text-decoration: none;
@@ -766,9 +770,41 @@ td.pointer {
     text-decoration: none;
 }
 
+.stream_label:after {
+    left: 100%;
+    top: 50%;
+    content: " ";
+    height: 0px;
+    width: 0px;
+    position: absolute;
+    pointer-events: none;
+    margin-top: -11px;
+    border-style: solid;
+    border-width: 11px 0 11px 5px;
+    border-color: inherit;
+    z-index: 2;
+    -moz-transform: scale(.9999);
+}
+
+.stream_label:before {
+    left: 100%;
+    top: 50%;
+    content: " ";
+    height: 0px;
+    width: 0px;
+    position: absolute;
+    pointer-events: none;
+    margin-top: -14px;
+    border-style: solid;
+    border-width: 14px 0 14px 6px;
+    border-color: hsla(0, 0%, 0%, 0.0) hsla(0, 0%, 0%, 0.0) hsla(0, 0%, 0%, 0.0) #ffffff;
+    z-index: 1;
+    -moz-transform: scale(.9999);
+}
+
 .stream_topic {
     display: inline-block;
-    padding: 3px 4px 2px 7px;
+    padding: 3px 3px 2px 12px;
     margin-left: -5px;
     height: 17px;
     line-height: 17px;
@@ -1001,6 +1037,7 @@ td.pointer {
     font-size: 14px;
     height: 17px;
     line-height: 17px;
+    border-left-color: hsl(0, 0%, 27%);
 }
 
 /* Base color backgrounds for messageboxes,
diff --git a/static/templates/recipient_row.handlebars b/static/templates/recipient_row.handlebars
index d3519a59b5..3302f0553b 100644
--- a/static/templates/recipient_row.handlebars
+++ b/static/templates/recipient_row.handlebars
@@ -4,7 +4,7 @@
         <div class="message-header-contents">
             {{! stream link }}
             <a class="message_label_clickable narrows_by_recipient stream_label {{color_class}}"
-                style="background: {{background_color}};"
+                style="background: {{background_color}}; border-left-color: {{background_color}};"
                 href="{{stream_url}}"
                 title="{{#tr this}}Narrow to stream &quot;__display_recipient__&quot;{{/tr}}">
                 {{! invite only lock }}