Move the lock to the left and widen the topic input field

(imported from commit 1d70afdc82b653239f7d016997c7e9cbe9eb5f14)

static/js/compose.js

@@ -85,10 +85,13 @@ function hide_box() {
 
 function update_lock_icon_for_stream(stream_name) {
     var icon = $("#compose-lock-icon");
+    var streamfield = $("#stream");
     if (stream_data.get_invite_only(stream_name)) {
         icon.show();
+        streamfield.addClass("lock-padding");
     } else {
         icon.hide();
+        streamfield.removeClass("lock-padding");
     }
 }
 

static/styles/zulip.css

@@ -827,7 +827,7 @@ just a temporary hack.
 
 .compose_table #compose-lock-icon i {
     position: absolute;
-    left: -18px;
+    left: 5px;
     top: 3px;
 }
 
@@ -1354,18 +1354,24 @@ input.recipient_box {
     margin: 0px;
     height: 1em;
     border-radius: 3px;
-    padding-right: 18px;
-    min-width: 120px;
 }
 
 #stream.recipient_box {
     width: 20%;
     border-radius: 0px 3px 3px 0px;
     border-left: 0px;
+    min-width: 120px;
 }
+
 #subject.recipient_box {
-    width: 15%;
+    width: 25%;
+    min-width: 140px;
 }
+
+#stream.recipient_box.lock-padding {
+    padding-left: 18px;
+}
+
 #private_message_recipient.recipient_box {
     width: 100%;
 }

templates/zerver/compose.html

@@ -34,12 +34,12 @@
               <td class="message_header_colorblock message_header_stream left_part">
               </td>
               <td class="right_part">
-                  <input type="text" class="recipient_box" name="stream" id="stream"
-                         maxlength="30"
-                         value="" placeholder="Stream" autocomplete="off" tabindex="120"/>
                   <span id="compose-lock-icon">
                     <i class="icon-vector-lock" title="This is an invite-only stream"></i>
                   </span>
+                  <input type="text" class="recipient_box" name="stream" id="stream"
+                         maxlength="30"
+                         value="" placeholder="Stream" autocomplete="off" tabindex="120"/>
                   <i class="icon-vector-narrow icon-vector-small"></i>
                   <input type="text" class="recipient_box" name="subject" id="subject"
                          maxlength="60"