DB view style updates. Button style updates. Red color updates

5 files changed, 112 insertions, 38 deletions

diff --git a/src/fauxton/app/modules/documents/views.js b/src/fauxton/app/modules/documents/views.js
index 71bd4adb7..9e1279f7e 100644
--- a/src/fauxton/app/modules/documents/views.js
+++ b/src/fauxton/app/modules/documents/views.js
@@ -21,6 +21,7 @@ define([
        // Libs
        "codemirror",
        "jshint",
+       "resizeColumns",
 
        // Plugins
        "plugins/codemirror-javascript",
@@ -28,7 +29,7 @@ define([
 
 ],
 
-function(app, FauxtonAPI, Documents, pouchdb, Codemirror, JSHint) {
+function(app, FauxtonAPI, Documents, pouchdb, Codemirror, JSHint, resizeColumns) {
   var Views = {};
 
   Views.Tabs = FauxtonAPI.View.extend({
@@ -1191,6 +1192,13 @@ function(app, FauxtonAPI, Documents, pouchdb, Codemirror, JSHint) {
     },
 
     afterRender: function() {
+
+      //resizeAnimation
+      app.resizeColumns = new resizeColumns({
+            selectorElements: '#dashboard-content, #dashboard-upper-menu, #db-views-tabs-nav'
+      });
+      app.resizeColumns.onResizeHandler();
+
       var that = this, 
           mapFun = this.$("#map-function"),
           reduceFun = this.$("#reduce-function");
diff --git a/src/fauxton/app/modules/fauxton/base.js b/src/fauxton/app/modules/fauxton/base.js
index 2715ab225..0b11849fa 100644
--- a/src/fauxton/app/modules/fauxton/base.js
+++ b/src/fauxton/app/modules/fauxton/base.js
@@ -23,8 +23,9 @@ function(app, Backbone, resizeColumns) {
 
    //resizeAnimation
    app.resizeColumns = new resizeColumns({
-        selectorElements: '#dashboard-content'
+        selectorElements: '#dashboard-content, #dashboard-upper-menu'
    });
+   app.resizeColumns.onResizeHandler();
 
   var Fauxton = app.module();
 
diff --git a/src/fauxton/app/templates/documents/ddoc_info.html b/src/fauxton/app/templates/documents/ddoc_info.html
index 508cba3a9..ed0aed6a7 100644
--- a/src/fauxton/app/templates/documents/ddoc_info.html
+++ b/src/fauxton/app/templates/documents/ddoc_info.html
@@ -11,7 +11,7 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-<div class="well" >
+<div>
   <h2> Design Doc MetaData </h2>
   <div class="row-fluid">
 	<% i=0; _.map(view_index, function (val, key) { %>
diff --git a/src/fauxton/app/templates/documents/view_editor.html b/src/fauxton/app/templates/documents/view_editor.html
index 4b58e6112..9a7c8dde4 100644
--- a/src/fauxton/app/templates/documents/view_editor.html
+++ b/src/fauxton/app/templates/documents/view_editor.html
@@ -12,9 +12,9 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 <div class="row">
-  <ul class="nav nav-tabs" id="myTab">
-    <li class="active"> <a data-toggle="tab" href="#index"><i class="icon-wrench"></i> <% if (newView) { %> Create Index <% } else { %> Edit Index <% } %></a></li>
-    <li><a href="#query" data-toggle="tab"> <i class="icon-plus"></i> Advanced Options</a></li>
+  <ul class="nav nav-tabs" id="db-views-tabs-nav">
+    <li class="active"> <a class="fonticon-wrench fonticon" data-toggle="tab" href="#index"><% if (newView) { %>Create Index <% } else { %>Edit Index <% } %></a></li>
+    <li><a class="fonticon-plus fonticon" href="#query" data-toggle="tab">Advanced Options</a></li>
     <li><a href="#metadata" data-toggle="tab">Design Doc Metadata</a></li>
   </ul>
   <div class="all-docs-list errors-container"></div>
@@ -104,10 +104,10 @@ the License.
       </div>
     </div>
     <div class="tab-pane" id="metadata">
-      <div id="ddoc-info"> </div>
+      <div id="ddoc-info" class="well"> </div>
     </div>
     <div class="tab-pane" id="query">
-      <div class="advanced-options">
+      <div class="advanced-options well">
         <form class="view-query-update">
           <div class="controls controls-row">
             <label class="span3 inline">
@@ -145,32 +145,39 @@ the License.
             </label>
             <% } %>
           </div>
-
-          <div class="controls controls-row">
-            <input name="key" class="span4" type="text" placeholder="Key">
-            <input name="keys" class="span8" type="text" placeholder="Keys">
+          <div class="row-fluid">
+            <div class="controls controls-row">
+              <input name="key" class="span6" type="text" placeholder="Key">
+              <input name="keys" class="span6" type="text" placeholder="Keys">
+            </div>
           </div>
-          <div class="controls controls-row">
-            <input name="startkey" class="span6" type="text" placeholder="Start Key">
-            <input name="endkey" class="span6" type="text" placeholder="End Key">
+          <div class="row-fluid">
+            <div class="controls controls-row">
+              <input name="startkey" class="span6" type="text" placeholder="Start Key">
+              <input name="endkey" class="span6" type="text" placeholder="End Key">
+            </div>
           </div>
-          <div class="controls controls-row">
-            <label class="span2 checkbox inline">
-              <input name="stale" type="checkbox" value="ok"> Stale
-            </label>
-            <label class="span2 checkbox inline">
-              <input name="descending" type="checkbox" value="true"> Descending
-            </label>
-            <label class="span4 checkbox inline">
-              <input name="inclusive_end" type="checkbox" value="false"> Disable Inclusive End
-            </label>
-            <label class="span4 checkbox inline">
-              <input name="update_seq" type="checkbox" value="true"> Include Update Sequence
-            </label>
+          <div class="row-fluid">
+            <div class="controls controls-row">
+              <label class="span2 checkbox inline">
+                <input name="stale" type="checkbox" value="ok"> Stale
+              </label>
+              <label class="span2 checkbox inline">
+                <input name="descending" type="checkbox" value="true"> Descending
+              </label>
+              <label class="span4 checkbox inline">
+                <input name="inclusive_end" type="checkbox" value="false"> Disable Inclusive End
+              </label>
+              <label class="span4 checkbox inline">
+                <input name="update_seq" type="checkbox" value="true"> Include Update Sequence
+              </label>
+            </div>
           </div>
-          <div class="controls controls-row">
-            <button type="submit" class="btn btn-primary">Query</button>
-            <button class="btn btn-info preview">Preview</button>
+          <div class="row-fluid">
+            <div class="controls controls-row">
+              <button type="submit" class="btn btn-primary">Query</button>
+              <button class="btn btn-info preview">Preview</button>
+            </div>
           </div>
         </form>
       </div>
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index 0b72c6da1..d19813f53 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -17,6 +17,7 @@
  *
  */
 @import "bootstrap/bootstrap.less";
+@import "bootstrap/mixins.less";
 @import "config.less";
 @import "logs.less";
 @import "prettyprint.less";
@@ -28,8 +29,8 @@
 /*define variable for color here, remove to seperate file later*/
 
 @brown: #3A2C2B;
-@red: #E93F33;
-@darkred: #73161E;
+@red: #E33F3B;
+@darkRed: #AF2D24;
 @linkRed: #DA4F49;
 @greyBrown: #554D4C;
 @fontGrey: #808080;
@@ -40,10 +41,10 @@
 
 /*nav*/
 @primaryNav : @brown;
-@navBG: @darkred;
+@navBG: @darkRed;
 @navBGHighlight: @red;
 @navBGHover: @red;
-@navIconColor: @darkred;
+@navIconColor: @darkRed;
 @navIconHighlight: #FFFFFF;
 @bottomNav: @greyBrown;
 
@@ -73,7 +74,7 @@
 
 /*buttons */
 @redButton: @red;
-@linkColor: @darkred;
+@linkColor: @darkRed;
 
 @boxShadow: 2px 2px rgba(0,0,0,0.2);
 @boxShadowOff: 2px 2px rgba(0,0,0,0);
@@ -121,6 +122,14 @@ body {
     padding-top: 90px;
   }
   background-color: @sidebarBG;
+  /* OVERRIDE BOOTSTRAP BTN STYLES */
+  .btn{
+    .box-shadow(none);
+    .border-radius(0);
+    background-image: none;
+    text-shadow: none;
+    background-repeat: no-repeat;
+  }
 }
 
 h2,h3,h4 {font-weight: 600;}
@@ -455,11 +464,13 @@ footer#mainFooter{
 .topmenu-defaults {
   height: 70px;
   padding: 20px 10px 0;
-  border-bottom: 1px solid @darkred;
+  border-bottom: 1px solid @darkRed;
   .box-sizing(border-box);
 }
 
 #dashboard-upper-menu{
+  position: fixed;
+  z-index: 11;
   .topmenu-defaults;
   background-color: #CBCBCB;
 }
@@ -468,6 +479,15 @@ footer#mainFooter{
   padding: 20px;
   background-color: #F1F1F1;
 }
+
+#dashboard-upper-content{
+  .well{
+    padding: 20px;
+    .border-radius(0);
+    .box-shadow(none);
+  }
+}
+
 #sidenav{
   padding: 0;
   header {
@@ -482,7 +502,7 @@ footer#mainFooter{
         border: none;
       }
       li.active a {
-        background-color: @darkred;
+        background-color: @darkRed;
         color: #fff;
         i {
           background-image: url("../img/glyphicons-halflings-white.png");
@@ -539,6 +559,44 @@ footer#mainFooter{
   margin-right: 36px;
 }
 
+#db-views-tabs-nav{
+  position: fixed;
+  z-index: 12;
+  margin-top: 31px;
+  margin-bottom: 0;
+  /*background-color: #f4f4f4;*/
+  padding: 0 20px;
+}
+
+.nav-tabs > li > a {
+  border-color: #eeeeee #eeeeee #dddddd;
+  text-decoration: none;
+  background-color: #eeeeee;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  &.fonticon:before{
+    margin-right: 6px;
+    font-size: 16px;
+  }
+}
+
+.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
+  background-color: @linkRed;
+  border-top: 1px solid @red;
+  color: white;
+}
+
+.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
+  color: white;
+  background-color: @darkRed;
+  border: 1px solid @darkRed;
+}
+
+.tab-content {
+  margin-top: 70px;
+}
+
 /*TABLE STYLES*/
 table.databases {clear: both;}
 thead {border-bottom: 2px solid @redButton;}