Fauxton:

Api bar fixes
Merge issue. Lost a } tag
fixes for windowResize
Reverted the Spinner change because it breaks addons like Support.
Reverted adding mixins.less because it's already added when you include bootstrap & it breaks
Addons that use mixings when running the dev scripts
Api bar

15 files changed, 289 insertions, 133 deletions

diff --git a/src/fauxton/app/api.js b/src/fauxton/app/api.js
index da74d6a53..9c34705df 100644
--- a/src/fauxton/app/api.js
+++ b/src/fauxton/app/api.js
@@ -274,29 +274,45 @@ function(app, Fauxton) {
         }));
       }
 
-      if (!this.disableLoader){ 
-        var opts = {
-          lines: 16, // The number of lines to draw
-          length: 8, // The length of each line
-          width: 4, // The line thickness
-          radius: 12, // The radius of the inner circle
-          color: '#aaa', // #rbg or #rrggbb
-          speed: 1, // Rounds per second
-          trail: 10, // Afterglow percentage
-          shadow: false // Whether to render a shadow
-        };
-
-        if (!$('.spinner').length) {
-          $('<div class="spinner"></div>').appendTo('#app-container');
-        }
-
-        var spinner = new Spinner(opts).spin();
-        $('.spinner').append(spinner.el);
-      }
+      // if (!this.disableLoader){ 
+      //   var opts = {
+      //     lines: 16, // The number of lines to draw
+      //     length: 8, // The length of each line
+      //     width: 4, // The line thickness
+      //     radius: 12, // The radius of the inner circle
+      //     color: '#aaa', // #rbg or #rrggbb
+      //     speed: 1, // Rounds per second
+      //     trail: 10, // Afterglow percentage
+      //     shadow: false // Whether to render a shadow
+      //   };
+
+      //   if (!$('.spinner').length) {
+      //     $('<div class="spinner"></div>').appendTo('#app-container');
+      //   }
+
+      //   var spinner = new Spinner(opts).spin();
+      //   $('.spinner').append(spinner.el);
+      // }
 
       FauxtonAPI.when(this.establish()).done(function(resp) {
         _.each(routeObject.getViews(), function(view, selector) {
           if(view.hasRendered()) { return; }
+
+          if (!view.disableLoader){ 
+            var opts = {
+              lines: 16, // The number of lines to draw
+              length: 8, // The length of each line
+              width: 4, // The line thickness
+              radius: 12, // The radius of the inner circle
+              color: '#ccc', // #rbg or #rrggbb
+              speed: 1, // Rounds per second
+              trail: 10, // Afterglow percentage
+              shadow: false // Whether to render a shadow
+            };
+            $('<div class="spinner"></div>').appendTo(selector);
+            var spinner = new Spinner(opts).spin();
+            $('.spinner').append(spinner.el);
+          }
           
           FauxtonAPI.when(view.establish()).then(function(resp) {
             masterLayout.setView(selector, view);
diff --git a/src/fauxton/app/app.js b/src/fauxton/app/app.js
index df0894a56..e1e4f4e5e 100644
--- a/src/fauxton/app/app.js
+++ b/src/fauxton/app/app.js
@@ -5,13 +5,14 @@ define([
   "backbone",
 
   "helpers",
+  "mixins",
 
   // Plugins.
   "plugins/backbone.layoutmanager",
   "plugins/jquery.form"
 ],
 
-function($, _, Backbone, Helpers) {
+function($, _, Backbone, Helpers, Mixins) {
 
   // Make sure we have a console.log
   if (typeof console == "undefined") {
@@ -25,7 +26,8 @@ function($, _, Backbone, Helpers) {
   var app = {
     // The root path to run the application.
     root: "/",
-    version: "0.0.1"
+    version: "0.0.1",
+    mixins: Mixins
   };
 
   // Localize or create a new JavaScript Template object.
diff --git a/src/fauxton/app/mixins.js b/src/fauxton/app/mixins.js
new file mode 100644
index 000000000..b17e15c2d
--- /dev/null
+++ b/src/fauxton/app/mixins.js
@@ -0,0 +1,56 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+
+// This file creates a set of helper functions that will be loaded for all html
+// templates. These functions should be self contained and not rely on any 
+// external dependencies as they are loaded prior to the application. We may
+// want to change this later, but for now this should be thought of as a
+// "purely functional" helper system.
+
+
+define([
+  "jquery",
+  "lodash"
+],
+
+function($, _ ) {
+
+  var mixins = {};
+
+  var onWindowResize = {};
+   
+  mixins.addWindowResize = function(fun, key){
+    onWindowResize[key]=fun;
+    // You shouldn't need to call it here. Just define it at startup and each time it will loop 
+    // through all the functions in the hash.
+    //app.initWindowResize();
+  };
+   
+  mixins.removeWindowResize = function(key){
+    delete onWindowResize[key];
+    mixins.initWindowResize();
+  };
+   
+  mixins.initWindowResize = function(){
+  //when calling this it should be overriding what was called previously
+    window.onresize = function(e) {
+       // could do this instead of the above for loop
+      _.each(onWindowResize, function (fn) {
+        fn();
+      });
+    };
+  };
+
+  return mixins;
+});
+
diff --git a/src/fauxton/app/modules/fauxton/base.js b/src/fauxton/app/modules/fauxton/base.js
index f8c3daddb..a4895f2b7 100644
--- a/src/fauxton/app/modules/fauxton/base.js
+++ b/src/fauxton/app/modules/fauxton/base.js
@@ -14,11 +14,19 @@ define([
        "app",
        // Libs
        "backbone",
-       "windowResize"
+       "resizeAnimation"
 
 ],
 
-function(app, Backbone, WindowResize) {
+function(app, Backbone, ResizeAnimation) {
+
+
+ //resizeAnimation
+   app.ResizeAnimation = new ResizeAnimation({
+        selectorElements: '#dashboard-content'
+   });
+
+
   var Fauxton = app.module();
 
   Fauxton.Breadcrumbs = Backbone.View.extend({
@@ -100,8 +108,8 @@ function(app, Backbone, WindowResize) {
 
       $('#primary-navbar li[data-nav-name="' + app.selectedHeader + '"]').addClass('active');
 
-      var menuOpen = true,
-          $selectorList = $('body');
+      var menuOpen = true;
+      var $selectorList = $('body');
       $('.brand').off();
       $('.brand').on({
         click: function(e){
@@ -114,10 +122,7 @@ function(app, Backbone, WindowResize) {
       function toggleMenu(){
         $selectorList.toggleClass('closeMenu');
         menuOpen = $selectorList.hasClass('closeMenu');
-        setTimeout(
-          function(){
-            app.windowResize.onResizeHandler();
-          }, 1000);
+        app.ResizeAnimation.onResizeHandler();
       }
 
       $('#primary-navbar').on("click", ".nav a", function(){
@@ -125,19 +130,13 @@ function(app, Backbone, WindowResize) {
         setTimeout(
           function(){
             $selectorList.addClass('closeMenu');
-          },1000);
+            app.ResizeAnimation.onResizeHandler();
+          },3000);
 
         }
       });
 
-      $('#primary-navbar').on('click', ".nav li.openMenu", function () {
-        $selectorList.removeClass('closeMenu');
-      });
-
-     app.windowResize = new WindowResize({
-          columnType: "double",
-          selectorElements: '#dashboard-content, #dashboard-content .editcase'
-      });
+      app.ResizeAnimation.initialize();
     },
 
     beforeRender: function () {
@@ -166,6 +165,22 @@ function(app, Backbone, WindowResize) {
     template: "templates/fauxton/api_bar",
     endpoint: '_all_docs',
 
+    events:  {
+      "click .api-url-btn" : "toggleAPIbar"
+    },
+
+    toggleAPIbar: function(e){
+      var $currentTarget = $(e.currentTarget).find('span');
+      if ($currentTarget.hasClass("fonticon-plus")){
+        $currentTarget.removeClass("fonticon-plus").addClass("fonticon-minus");
+      }else{
+        $currentTarget.removeClass("fonticon-minus").addClass("fonticon-plus");
+      }
+
+      $('.api-navbar').toggle();
+
+    },
+
     serialize: function() {
       return {endpoint: this.endpoint};
     },
diff --git a/src/fauxton/app/resizeAnimation.js b/src/fauxton/app/resizeAnimation.js
new file mode 100644
index 000000000..5465a7e11
--- /dev/null
+++ b/src/fauxton/app/resizeAnimation.js
@@ -0,0 +1,82 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+
+// This file creates a set of helper functions that will be loaded for all html
+// templates. These functions should be self contained and not rely on any 
+// external dependencies as they are loaded prior to the application. We may
+// want to change this later, but for now this should be thought of as a
+// "purely functional" helper system.
+
+define([
+],
+
+function() {
+
+  var Resize = function(options){
+    this.options = options;
+    this.options.selectorElements = options.selectorElements || "#dashboard-content";
+  };
+
+  Resize.prototype = {
+    getPrimaryNavWidth: function(){
+      var primaryNavWidth  = $('body').hasClass('closeMenu')? 66:220;
+      return primaryNavWidth;
+    },
+    getPanelWidth: function(){
+      var sidebarWidth = $('#sidebar-content').length > 0 ? $('#sidebar-content').width(): 0;
+      return (this.getPrimaryNavWidth() + sidebarWidth); 
+    },
+    initialize: function(){
+      $(window).off('resize');
+      var that = this;
+      //add throttler :) 
+      this.lazyLayout = _.debounce(that.onResizeHandler, 300).bind(this);
+      $(window).on('resize', this.lazyLayout);
+      this.onResizeHandler();
+    },
+    updateOptions:function(options){
+      this.options = {};
+      this.options = options;
+    },
+    turnOff:function(){
+      $(window).off('resize');
+    },
+    onResizeHandler: function (){
+      //if there is an override, do that instead
+      console.log("onResizeHandler");
+      if (this.options.onResizeHandler){
+        this.options.onResizeHandler();
+      } else {
+        var combinedWidth = window.innerWidth - this.getPanelWidth(),
+        smallWidthConstraint = ($('#sidebar-content').length > 0)? 470:800,
+        panelWidth; 
+
+        if( combinedWidth > smallWidthConstraint  && combinedWidth < 1400){
+          panelWidth = window.innerWidth - this.getPanelWidth();
+        } else if (combinedWidth < smallWidthConstraint){
+          panelWidth = smallWidthConstraint;
+        } else if(combinedWidth > 1400){
+          panelWidth = 1400;
+        }
+
+        $(this.options.selectorElements).innerWidth(panelWidth);
+      }
+      //if there is a callback, run that
+      if(this.options.callback) {
+        this.options.callback();
+      }
+    } 
+  };
+
+  return Resize;
+});
diff --git a/src/fauxton/app/templates/fauxton/api_bar.html b/src/fauxton/app/templates/fauxton/api_bar.html
index 0ca6c69ca..42d20ceb7 100644
--- a/src/fauxton/app/templates/fauxton/api_bar.html
+++ b/src/fauxton/app/templates/fauxton/api_bar.html
@@ -12,19 +12,21 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<div class="navbar navbar-fixed-bottom">
-  <div class="navbar-inner">
-    <div class="container">
-      <div class="input-prepend input-append">
-        <span class="add-on">
-          API reference
-          <a href="http://docs.couchdb.org/en/latest/" target="_blank">
-            <i class="icon-question-sign"></i>
-          </a>
-        </span>
-        <input type="text" class="input-xxlarge" value="<%= endpoint %>">
-        <a href="<%= endpoint %>" target="_blank" class="btn">Show me</a>
-      </div>
+<button class="button api-url-btn">
+  API URL 
+  <span class="fonticon-plus icon"></span>
+</button>
+<div class="api-navbar" style="display: none">
+  <div class="container">
+    <div class="input-prepend input-append">
+      <span class="add-on">
+        API reference
+        <a href="http://docs.couchdb.org/en/latest/" target="_blank">
+          <i class="icon-question-sign"></i>
+        </a>
+      </span>
+      <input type="text" class="input-xxlarge" value="<%= endpoint %>">
+      <a href="<%= endpoint %>" target="_blank" class="btn">Show me</a>
     </div>
   </div>
 </div>
diff --git a/src/fauxton/app/templates/layouts/one_pane.html b/src/fauxton/app/templates/layouts/one_pane.html
index 1f852613c..baafbf8d0 100644
--- a/src/fauxton/app/templates/layouts/one_pane.html
+++ b/src/fauxton/app/templates/layouts/one_pane.html
@@ -14,8 +14,9 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid one-pane">
-  <div class="row-fluid fixed-header">
-    <div id="breadcrumbs" class="span12"></div>
+  <div class="fixed-header">
+    <div id="breadcrumbs"></div>
+    <div id="api-navbar"></div>
   </div>
 
 
@@ -24,4 +25,4 @@ the License.
     <div id="dashboard-content"></div>
   </div>
 </div>
-<div id="api-navbar"></div>
+
diff --git a/src/fauxton/app/templates/layouts/two_pane.html b/src/fauxton/app/templates/layouts/two_pane.html
index d2397c573..0c3165e45 100644
--- a/src/fauxton/app/templates/layouts/two_pane.html
+++ b/src/fauxton/app/templates/layouts/two_pane.html
@@ -15,8 +15,9 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid">
-  <div class="row-fluid fixed-header">
-    <div id="breadcrumbs" class="span12"></div>
+  <div class="fixed-header">
+    <div id="breadcrumbs"></div>
+    <div id="api-navbar"></div>
   </div>
 
 
@@ -26,4 +27,4 @@ the License.
     <div id="right-content" class="span6"></div>
   </div>
 </div>
-<div id="api-navbar"></div>
+
diff --git a/src/fauxton/app/templates/layouts/with_right_sidebar.html b/src/fauxton/app/templates/layouts/with_right_sidebar.html
index 208766d6f..1923ced37 100644
--- a/src/fauxton/app/templates/layouts/with_right_sidebar.html
+++ b/src/fauxton/app/templates/layouts/with_right_sidebar.html
@@ -14,8 +14,9 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid">
-  <div class="row-fluid fixed-header">
-    <div id="breadcrumbs" class="span12"></div>
+  <div class="fixed-header">
+    <div id="breadcrumbs"></div>
+    <div id="api-navbar"></div>
   </div>
   <div class="with-sidebar-right content-area">
     <div id="dashboard-content" class="list"></div>
@@ -23,4 +24,3 @@ the License.
   </div>
 </div>
 
-<div id="api-navbar"></div>
diff --git a/src/fauxton/app/templates/layouts/with_sidebar.html b/src/fauxton/app/templates/layouts/with_sidebar.html
index c534c6125..bd26e5bfa 100644
--- a/src/fauxton/app/templates/layouts/with_sidebar.html
+++ b/src/fauxton/app/templates/layouts/with_sidebar.html
@@ -15,8 +15,8 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid">
-<header class="row-fluid fixed-header">
-  <div id="breadcrumbs" class="row-fluid"></div>
+<header class="fixed-header">
+  <div id="breadcrumbs"></div>
   <div id="api-navbar"></div>
 </header>
   <div class="with-sidebar content-area">
diff --git a/src/fauxton/app/templates/layouts/with_tabs.html b/src/fauxton/app/templates/layouts/with_tabs.html
index 33cf0f595..bf635177d 100644
--- a/src/fauxton/app/templates/layouts/with_tabs.html
+++ b/src/fauxton/app/templates/layouts/with_tabs.html
@@ -15,8 +15,9 @@ the License.
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid">
 
-<div class="row-fluid fixed-header">
-  <div id="breadcrumbs" class="row-fluid"></div>
+<div class="fixed-header">
+  <div id="breadcrumbs"></div>
+  <div id="api-navbar"></div>
 </div>
 
   <div class="row-fluid content-area">
@@ -24,4 +25,4 @@ the License.
     <div id="dashboard-content" class="list span12"></div>
   </div>
 
-<div id="api-navbar"></div>
+
diff --git a/src/fauxton/app/templates/layouts/with_tabs_sidebar.html b/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
index be65c0c2e..e7a524f2b 100644
--- a/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
+++ b/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
@@ -15,8 +15,8 @@ the License.
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid">
 
-<header class="row-fluid fixed-header">
-  <div id="breadcrumbs" class="row-fluid"></div>
+<header class="fixed-header">
+  <div id="breadcrumbs"></div>
   <div id="api-navbar"></div>
 </header>
 
diff --git a/src/fauxton/app/windowResize.js b/src/fauxton/app/windowResize.js
deleted file mode 100644
index 99fa8ce05..000000000
--- a/src/fauxton/app/windowResize.js
+++ /dev/null
@@ -1,42 +0,0 @@
-define([
-],
-
-function() {
-
-  var Resize = function(options){
-    this.options = options;
-    this.options.selectorElements = options.selectorElements || "#dashboard-content";
-    this.initialize();
-  };
-
-  Resize.prototype = {
-    getPanelWidth: function(){
-      var sidebarWidth = $('#sidebar-content').length > 0?$('#sidebar-content').width(): 40,
-          primeNavWidth = parseInt($('#dashboard').css('left').replace('px',''),10);
-      return (primeNavWidth +sidebarWidth); 
-    },
-    initialize: function(){
-      $(window).off('resize');
-      var that = this;
-      //add throttler :) 
-      this.lazyLayout = _.debounce(that.onResizeHandler, 300).bind(this);
-      $(window).on('resize', this.lazyLayout);
-      this.onResizeHandler();
-    },
-    onResizeHandler: function (){
-      //if there is an override, do that instead
-      if (this.options.onResizeHandler){
-        this.options.onResizeHandler();
-      } else {
-        var panelWidth = (window.innerWidth - this.getPanelWidth() < 1100) ? window.innerWidth - this.getPanelWidth() :1100;
-        $(this.options.selectorElements).width(panelWidth);
-      }
-      //if there is a callback, run that
-      if(this.options.callback) {
-        this.options.callback();
-      }
-    } 
-  };
-
-  return Resize;
-});
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index f15ec758b..4beb18c9c 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -22,7 +22,8 @@
 @import "prettyprint.less";
 @import "database.less";
 @import "icons.less";
-@import "mixins.less";
+
+
 
 /*define variable for color here, remove to seperate file later*/
 
@@ -196,7 +197,7 @@ a:hover{
   }
 
   .navbar {
-    div.brand {
+    .brand {
       .hide-text;
       .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
       margin: 10px 0 6px;
@@ -283,6 +284,9 @@ a:hover{
                 text-shadow: @boxShadowOff;
               }
             }
+            .closeMenu &{
+              color: transparent;
+            }
           }
         }
       }
@@ -390,23 +394,34 @@ a:hover{
 // }
 /*tools*/
 
+.row-fluid.content-area{
+  background-color: @background;
+}
+
 
 .fixed-header{
+  background-color: @breadcrumbBG;
+  .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
   position: fixed;
   top: 0;
+  right: 0;
+  left: @navWidth;
+  .closeMenu & {
+    left: @collapsedNavWidth;
+  }
   border-bottom: 5px solid @breadcrumbBorder;
   .box-shadow(0 4px 6px -2px #808080);
   z-index: 100;
   .one-pane & {
+    position: relative;
     border: none;
     .box-shadow(none);
-    position: relative;
     left: auto;
   }
 }
 
 #breadcrumbs {
-   background-color: @breadcrumbBG;
+   
    padding: 15px 20px;
    .breadcrumb {
     margin-bottom: 0;
@@ -686,5 +701,32 @@ div.spinner {
 
 .btn-primary a:visited {
   color: #fff;
+}
+
+#api-navbar{
+  position: relative;
+}
+
+.button.api-url-btn {
+  position: absolute;
+  right: 15px;
+  top: -50px;
+  span.icon {
+    font-size: 11px;
+  }
+}
 
+.api-navbar {
+  border-top: 1px solid @red;
+  padding: 20px 20px 15px;
+  .input-append.input-prepend {
+    margin-bottom: 0px;
+    .add-on {
+      border: none;
+      padding-right: 25px;
+    }
+    .btn:last-child{
+      margin-left: 15px;
+    }
+  }
 }
diff --git a/src/fauxton/assets/less/mixins.less b/src/fauxton/assets/less/mixins.less
deleted file mode 100644
index d1b08ef51..000000000
--- a/src/fauxton/assets/less/mixins.less
+++ /dev/null
@@ -1,20 +0,0 @@
-/*  Licensed under the Apache License, Version 2.0 (the "License"); you may not
- *  use this file except in compliance with the License. You may obtain a copy of
- *  the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- *  License for the specific language governing permissions and limitations under
- *  the License.
- */
-
-// Border Radius
-.border-radius(@radius) {
-  -webkit-border-radius: @radius;
-     -moz-border-radius: @radius;
-          border-radius: @radius;
-}
-