Move crumbbar to header and change visual appearance

(imported from commit 435e3b46b615f6c496be10b7d170ed3e4201787d)

static/js/colorspace.js

@@ -36,5 +36,21 @@ exports.luminance_to_lightness = function (luminance) {
     return 116*v - 16;
 };
 
+exports.getDecimalColor = function (hexcolor) {
+    return {r: parseInt(hexcolor.substr(1,2), 16),
+            g: parseInt(hexcolor.substr(3,2), 16),
+            b: parseInt(hexcolor.substr(5,2), 16)};
+};
+
+exports.getLighterColor = function (rgb, lightness) {
+    return {r: (lightness * 255 + (1 - lightness) * rgb.r).toFixed(),
+            g: (lightness * 255 + (1 - lightness) * rgb.g).toFixed(),
+            b: (lightness * 255 + (1 - lightness) * rgb.b).toFixed()};
+};
+
+exports.getHexColor = function (rgb) {
+    return "#" + parseInt(rgb.r, 10).toString(16) + parseInt(rgb.g, 10).toString(16) + parseInt(rgb.b, 10).toString(16);
+};
+
 return exports;
 }());

static/js/tab_bar.js

@@ -2,12 +2,13 @@ var tab_bar = (function () {
 
 var exports = {};
 
-function make_tab(title, hash, data, extra_class) {
+function make_tab(title, hash, data, extra_class, home) {
     return {active: "inactive",
             cls: extra_class || "",
             title: title,
             hash: hash,
-            data: data};
+            data: data,
+            home: home || false };
 }
 
 function make_tab_data() {
@@ -30,7 +31,7 @@ function make_tab_data() {
                                null));
         }
     } else {
-        tabs.push(make_tab("Home", "#", "home", "root"));
+        tabs.push(make_tab('Home', "#", "home", "root", true));
     }
 
     if (narrow.active() && narrow.operators().length > 0) {
@@ -91,14 +92,11 @@ function make_tab_data() {
     }
 
     // Last tab is not a link
-    tabs[tabs.length - 1].hash = false;
+    tabs[tabs.length - 1].hash = null;
-
     return tabs;
 }
 
 exports.colorize_tab_bar = function () {
-    // The stream tab, if it exists, should be the same color as that stream's chosen color
-    // Likewise, the border and outline should be the stream color as well
     var stream_tab = $('#tab_list .stream');
     if (stream_tab.length > 0) {
         var stream_name = stream_tab.data('name');
@@ -107,28 +105,29 @@ exports.colorize_tab_bar = function () {
         }
         stream_name = stream_name.toString();
 
-        var stream_color = stream_data.get_color(stream_name);
+        var color_for_stream = stream_data.get_color(stream_name);
+        var stream_dark = stream_color.get_color_class(color_for_stream);
+        var stream_light = colorspace.getHexColor(colorspace.getLighterColor(colorspace.getDecimalColor(color_for_stream), 0.2));
 
-        if (!stream_tab.hasClass('active')) {
+        if (stream_tab.hasClass("stream")) {
-            stream_tab.css('border-color', stream_color);
+            stream_tab.css('border-left-color', color_for_stream).css('background-color', color_for_stream);
+            if (stream_tab.hasClass("inactive")) {
+              stream_tab.hover (
+                function () {
+                 $(this).css('border-left-color', stream_light).css('background-color', stream_light);
+                }, function () {
+                 $(this).css('border-left-color', color_for_stream).css('background-color', color_for_stream);
+                }
+              );
+            }
+            stream_tab.addClass(stream_dark);
         }
-
-        $('#tab_list li.active').css('border-color', stream_color);
     }
 };
 
 function build_tab_bar() {
     var tabs = make_tab_data();
 
-    // Insert the narrow spacer between each tab
-    if (tabs.length > 1) {
-        var idx = -1;
-        while (Math.abs(idx) < tabs.length) {
-            tabs.splice(idx, 0, {cls: "narrow_spacer", icon: true});
-            idx -= 2;
-        }
-    }
-
     var tab_bar = $("#tab_bar");
     tab_bar.empty();
 

static/js/ui.js

@@ -480,7 +480,6 @@ exports.resize_bottom_whitespace = function (h) {
 exports.resize_page_components = function () {
     var composebox = $("#compose");
     var floating_recipient_bar = $("#floating_recipient_bar");
-    var tab_bar = $("#tab_bar");
     var tab_bar_under = $("#tab_bar_underpadding");
     var desired_width;
     if (exports.home_tab_obscured() === 'other_tab') {
@@ -488,7 +487,6 @@ exports.resize_page_components = function () {
     } else {
         desired_width = $("#main_div").outerWidth();
     }
-    tab_bar.width(desired_width);
     tab_bar_under.width(desired_width);
 
     var h;

static/styles/zulip.css

@@ -16,7 +16,6 @@ body {
 
 /* Common background color */
 body,
-#tab_bar,
 #tab_bar_underpadding,
 .message_list,
 #compose-container {
@@ -29,7 +28,6 @@ body,
 }
 
 body.narrowed_view,
-.narrowed_view #tab_bar,
 .narrowed_view #tab_bar_underpadding,
 .narrowed_view .message_list,
 .narrowed_view #compose-container {
@@ -70,18 +68,9 @@ a {
     position: fixed;
     z-index: 100;
     width: 100%;
-    background: rgb(172,197,193); /* Old browsers */
+    background: #ffffff;
-    background: -moz-linear-gradient(top,  rgba(172,197,193,1) 0%, rgba(220,241,234,1) 100%); /* FF3.6+ */
+    box-shadow: 0px 1px 1px -1px #c4c4c4;
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(172,197,193,1)), color-stop(100%,rgba(220,241,234,1))); /* Chrome,Safari4+ */
+    height: 40px;
-    background: -webkit-linear-gradient(top,  rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* W3C */
-
-    background-image: url(/static/images/backgrounds/lightteal.png);
-    background-size: 150px 50px;
-
-    border-bottom: 1px solid #314945;
 }
 
 .app {
@@ -93,6 +82,7 @@ a {
 
 .app-main,
 .header-main {
+    width: 100%;
     max-width: 1200px;
     min-width: 950px;
     margin: 0px auto;
@@ -107,11 +97,15 @@ a {
 }
 
 .column-left {
-    float: left;
+    position: absolute;
+    left: 0px;
+    top: 0px;
 }
 
 .column-right {
-    float: right;
+    position: absolute;
+    right: 0px;
+    top: 0px;
 }
 
 .app-main .column-left .left-sidebar,
@@ -127,22 +121,10 @@ a {
 }
 
 .column-middle {
-    float: left;
-    width: 100%;
-    margin-right: -200px;
-    margin-left: -200px;
-}
-
-.column-middle-inner {
     margin-right: 200px;
     margin-left: 200px;
 }
 
-.app-main .column-middle .column-middle-inner {
-    margin-left: 400px;
-    margin-right: 0px;
-}
-
 textarea,
 input {
     font-family: 'Humbug', Helvetica, Arial, sans-serif;
@@ -194,7 +176,7 @@ li,
 }
 
 .header-main .logo {
-    display: block;
+    display: inline-block;
     font-size: 120%;
     font-weight: 900;
     text-shadow: none;
@@ -202,16 +184,14 @@ li,
     font-variant: small-caps;
     letter-spacing: 2px;
     line-height: 18px;
-    padding-top: 10px;
-    padding-left: 5px;
     text-decoration: none;
     position: relative;
  }
 
  .header-main .logoimage {
-    width: 45px;
+    height: 40px;
-    height: auto;
+    width: auto;
- }
+}
 
  #user-settings-avatar {
     width: 100px;
@@ -1649,24 +1629,26 @@ input.recipient_box {
 
 #searchbox {
     width: 100%;
-    padding-right: 30px;
+    height: 40px;
+    box-shadow: 1px 0px 1px -1px #c4c4c4;
 }
 
 #tab_bar {
-    position: fixed;
-    top: 41px;
     z-index: 2;
     padding-top: 0px;
-    padding-bottom: 10px;
     overflow: hidden;
     text-overflow: ellipsis;
+    float:left;
+    letter-spacing: normal;
+    height: 40px;
 }
 
 #tab_list {
     list-style: none;
-    height: 20px;
     margin: 0px 0px 0px 0px;
-    padding: 0px 0px 0px 15px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
     border: none;
     white-space: nowrap;
 }
@@ -1676,62 +1658,117 @@ input.recipient_box {
    list-style-type: none;
    display: inline-block;
    position: relative;
-   font-weight: 600;
+   font-weight: 300;
    background-color: #f9f9f9;
    margin: 0px;
    padding: 0px;
-   border-radius: 0px 0px 3px 3px;
-   border-left: 10px solid;
-   background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
-   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
-   background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
-   background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
-   background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
-   background: linear-gradient(to bottom, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
-   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
-   border-bottom: 1px solid;
-   border-right: 1px solid;
    text-overflow: ellipsis;
 }
 
-#tab_list li.narrow_spacer {
+#tab_list li.inactive {
-   margin: 0px;
+   border-top-color: rgba(0, 0, 0, 0);
-   padding: 0px 0px 0px 1px;
+   border-right-color: rgba(0, 0, 0, 0);
-   min-width: 0px;
+   border-bottom-color: rgba(0, 0, 0, 0);
-   text-shadow: 0px 1px 0px #fff;
+   background-color: #e2e2e2;
-   border: none;
+   border-left-color: #e2e2e2;
-   -webkit-box-shadow: none;
+   border-width: 0px;
-   -moz-box-shadow: none;
-   box-shadow: none;
-   background: none;
 }
 
-#tab_list li.private_message {
+#tab_list li.private_message a {
-    border-color: #444;
+   color: #ffffff;
+}
+
+#tab_list li.inactive:after {
+   left: 100%;
+   top: 50%;
+   content: " ";
+   height: 0px;
+   width:  0px;
+   position: absolute;
+   pointer-events: none;
+   margin-top: -32px;
+   border-style: solid;
+   border-width: 25px 0 25px 12px;
+   border-color: inherit;
+   z-index: 2;
+   -moz-transform: scale(.9999);
+}
+
+#tab_list li.inactive:before {
+   left: 100%;
+   top: 50%;
+   content: " ";
+   height: 0px;
+   width:  0px;
+   position: absolute;
+   pointer-events: none;
+   margin-top: -35px;
+   border-style: solid;
+   border-width: 28px 0 28px 14px;
+   border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ffffff;
+   z-index: 1;
+   -moz-transform: scale(.9999);
 }
 
 #tab_list a {
     text-decoration: none;
     color: inherit;
     border-color: inherit;
-    height: 15px;
     width: 100%;
-    min-width: 80px;
     display: inline-block;
-    padding: 3px 9px 6px 8px;
+    padding: 0px 8px;
+    max-width: 120px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 #tab_list li.active {
-    padding: 3px 9px 6px 8px;
+    padding-left: 17px;
-    height: 15px;
+    padding-right: 10px;
-    min-width: 80px;
+    background-color: #e2e2e2;
+    max-width: 120px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#tab_list li.active.root {
+    padding-left: 10px;
+}
+
+#tab_list li.private_message {
+   border-top-color: rgba(0, 0, 0, 0);
+   border-right-color: rgba(0, 0, 0, 0);
+   border-bottom-color: rgba(0, 0, 0, 0);
+   background-color: #111111;
+   border-left-color: #111111;
+   color: #ffffff;
+   border-width: 0px;
 }
 
 #tab_list .root {
-    border-color: #7dcbff;
+    border-color: #e2e2e2;
+    background-color: #e2e2e2;
     margin: 0px;
 }
 
+#tab_list li.stream a,
+#tab_list li.private_message a {
+    padding-left: 17px;
+    padding-right: 4px;
+}
+
+#tab_list li.root a {
+    color: #858585;
+    padding-right: 2px;
+}
+
+
+#tab_list .root a:hover {
+    color: #000000;
+}
+
 #tab_bar_underpadding {
     position: fixed;
     z-index: 10;
@@ -1745,6 +1782,8 @@ input.recipient_box {
     white-space: nowrap;
     margin-left: 15px;
     margin-top: 7px;
+    display: inline-block;
+    float: right;
 }
 
 #navbar-buttons ul.nav {
@@ -1758,15 +1797,15 @@ input.recipient_box {
     left: 0px;
     text-align: center;
     vertical-align: middle;
-    border-right: 1px solid #777;
+    border-right: 2px solid #afbfca;
 }
 
 #streamlist-toggle-button {
     text-decoration: none;
-    color: #ffffff;
+    color: #858585;
     display: block;
     position: relative;
-    background-color: rgba(255,255,255,0.2);
+    background-color: #e4e4e4;
     width: 40px;
     padding-top: 12px;
     padding-bottom: 9px;
@@ -1812,7 +1851,7 @@ input.recipient_box {
 }
 
 .nav .dropdown-menu {
-    left: -10px;
+    left: -31px;
     top: 30px;
     min-width: 180px;
     -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
@@ -1824,11 +1863,11 @@ input.recipient_box {
     position: absolute;
     width: 0px;
     height: 0px;
-    top: -5px;
+    top: -7px;
-    right: 5px;
+    left: 5px;
     display: inline-block;
     border-right: 7px solid transparent;
-    border-bottom: 7px solid #fff;
+    border-bottom: 7px solid #aaa;
     border-left: 7px solid transparent;
     content: '';
     z-index: 10;
@@ -1838,7 +1877,7 @@ input.recipient_box {
 #navbar-buttons ul.nav .dropdown-toggle,
 #navbar-buttons ul.nav li.active .dropdown-toggle {
     font-size: 20px;
-    color: #fff;
+    color: #858585;
     text-shadow: none;
     padding-left: 0px !important;
     background-color: inherit;
@@ -1853,12 +1892,12 @@ input.recipient_box {
 
 #navbar-buttons ul.nav .dropdown-toggle,
 #navbar-buttons ul.nav li.active .dropdown-toggle:hover {
-    text-shadow: 0px 0px 1px #000, 0px 0px 3px #fff;
+    color: #111111;
 }
 
 #navbar-buttons ul.nav li.dropdown.open .dropdown-toggle {
     background: none;
-    color: #fff;
+    color: #111111;
     text-shadow: none;
 }
 
@@ -1869,62 +1908,47 @@ input.recipient_box {
 
 #searchbox .input-append .icon-vector-search {
     padding: 0px;
+    font-size: 20px;
     position: absolute;
-    left: 11px;
+    left: 10px;
-    top: 8px;
+    top: 10px;
     z-index: 5;
 }
 
 .navbar-search {
-    margin-right: 10px;
+    margin-top: 0px;
-    margin-left: 10px;
     width: auto;
     float: none;
+    overflow: hidden;
 }
 
 #search_query {
-    width:       100%;
+    width: 100%;
-    font-size:   1em;
+    font-size: 18px;
-    line-height: 20px;
+    height: 40px;
     padding: 0px;
     color: #222;
-    height: 27px;
+    box-shadow: inset 2px 0px 0px 0px #afbfca;
-    min-height: 27px;
+    padding-left: 35px;
-    border-radius: 3px;
-    box-shadow: none;
-    margin-left: 5px;
-    margin-top: 1px;
-    margin-bottom: 2px;
-    padding-left: 25px;
     padding-right: 20px;
-    background: -moz-linear-gradient(top, rgba(14,70,67,0.2) 0%, rgba(14,83,68,0.2) 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,0.2)), color-stop(100%,rgba(14,83,68,0.2))); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* IE10+ */
-    background: linear-gradient(to bottom, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* W3C */
     background: rgb(255,255,255); /* Old browsers */
     border: none;
-    border-top: 1px solid #777;
+    border-radius: 0px;
-    border-left: 1px solid #777;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
     font-family: 'Humbug';
+    font-weight: 300;
+    line-height: 27px;
 }
 
 
 #search_query:focus {
-     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.4);
+     box-shadow: inset 0px 0px 0px 2px #afbfca;
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.4);
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.4);
 }
 
 #searchbox .search_button,
 #searchbox .search_button[disabled]:hover {
     position: absolute;
-    right: 0px;
+    right: 2px;
-    top: 0px;
+    top: 6px;
     background: none;
     border-radius: 0px;
     border: none;
@@ -1932,6 +1956,7 @@ input.recipient_box {
     text-align: center;
     padding: 4px;
     color: #ccc;
+    font-size:18px;
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
@@ -3600,15 +3625,11 @@ div.edit_bot {
     }
 
     .navbar-search {
-        margin-right: 60px;
+        margin-right: 5px;
     }
 
-    #navbar-buttons {
+    #searchbox {
-        margin-left: 0px;
+        margin-left: 200px;
-        margin-top: 0px;
-        position: absolute;
-        right: 15px;
-        top: 8px;
     }
 
     #navbar-buttons.right-userlist .settings-dropdown-caret {
@@ -3636,7 +3657,6 @@ div.edit_bot {
     }
 
     .nav .dropdown-menu {
-        left: -190px;
         min-width: 180px;
         -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
         -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
@@ -3654,7 +3674,6 @@ div.edit_bot {
 
     .column-middle-inner {
         margin-left:  200px;
-        margin-right: 15px;
     }
 
     .app-main .column-middle {
@@ -3727,10 +3746,6 @@ div.edit_bot {
         top: 0px;
     }
 
-    .navbar-search {
-        margin-left: 37px;
-    }
-
     #streamlist-toggle {
         display: block;
     }
@@ -3750,6 +3765,10 @@ div.edit_bot {
         margin-right: 25px;
     }
 
+    #searchbox {
+        margin-left: 37px;
+    }
+
 }
 
 @media (max-width: 500px) {

static/templates/tab_bar.handlebars

@@ -6,9 +6,18 @@
     {{/if}}
     {{! Most tabs are links, but some are not since we don't have a narrow for them (e.g. Search) }}
     {{#if hash}}
-      <a href="{{hash}}">{{title}}</a>
+      {{#if home}}
+        <a href="{{hash}}"><i class="icon-vector-home"></i></a>
+      {{else}}
+        <a href="{{hash}}">{{title}}</a>
+      {{/if}}
     {{else}}
-      {{title}}
+      {{#if home}}
+        <i class="icon-vector-home"></i>
+      {{/if}}
+      {{#unless home}}
+        {{title}}
+      {{/unless}}
     {{/if}}
   </li>
 {{/each}}

templates/zerver/home.html

@@ -8,8 +8,6 @@
     </div>
   </div>
 
-    <div id="tab_bar" class="notdisplayed">
-    </div>
     <div id="tab_bar_underpadding">
     </div>
 

templates/zerver/navbar.html

@@ -1,31 +1,7 @@
 <div class="header">
 <div class="header-main" id="top_navbar">
   <div class="column-left">
-        <div>
+          <a class="brand logo" href="#"><img src="/static/images/logo/zulipcornerlogo@2x.png" class="logoimage" alt="Zulip" content="Zulip" /></a>
-          <a class="brand logo" href="#"><img src="/static/images/logo/zulip@2x.png" class="logoimage" alt="Zulip" content="Zulip" /></a>
-        </div>
-  </div>
-  <div class="column-middle" id="navbar-middle">
-    <div class="column-middle-inner">
-          <div id="streamlist-toggle" {%if embedded %} style="visibility: hidden"{% endif %}>
-            <a href="#" id="streamlist-toggle-button" role="button"><i class="icon-vector-reorder"></i>
-              <span id="streamlist-toggle-unreadcount">0</span>
-            </a>
-          </div>
-          <div id="searchbox">
-            <form id="searchbox_form" class="form-search navbar-search">
-              <div id="search_arrows" class="input-append">
-                <i class="icon-vector-search"></i>
-                <input class="search-query input-block-level" id="search_query" type="text" placeholder="Search"
-                       autocomplete="off" />
-                {# Start the button off disabled since there is no active search #}
-                <button class="btn search_button" type="button" id="search_exit" disabled="disabled"><i class="icon-vector-remove"></i></button>
-              </div>
-            </form>
-          </div>{# /searchbox #}
-    </div>
-  </div>
-  <div class="column-right">
           <div id="navbar-buttons" {%if embedded %} style="visibility: hidden"{% endif %}>
             <ul class="nav" role="navigation">
               <li class="dropdown actual-dropdown-menu" id="gear-menu">
@@ -126,6 +102,30 @@
               </li>
             </ul>
         </div>
+  </div>
+  <div class="column-middle" id="navbar-middle">
+    <div class="column-middle-inner">
+          <div id="streamlist-toggle" {%if embedded %} style="visibility: hidden"{% endif %}>
+            <a href="#" id="streamlist-toggle-button" role="button"><i class="icon-vector-reorder"></i>
+              <span id="streamlist-toggle-unreadcount">0</span>
+            </a>
+          </div>
+          <div id="searchbox">
+            <div id="tab_bar" class="notdisplayed">
+            </div>
+            <form id="searchbox_form" class="form-search navbar-search">
+              <div id="search_arrows" class="input-append">
+                <i class="icon-vector-search"></i>
+                <input class="search-query input-block-level" id="search_query" type="text" placeholder="Search"
+                       autocomplete="off" />
+                {# Start the button off disabled since there is no active search #}
+                <button class="btn search_button" type="button" id="search_exit" disabled="disabled"><i class="icon-vector-remove"></i></button>
+              </div>
+            </form>
+          </div>{# /searchbox #}
+    </div>
+  </div>
+  <div class="column-right">
         <div id="userlist-toggle">
             <a href="#" id="userlist-toggle-button" role="button"><i class="icon-vector-group"></i>
               <span id="userlist-toggle-unreadcount">0</span>