Repository: couchdb-fauxton Updated Branches: refs/heads/secondary-indexes 789cc125f -> 8499a287e
An insane amount of header stuff Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/8499a287 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/8499a287 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/8499a287 Branch: refs/heads/secondary-indexes Commit: 8499a287e1f3837e83e7618bff537f4164766c0e Parents: 789cc12 Author: deathbearbrown <[email protected]> Authored: Tue Aug 5 15:31:31 2014 -0400 Committer: deathbearbrown <[email protected]> Committed: Tue Aug 5 15:31:31 2014 -0400 ---------------------------------------------------------------------- app/addons/documents/routes.js | 8 +- app/addons/fauxton/components.js | 3 +- app/addons/fauxton/resizeColumns.js | 9 +- app/addons/fauxton/templates/breadcrumbs.html | 5 +- app/addons/indexes/routes-viewindexes.js | 30 +++---- app/addons/indexes/templates/header_left.html | 17 ++++ app/addons/indexes/templates/header_right.html | 18 ++++ app/addons/indexes/templates/index_header.html | 33 ------- app/addons/indexes/views.js | 52 ++++++++++- app/templates/layouts/two_pane.html | 6 +- app/templates/layouts/with_sidebar.html | 8 +- app/templates/layouts/with_tabs.html | 9 +- app/templates/layouts/with_tabs_sidebar.html | 8 +- assets/less/fauxton.less | 5 -- assets/less/templates.less | 97 ++++++++++++++++++--- 15 files changed, 216 insertions(+), 92 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/addons/documents/routes.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js index f1fd2e2..8a060f6 100644 --- a/app/addons/documents/routes.js +++ b/app/addons/documents/routes.js @@ -56,6 +56,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, crumbs: function() { return [ + {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"}, {"name": this.database.id, "link": Databases.databaseUrl(this.database)}, {"name": this.docID, "link": "#"} ]; @@ -113,6 +114,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, }, crumbs: function() { return [ + {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"}, {"name": this.database.id, "link": Databases.databaseUrl(this.database)}, {"name": "New", "link": "#"} ]; @@ -177,7 +179,6 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, }, designDocMetadata: function(database, ddoc){ - this.toolsView && this.toolsView.remove(); this.viewEditor && this.viewEditor.remove(); var designDocInfo = new Resources.DdocInfo({_id: "_design/"+ddoc},{database: this.data.database }); @@ -191,6 +192,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, this.crumbs = function () { return [ + {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"}, {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}, ]; }; @@ -256,6 +258,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, })); this.crumbs = [ + {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"}, {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)} ]; @@ -377,13 +380,14 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, filterView: this.filterView })); - this.toolsView && this.toolsView.remove(); + this.viewEditor && this.viewEditor.remove(); this.sidebar.setSelectedTab('changes'); this.crumbs = function () { return [ + {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"}, {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}, {"name": "_changes", "link": "/_changes"} ]; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/addons/fauxton/components.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js index 0d06a0c..baf6451 100644 --- a/app/addons/fauxton/components.js +++ b/app/addons/fauxton/components.js @@ -34,8 +34,9 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) { Components.Breadcrumbs = FauxtonAPI.View.extend({ + className: "breadcrumb pull-left", + tagName: "ul", template: "addons/fauxton/templates/breadcrumbs", - serialize: function() { var crumbs = _.clone(this.crumbs); return { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/addons/fauxton/resizeColumns.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/resizeColumns.js b/app/addons/fauxton/resizeColumns.js index 0da3f45..98555a9 100644 --- a/app/addons/fauxton/resizeColumns.js +++ b/app/addons/fauxton/resizeColumns.js @@ -32,6 +32,7 @@ function(FauxtonAPI) { var primaryNavWidth = $('body').hasClass('closeMenu') ? 64 : 220; return primaryNavWidth; }, + getSinglePanelWidth: function(){ var sidebarWidth = $('#sidebar-content').length > 0 ? $('#sidebar-content').outerWidth() : 0, borders = parseInt($('#dashboard').css('border-left-width'), 10) + @@ -40,6 +41,7 @@ function(FauxtonAPI) { return (this.getPrimaryNavWidth() + sidebarWidth + borders); }, + getTwoPanelWidth: function(){ var borders = parseInt($('#dashboard').css('border-left-width'), 10) + parseInt($('#right-content').css('border-left-width'), 10) + @@ -48,6 +50,7 @@ function(FauxtonAPI) { parseInt($('#right-content').css('border-right-width'), 10); return (this.getPrimaryNavWidth()+ borders); }, + initialize: function(){ // $(window).off('resize'); var that = this; @@ -57,16 +60,20 @@ function(FauxtonAPI) { FauxtonAPI.utils.initWindowResize(); this.onResizeHandler(); }, + updateOptions:function(options){ this.options = {}; this.options = options; }, + turnOff:function(){ FauxtonAPI.utils.removeWindowResize("animation"); }, + cleanupCallback: function(){ this.callback = null; }, + singlePanelResize: function(){ var combinedWidth = window.innerWidth - this.getSinglePanelWidth(), smallWidthConstraint = ($('#sidebar-content').length > 0)? 470:800, @@ -92,7 +99,7 @@ function(FauxtonAPI) { setPosition: function(panelWidth){ var primary = this.getPrimaryNavWidth(); - $('#right-content').css('left',panelWidth+primary); + $('#right-content').css('left',panelWidth+primary+4); }, onResizeHandler: function (){ http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/addons/fauxton/templates/breadcrumbs.html ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/templates/breadcrumbs.html b/app/addons/fauxton/templates/breadcrumbs.html index 52ea884..ca073c3 100644 --- a/app/addons/fauxton/templates/breadcrumbs.html +++ b/app/addons/fauxton/templates/breadcrumbs.html @@ -12,13 +12,10 @@ License for the specific language governing permissions and limitations under the License. --> -<ul class="breadcrumb pull-left"> <% _.each(_.initial(crumbs), function(crumb) { %> <li> - <a href="#<%- crumb.link %>"><%- crumb.name %></a> - <span class="divider fonticon fonticon-right-open"> </span> + <a href="#<%- crumb.link %>" class="fonticon <%- crumb.className %>"><%- crumb.name %></a> </li> <% }); %> <% var last = _.last(crumbs) || {name: ''} %> <li class="active"><%- last.name %></li> -</ul> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/addons/indexes/routes-viewindexes.js ---------------------------------------------------------------------- diff --git a/app/addons/indexes/routes-viewindexes.js b/app/addons/indexes/routes-viewindexes.js index 0b4caac..de53981 100644 --- a/app/addons/indexes/routes-viewindexes.js +++ b/app/addons/indexes/routes-viewindexes.js @@ -33,6 +33,7 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) { newViewEditor: function (database, designDoc) { var params = app.getParams(); + this.rightheader && this.rightheader.remove(); this.setView("#right-content", new Views.PreviewScreen({})); @@ -45,11 +46,11 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) { newView: true })); - this.crumbs = function () { - return [ - {"name": "Create View Index", "link": Databases.databaseUrl(this.data.database)}, - ]; - }; + this.leftheader = this.setView("#breadcrumbs", new Views.LeftHeader({ + title:"Create a View Index", + database: this.data.database + })); + }, viewFn: function (databaseName, ddoc, view) { @@ -57,8 +58,16 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) { urlParams = params.urlParams, docParams = params.docParams, decodeDdoc = decodeURIComponent(ddoc); + view = view.replace(/\?.*$/,''); + + this.leftheader = this.setView("#breadcrumbs", new Views.LeftHeader({ + title: view, + database: this.data.database + })); - view = view.replace(/\?.*$/,''); + this.rightheader = this.setView("#api-bar", new Views.RightHeader({ + database: this.data.database + })); this.data.indexedDocs = new Resources.IndexCollection(null, { database: this.data.database, @@ -80,8 +89,6 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) { ddocInfo: this.ddocInfo(decodeDdoc, this.data.designDocs, view) })); - this.toolsView && this.toolsView.remove(); - this.documentsView = this.createViewDocumentsView({ designDoc: decodeDdoc, docParams: docParams, @@ -92,13 +99,6 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) { view: view }); - - this.crumbs = function () { - return [ - {"name": view, "link": Databases.databaseUrl(this.data.database)}, - ]; - }; - this.apiUrl = [this.data.indexedDocs.urlRef("apiurl", urlParams), "docs"]; } }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/addons/indexes/templates/header_left.html ---------------------------------------------------------------------- diff --git a/app/addons/indexes/templates/header_left.html b/app/addons/indexes/templates/header_left.html new file mode 100644 index 0000000..13bea60 --- /dev/null +++ b/app/addons/indexes/templates/header_left.html @@ -0,0 +1,17 @@ +<!-- +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. +--> +<!--back arrow--> +<div id="header-breadcrumbs"></div> + <!-- Menu gear--> +<div id="header-dropdown-menu"></div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/addons/indexes/templates/header_right.html ---------------------------------------------------------------------- diff --git a/app/addons/indexes/templates/header_right.html b/app/addons/indexes/templates/header_right.html new file mode 100644 index 0000000..90828d2 --- /dev/null +++ b/app/addons/indexes/templates/header_right.html @@ -0,0 +1,18 @@ +<!-- +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. +--> + + <!-- Query Options--> + <!--right margin for api bar--> + <div id="header-api-bar"></div> + http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/addons/indexes/templates/index_header.html ---------------------------------------------------------------------- diff --git a/app/addons/indexes/templates/index_header.html b/app/addons/indexes/templates/index_header.html deleted file mode 100644 index 342d628..0000000 --- a/app/addons/indexes/templates/index_header.html +++ /dev/null @@ -1,33 +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. ---> - -<div class="header-left windowresize"> - - <!--back arrow--> - <a href=""><span class="icon "></span></a> - <!--title--> - <h2> <%-title%> </h2> - - - - <!-- Menu gear--> - <div class="header-menu"></div> - -</div> - - -<div class="header-right window-resizeable"> - <!-- Query Options--> - <!--right margin for api bar--> -</div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/addons/indexes/views.js ---------------------------------------------------------------------- diff --git a/app/addons/indexes/views.js b/app/addons/indexes/views.js index 2ef57ff..80e6a40 100644 --- a/app/addons/indexes/views.js +++ b/app/addons/indexes/views.js @@ -34,10 +34,58 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, var Views = {}; - Views.IndexHeader = FauxtonAPI.View.extend({ - template: "addons/indexes/templates/index_header" +//left header + Views.LeftHeader = FauxtonAPI.View.extend({ + className: "header-left", + template: "addons/indexes/templates/header_left", + initialize:function(options){ + this.database = options.database; + this.title = options.title; + }, + beforeRender: function(){ + var crumbs = [ + {"name": "", "className": "fonticon-left-open", "link": Databases.databaseUrl(this.database)}, + {"name": this.title, "link": Databases.databaseUrl(this.database)} + ]; + this.insertView("#header-breadcrumbs", new Components.Breadcrumbs({ + crumbs: crumbs + })); + this.dropDownMenu(); + }, + dropDownMenu: function(){ + var newLinks = [{ + links: [{ + title: 'Table', + icon: 'fonticon-table' + },{ + title: 'JSON', + icon: 'fonticon-json' + }] + }]; + + this.insertView("#header-dropdown-menu", new Components.MenuDropDown({ + icon: 'fonticon-cog', + links: newLinks, + })); + } }); +//right header + Views.RightHeader = FauxtonAPI.View.extend({ + className: "header-right", + template: "addons/indexes/templates/header_right", + initialize:function(options){ + this.database = options.database; + this.title = options.title; + }, + beforeRender: function(){ + this.insertView(".header-api-bar", new Components.ApiBar({})); + } + }); + + + + Views.PreviewScreen = FauxtonAPI.View.extend({ template: "addons/indexes/templates/preview_screen", className: "watermark-logo" http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/templates/layouts/two_pane.html ---------------------------------------------------------------------- diff --git a/app/templates/layouts/two_pane.html b/app/templates/layouts/two_pane.html index 52b7d2a..0174a5a 100644 --- a/app/templates/layouts/two_pane.html +++ b/app/templates/layouts/two_pane.html @@ -15,9 +15,9 @@ the License. <div id="primary-navbar"></div> <div id="dashboard" class="container-fluid two-pane"> - <header class="fixed-header"> - <div id="breadcrumbs"></div> - <div id="api-navbar"></div> + <header class="fixed-header row-fluid"> + <div id="breadcrumbs" class="window-resizeable"></div> + <div id="api-navbar" class="window-resizeable"></div> </header> <div class="content-area two-pane"> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/templates/layouts/with_sidebar.html ---------------------------------------------------------------------- diff --git a/app/templates/layouts/with_sidebar.html b/app/templates/layouts/with_sidebar.html index 4eba634..7fc64db 100644 --- a/app/templates/layouts/with_sidebar.html +++ b/app/templates/layouts/with_sidebar.html @@ -14,10 +14,10 @@ the License. <div id="primary-navbar"></div> -<div id="dashboard" class="container-fluid"> - <header class="fixed-header"> - <div id="breadcrumbs"></div> - <div id="api-navbar"></div> +<div id="dashboard" class="container-fluid with-sidebar"> + <header class="fixed-header row-fluid"> + <div id="breadcrumbs" class="sidebar"></div> + <div id="api-navbar" class="window-resizeable"></div> </header> <div class="with-sidebar content-area"> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/templates/layouts/with_tabs.html ---------------------------------------------------------------------- diff --git a/app/templates/layouts/with_tabs.html b/app/templates/layouts/with_tabs.html index fc372ff..074385f 100644 --- a/app/templates/layouts/with_tabs.html +++ b/app/templates/layouts/with_tabs.html @@ -15,10 +15,11 @@ the License. <div id="primary-navbar"></div> <div id="dashboard" class="container-fluid"> - <div class="fixed-header"> - <div id="breadcrumbs"></div> - <div id="api-navbar"></div> - </div> + <header class="fixed-header row-fluid"> + <div id="breadcrumbs" class="sidebar"></div> + <div id="api-navbar" class="window-resizeable"></div> + </header> + <div class="row-fluid content-area"> <div id="tabs" class="row-fluid"></div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/app/templates/layouts/with_tabs_sidebar.html ---------------------------------------------------------------------- diff --git a/app/templates/layouts/with_tabs_sidebar.html b/app/templates/layouts/with_tabs_sidebar.html index 65d702e..de4bdee 100644 --- a/app/templates/layouts/with_tabs_sidebar.html +++ b/app/templates/layouts/with_tabs_sidebar.html @@ -13,11 +13,11 @@ the License. --> <div id="primary-navbar"></div> -<div id="dashboard" class="container-fluid"> +<div id="dashboard" class="container-fluid with-sidebar"> - <header class="fixed-header"> - <div id="breadcrumbs"></div> - <div id="api-navbar"></div> + <header class="fixed-header row-fluid"> + <div id="breadcrumbs" class="sidebar"></div> + <div id="api-navbar" class="window-resizeable"></div> </header> <div class="with-sidebar content-area"> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/assets/less/fauxton.less ---------------------------------------------------------------------- diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less index 3ddcff9..31678a3 100644 --- a/assets/less/fauxton.less +++ b/assets/less/fauxton.less @@ -246,11 +246,6 @@ div.spinner { top: 50%; } -#api-navbar{ - position: relative; - padding-right: 5px; -} - .api-url-btn { margin-top: 5px; margin-bottom: 5px; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8499a287/assets/less/templates.less ---------------------------------------------------------------------- diff --git a/assets/less/templates.less b/assets/less/templates.less index 7473287..a6f1a78 100644 --- a/assets/less/templates.less +++ b/assets/less/templates.less @@ -246,6 +246,23 @@ } } + +/* +--------------------------------------------------- + REUSEABLE SHADOW BORDER +--------------------------------------------------- +*/ + +.left-shadow-border{ + border-left: 1px solid #999; + .box-shadow(-6px 0 rgba(0, 0, 0, 0.1)); +} + +.bottom-shadow-border{ + border-bottom: 1px solid #999; + .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1)); +} + /* FIXED HEADER, DASHBOARD & BREADCRUMBS: @@ -257,8 +274,7 @@ with_tabs_sidebar.html */ #dashboard { - .box-shadow(-6px 0 rgba(0, 0, 0, 0.1)); - border-left: 1px solid #999; + .left-shadow-border; position: absolute; left: @navWidth; margin-left: 0; @@ -291,30 +307,74 @@ .closeMenu & { left: @collapsedNavWidth; } - border-bottom: 5px solid @breadcrumbBorder; - .box-shadow(0 4px 6px -2px #808080); z-index: 100; + .two-pane & { + border: none; + } + .two-pane &, + .with-sidebar & { + #api-navbar{ + > div { + .bottom-shadow-border; + height: 60px; + } + .left-shadow-border; + } + #breadcrumbs{ + .bottom-shadow-border; + } + } .one-pane & { + #breadcrumbs{ + width: 90%; + } position: relative; border: none; .box-shadow(none); left: auto; } + /* these styles are for the new header*/ + > div { + display:inline-block; + vertical-align: top; + } +} + +#api-navbar{ + height: 60px; + position: relative; + /* these styles are for the new header*/ + .right-header{ + } } #breadcrumbs { - .breadcrumb { - margin: 15px 20px; + height: 60px; + &.sidebar{ + width: @sidebarWidth - 4; + } + /* these styles are for the new header*/ + .header-left{ + > div{ + display:inline-block; + } + } + .breadcrumb { margin-bottom: 0; background-color: transparent; padding: 0; li { - .divider { - font-size: 12px; - color: @breadcrumbArrow; - } + padding:15px 10px; + height: 60px; + vertical-align: top; &:first-child { font-size: 30px; + .with-sidebar &, + .two-pane & { + padding:20px 10px; + font-size: 19px; + border-right: 1px solid #ccc; + } } color: @breadcrumbText; font-size: 18px; @@ -323,13 +383,20 @@ color: #333; } a{ + text-decoration: none; color: @breadcrumbText; } } - } + } } + + + + + + /* SIDEBAR-CONTENT & DASHBOARD-CONTENT LAYOUTS: with_sidebar.html with_tabs_sidebar.html @@ -382,6 +449,8 @@ } } + + #dashboard-content{ &.row-fluid, &.window-resizeable{ @@ -390,10 +459,9 @@ } padding: 20px; .with-sidebar &{ - border-left: 1px solid #999; + .left-shadow-border; border-right: 1px solid #999; width: auto; - .box-shadow(-6px 0 rgba(0, 0, 0, 0.1)); padding: 0px; bottom: 0px; top: 60px; @@ -506,7 +574,6 @@ } - .with-sidebar.content-area, .two-pane.content-area { position: absolute; @@ -515,3 +582,5 @@ left: 0; right: 0; } + +
