message_edit: Show stream color bar alongside stream select.

* Stream bar color logic is borrwoed from compose stream bar.
* Use flex containers to align elements and automatically set their
  height to be same, them automatically filling the stream color bar
  height to be the height of the select box.
* Use flex-wrap to wrap the propagate selector when out of space.

* To make sure stream select box and stream color box are closest possible,
  select box has been moved under stream color box.

static/js/compose_actions.js

@@ -112,7 +112,7 @@ exports.complete_starting_tasks = function (msg_type, opts) {
     exports.maybe_scroll_up_selected_message();
     ui_util.change_tab_to("#home");
     compose_fade.start_compose(msg_type);
-    ui_util.decorate_stream_bar(opts.stream, $("#stream-message .message_header_stream"));
+    ui_util.decorate_stream_bar(opts.stream, $("#stream-message .message_header_stream"), true);
     $(document).trigger($.Event('compose_started.zulip', opts));
     resize.resize_bottom_whitespace();
     exports.update_placeholder_text(opts);

static/js/message_edit.js

@@ -294,12 +294,19 @@ function edit_message(row, raw_content) {
     upload.feature_check($('#attach_files_' + rows.id(row)));
 
     const message_edit_stream = row.find("#select_stream_id_" + message.id);
+    const stream_header_colorblock = row.find(".stream_header_colorblock");
     const message_edit_content = row.find('textarea.message_edit_content');
     const message_edit_topic = row.find('input.message_edit_topic');
     const message_edit_topic_propagate = row.find('select.message_edit_topic_propagate');
     const message_edit_countdown_timer = row.find('.message_edit_countdown_timer');
     const copy_message = row.find('.copy_message');
 
+    ui_util.decorate_stream_bar(message.stream, stream_header_colorblock, false);
+    message_edit_stream.change(function () {
+        const stream_name = stream_data.maybe_get_stream_name(parseInt(this.value, 10));
+        ui_util.decorate_stream_bar(stream_name, stream_header_colorblock, false);
+    });
+
     if (editability === editability_types.NO) {
         message_edit_content.attr("readonly", "readonly");
         message_edit_topic.attr("readonly", "readonly");

static/js/ui_init.js

@@ -187,7 +187,7 @@ exports.initialize_kitchen_sink_stuff = function () {
     });
 
     $("#stream_message_recipient_stream").on('blur', function () {
-        ui_util.decorate_stream_bar(this.value, $("#stream-message .message_header_stream"));
+        ui_util.decorate_stream_bar(this.value, $("#stream-message .message_header_stream"), true);
     });
 
     $(window).on('blur', function () {

static/js/ui_util.js

@@ -46,9 +46,14 @@ function update_lock_icon_for_stream(stream_name) {
 // color look like the stream being used.
 // (In particular, if there's a color associated with it,
 //  have that color be reflected here too.)
-exports.decorate_stream_bar = function (stream_name, element) {
+exports.decorate_stream_bar = function (stream_name, element, is_compose) {
+    if (stream_name === undefined) {
+        return false;
+    }
     const color = stream_data.get_color(stream_name);
-    update_lock_icon_for_stream(stream_name);
+    if (is_compose) {
+        update_lock_icon_for_stream(stream_name);
+    }
     element.css('background-color', color)
         .removeClass(stream_color.color_classes)
         .addClass(stream_color.get_color_class(color));

static/styles/app_components.scss

@@ -387,3 +387,25 @@
         margin-left: 10px;
     }
 }
+
+.stream_header_colorblock {
+    /* box-shadow: 0px 2px 3px hsl(0, 0%, 80%); */
+    box-shadow: inset 0px 2px 1px -2px hsl(0, 0%, 20%), inset 2px 0px 1px -2px hsl(0, 0%, 20%);
+    width: 10px;
+    border-radius: 3px 0px 0px 3px;
+    border: 1px solid hsla(0, 0%, 0%, 0.2);
+    border-right: 0px;
+    box-shadow: none;
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 5px;
+    z-index: 1;
+}
+
+.edit-controls .fa-angle-right {
+    font-size: 0.9em;
+    -webkit-text-stroke: 0.05em;
+    position: relative;
+    margin: 0px 5px;
+    top: 9px;
+}

static/styles/zulip.scss

@@ -1244,20 +1244,27 @@ div.focused_table {
     }
 }
 
-#inline_topic_edit,
-#message_edit_topic {
+#inline_topic_edit {
     margin-bottom: 5px;
 }
 
+#message_edit_topic {
+    margin: 0 5px 5px 0;
+}
+
+.message_edit_header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
 .select_edit_stream {
     margin-bottom: 5px !important;
-}
-
-.edit-controls .fa-angle-right {
-    font-size: 0.9em;
-    -webkit-text-stroke: 0.05em;
-    position: relative;
-    margin: 0px 5px;
+    border-left: 0px;
+    padding-left: 0px;
+    border-radius: 0px 3px 3px 0px;
+    margin-left: -11px;
+    text-indent: 10px;
 }
 
 #inline_topic_edit.header-v {

static/templates/message_edit_form.hbs

@@ -8,19 +8,22 @@
     {{#if is_stream}}
     <div class="control-group no-margin">
         <div class="controls edit-controls">
-            <select class="select_edit_stream" id="select_stream_id_{{ message_id }}" {{#unless show_edit_stream}}style="display:none"{{/unless}}>
-                <option value="{{ stream_id }}" selected='selected'>#{{ stream_name }}</option>
-                {{#each available_streams}}
-                <option value="{{ this.stream_id }}">#{{this.name}}</option>
-                {{/each}}
-            </select>
-            <i class="fa fa-angle-right" aria-hidden="true" {{#unless show_edit_stream}}style="display:none"{{/unless}}></i>
-            <input type="text" placeholder="{{topic}}" value="{{topic}}" class="message_edit_topic" id="message_edit_topic" />
-            <select class='message_edit_topic_propagate' style='display:none;'>
-                <option selected="selected" value="change_later"> {{t "Change later messages to this topic" }}</option>
-                <option value="change_one"> {{t "Change only this message topic" }}</option>
-                <option value="change_all"> {{t "Change previous and following messages to this topic" }}</option>
-            </select>
+            <div class="message_edit_header">
+                <div class="stream_header_colorblock" {{#unless show_edit_stream}}style="display:none"{{/unless}}></div>
+                <select class="select_edit_stream" id="select_stream_id_{{ message_id }}" {{#unless show_edit_stream}}style="display:none"{{/unless}}>
+                    <option value="{{ stream_id }}" selected='selected'>#{{ stream_name }}</option>
+                    {{#each available_streams}}
+                    <option value="{{ this.stream_id }}">#{{this.name}}</option>
+                    {{/each}}
+                </select>
+                <i class="fa fa-angle-right" aria-hidden="true" {{#unless show_edit_stream}}style="display:none"{{/unless}}></i>
+                <input type="text" placeholder="{{topic}}" value="{{topic}}" class="message_edit_topic" id="message_edit_topic" />
+                <select class='message_edit_topic_propagate' style='display:none;'>
+                    <option selected="selected" value="change_later"> {{t "Change later messages to this topic" }}</option>
+                    <option value="change_one"> {{t "Change only this message topic" }}</option>
+                    <option value="change_all"> {{t "Change previous and following messages to this topic" }}</option>
+                </select>
+            </div>
         </div>
     </div>
     {{/if}}