diff options
author | sean barclay <fudd1011@hotmail.com> | 2013-08-20 07:58:49 -0700 |
---|---|---|
committer | Garren Smith <garren.smith@gmail.com> | 2013-08-22 12:30:10 +0200 |
commit | 6bd8e2a07202928cfbd839024d6b618d89e15829 (patch) | |
tree | b7739ecf3840a2be815e75159e6d6bee333c6a41 | |
parent | f5b70f350acb6d687f4eae674597a3b653bd80f0 (diff) | |
download | couchdb-6bd8e2a07202928cfbd839024d6b618d89e15829.tar.gz |
DB view style updates. Button style updates. Red color updates
-rw-r--r-- | src/fauxton/app/modules/documents/views.js | 10 | ||||
-rw-r--r-- | src/fauxton/app/modules/fauxton/base.js | 3 | ||||
-rw-r--r-- | src/fauxton/app/templates/documents/ddoc_info.html | 2 | ||||
-rw-r--r-- | src/fauxton/app/templates/documents/view_editor.html | 63 | ||||
-rw-r--r-- | src/fauxton/assets/less/fauxton.less | 72 |
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;} |