Add expandable settings panel for subscription entries

(imported from commit 3c07dcac7ec8086d417c2898a307ee67fc286704)

zephyr/jstemplates/subscription.html

@@ -3,12 +3,20 @@
 {{#with this}}
 <tr class="subscription_row" id="subscription_{{id}}">
   <td>
-    <input class="colorpicker" type="text" value="{{color}}" />
+    <div class="subscription_header" data-toggle="collapse" data-target="#subscription_settings_{{id}}">
+      <span class="color_swatch" style="background-color: {{color}}"></span>
       <span class="subscription_name">{{name}}</span>
-  </td>
-  <td class="span2">
       <button class="btn btn-block unsubscribe_button" type="button" name="subscription"
               onclick="subs.unsubscribe_button_click(event);">Unsubscribe</button>
+    </div>
+
+    <div id="subscription_settings_{{id}}" class="collapse subscription_settings">
+      <h5>Settings</h5>
+      <ul>
+        <li><span class="sub_setting_control"><input class="colorpicker" type="text" value="{{color}}" /></span>
+          Stream color
+      </ul>
+    </div>
   </td>
 </tr>
 {{/with}}

zephyr/static/js/subs.js

@@ -9,7 +9,7 @@ var removed_streams = {};
 // that have already been rendered.
 var initial_color_fetch = true;
 
-var default_color = "c2c2c2";
+var default_color = "#c2c2c2";
 var next_sub_id = 0;
 
 function case_insensitive_subscription_index(stream_name) {
@@ -52,9 +52,11 @@ var colorpicker_options = {
     ],
     change: function (color) {
         // TODO: Kind of a hack.
-        var stream_name = $(this).parent().find('.subscription_name').text();
+        var sub_row = $(this).closest('.subscription_row');
+        var stream_name = sub_row.find('.subscription_name').text();
         var hex_color = color.toHexString();
         stream_info[stream_name].color = hex_color;
+        sub_row.find('.color_swatch').css('background-color', hex_color);
         update_historical_message_color(stream_name, hex_color);
 
         $.ajax({
@@ -236,6 +238,8 @@ function ajaxSubscribe(stream) {
 }
 
 exports.unsubscribe_button_click = function (e) {
+    e.preventDefault();
+    e.stopPropagation();
     var stream = $(e.target).closest('.subscription_row').find('.subscription_name').text();
     $.ajax({
         type: "POST",
@@ -259,6 +263,7 @@ exports.unsubscribe_button_click = function (e) {
                 .removeAttr("onclick")
                 .click(function (e) {
                     e.preventDefault();
+                    e.stopPropagation();
                     ajaxSubscribe(name);
                 });
             remove_from_stream_list(name);

zephyr/static/js/ui.js

@@ -677,6 +677,14 @@ $(function () {
         narrow.target(row.attr('zid'));
         narrow.by_subject();
     });
+
+    $("#subscriptions_table").on("mouseover", ".subscription_header", function (e) {
+        $(this).addClass("active");
+    });
+
+    $("#subscriptions_table").on("mouseout", ".subscription_header", function (e) {
+        $(this).removeClass("active");
+    });
 });
 
 return exports;

zephyr/static/styles/zephyr.css

@@ -562,7 +562,51 @@ table.floating_recipient {
     table-layout: fixed;
 }
 
-.subscription_name {
-    vertical-align: middle;
-    padding-left: 0.5em;
+.subscription_header {
+    padding: 2px;
+    height: 30px;
+    line-height: 30px;
+}
+
+.subscription_header.active {
+    border-color: rgba(82, 168, 236, 0.8);
+    cursor: pointer;
+
+  -webkit-box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6);
+     -moz-box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6);
+          box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+.color_swatch {
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    border: 1px #666 solid;
+    padding: 0;
+    margin: 0 0 0 5px;
+    vertical-align: middle;
+}
+
+.subscription_name {
+    padding-left: 0.5em;
+    font-size: 14px;
+    vertical-align: middle;
+}
+
+.subscription_settings {
+    margin-left: 35px;
+}
+
+.subscription_settings ul {
+    list-style-type: none;
+}
+
+.sub_setting_control {
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.unsubscribe_button {
+    width: 140px;
+    float: right;
 }