Change information overlay to use toggle component.

This switches from a custom tab interface to the toggle component
layout.

static/js/ui.js

@@ -280,6 +280,24 @@ exports.lightbox = function (data) {
     popovers.hide_all();
 };
 
+$(document).ready(function () {
+    var info_overlay_toggle = components.toggle({
+        name: "info-overlay-toggle",
+        selected: 0,
+        values: [
+            { label: "Keyboard Shortcuts" },
+            { label: "Message Formatting" },
+            { label: "Search Help" },
+        ],
+        callback: function () {
+
+        }
+    }).get();
+
+    $(".informational-overlays .overlay-tabs")
+        .append($(info_overlay_toggle).addClass("large"));
+});
+
 exports.show_info_overlay = function (target) {
     var el = {
         tabs: $(".informational-overlays .tab"),

static/styles/informational-overlays.css

@@ -42,30 +42,9 @@
 }
 
 .informational-overlays .overlay-tabs {
+    padding: 10px 0px;
     border-bottom: 1px solid #eee;
-    background-color: #888;
-}
-
-.informational-overlays .overlay-tabs .tab {
-    float: left;
-    width: calc(33.33% - 1.1px);
-
     text-align: center;
-    padding: 12px 0px;
-    border-right: 1px solid #eee;
-    background-color: #fff;
-
-    cursor: pointer;
-}
-
-.informational-overlays .overlay-tabs .tab:last-of-type {
-    border-right: none;
-}
-
-.informational-overlays .overlay-tabs .tab.active {
-    background-color: #888;
-    color: #fff;
-    border-color: transparent;
 }
 
 .informational-overlays .overlay-modal .modal-body {

templates/zerver/index.html

@@ -123,14 +123,10 @@ var page_params = {{ page_params }};
     {% include "zerver/image-overlay.html" %}
     {% include "zerver/subscriptions.html" %}
 </div><!--/row-->
-    <div class="informational-overlays">
+    <div class="informational-overlays new-style">
         <div class="overlay-content">
             <h1>Zulip Usage Guide</h1>
             <div class="overlay-tabs">
-                <div class="tab active" data-overlay-trigger="keyboard-shortcuts">Keyboard Shortcuts</div>
-                <div class="tab" data-overlay-trigger="search-operators">Search Help</div>
-                <div class="tab last" data-overlay-trigger="markdown-help">Markdown Formatting</div>
-                <div class="float-clear"></div>
             </div>
             <div class="overlay-body">
                 {% include "zerver/keyboard_shortcuts.html" %}