From 28333566cf546ea76d0bf809cdcf97726bebcfc2 Mon Sep 17 00:00:00 2001 From: Jenn Schiffer Date: Sun, 24 Aug 2014 16:33:43 +0200 Subject: [PATCH 01/31] move around query options, init style Adding Views, testing header stuff, fixing layout issues Add all the indexes to the sidebar Fix sidebar to work with different indexes Added the apache license changed a comment ffs. Ripping out views into it's own addon An insane amount of header stuff design doc ui Move Fauxton's apibar and breadcrumbs out into components fix new indexes buncha editor stuff making the preview page look less butts. Styling the view form documents This stuff can't be tables. Boo. less for indexes resize stuff And more refactor stuff View editor updates, Splitting out less files An absolute abortion happening in the resizeColumns file style form fields and tab buttons move around query options, init style routes stuff removed the breadcrumbs POC Step one in cleaning up that gnarly save on indexes Always show editor fixing layout Adding Views, testing header stuff, fixing layout issues Add all the indexes to the sidebar Fix sidebar to work with different indexes Added the apache license changed a comment ffs. Ripping out views into it's own addon Setting Up Indexes addon --- .gitignore | 1 + .../assets/less/advancedOptions.less | 58 ++ app/addons/documents/assets/less/changes.less | 12 + .../documents/assets/less/documents.less | 12 +- app/addons/documents/assets/less/sidenav.less | 12 + app/addons/documents/resources.js | 205 ------ app/addons/documents/routes.js | 179 +---- .../documents/templates/advanced_options.html | 218 +++--- .../documents/templates/all_docs_item.html | 26 +- .../documents/templates/all_docs_list.html | 6 +- .../documents/templates/header_alldocs.html | 35 + .../documents/templates/header_doc_edit.html | 33 + .../documents/templates/index_menu_item.html | 6 +- .../documents/templates/view_editor.html | 91 --- app/addons/documents/views-sidebar.js | 61 +- app/addons/documents/views.js | 99 ++- app/addons/fauxton/base.js | 80 +- app/addons/fauxton/components.js | 88 ++- app/addons/fauxton/resizeColumns.js | 63 +- app/addons/fauxton/templates/breadcrumbs.html | 5 +- .../fauxton/templates/menu_dropdown.html | 6 +- app/addons/indexes/assets/less/doc-item.less | 83 +++ .../indexes/assets/less/index-form.less | 64 ++ app/addons/indexes/assets/less/indexes.less | 17 + .../assets/less/new-index-placeholder.less | 25 + app/addons/indexes/base.js | 74 ++ app/addons/indexes/index-components.js | 30 + app/addons/indexes/less/indexes.less | 13 + .../indexes/less/new-index-placeholder.less | 3 + app/addons/indexes/resources.js | 285 ++++++++ app/addons/indexes/routes-core.js | 129 ++++ app/addons/indexes/routes-list.js | 71 ++ app/addons/indexes/routes-show.js | 72 ++ app/addons/indexes/routes-viewindexes.js | 107 +++ app/addons/indexes/routes.js | 24 + .../templates/design_doc_selector.html | 4 +- app/addons/indexes/templates/header_left.html | 17 + .../templates/header_right.html} | 15 +- .../indexes/templates/index_header.html | 28 + .../templates/index_row_docular.html | 28 +- app/addons/indexes/templates/list_editor.html | 18 + .../indexes/templates/preview_screen.html | 16 + app/addons/indexes/templates/show_editor.html | 41 ++ app/addons/indexes/templates/view_editor.html | 80 ++ .../views-index.js => indexes/views.js} | 326 ++++++--- app/templates/layouts/two_pane.html | 18 +- app/templates/layouts/with_sidebar.html | 8 +- app/templates/layouts/with_tabs.html | 9 +- app/templates/layouts/with_tabs_sidebar.html | 11 +- assets/img/couchWatermark.png | Bin 0 -> 7053 bytes assets/less/fauxton.less | 690 +----------------- assets/less/formstyles.less | 247 +++++++ assets/less/templates.less | 586 +++++++++++++++ settings.json.default | 1 + 54 files changed, 2866 insertions(+), 1570 deletions(-) create mode 100644 app/addons/documents/templates/header_alldocs.html create mode 100644 app/addons/documents/templates/header_doc_edit.html create mode 100644 app/addons/indexes/assets/less/doc-item.less create mode 100644 app/addons/indexes/assets/less/index-form.less create mode 100644 app/addons/indexes/assets/less/indexes.less create mode 100644 app/addons/indexes/assets/less/new-index-placeholder.less create mode 100644 app/addons/indexes/base.js create mode 100644 app/addons/indexes/index-components.js create mode 100644 app/addons/indexes/less/indexes.less create mode 100644 app/addons/indexes/less/new-index-placeholder.less create mode 100644 app/addons/indexes/resources.js create mode 100644 app/addons/indexes/routes-core.js create mode 100644 app/addons/indexes/routes-list.js create mode 100644 app/addons/indexes/routes-show.js create mode 100644 app/addons/indexes/routes-viewindexes.js create mode 100644 app/addons/indexes/routes.js rename app/addons/{documents => indexes}/templates/design_doc_selector.html (91%) create mode 100644 app/addons/indexes/templates/header_left.html rename app/addons/{documents/templates/index_row_tabular.html => indexes/templates/header_right.html} (67%) create mode 100644 app/addons/indexes/templates/index_header.html rename app/addons/{documents => indexes}/templates/index_row_docular.html (52%) create mode 100644 app/addons/indexes/templates/list_editor.html create mode 100644 app/addons/indexes/templates/preview_screen.html create mode 100644 app/addons/indexes/templates/show_editor.html create mode 100644 app/addons/indexes/templates/view_editor.html rename app/addons/{documents/views-index.js => indexes/views.js} (69%) create mode 100644 assets/img/couchWatermark.png create mode 100644 assets/less/formstyles.less create mode 100644 assets/less/templates.less diff --git a/.gitignore b/.gitignore index 1baaaf1b3..4d2ca7513 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ app/addons/* !app/addons/replication !app/addons/contribute !app/addons/auth +!app/addons/indexes !app/addons/exampleAuth !app/addons/permissions !app/addons/verifyinstall diff --git a/app/addons/documents/assets/less/advancedOptions.less b/app/addons/documents/assets/less/advancedOptions.less index 2e29d3840..0ff812430 100644 --- a/app/addons/documents/assets/less/advancedOptions.less +++ b/app/addons/documents/assets/less/advancedOptions.less @@ -1 +1,59 @@ +// 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. +/*ALL DOCS TABLE*/ + /*for advanced options css*/ +#query { + .border-radius(5px); + width: 490px; + position: absolute; + z-index: 11; + background-color: #333; + padding: 0; + .well { + background: none; + border: none; + color: #fff; + padding: 0; + margin: 0; + .query-group { + padding: 20px; + border-bottom: 1px solid #ccc; + } + .query-group:last-child { + border-bottom: none; + } + .controls-group { + margin: 0; + } + .controls-group:last-child { + margin: 0; + } + } + form { + margin-bottom: 0; + .dropdown.inline { + display: inline-block; + } + } +} +#query:before { + content: ''; + position: absolute; + top: -25px; + left: 30px; + border-color: transparent transparent #333 transparent; + border-style: solid; + border-width: 15px; + width: 0; + height: 0; +} diff --git a/app/addons/documents/assets/less/changes.less b/app/addons/documents/assets/less/changes.less index 96e6d19b3..ebd395a48 100644 --- a/app/addons/documents/assets/less/changes.less +++ b/app/addons/documents/assets/less/changes.less @@ -1,3 +1,15 @@ +// 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. + /** used in changes.html **/ .change-box { margin: 0 20px 20px 20px; diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less index 2b29744d9..b52e54fc0 100644 --- a/app/addons/documents/assets/less/documents.less +++ b/app/addons/documents/assets/less/documents.less @@ -9,7 +9,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. -/*ALL DOCS TABLE*/ + @import "../../../../../assets/less/variables.less"; @import "../../../../../assets/less/bootstrap/variables.less"; @@ -21,11 +21,6 @@ tr.all-docs-item { border: none; background: transparent; - .btn-group { - position: absolute; - right: 0; - top: 6px; - } } button.beautify { margin-top: 20px; @@ -58,7 +53,7 @@ button.beautify { position: relative; } - table td div div { + table td div div.btn-group { display: none; line-height: 1; position: absolute; @@ -169,6 +164,3 @@ button.string-edit[disabled] { - - - diff --git a/app/addons/documents/assets/less/sidenav.less b/app/addons/documents/assets/less/sidenav.less index 477af7a81..fa65a2383 100644 --- a/app/addons/documents/assets/less/sidenav.less +++ b/app/addons/documents/assets/less/sidenav.less @@ -1,3 +1,15 @@ +// 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. + .sidenav{ .nav-list > .active > a{ diff --git a/app/addons/documents/resources.js b/app/addons/documents/resources.js index e1df5692c..f95bf781f 100644 --- a/app/addons/documents/resources.js +++ b/app/addons/documents/resources.js @@ -494,211 +494,6 @@ function(app, FauxtonAPI, PagingCollection) { } }); - Documents.IndexCollection = PagingCollection.extend({ - model: Documents.ViewRow, - documentation: function(){ - return "docs"; - }, - initialize: function(_models, options) { - this.database = options.database; - this.params = _.extend({limit: 20, reduce: false}, options.params); - - this.idxType = "_view"; - this.view = options.view; - this.design = options.design.replace('_design/',''); - this.perPageLimit = options.perPageLimit || 20; - - if (!this.params.limit) { - this.params.limit = this.perPageLimit; - } - }, - - urlRef: function(context, params) { - var query = ""; - - if (params) { - if (!_.isEmpty(params)) { - query = "?" + $.param(params); - } else { - query = ''; - } - } else if (this.params) { - var parsedParam = Documents.QueryParams.stringify(this.params); - query = "?" + $.param(parsedParam); - } - - var startOfUrl = app.host; - if (context === 'app') { - startOfUrl = 'database'; - } else if (context === "apiurl"){ - startOfUrl = window.location.origin; - } - var design = app.utils.safeURLName(this.design), - view = app.utils.safeURLName(this.view); - - var url = [startOfUrl, this.database.safeID(), "_design", design, this.idxType, view]; - return url.join("/") + query; - }, - - url: function () { - return this.urlRef.apply(this, arguments); - }, - - totalRows: function() { - if (this.params.reduce) { return "unknown_reduce";} - - return this.viewMeta.total_rows || "unknown"; - }, - - updateSeq: function() { - return this.viewMeta.update_seq || false; - }, - - simple: function () { - var docs = this.map(function (item) { - return { - _id: item.id, - key: item.get('key'), - value: item.get('value') - }; - }); - - return new Documents.IndexCollection(docs, { - database: this.database, - params: this.params, - view: this.view, - design: this.design - }); - }, - - parse: function(resp) { - var rows = resp.rows; - this.endTime = new Date().getTime(); - this.requestDuration = (this.endTime - this.startTime); - - return PagingCollection.prototype.parse.apply(this, arguments); - }, - - buildAllDocs: function(){ - this.fetch(); - }, - - // We implement our own fetch to store the starttime so we that - // we can get the request duration - fetch: function () { - this.startTime = new Date().getTime(); - return PagingCollection.prototype.fetch.call(this); - }, - - allDocs: function(){ - return this.models; - }, - - // This is taken from futon.browse.js $.timeString - requestDurationInString: function () { - var ms, sec, min, h, timeString, milliseconds = this.requestDuration; - - sec = Math.floor(milliseconds / 1000.0); - min = Math.floor(sec / 60.0); - sec = (sec % 60.0).toString(); - if (sec.length < 2) { - sec = "0" + sec; - } - - h = (Math.floor(min / 60.0)).toString(); - if (h.length < 2) { - h = "0" + h; - } - - min = (min % 60.0).toString(); - if (min.length < 2) { - min = "0" + min; - } - - timeString = h + ":" + min + ":" + sec; - - ms = (milliseconds % 1000.0).toString(); - while (ms.length < 3) { - ms = "0" + ms; - } - timeString += "." + ms; - - return timeString; - } - - }); - - - Documents.PouchIndexCollection = PagingCollection.extend({ - model: Documents.ViewRow, - documentation: function(){ - return "docs"; - }, - initialize: function(_models, options) { - this.database = options.database; - this.rows = options.rows; - this.view = options.view; - this.design = options.design.replace('_design/',''); - this.params = _.extend({limit: 20, reduce: false}, options.params); - - this.idxType = "_view"; - }, - - url: function () { - return ''; - }, - - simple: function () { - var docs = this.map(function (item) { - return { - _id: item.id, - key: item.get('key'), - value: item.get('value') - }; - }); - - return new Documents.PouchIndexCollection(docs, { - database: this.database, - params: this.params, - view: this.view, - design: this.design, - rows: this.rows - }); - - }, - - fetch: function() { - var deferred = FauxtonAPI.Deferred(); - this.reset(this.rows, {silent: true}); - - this.viewMeta = { - total_rows: this.rows.length, - offset: 0, - update_seq: false - }; - - deferred.resolve(); - return deferred; - }, - - totalRows: function() { - return this.viewMeta.total_rows || "unknown"; - }, - - updateSeq: function() { - return this.viewMeta.update_seq || false; - }, - - buildAllDocs: function(){ - this.fetch(); - }, - - allDocs: function(){ - return this.models; - } - }); - - return Documents; }); diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js index 8eca7f6a4..bf0bc95fa 100644 --- a/app/addons/documents/routes.js +++ b/app/addons/documents/routes.js @@ -14,12 +14,11 @@ define([ "app", "api", - + "addons/fauxton/components", // Modules //views "addons/documents/views", "addons/documents/views-changes", - "addons/documents/views-index", "addons/documents/views-doceditor", "addons/databases/base", @@ -27,7 +26,7 @@ define([ "addons/fauxton/components" ], -function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resources, Components) { +function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, Resources) { var DocEditorRouteObject = FauxtonAPI.RouteObject.extend({ layout: "one_pane", @@ -57,6 +56,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou crumbs: function() { return [ + {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"}, {"name": this.database.id, "link": Databases.databaseUrl(this.database)}, {"name": this.docID, "link": "#"} ]; @@ -114,6 +114,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou }, crumbs: function() { return [ + {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"}, {"name": this.database.id, "link": Databases.databaseUrl(this.database)}, {"name": "New", "link": "#"} ]; @@ -134,34 +135,16 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou route: "allDocs", roles: ["_reader","_writer","_admin"] }, - "database/:database/_design/:ddoc/_views/:view": { - route: "viewFn", - roles: ['_admin'] - }, - "database/:database/_design/:ddoc/_lists/:fn": { - route: "tempFn", - roles: ['_admin'] - }, - "database/:database/_design/:ddoc/_filters/:fn": { - route: "tempFn", - roles: ['_admin'] - }, - "database/:database/_design/:ddoc/_show/:fn": { - route: "tempFn", - roles: ['_admin'] - }, "database/:database/_design/:ddoc/metadata": { route: "designDocMetadata", roles: ['_admin'] }, - "database/:database/new_view": "newViewEditor", - "database/:database/new_view/:designDoc": "newViewEditor", "database/:database/_changes(:params)": "changes" }, events: { "route:updateAllDocs": "updateAllDocsFromView", - "route:updatePreviewDocs": "updateAllDocsFromPreview", + // "route:updatePreviewDocs": "updateAllDocsFromPreview", "route:reloadDesignDocs": "reloadDesignDocs", "route:paginate": "paginate", "route:perPageChange": "perPageChange", @@ -194,8 +177,8 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou database: this.data.database })); }, + 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 }); @@ -209,21 +192,13 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou this.crumbs = function () { return [ + {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"}, {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}, ]; }; this.apiUrl = [designDocInfo.url('apiurl'), designDocInfo.documentation() ]; - }, - tempFn: function(databaseName, ddoc, fn){ - this.setView("#dashboard-upper-content", new Documents.Views.temp({})); - this.crumbs = function () { - return [ - {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}, - ]; - }; - }, establish: function () { @@ -283,62 +258,13 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou })); this.crumbs = [ + {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"}, {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)} ]; this.apiUrl = [this.data.database.allDocs.urlRef("apiurl", urlParams), this.data.database.allDocs.documentation() ]; }, - viewFn: function (databaseName, ddoc, view) { - var params = this.createParams(), - urlParams = params.urlParams, - docParams = params.docParams, - decodeDdoc = decodeURIComponent(ddoc); - - view = view.replace(/\?.*$/,''); - - this.data.indexedDocs = new Documents.IndexCollection(null, { - database: this.data.database, - design: decodeDdoc, - view: view, - params: docParams, - paging: { - pageSize: this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10)) - } - }); - - this.viewEditor = this.setView("#dashboard-upper-content", new Index.ViewEditor({ - model: this.data.database, - ddocs: this.data.designDocs, - viewName: view, - params: urlParams, - newView: false, - database: this.data.database, - ddocInfo: this.ddocInfo(decodeDdoc, this.data.designDocs, view) - })); - - this.toolsView && this.toolsView.remove(); - - this.documentsView = this.createViewDocumentsView({ - designDoc: decodeDdoc, - docParams: docParams, - urlParams: urlParams, - database: this.data.database, - indexedDocs: this.data.indexedDocs, - designDocs: this.data.designDocs, - view: view - }); - - this.sidebar.setSelectedTab(app.utils.removeSpecialCharacters(ddoc) + '_' + app.utils.removeSpecialCharacters(view)); - - this.crumbs = function () { - return [ - {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}, - ]; - }; - - this.apiUrl = [this.data.indexedDocs.urlRef("apiurl", urlParams), "docs"]; - }, ddocInfo: function (designDoc, designDocs, view) { return { @@ -348,40 +274,18 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou }; }, - createViewDocumentsView: function (options) { - - return this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({ - database: options.database, - collection: options.indexedDocs, - nestedView: Documents.Views.Row, - viewList: true, - ddocInfo: this.ddocInfo(options.designDoc, options.designDocs, options.view), - docParams: options.docParams, - params: options.urlParams - })); - }, - - newViewEditor: function (database, designDoc) { - var params = app.getParams(); - - this.toolsView && this.toolsView.remove(); - this.documentsView && this.documentsView.remove(); + // createViewDocumentsView: function (options) { - this.viewEditor = this.setView("#dashboard-upper-content", new Index.ViewEditor({ - currentddoc: "_design/"+designDoc || "", - ddocs: this.data.designDocs, - params: params, - database: this.data.database, - newView: true - })); - - this.sidebar.setSelectedTab('new-view'); - this.crumbs = function () { - return [ - {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}, - ]; - }; - }, + // return this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({ + // database: options.database, + // collection: options.indexedDocs, + // nestedView: Documents.Views.Row, + // viewList: true, + // ddocInfo: this.ddocInfo(options.designDoc, options.designDocs, options.view), + // docParams: options.docParams, + // params: options.urlParams + // })); + // }, updateAllDocsFromView: function (event) { var view = event.view, @@ -401,28 +305,6 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou collection = this.data.database.allDocs; collection.paging.pageSize = pageSize; - } else { - collection = this.data.indexedDocs = new Documents.IndexCollection(null, { - database: this.data.database, - design: ddoc, - view: view, - params: docParams, - paging: { - pageSize: pageSize - } - }); - - if (!this.documentsView) { - this.documentsView = this.createViewDocumentsView({ - designDoc: ddoc, - docParams: docParams, - urlParams: urlParams, - database: this.data.database, - indexedDocs: this.indexedDocs, - designDocs: this.data.designDocs, - view: view - }); - } } this.documentsView.setCollection(collection); @@ -432,26 +314,6 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou this.apiUrl = [collection.urlRef("apiurl", urlParams), "docs"]; }, - updateAllDocsFromPreview: function (event) { - var view = event.view, - rows = event.rows, - ddoc = event.ddoc; - - this.data.indexedDocs = new Documents.PouchIndexCollection(null, { - database: this.data.database, - design: ddoc, - view: view, - rows: rows - }); - - this.documentsView = this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({ - database: this.data.database, - collection: this.data.indexedDocs, - nestedView: Documents.Views.Row, - viewList: true - })); - }, - perPageChange: function (perPage) { // We need to restore the collection parameters to the defaults (1st page) // and update the page size @@ -518,13 +380,14 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou 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"} ]; diff --git a/app/addons/documents/templates/advanced_options.html b/app/addons/documents/templates/advanced_options.html index c986d4e1b..1fc9546d7 100644 --- a/app/addons/documents/templates/advanced_options.html +++ b/app/addons/documents/templates/advanced_options.html @@ -11,57 +11,119 @@ License for the specific language governing permissions and limitations under the License. --> -
- +
+ + API Options + + + + -
- - -
+
+ +
+
+ +
+ + +
+ + <% if (hasReduce) { %> +
+ + +
+ + + <% } %> -
-
-
- - -
+
+
+ +
+ + Keys + + +
+ +
-
-
-
- - + +
+
+
+ + +
-
- - -
- - +
+
+
+
+ + +
+
+ + +
+ + +
+
-
- - -
+
+ + + Additional Parameters +
-
-
-
-
- -
-
-
-
-
- <% if (showStale) { %> -
-
- - -
-
- <% } %> -
-
- - -
-
- <% if (hasReduce) { %> +
-
-
- - -
+
+ +
-
-
- <% } %>
-
+
+ + Query the DB +
- +
+ -
diff --git a/app/addons/documents/templates/all_docs_item.html b/app/addons/documents/templates/all_docs_item.html index a8ef20f44..4526df21d 100644 --- a/app/addons/documents/templates/all_docs_item.html +++ b/app/addons/documents/templates/all_docs_item.html @@ -12,15 +12,21 @@ the License. --> - type="checkbox" class="js-row-select"> - -
+
type="checkbox" class="js-row-select">
+
+ +
+ _id "<%=docID%>" + + <% if (doc.isEditable()) { %> +
+ Edit <%- doc.docType() %> + +
+ <% } %> +
+ 
<%- doc.prettyJSON() %>
- <% if (doc.isEditable()) { %> -
- Edit <%- doc.docType() %> - -
- <% } %>
- +
+
diff --git a/app/addons/documents/templates/all_docs_list.html b/app/addons/documents/templates/all_docs_list.html index a64342779..d132eb291 100644 --- a/app/addons/documents/templates/all_docs_list.html +++ b/app/addons/documents/templates/all_docs_list.html @@ -29,9 +29,9 @@

- - -
+
+ +
<% if (endOfResults) { %>
diff --git a/app/addons/documents/templates/header_alldocs.html b/app/addons/documents/templates/header_alldocs.html new file mode 100644 index 000000000..61eb2d80d --- /dev/null +++ b/app/addons/documents/templates/header_alldocs.html @@ -0,0 +1,35 @@ + + +
+ + + + + + + +
+ + +
+ + + + + + + + +
diff --git a/app/addons/documents/templates/header_doc_edit.html b/app/addons/documents/templates/header_doc_edit.html new file mode 100644 index 000000000..fbc213fb1 --- /dev/null +++ b/app/addons/documents/templates/header_doc_edit.html @@ -0,0 +1,33 @@ + + +
+ + + + + +
+ + +
+ + + + + + + + +
diff --git a/app/addons/documents/templates/index_menu_item.html b/app/addons/documents/templates/index_menu_item.html index 434a02ab3..cc32d54af 100644 --- a/app/addons/documents/templates/index_menu_item.html +++ b/app/addons/documents/templates/index_menu_item.html @@ -14,9 +14,9 @@
- <%- name %> - -
+
\ No newline at end of file diff --git a/app/addons/indexes/templates/header_left.html b/app/addons/indexes/templates/header_left.html new file mode 100644 index 000000000..13bea6043 --- /dev/null +++ b/app/addons/indexes/templates/header_left.html @@ -0,0 +1,17 @@ + + +
+ +
diff --git a/app/addons/documents/templates/index_row_tabular.html b/app/addons/indexes/templates/header_right.html similarity index 67% rename from app/addons/documents/templates/index_row_tabular.html rename to app/addons/indexes/templates/header_right.html index f5f68fa78..90828d291 100644 --- a/app/addons/documents/templates/index_row_tabular.html +++ b/app/addons/indexes/templates/header_right.html @@ -12,14 +12,7 @@ the License. --> - - -
- 
<%- JSON.stringify(doc.get("key")) %>
-
- - -
- 
<%- JSON.stringify(doc.get("value")) %>
-
- + + +
+ diff --git a/app/addons/indexes/templates/index_header.html b/app/addons/indexes/templates/index_header.html new file mode 100644 index 000000000..ac8ac56c1 --- /dev/null +++ b/app/addons/indexes/templates/index_header.html @@ -0,0 +1,28 @@ + + +
+ + + + + + +
+ + +
+ + +
diff --git a/app/addons/documents/templates/index_row_docular.html b/app/addons/indexes/templates/index_row_docular.html similarity index 52% rename from app/addons/documents/templates/index_row_docular.html rename to app/addons/indexes/templates/index_row_docular.html index e8973adae..ba88d06ea 100644 --- a/app/addons/documents/templates/index_row_docular.html +++ b/app/addons/indexes/templates/index_row_docular.html @@ -12,18 +12,24 @@ the License. --> <% if (doc.isEditable()) { %> - +
<% } %> - -
- 
<%- doc.prettyJSON() %>
-
- Edit <%= doc.docType() %> - <% if (doc.isEditable()) { %> - - <% } %> -
+
+
+ _id "<%=docID%>" + +
+ + <% if (doc.isEditable()) { %> + + <% } %> +
+
+
+
+ 
<%- doc.prettyJSON() %>
- +
+
diff --git a/app/addons/indexes/templates/list_editor.html b/app/addons/indexes/templates/list_editor.html new file mode 100644 index 000000000..864490932 --- /dev/null +++ b/app/addons/indexes/templates/list_editor.html @@ -0,0 +1,18 @@ + + +
+ + +
diff --git a/app/addons/indexes/templates/preview_screen.html b/app/addons/indexes/templates/preview_screen.html new file mode 100644 index 000000000..1fcf6d9ee --- /dev/null +++ b/app/addons/indexes/templates/preview_screen.html @@ -0,0 +1,16 @@ + + +

No Index Created Yet!

+

Run Preview To query result

diff --git a/app/addons/indexes/templates/show_editor.html b/app/addons/indexes/templates/show_editor.html new file mode 100644 index 000000000..9afa2bf40 --- /dev/null +++ b/app/addons/indexes/templates/show_editor.html @@ -0,0 +1,41 @@ + + +
+
+
+
+
+

Views are the primary tool used for querying and reporting on CouchDB databases.

+
+ +
+
+ + +
+ + +
+ + +
+ + <% if (!newView) { %> + + <% } %> +
+
+
+
= diff --git a/app/addons/indexes/templates/view_editor.html b/app/addons/indexes/templates/view_editor.html new file mode 100644 index 000000000..f33d3f9c7 --- /dev/null +++ b/app/addons/indexes/templates/view_editor.html @@ -0,0 +1,80 @@ + +
+
+
+
+
+

Views are the primary tool used for querying and reporting on CouchDB databases.

+
+ + +
+ +

<%- database %>

+
+ + +
+
+ + +
+ + +
+ +
+ + <% if (newView) { %> +
<%= langTemplates.map %>
+ <% } else { %> +
<%- ddoc.get('views')[viewName].map %>
+ + <% } %> +
+ + +
+ + + +
+ +
+ + <% if (newView) { %> +
<%- langTemplates.reduce %>
+ <% } else { %> +
<%- ddoc.get('views')[viewName].reduce %>
+ + <% } %> +
+ +
+ + <% if (!newView) { %> + + <% } %> +
+
+
+
+ diff --git a/app/addons/documents/views-index.js b/app/addons/indexes/views.js similarity index 69% rename from app/addons/documents/views-index.js rename to app/addons/indexes/views.js index d0ed8ed06..80e6a404b 100644 --- a/app/addons/documents/views-index.js +++ b/app/addons/indexes/views.js @@ -34,8 +34,172 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, var Views = {}; +//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" + }); + + + Views.Row = FauxtonAPI.View.extend({ + template: "addons/indexes/templates/index_row_docular", + className: "doc-row", + events: { + "click button.delete": "destroy" + }, + + destroy: function (event) { + event.preventDefault(); + + window.alert('Cannot delete a document generated from a view.'); + }, + + beforeRender: function(){ + var newLinks = [{ + links: [{ + title: 'Table', + icon: 'fonticon-table' + },{ + title: 'JSON', + icon: 'fonticon-json' + }] + }]; + + this.insertView("#view-doc-menu", new Components.MenuDropDown({ + icon: 'fonticon-drop-down-dots', + links: newLinks, + })); + }, + + serialize: function() { + return { + docID: this.model.get('id'), + doc: this.model, + url: this.model.url('app') + }; + } + }); + + +/* + + INDEX EDITORS____________________________________ + +*/ + + //Index view CORE extend this + Views.IndexCore = FauxtonAPI.View.extend({ + initialize: function(options) { + this.newView = options.newView || false; + this.ddocs = options.ddocs; + this.params = options.params; + this.database = options.database; + this.currentDdoc = options.currentddoc; + if (this.newView) { + this.viewName = 'newView'; + } else { + this.ddocID = options.ddocInfo ? options.ddocInfo.id : ''; + this.viewName = options.viewName; + this.ddocInfo = new Documents.DdocInfo({_id: this.ddocID},{database: this.database}); + } + + this.showIndex = false; + _.bindAll(this); + }, + establish: function () { + if (this.ddocInfo) { + return this.ddocInfo.fetch(); + } + }, + serialize: function() { + return { + database: this.database.get('id'), + ddocs: this.ddocs, + ddoc: this.model, + ddocName: this.model.id, + viewName: this.viewName, + newView: this.newView, + langTemplates: this.langTemplates.javascript + }; + } + }); + + Views.ShowEditor = Views.IndexCore.extend({ + template: "addons/indexes/templates/show_editor", + langTemplates: { + "javascript": { + map: "function(doc) {\n emit(doc._id, 1);\n}", + } + }, + defaultLang: "javascript" + }); + + Views.ListEditor = Views.IndexCore.extend({ + template: "addons/indexes/templates/list_editor", + langTemplates: { + "javascript": { + map: "function(doc) {\n emit(doc._id, 1);\n}", + } + }, + defaultLang: "javascript" + }); + + + + Views.ViewEditor = FauxtonAPI.View.extend({ - template: "addons/documents/templates/view_editor", + template: "addons/indexes/templates/view_editor", builtinReduces: ['_sum', '_count', '_stats'], events: { @@ -45,8 +209,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, "click button.preview": "previewView", "click #db-views-tabs-nav": 'toggleIndexNav', "click .beautify_map": "beautifyCode", - "click .beautify_reduce": "beautifyCode", - "click #query-options-wrapper": 'toggleIndexNav' + "click .beautify_reduce": "beautifyCode" }, langTemplates: { @@ -139,19 +302,20 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, if (event) { event.preventDefault();} $('#dashboard-content').scrollTop(0); //scroll up - + //check if the code is valid & the inputs are filled out if (this.hasValidCode() && this.$('#new-ddoc:visible').val() !=="") { var mapVal = this.mapEditor.getValue(), reduceVal = this.reduceVal(), viewName = this.$('#index-name').val(), ddoc = this.getCurrentDesignDoc(), - ddocName = ddoc.id, - viewNameChange = false; + ddocName = ddoc.id; + this.viewNameChange = false; + if (this.viewName !== viewName) { ddoc.removeDdocView(this.viewName); this.viewName = viewName; - viewNameChange = true; + this.viewNameChange = true; } notification = FauxtonAPI.addNotification({ @@ -163,42 +327,11 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, ddoc.setDdocView(viewName, mapVal, reduceVal); ddoc.save().then(function () { - that.ddocs.add(ddoc); - - that.mapEditor.editSaved(); - that.reduceEditor && that.reduceEditor.editSaved(); - - - FauxtonAPI.addNotification({ - msg: "View has been saved.", - type: "success", - selector: "#define-view .errors-container", - clear: true - }); - - if (that.newView || viewNameChange) { - var fragment = '/database/' + that.database.safeID() +'/' + ddoc.safeID() + '/_view/' + app.utils.safeURLName(viewName); - - FauxtonAPI.navigate(fragment, {trigger: false}); - that.newView = false; - that.ddocID = ddoc.safeID(); - that.viewName = viewName; - that.ddocInfo = ddoc; - that.showIndex = true; - that.render(); - FauxtonAPI.triggerRouteEvent('reloadDesignDocs', { - selectedTab: app.utils.removeSpecialCharacters(ddocName.replace(/_design\//,'')) + '_' + app.utils.removeSpecialCharacters(viewName) - }); - } - - if (that.reduceFunStr !== reduceVal) { - that.reduceFunStr = reduceVal; - that.advancedOptions.renderOnUpdatehasReduce(that.hasReduce()); - } - - FauxtonAPI.triggerRouteEvent('updateAllDocs', {ddoc: ddocName, view: viewName}); - - }, function(xhr) { + //on success + that.afterSave(ddoc, viewName, ddocName); + }, + function(xhr) { + //on failure var responseText = JSON.parse(xhr.responseText).reason; notification = FauxtonAPI.addNotification({ msg: "Save failed: " + responseText, @@ -207,6 +340,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, }); }); } else { + //if nothing is filled out give an error message var errormessage = (this.$('#new-ddoc:visible').val() ==="")?"Enter a design doc name":"Please fix the Javascript errors and try again."; notification = FauxtonAPI.addNotification({ msg: errormessage, @@ -217,6 +351,51 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, } }, + afterSave: function(ddoc, viewName, ddocName){ + var reduceVal = this.reduceVal(); + //add ddoc to the collection + this.ddocs.add(ddoc); + + //trigger the EditSaved function on the map editor & reduce editor + this.mapEditor.editSaved(); + this.reduceEditor && this.reduceEditor.editSaved(); + + + //show a notification + FauxtonAPI.addNotification({ + msg: "View has been saved.", + type: "success", + selector: "#define-view .errors-container", + clear: true + }); + + + //if it's new or the name changed (aka created a new doc) + if (this.newView || this.viewNameChange) { + var fragment = '/database/' + this.database.safeID() +'/' + ddoc.safeID() + '/_view/' + app.utils.safeURLName(viewName); + + FauxtonAPI.navigate(fragment, {trigger: false}); + this.newView = false; + this.ddocID = ddoc.safeID(); + this.viewName = viewName; + this.ddocInfo = ddoc; + this.showIndex = true; + this.render(); + FauxtonAPI.triggerRouteEvent('reloadDesignDocs', { + selectedTab: app.utils.removeSpecialCharacters(ddocName.replace(/_design\//,'')) + '_' + app.utils.removeSpecialCharacters(viewName) + }); + } + + // TODO:// this should change to a trigger because we shouldn't define advanced options in this view + if (this.reduceFunStr !== reduceVal) { + this.reduceFunStr = reduceVal; + // this.advancedOptions.renderOnUpdatehasReduce(this.hasReduce()); + } + + // Route Event will reload the right content + FauxtonAPI.triggerRouteEvent('updateAllDocs', {ddoc: ddocName, view: viewName}); + }, + updateView: function(event, paramInfo) { event.preventDefault(); @@ -341,31 +520,10 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, }, this); }, - toggleIndexNav: function (event) { - $('#dashboard-content').scrollTop(0); //scroll up - - var $targetId = this.$(event.target).attr('id'), - $previousTab = this.$(this.$('li.active a').attr('href')), - $targetTab = this.$(this.$(event.target).attr('href')); - - if ($targetTab.attr('id') !== $previousTab.attr('id')) { - $previousTab.removeAttr('style'); - } - - if ($targetId === 'index-nav') { - if (this.newView) { return; } - var that = this; - $('#dashboard-content').scrollTop(0); //scroll up - $targetTab.toggle('slow', function(){ - that.showEditors(); - }); - } else { - $targetTab.toggle('slow'); - } - }, serialize: function() { return { + database: this.database.get('id'), ddocs: this.ddocs, ddoc: this.model, ddocName: this.model.id, @@ -435,37 +593,17 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, database: this.database })); - if (!this.newView) { - this.eventer = _.extend({}, Backbone.Events); - - this.advancedOptions = this.insertView('#query', new QueryOptions.AdvancedOptions({ - updateViewFn: this.updateView, - previewFn: this.previewView, - database: this.database, - viewName: this.viewName, - ddocName: this.model.id, - hasReduce: this.hasReduce(), - eventer: this.eventer, - showStale: true - })); - } - }, afterRender: function() { - - if (this.params && !this.newView) { - this.advancedOptions.updateFromParams(this.params); - } + //TODO: have this happen on a trigger once we move advanced options to the header + // if (this.params && !this.newView) { + // this.advancedOptions.updateFromParams(this.params); + // } this.designDocSelector.updateDesignDoc(); - if (this.newView || this.showIndex) { - this.showEditors(); - this.showIndex = false; - } else { - this.$('#index').hide(); - this.$('#index-nav').parent().removeClass('active'); - } + this.showEditors(); + this.showIndex = false; }, @@ -510,7 +648,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, }); Views.DesignDocSelector = FauxtonAPI.View.extend({ - template: "addons/documents/templates/design_doc_selector", + template: "addons/indexes/templates/design_doc_selector", events: { "change select#ddoc": "updateDesignDoc" @@ -537,9 +675,9 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, updateDesignDoc: function () { if (this.newDesignDoc()) { - this.$('#new-ddoc-section').show(); + this.$('#new-ddoc').show(); } else { - this.$('#new-ddoc-section').hide(); + this.$('#new-ddoc').hide(); } }, diff --git a/app/templates/layouts/two_pane.html b/app/templates/layouts/two_pane.html index 031ad1214..0174a5a6d 100644 --- a/app/templates/layouts/two_pane.html +++ b/app/templates/layouts/two_pane.html @@ -12,18 +12,16 @@ the License. --> -
-
-
- -
-
+
+
+ +
+
-
-
-
+
+
+
- diff --git a/app/templates/layouts/with_sidebar.html b/app/templates/layouts/with_sidebar.html index 4eba634a7..7fc64db15 100644 --- a/app/templates/layouts/with_sidebar.html +++ b/app/templates/layouts/with_sidebar.html @@ -14,10 +14,10 @@
-
-
- -
+
+
+ +
diff --git a/app/templates/layouts/with_tabs.html b/app/templates/layouts/with_tabs.html index fc372ff07..074385fcf 100644 --- a/app/templates/layouts/with_tabs.html +++ b/app/templates/layouts/with_tabs.html @@ -15,10 +15,11 @@
-
- -
-
+
+ +
+
+
diff --git a/app/templates/layouts/with_tabs_sidebar.html b/app/templates/layouts/with_tabs_sidebar.html index a0ed03d41..de4bdee7b 100644 --- a/app/templates/layouts/with_tabs_sidebar.html +++ b/app/templates/layouts/with_tabs_sidebar.html @@ -13,17 +13,14 @@ -->
-
+
-
- -
+
+ +
- -
-
diff --git a/assets/img/couchWatermark.png b/assets/img/couchWatermark.png new file mode 100644 index 0000000000000000000000000000000000000000..cab9ce41553884747f3edf5ad8e4c9cf7b87368b GIT binary patch literal 7053 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 SRxkhgL59T`pldX6(f .btn + .dropdown-toggle, - > .btn:first-child, - > .btn:last-child, - > .dropdown-toggle { - .border-radius(0); - background-image: none; - text-shadow: none; - } -} - -.btn { - .box-shadow(none); - .border-radius(@baseBorderRadius); - background-image: none; - text-shadow: none; - background-repeat: no-repeat; - padding: 10px; - margin-top: 0px; - .icon { - margin-right: 0.2em; - } - &.btn-small { - padding: 5px 10px; - .icon { - margin-right: 0; - font-size: inherit; - } - } - &.btn-mini { - padding: 3px 8px; - .icon { - margin-right: 0; - font-size: inherit; - } - } -} -.btn-primary { - background: @redButton; -} - -.btn-primary a:visited { - color: #fff; -} - -.form-actions { - background: none; - border: none; -} - -.input-append, -.input-prepend { - .add-on { - font-size: 18px; - padding: 14px 5px 30px; - } - .btn .icon { - font-size: 21.5px; - margin-right: 0; - } -} - -.row-fluid .input-append [class*="span"], -.input-prepend input[class*="span"] { - width: auto; -} - -.form-inline { - input[type=password], - input[type=text] { - width: auto; - } -} -.checkbox { - label { - display: inline-block; - padding-left:25px; - } -} - -label { - margin-right: 15px; - padding-left:0; - display: block; - cursor: pointer; - position: relative; - font-size: 14px; - &.inline { - display: inline-block; - } -} -.help-block { - font-size: 12px; -} - -a.help-link:hover { - text-decoration: none; -} -input[type=text].error { - border: red 1px solid; -} /** * Fauxton-specific Bootstrap additions @@ -297,462 +175,9 @@ table.databases { } } -/* ajax loader */ -.loader { - background: url('../img/loader.gif') center center no-repeat; - min-height: 100px; -} -#app-container.loader{ - min-height: 400px; - > *{ - display: none; - } -} - -#global-notifications { - position: fixed; - top: 0px; - display: block; - z-index: 100000; - left: @navWidth; - .closeMenu & { - left: @collapsedNavWidth; - } - width: 100%; -} - -#app-container{ - padding: 0; - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - > .row-fluid { - height: 100%; - } -} - -/* Fixed side navigation */ -#primary-navbar { - height: 100%; - position: fixed; - width: @navWidth; - top: 0; - bottom: 0; - background-color: @primaryNav; - overflow-y: scroll; - .js-version { - color: #fff; - font-size: 10px; - padding-left: 10px; - } - .closeMenu & { - .js-version { - display: none; - } - } - #footer-links{ - position: absolute; - bottom: 0; - width: 100%; - } - #user-create-admin{ - font-size: 12px - } - .navbar { - .burger{ - .transition(all @transitionSpeed @transitionEaseType); - padding: 22px 0 0 18px; - position: fixed; - z-index: 100; - width: 64px; - top: 0; - background-color: @primaryNav; - width: @navWidth; - div{ - .transition(all @transitionSpeed @transitionEaseType); - height: 4px; - width: 24px; - .border-radius(2); - background-color: @navBG; - margin: 2px 0px; - } - &:hover div{ - background-color: @orange; - } - } - .bottom-container { - height: 110px; - position: fixed; - bottom: 0; - width: 220px; - background: #3a2c2b; - .brand { - .box-sizing(content-box); - .hide-text; - .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985); - margin: 10px 0 0 0; - width: 200px; - height: 40px; - padding: 10px; - float: none; - background: #3a2c2b; - .icon { - .box-sizing(content-box); - background: url(../img/couchdb-site.png) no-repeat 0 0; - display: block; - height: 100%; - width: 100%; - } - .closeMenu & { - .icon { - background: url(../img/minilogo.png) no-repeat 0 0; - } - width: 45px; - } - } - #footer-nav-links { - li { - a { - font-size: 12px; - color: @red; - padding: 12px; - text-shadow: none; - } - &.active, &:hover{ - a { - text-decoration: underline; - } - } - } - } - } - nav { - margin-top: 64px; - .nav{ - margin: 0; - li{ - .transition(all @transitionSpeed @transitionEaseType); - padding: 0; - font-size: 16px; - letter-spacing: 1px; - line-height: 23px; - width: @navWidth; - font-weight: normal; - font-family: helvetica; - .box-sizing(border-box); - background-color: @navBG; - border-bottom: 1px solid @primaryNav; - min-height: 48px; - &.active, &:hover{ - a{ - .box-shadow(none); - } - background-color: @red; - } - &:hover .fonticon:before{ - color: @white; - } - &.active .fonticon:before, - &:hover .fonticon:before, - { - text-shadow: @boxShadow; - color: @NavIconActive; - } - a{ - padding: 12px 25px 12px 60px; - background-color: transparent; - color: #fff; - text-shadow: @textShadowOff; - &.closeMenu{ - color: transparent; - } - .fonticon { - position: relative; - &:before { - position: absolute; - top: -5px; - left: -41px; - font-size: 24px; - color: @NavIcon; - text-shadow: @boxShadowOff; - } - } - .closeMenu &{ - color: transparent; - } - } - } - } - ul#footer-nav-links{ - li{ - background-color: @primaryNav; - border-top: 1px solid @red; - border-bottom: none; - font-size: 12px; - padding: 12px; - min-height: 44px; - &.active, &:hover{ - background-color: @linkRed; - border-top: 1px solid @red; - a{ - color: white; - } - } - a{ - color: @red; - } - } - - } - ul#bottom-nav-links{ - margin-top: 0; - padding-bottom: 70px; - li{ - min-height: 55px; - background-color: @bottomNav; - &.active{ - background-color:@linkRed; - } - &:hover{ - background-color: @navBGHover; - } - a{ - &.fonticon { - position: relative; - &:before { - top: -5px; - left: -40px; - font-size: 22px; - } - } - } - } - } - } - } -} - - -#dashboard { - .box-shadow(-6px 0 rgba(0, 0, 0, 0.1)); - border-left: 1px solid #999; - position: absolute; - left: @navWidth; - margin-left: 0; - padding-left: 0; - padding-right: 0; - background-color: @sidebarBG; - min-width: 600px; - height: 100%; - .closeMenu &{ - left: @collapsedNavWidth; - } - &.one-pane{ - min-width: 800px; - margin-top: 0; - overflow-x: hidden; - } -} - -/*dashboard content can be in multiple templates*/ - -#dashboard-content{ - &.row-fluid, - &.window-resizeable{ - /*remove gutter without rewriting variable*/ - margin-left: 0px; - } - padding: 20px; - .with-sidebar &{ - border-left: 1px solid #999; - border-right: 1px solid #999; - width: auto; - .box-shadow(-6px 0 rgba(0, 0, 0, 0.1)); - padding: 0px; - bottom: 0px; - top: 60px; - position: fixed; - overflow-x: hidden; - overflow-y: auto; - left: @sidebarWidth+@navWidth; - right: 0; - .box-sizing(border-box); - .closeMenu & { - left: @sidebarWidth+@collapsedNavWidth; - } - } - > div.inner { - display: block; - } -} - -.with-sidebar.content-area { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; -} - -// .closeMenu .with-sidebar.content-area { -// left: 0; -// } -/*tools*/ - -.row-fluid.content-area{ - background-color: @background; -} - - -.fixed-header{ - background-color: @breadcrumbBG; - 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); - left: auto; - } -} - -#breadcrumbs { - .breadcrumb { - margin: 15px 20px; - margin-bottom: 0; - background-color: transparent; - padding: 0; - li { - .divider { - font-size: 12px; - color: @breadcrumbArrow; - } - &:first-child { - font-size: 30px; - } - color: @breadcrumbText; - font-size: 18px; - text-shadow: none; - &.active{ - color: #333; - } - a{ - color: @breadcrumbText; - } - } - } -} - - -/*SIDEBAR TEMPLATE STYLES*/ -.topmenu-defaults { - height: 70px; - padding: 12px 10px 0; - .box-sizing(border-box); -} - -.dashboard-upper-menu{ - right: 0; - left: @sidebarWidth+@navWidth; - position: fixed; - z-index: 11; - display: block; - .topmenu-defaults; - background-color: #CBCBCB; - .closeMenu & { - left: @sidebarWidth+@collapsedNavWidth; - } -} - -#dashboard-lower-content{ - padding: 20px; - background-color: #F1F1F1; -} - -#dashboard-upper-content{ - .tab-content { - padding-top: 70px; - } - .well{ - padding: 20px; - .border-radius(0); - .box-shadow(none); - } -} - -.sidenav { - padding: 0; - header { - width: @sidebarWidth; - border-bottom: 1px solid #d3d7db; - } - .nav-list{ - .divider { - border: none; - } - > li > a:hover, - > li > a:focus{ - background-color: @darkRed; - color: #fff; - } - li.active > a { - color: @darkRed; - } - > li > a{ - color: @linkRed; - padding: 10px 13px 10px 24px; - border-bottom: 1px solid #d3d7db; - span{ - margin-right: 8px; - width: 14px; - display: inline-block; - text-align: center; - } - } - a{ - display: block; - padding: 10px 5px 5px 15px; - color: @subListGray; - .divider { - background: none; - color: #ccc; - padding: 0 2px; - } - } - .nav-header{ - padding: 0px; - text-shadow: none; - color: #333333; - & > span:hover { - color: @red; - } - } - } -} -#sidebar-content { - position: absolute; - top: 60px; - width: @sidebarWidth; - left: 0; - background-color: @secondarySidebar; - > div.inner { - display: block; - } -} -/*ONE PANEL TEMPLATE ONLY STYLES AKA _all_dbs */ .result-tools{ border-bottom: 1px solid #999999; @@ -808,76 +233,7 @@ table.databases { } } -.custom-inputs{ - - input[type=radio], - input[type=checkbox] { - display: none; - } - - .checkbox label:before { - border-radius: 3px; - } - - .controls > .radio:first-child, .controls > .checkbox:first-child { - padding-top: 15px; - } - - .radio.inline, .checkbox.inline { - display: inline-block; - padding-top: 15px; - margin-bottom: 12px; - vertical-align: middle; - } - - input[type=checkbox]:checked + label:before { - /*content: "\2713"; */ - content: "\00d7"; - text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); - font-size: 16px; - background-color: @red; - color: white; - text-align: center; - line-height: 15px; - } - - label:before { - content: ""; - display: inline-block; - - width: 16px; - height: 16px; - - margin-right: 10px; - position: absolute; - left: 0; - bottom: 1px; - background-color: #aaa; - box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); - } - - .radio label:before { - border-radius: 8px; - } - - input[type=radio]:checked + label:before { - content: "\2022"; - color: #f3f3f3; - font-size: 30px; - text-align: center; - line-height: 18px; - } - - label.drop-down{ - &:before{ - display: none; - } - } -} -form.view-query-update, form.view-query-save { - max-width: 100%; -} /*documents and databases */ .view.show{ @@ -890,11 +246,6 @@ div.spinner { top: 50%; } -#api-navbar{ - position: relative; - padding-right: 5px; -} - .api-url-btn { margin-top: 5px; margin-bottom: 5px; @@ -990,39 +341,4 @@ div.spinner { } } -div.add-dropdown { - position: absolute; - top: 2px; - right: 0px; - .dropdown-menu{ - left: -110px; - padding-bottom: 0; - width: 148px; - min-width: 0; - top: 38px; - .box-shadow(@boxShadow); - &.arrow:before{ - right: 4px; - } - a { - background-color: #202326; - color: rgba(255, 255, 255, 0.8); - &:hover{ - background-color: @red; - color: white; - } - } - li a { - padding: 10px 15px 10px 12px; - } - } - .dropdown-toggle{ - border-top: none !important; - text-decoration: none; - } - > a { - border-bottom: none; - text-decoration: none; - font-size: 16px; - } -} + diff --git a/assets/less/formstyles.less b/assets/less/formstyles.less new file mode 100644 index 000000000..464566435 --- /dev/null +++ b/assets/less/formstyles.less @@ -0,0 +1,247 @@ +/* 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. + */ +@import "variables.less"; + +input[type=text], +input[type=password] { + .border-radius(0); + padding: 12px; + border: 1px solid #ccc; + height: auto; + font-size: 16px; + margin-top: 0; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +input[type="file"], +input[type="checkbox"], +input[type="radio"], +select { + margin: 0 0 1em 0; +} + +/*form elements and buttons*/ +.btn-group { + > .btn + .dropdown-toggle, + > .btn:first-child, + > .btn:last-child, + > .dropdown-toggle { + .border-radius(0); + background-image: none; + text-shadow: none; + } +} + +.btn { + .box-shadow(none); + .border-radius(@baseBorderRadius); + background-image: none; + text-shadow: none; + background-repeat: no-repeat; + padding: 10px; + margin-top: 0px; + .icon { + margin-right: 0.2em; + } + &.btn-small { + padding: 5px 10px; + .icon { + margin-right: 0; + font-size: inherit; + } + } + &.btn-mini { + padding: 3px 8px; + .icon { + margin-right: 0; + font-size: inherit; + } + } +} +.btn-primary { + background: @redButton; +} + +.btn-primary a:visited { + color: #fff; +} + +.form-actions { + background: none; + border: none; +} + +.input-append, +.input-prepend { + .add-on { + font-size: 18px; + padding: 14px 5px 30px; + } + .btn .icon { + font-size: 21.5px; + margin-right: 0; + } +} + +.row-fluid .input-append [class*="span"], +.input-prepend input[class*="span"] { + width: auto; +} + +.form-inline { + input[type=password], + input[type=text] { + width: auto; + } +} +.checkbox { + label { + display: inline-block; + padding-left:25px; + } +} + +label { + margin-right: 15px; + padding-left:0; + display: block; + cursor: pointer; + position: relative; + font-size: 14px; + &.inline { + display: inline-block; + } +} +.help-block { + font-size: 12px; +} + +a.help-link:hover { + text-decoration: none; +} + +input[type=text].error { + border: red 1px solid; +} + +form.view-query-update, form.view-query-save { + max-width: 100%; +} +.custom-inputs{ + + input[type=radio], + input[type=checkbox] { + display: none; + } + + .checkbox label:before { + border-radius: 3px; + } + + .controls > .radio:first-child, .controls > .checkbox:first-child { + padding-top: 15px; + } + + .radio.inline, .checkbox.inline { + display: inline-block; + padding-top: 15px; + margin-bottom: 12px; + vertical-align: middle; + } + + input[type=checkbox]:checked + label:before { + /*content: "\2713"; */ + content: "\00d7"; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); + font-size: 16px; + background-color: @red; + color: white; + text-align: center; + line-height: 15px; + } + + label:before { + content: ""; + display: inline-block; + + width: 16px; + height: 16px; + + margin-right: 10px; + position: absolute; + left: 0; + bottom: 1px; + background-color: #aaa; + box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); + } + + .radio label:before { + border-radius: 8px; + } + + input[type=radio]:checked + label:before { + content: "\2022"; + color: #f3f3f3; + font-size: 30px; + text-align: center; + line-height: 18px; + } + + label.drop-down{ + &:before{ + display: none; + } + } +} + +div.add-dropdown { + position: absolute; + top: 2px; + right: 0px; + .dropdown-menu{ + left: -110px; + padding-bottom: 0; + width: 148px; + min-width: 0; + top: 38px; + .box-shadow(@boxShadow); + &.arrow:before{ + right: 4px; + } + a { + background-color: #202326; + color: rgba(255, 255, 255, 0.8); + &:hover{ + background-color: @red; + color: white; + } + } + li a { + padding: 10px 15px 10px 12px; + } + } + .dropdown-toggle{ + border-top: none !important; + text-decoration: none; + } + > a { + border-bottom: none; + text-decoration: none; + font-size: 16px; + } +} diff --git a/assets/less/templates.less b/assets/less/templates.less new file mode 100644 index 000000000..a6f1a786a --- /dev/null +++ b/assets/less/templates.less @@ -0,0 +1,586 @@ +/* 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. + */ + @import "variables.less"; + +/* ajax loader */ +.loader { + background: url('../img/loader.gif') center center no-repeat; + min-height: 100px; +} + +#global-notifications { + position: fixed; + top: 0px; + display: block; + z-index: 100000; + left: @navWidth; + .closeMenu & { + left: @collapsedNavWidth; + } + width: 100%; +} + +/*container where the layout is injected*/ +#app-container{ + padding: 0; + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + > .row-fluid { + height: 100%; + } + &.loader{ + min-height: 400px; + > *{ + display: none; + } + } +} + +/* Fixed side navigation */ +#primary-navbar { + /* hack for the scrollbar that shines through from the sidebar */ + -webkit-transform: translate3d(0, 0, 0); + height: 100%; + position: fixed; + width: @navWidth; + top: 0; + bottom: 0; + background-color: @primaryNav; + overflow-y: scroll; + .version { + color: #fff; + font-size: 10px; + padding-left: 10px; + } + #footer-links{ + position: absolute; + bottom: 0; + width: 100%; + } + #user-create-admin{ + font-size: 12px + } + .navbar { + .burger{ + .transition(all @transitionSpeed @transitionEaseType); + padding: 22px 0 0 18px; + position: fixed; + top: 0; + z-index: 100; + background-color: @primaryNav; + width: @navWidth; + div{ + .transition(all @transitionSpeed @transitionEaseType); + height: 4px; + width: 24px; + .border-radius(2); + background-color: @navBG; + margin: 2px 0px; + } + &:hover div{ + background-color: @orange; + } + } + .bottom-container { + height: 110px; + position: fixed; + bottom: 0; + width: 220px; + background: #3a2c2b; + .brand { + .box-sizing(content-box); + .hide-text; + .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985); + margin: 10px 0 0 0; + width: 200px; + height: 40px; + padding: 10px; + float: none; + background: #3a2c2b; + .icon { + .box-sizing(content-box); + background: url(../img/couchdb-site.png) no-repeat 0 0; + display: block; + height: 100%; + width: 100%; + } + .closeMenu & { + .icon { + background: url(../img/minilogo.png) no-repeat 0 0; + } + width: 45px; + } + } + #footer-nav-links { + li { + a { + font-size: 12px; + color: @red; + padding: 12px; + text-shadow: none; + } + &.active, &:hover{ + a { + text-decoration: underline; + } + } + } + } + } + nav { + margin-top: 64px; + .nav{ + margin: 0; + li{ + .transition(all @transitionSpeed @transitionEaseType); + padding: 0; + font-size: 16px; + letter-spacing: 1px; + line-height: 23px; + width: @navWidth; + font-weight: normal; + font-family: helvetica; + .box-sizing(border-box); + background-color: @navBG; + border-bottom: 1px solid @primaryNav; + min-height: 48px; + &.active, &:hover{ + a{ + .box-shadow(none); + } + background-color: @red; + } + &:hover .fonticon:before{ + color: @white; + } + &.active .fonticon:before, + &:hover .fonticon:before, + { + text-shadow: @boxShadow; + color: @NavIconActive; + } + a{ + padding: 12px 25px 12px 60px; + background-color: transparent; + color: #fff; + text-shadow: @textShadowOff; + &.closeMenu{ + color: transparent; + } + .fonticon { + position: relative; + &:before { + position: absolute; + top: -5px; + left: -41px; + font-size: 24px; + color: @NavIcon; + text-shadow: @boxShadowOff; + } + } + .closeMenu &{ + color: transparent; + } + } + } + } + ul#footer-nav-links{ + li{ + background-color: @primaryNav; + border-top: 1px solid @red; + border-bottom: none; + font-size: 12px; + padding: 12px; + min-height: 44px; + &.active, &:hover{ + background-color: @linkRed; + border-top: 1px solid @red; + a{ + color: white; + } + } + a{ + color: @red; + } + } + + } + ul#bottom-nav-links{ + margin-top: 0; + padding-bottom: 70px; + li{ + min-height: 55px; + background-color: @bottomNav; + &.active{ + background-color:@linkRed; + } + &:hover{ + background-color: @navBGHover; + } + a{ + &.fonticon { + position: relative; + &:before { + top: -5px; + left: -40px; + font-size: 22px; + } + } + } + } + } + } + } +} + + +/* +--------------------------------------------------- + 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: + + one_pane.html + two_pane.html + with_sidebar.html + with_tabs.html + with_tabs_sidebar.html +*/ +#dashboard { + .left-shadow-border; + position: absolute; + left: @navWidth; + margin-left: 0; + padding-left: 0; + padding-right: 0; + background-color: @sidebarBG; + min-width: 600px; + height: 100%; + .closeMenu &{ + left: @collapsedNavWidth; + } + &.one-pane{ + min-width: 800px; + margin-top: 0; + overflow-x: hidden; + } + &.two-pane{ + margin-top: 0; + overflow-x: hidden; + } +} + +.fixed-header{ + height: 60px; + background-color: @breadcrumbBG; + position: fixed; + top: 0; + right: 0; + left: @navWidth; + .closeMenu & { + left: @collapsedNavWidth; + } + 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 { + 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 { + 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; + text-shadow: none; + &.active{ + color: #333; + } + a{ + text-decoration: none; + color: @breadcrumbText; + } + } + } +} + + + + + + + + +/* SIDEBAR-CONTENT & DASHBOARD-CONTENT LAYOUTS: + with_sidebar.html + with_tabs_sidebar.html +*/ + +#sidebar-content { + position: absolute; + top: 60px; + width: @sidebarWidth; + left: 0; + background-color: @secondarySidebar; + > div.inner { + display: block; + } +} + +.topmenu-defaults { + height: 70px; + padding: 12px 10px 0; + .box-sizing(border-box); +} + +/* USED IN TEMPLATE: with_tabs_sidebar.html */ +.dashboard-upper-menu{ + right: 0; + left: @sidebarWidth+@navWidth; + position: fixed; + z-index: 11; + display: block; + .topmenu-defaults; + background-color: #CBCBCB; + .closeMenu & { + left: @sidebarWidth+@collapsedNavWidth; + } +} + +#dashboard-lower-content{ + padding: 20px; + background-color: #F1F1F1; +} + +#dashboard-upper-content{ + .tab-content { + padding-top: 70px; + } + .well{ + padding: 20px; + .border-radius(0); + .box-shadow(none); + } +} + + + +#dashboard-content{ + &.row-fluid, + &.window-resizeable{ + /*remove gutter without rewriting variable*/ + margin-left: 0px; + } + padding: 20px; + .with-sidebar &{ + .left-shadow-border; + border-right: 1px solid #999; + width: auto; + padding: 0px; + bottom: 0px; + top: 60px; + position: fixed; + overflow-x: hidden; + overflow-y: auto; + left: @sidebarWidth+@navWidth; + right: 0; + .box-sizing(border-box); + .closeMenu & { + left: @sidebarWidth+@collapsedNavWidth; + } + } + > div.inner { + display: block; + } +} + +/* + Sidenav: + USED IN DOCUMENT ADDON & EXTERNAL ADDONS +*/ +.sidenav { + padding: 0; + header { + width: @sidebarWidth; + border-bottom: 1px solid #d3d7db; + } + .nav-list{ + .divider { + border: none; + } + > li > a:hover, + > li > a:focus{ + background-color: @darkRed; + color: #fff; + } + li.active > a { + color: @darkRed; + } + > li > a{ + color: @linkRed; + padding: 10px 13px 10px 24px; + border-bottom: 1px solid #d3d7db; + span{ + margin-right: 8px; + width: 14px; + display: inline-block; + text-align: center; + } + } + a{ + display: block; + padding: 10px 5px 5px 15px; + color: @subListGray; + .divider { + background: none; + color: #ccc; + padding: 0 2px; + } + } + .nav-header{ + padding: 0px; + text-shadow: none; + color: #333333; + & > span:hover { + color: @red; + } + } + } +} + +.row-fluid.content-area{ + background-color: @background; +} + + +/* + #left-content & #right-content from template: + two_pane.html +*/ +#left-content, +#right-content{ + .two-pane &{ + padding: 0px; + bottom: 0px; + top: 60px; + margin-left:0; + position: fixed; + overflow-x: hidden; + overflow-y: auto; + .box-sizing(border-box); + } +} + +#left-content{ + .two-pane &{ + left: @navWidth; + .closeMenu & { + left: @collapsedNavWidth; + } + } +} +#right-content{ + .two-pane &{ + padding: 0 20px; + border-left: 1px solid #999; + .box-shadow(-6px 0 rgba(0, 0, 0, 0.1)); + } +} + + +.with-sidebar.content-area, +.two-pane.content-area { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + + diff --git a/settings.json.default b/settings.json.default index bc5a6174e..d278368bc 100644 --- a/settings.json.default +++ b/settings.json.default @@ -3,6 +3,7 @@ { "name": "fauxton" }, { "name": "databases" }, { "name": "documents" }, + { "name": "indexes" }, { "name": "pouchdb" }, { "name": "activetasks" }, { "name": "config" }, From 0a50426fb18185fb943f109729139c136ecfec14 Mon Sep 17 00:00:00 2001 From: Jenn Schiffer Date: Sun, 24 Aug 2014 16:33:43 +0200 Subject: [PATCH 02/31] style form fields and tab buttons --- .../assets/less/advancedOptions.less | 37 ++++++++++++++++++- .../documents/templates/advanced_options.html | 4 +- 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/app/addons/documents/assets/less/advancedOptions.less b/app/addons/documents/assets/less/advancedOptions.less index 0ff812430..b68dfd53c 100644 --- a/app/addons/documents/assets/less/advancedOptions.less +++ b/app/addons/documents/assets/less/advancedOptions.less @@ -27,7 +27,7 @@ margin: 0; .query-group { padding: 20px; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #555; } .query-group:last-child { border-bottom: none; @@ -44,6 +44,38 @@ .dropdown.inline { display: inline-block; } + input[type="text"], + textarea { + .border-radius(5px); + background-color: #666; + padding: 8px; + border: none; + color: #eee; + } + .btn-success { + .border-radius(5px); + } + } + .toggle-btns { + .btn { + padding: 5px 5px 3px; + background: #727A82; + color: #fff; + font-size: 12px; + border: none; + } + .btn.active { + background: #fff; + color: #E33F3B; + box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25) inset, 2px 2px 2px rgba(0, 0, 0, 0.15); + } + label:first-child { + .border-radius(5px 0 0 5px); + } + label:last-child { + .border-radius(0 5px 5px 0); + margin-left: 1px; + } } } #query:before { @@ -57,3 +89,6 @@ width: 0; height: 0; } +#button-options { + margin-top: 20px; +} \ No newline at end of file diff --git a/app/addons/documents/templates/advanced_options.html b/app/addons/documents/templates/advanced_options.html index 1fc9546d7..c6268fbb9 100644 --- a/app/addons/documents/templates/advanced_options.html +++ b/app/addons/documents/templates/advanced_options.html @@ -65,10 +65,10 @@
-
From 6e298698023f0666025a37f3fc4c78778acf25d9 Mon Sep 17 00:00:00 2001 From: Jenn Schiffer Date: Sun, 24 Aug 2014 16:33:43 +0200 Subject: [PATCH 03/31] button and search box moved to header on all docs --- app/addons/documents/routes.js | 5 +++++ .../documents/templates/all_docs_layout.html | 12 ------------ app/addons/documents/templates/header_alldocs.html | 14 +++++++++++--- app/addons/documents/views.js | 12 ++++++++---- 4 files changed, 24 insertions(+), 19 deletions(-) diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js index bf0bc95fa..f06a307a5 100644 --- a/app/addons/documents/routes.js +++ b/app/addons/documents/routes.js @@ -172,6 +172,11 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, } }); + this.header = this.setView("#breadcrumbs", new Documents.Views.AllDocsHeader({ + database: this.data.database + })); + + this.sidebar = this.setView("#sidebar-content", new Documents.Views.Sidebar({ collection: this.data.designDocs, database: this.data.database diff --git a/app/addons/documents/templates/all_docs_layout.html b/app/addons/documents/templates/all_docs_layout.html index e2c247984..90de57c27 100644 --- a/app/addons/documents/templates/all_docs_layout.html +++ b/app/addons/documents/templates/all_docs_layout.html @@ -11,15 +11,3 @@ License for the specific language governing permissions and limitations under the License. --> -
- -
-
- -
-
-
-
diff --git a/app/addons/documents/templates/header_alldocs.html b/app/addons/documents/templates/header_alldocs.html index 61eb2d80d..72d49ade1 100644 --- a/app/addons/documents/templates/header_alldocs.html +++ b/app/addons/documents/templates/header_alldocs.html @@ -27,9 +27,17 @@ + - - - + + + Query Options + + +
+
+
+ + \ No newline at end of file diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js index 45a2718b0..50c9c77d9 100644 --- a/app/addons/documents/views.js +++ b/app/addons/documents/views.js @@ -50,12 +50,16 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, selectAllDocs: function(){ //trigger event to select all in other view }, - afterRender:function(){ + beforeRender:function(){ //insert DB search dropdown //insert top create level dropdown with gear icon //search docs + this.setView("#header-search", new Views.JumpToDoc({ + database: this.database, + collection: this.database.allDocs + })); //insert queryoptions @@ -293,11 +297,11 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, toggleQuery: function (event) { $('#dashboard-content').scrollTop(0); - this.$('#query').toggle('slow'); + this.$('#query').toggle(); }, beforeRender: function () { - this.advancedOptions = this.insertView('#query', new QueryOptions.AdvancedOptions({ + this.advancedOptions = this.insertView('#toggle-query', new QueryOptions.AdvancedOptions({ updateViewFn: this.updateAllDocs, previewFn: this.previewView, hasReduce: false, @@ -308,7 +312,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, this.toolsView = this.setView(".js-search", new Views.JumpToDoc({ database: this.database, collection: this.database.allDocs - })); + })); }, afterRender: function () { From a6d6ff847c98c5d1815da0e02c7d6d68c2b20da2 Mon Sep 17 00:00:00 2001 From: Jenn Schiffer Date: Sun, 24 Aug 2014 16:33:43 +0200 Subject: [PATCH 04/31] style query options now it is inside header --- .../assets/less/advancedOptions.less | 4 +- .../documents/assets/less/documents.less | 2 +- .../documents/templates/header_alldocs.html | 41 +++--- app/addons/documents/views.js | 127 +++++++++++------- 4 files changed, 104 insertions(+), 70 deletions(-) diff --git a/app/addons/documents/assets/less/advancedOptions.less b/app/addons/documents/assets/less/advancedOptions.less index b68dfd53c..a9325595e 100644 --- a/app/addons/documents/assets/less/advancedOptions.less +++ b/app/addons/documents/assets/less/advancedOptions.less @@ -12,7 +12,7 @@ /*ALL DOCS TABLE*/ /*for advanced options css*/ -#query { +#query-options { .border-radius(5px); width: 490px; position: absolute; @@ -78,7 +78,7 @@ } } } -#query:before { +#query-options:before { content: ''; position: absolute; top: -25px; diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less index b52e54fc0..647e84756 100644 --- a/app/addons/documents/assets/less/documents.less +++ b/app/addons/documents/assets/less/documents.less @@ -42,7 +42,7 @@ button.beautify { } -#query div.controls-group.well{ +#query-options div.controls-group.well{ height: 180px; margin-right: 17px; } diff --git a/app/addons/documents/templates/header_alldocs.html b/app/addons/documents/templates/header_alldocs.html index 72d49ade1..6312a47c5 100644 --- a/app/addons/documents/templates/header_alldocs.html +++ b/app/addons/documents/templates/header_alldocs.html @@ -13,31 +13,32 @@ -->
- - - - - - - + + + +

<%-database%>

+ +
- - + +
- + - + - - - Query Options - - -
- - - \ No newline at end of file + + \ No newline at end of file diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js index 50c9c77d9..0d8993cba 100644 --- a/app/addons/documents/views.js +++ b/app/addons/documents/views.js @@ -1,3 +1,4 @@ + // 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 @@ -45,11 +46,18 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, 'select .selectAllDocs': 'selectAllDocs' }, initialize: function(options){ - + //adding the database to the object + this.database = options.database; }, selectAllDocs: function(){ //trigger event to select all in other view }, + serialize: function() { + //basically if you want something in a template, You can define it here + return { + database: this.database.get('id') + }; + }, beforeRender:function(){ //insert DB search dropdown @@ -62,7 +70,75 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, })); //insert queryoptions + //that file is included in require() above and the argument is QueryOptions + // and it wants all these params: + /* Sooooo I searched this file for where Advanced options was originally inserted to see what the hell + is happening. and it's in AllDocsLayout. So I'm going to move some of those functions over here + + These are required: + this.database = options.database; + this.updateViewFn = options.updateViewFn; + this.previewFn = options.previewFn; + + these are booleans: + this.showStale = _.isUndefined(options.showStale) ? false : options.showStale; + this.hasReduce = _.isUndefined(options.hasReduce) ? true : options.hasReduce; + + these you only need for view indexes, not all docs because they are about + specific views and design docs (ddocs, also views live inside a ddoc): + this.viewName = options.viewName; + this.ddocName = options.ddocName; + */ + this.setView("#query-options", new QueryOptions.AdvancedOptions({ + updateViewFn: this.updateAllDocs, + previewFn: this.previewView, + database: this.database, + hasReduce: false, + showPreview: false, + })); + + }, + //moved from alldocs layout + updateAllDocs: function (event, paramInfo) { + event.preventDefault(); + + var errorParams = paramInfo.errorParams, + params = paramInfo.params; + + if (_.any(errorParams)) { + _.map(errorParams, function(param) { + + // TODO: Where to add this error? + // bootstrap wants the error on a control-group div, but we're not using that + //$('form.view-query-update input[name='+param+'], form.view-query-update select[name='+param+']').addClass('error'); + return FauxtonAPI.addNotification({ + msg: "JSON Parse Error on field: "+param.name, + type: "error", + selector: ".advanced-options .errors-container", + clear: true + }); + }); + FauxtonAPI.addNotification({ + msg: "Make sure that strings are properly quoted and any other values are valid JSON structures", + type: "warning", + selector: ".advanced-options .errors-container", + clear: true + }); + + return false; + } + + var fragment = window.location.hash.replace(/\?.*$/, ''); + + if (!_.isEmpty(params)) { + fragment = fragment + '?' + $.param(params); + } + FauxtonAPI.navigate(fragment, {trigger: false}); + FauxtonAPI.triggerRouteEvent('updateAllDocs', {allDocs: true}); + }, + previewView: function (event) { + event.preventDefault(); } }); @@ -297,7 +373,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, toggleQuery: function (event) { $('#dashboard-content').scrollTop(0); - this.$('#query').toggle(); + this.$('#query-options').toggle(); }, beforeRender: function () { @@ -312,56 +388,13 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, this.toolsView = this.setView(".js-search", new Views.JumpToDoc({ database: this.database, collection: this.database.allDocs - })); + })); }, afterRender: function () { if (this.params) { this.advancedOptions.updateFromParams(this.params); } - }, - - updateAllDocs: function (event, paramInfo) { - event.preventDefault(); - - var errorParams = paramInfo.errorParams, - params = paramInfo.params; - - if (_.any(errorParams)) { - _.map(errorParams, function(param) { - - // TODO: Where to add this error? - // bootstrap wants the error on a control-group div, but we're not using that - //$('form.view-query-update input[name='+param+'], form.view-query-update select[name='+param+']').addClass('error'); - return FauxtonAPI.addNotification({ - msg: "JSON Parse Error on field: "+param.name, - type: "error", - selector: ".advanced-options .errors-container", - clear: true - }); - }); - FauxtonAPI.addNotification({ - msg: "Make sure that strings are properly quoted and any other values are valid JSON structures", - type: "warning", - selector: ".advanced-options .errors-container", - clear: true - }); - - return false; - } - - var fragment = window.location.hash.replace(/\?.*$/, ''); - - if (!_.isEmpty(params)) { - fragment = fragment + '?' + $.param(params); - } - - FauxtonAPI.navigate(fragment, {trigger: false}); - FauxtonAPI.triggerRouteEvent('updateAllDocs', {allDocs: true}); - }, - - previewView: function (event) { - event.preventDefault(); } }); @@ -434,7 +467,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, rev = this.collection.get(docId).get('_rev'), data = {_id: docId, _rev: rev, _deleted: true}; - if (!$row.hasClass('js-to-delete')) { + if (!$row.hasClass('js-to-delete')) { this.bulkDeleteDocsCollection.add(data); } else { this.bulkDeleteDocsCollection.remove(this.bulkDeleteDocsCollection.get(docId)); From 5b674dd242c76ceedd7d2554386261c085cb3aff Mon Sep 17 00:00:00 2001 From: Jenn Schiffer Date: Sun, 24 Aug 2014 16:33:43 +0200 Subject: [PATCH 05/31] move old alldocs stuff to advancedopts --- app/addons/documents/routes.js | 2 +- app/addons/documents/views-advancedopts.js | 12 +++++-- app/addons/documents/views.js | 39 ---------------------- 3 files changed, 11 insertions(+), 42 deletions(-) diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js index f06a307a5..8a4352863 100644 --- a/app/addons/documents/routes.js +++ b/app/addons/documents/routes.js @@ -247,7 +247,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, this.data.database.allDocs.paging.pageSize = this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10)); - this.viewEditor = this.setView("#dashboard-upper-content", new Documents.Views.AllDocsLayout({ + this.viewEditor = this.setView("#dashboard-upper-content", new Documents.Views.AllDocsHeader({ database: this.data.database, collection: this.data.database.allDocs, params: urlParams, diff --git a/app/addons/documents/views-advancedopts.js b/app/addons/documents/views-advancedopts.js index b2e1af53e..6cb515eba 100644 --- a/app/addons/documents/views-advancedopts.js +++ b/app/addons/documents/views-advancedopts.js @@ -39,10 +39,11 @@ function(app, FauxtonAPI, resizeColumns ) { "change form.js-view-query-update input": "updateFilters", "change form.js-view-query-update select": "updateFilters", "submit form.js-view-query-update": "updateView", - "click .toggle-btns > label": "toggleQuery" + "click .toggle-btns > label": "toggleQueryKeys", + "click #toggle-query": "toggleQuery" }, - toggleQuery: function(e){ + toggleQueryKeys: function(e){ e.preventDefault(); if (this.$(e.currentTarget).hasClass("active")){ @@ -61,6 +62,12 @@ function(app, FauxtonAPI, resizeColumns ) { } }, + toggleQuery: function (event) { + console.log('togglequery'); + $('#dashboard-content').scrollTop(0); + this.$('#query-options').toggle(); + }, + showKeys: function(){ this.$("#js-showKeys, .js-disabled-message").show(); this.$('[name="startkey"],[name="endkey"],[name="inclusive_end"]').attr("disabled","true"); @@ -82,6 +89,7 @@ function(app, FauxtonAPI, resizeColumns ) { view.update(this.database, this.ddocName, this.viewName); }, this); } + }, renderOnUpdatehasReduce: function (hasReduce) { diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js index 0d8993cba..dedb89736 100644 --- a/app/addons/documents/views.js +++ b/app/addons/documents/views.js @@ -359,45 +359,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, }); - Views.AllDocsLayout = FauxtonAPI.View.extend({ - template: "addons/documents/templates/all_docs_layout", - - initialize: function (options) { - this.database = options.database; - this.params = options.params; - }, - - events: { - 'click #toggle-query': "toggleQuery" - }, - - toggleQuery: function (event) { - $('#dashboard-content').scrollTop(0); - this.$('#query-options').toggle(); - }, - - beforeRender: function () { - this.advancedOptions = this.insertView('#toggle-query', new QueryOptions.AdvancedOptions({ - updateViewFn: this.updateAllDocs, - previewFn: this.previewView, - hasReduce: false, - showPreview: false, - database: this.database, - })); - - this.toolsView = this.setView(".js-search", new Views.JumpToDoc({ - database: this.database, - collection: this.database.allDocs - })); - }, - - afterRender: function () { - if (this.params) { - this.advancedOptions.updateFromParams(this.params); - } - } - - }); // TODO: Rename to reflect that this is a list of rows or documents Views.AllDocsList = FauxtonAPI.View.extend({ From 80e4524c772fee0dde2f9c16fc09b89816b1ba00 Mon Sep 17 00:00:00 2001 From: Jenn Schiffer Date: Sun, 24 Aug 2014 16:33:43 +0200 Subject: [PATCH 06/31] refactor query options button to header --- .../assets/less/advancedOptions.less | 12 +- .../documents/assets/less/documents.less | 2 +- app/addons/documents/routes.js | 7 - .../documents/templates/advanced_options.html | 265 +++++++++--------- .../documents/templates/header_alldocs.html | 4 - app/addons/documents/views-advancedopts.js | 2 +- 6 files changed, 143 insertions(+), 149 deletions(-) diff --git a/app/addons/documents/assets/less/advancedOptions.less b/app/addons/documents/assets/less/advancedOptions.less index a9325595e..ce8b5463c 100644 --- a/app/addons/documents/assets/less/advancedOptions.less +++ b/app/addons/documents/assets/less/advancedOptions.less @@ -12,18 +12,16 @@ /*ALL DOCS TABLE*/ /*for advanced options css*/ -#query-options { +#query-options-tray { .border-radius(5px); width: 490px; position: absolute; z-index: 11; background-color: #333; padding: 0; - .well { - background: none; - border: none; + color: #fff; - padding: 0; + margin: 0; .query-group { padding: 20px; @@ -38,7 +36,7 @@ .controls-group:last-child { margin: 0; } - } + form { margin-bottom: 0; .dropdown.inline { @@ -78,7 +76,7 @@ } } } -#query-options:before { +#query-options-tray:before { content: ''; position: absolute; top: -25px; diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less index 647e84756..271c9dae6 100644 --- a/app/addons/documents/assets/less/documents.less +++ b/app/addons/documents/assets/less/documents.less @@ -42,7 +42,7 @@ button.beautify { } -#query-options div.controls-group.well{ +#query-options-tray div.controls-group.well{ height: 180px; margin-right: 17px; } diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js index 8a4352863..bd52fb808 100644 --- a/app/addons/documents/routes.js +++ b/app/addons/documents/routes.js @@ -247,13 +247,6 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, this.data.database.allDocs.paging.pageSize = this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10)); - this.viewEditor = this.setView("#dashboard-upper-content", new Documents.Views.AllDocsHeader({ - database: this.data.database, - collection: this.data.database.allDocs, - params: urlParams, - docParams: docParams - })); - this.documentsView = this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({ database: this.data.database, collection: this.data.database.allDocs, diff --git a/app/addons/documents/templates/advanced_options.html b/app/addons/documents/templates/advanced_options.html index c6268fbb9..8e8bb3680 100644 --- a/app/addons/documents/templates/advanced_options.html +++ b/app/addons/documents/templates/advanced_options.html @@ -10,160 +10,167 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ---> -
- -
- - API Options - - - - - -
- -
-
- -
- - -
+--> + + + Query Options + + +
+ + +
+ + API Options + + + + + +
+ +
+
- <% if (hasReduce) { %>
- - + +
- - - <% } %> + <% if (hasReduce) { %> +
+ + +
+ + + <% } %> + +
-
-
- -
- - Keys - - -
- -
-
-
-
- - -
-
+
+ + Keys + + +
+ +
-
-
-
- - + +
+
+
+ + +
-
- - -
- - +
+
+
+
+ + +
+
+ + +
+ + +
+
-
-
-
- - - Additional Parameters - +
+ + + Additional Parameters + + +
+ <% if (showStale) { %> +
+ + +
+ <% } %> +
+ + +
-
- <% if (showStale) { %> -
- - -
- <% } %> -
- - +
+
-
-
-
+
+
+ + +
-
-
- - +
+ +
+
-
- +
+ + Query the DB + +
+
-
- -
- - Query the DB - -
- -
-
- + +
diff --git a/app/addons/documents/templates/header_alldocs.html b/app/addons/documents/templates/header_alldocs.html index 6312a47c5..dfdfc03db 100644 --- a/app/addons/documents/templates/header_alldocs.html +++ b/app/addons/documents/templates/header_alldocs.html @@ -30,10 +30,6 @@

<%-database%>

- - - Query Options -
diff --git a/app/addons/documents/views-advancedopts.js b/app/addons/documents/views-advancedopts.js index 6cb515eba..f8a1be62d 100644 --- a/app/addons/documents/views-advancedopts.js +++ b/app/addons/documents/views-advancedopts.js @@ -65,7 +65,7 @@ function(app, FauxtonAPI, resizeColumns ) { toggleQuery: function (event) { console.log('togglequery'); $('#dashboard-content').scrollTop(0); - this.$('#query-options').toggle(); + this.$('#query-options-tray').toggle(); }, showKeys: function(){ From 14bb0f28953dc831a6e303d01379ba97cb3ca188 Mon Sep 17 00:00:00 2001 From: Jenn Schiffer Date: Sun, 24 Aug 2014 16:33:43 +0200 Subject: [PATCH 07/31] style search box cancel button functionality, styling styling header and query options, add cancel button style keys well, get new checkbox inputs working have options properly toggle, style button --- .../assets/less/advancedOptions.less | 85 ++++++++++++++----- .../documents/assets/less/documents.less | 6 +- app/addons/documents/assets/less/headers.less | 25 ++++++ .../documents/templates/advanced_options.html | 45 +++++----- .../documents/templates/all_docs_layout.html | 13 --- app/addons/documents/views-advancedopts.js | 16 +++- app/helpers.js | 1 + 7 files changed, 130 insertions(+), 61 deletions(-) create mode 100644 app/addons/documents/assets/less/headers.less delete mode 100644 app/addons/documents/templates/all_docs_layout.html diff --git a/app/addons/documents/assets/less/advancedOptions.less b/app/addons/documents/assets/less/advancedOptions.less index ce8b5463c..83b1655d1 100644 --- a/app/addons/documents/assets/less/advancedOptions.less +++ b/app/addons/documents/assets/less/advancedOptions.less @@ -12,31 +12,38 @@ /*ALL DOCS TABLE*/ /*for advanced options css*/ +.advanced-options.well { + display: inline-block; + background: none; + border: none; + box-shadow: none; +} #query-options-tray { + display: none; .border-radius(5px); width: 490px; position: absolute; z-index: 11; background-color: #333; + color: #fff; padding: 0; - - color: #fff; - + margin: 0; + .add-on { + padding-bottom: 10px; + } + .query-group { + padding: 20px; + border-bottom: 1px solid #555; + } + .query-group:last-child { + border-bottom: none; + } + .controls-group { margin: 0; - .query-group { - padding: 20px; - border-bottom: 1px solid #555; - } - .query-group:last-child { - border-bottom: none; - } - .controls-group { - margin: 0; - } - .controls-group:last-child { - margin: 0; - } - + } + .controls-group:last-child { + margin: 0; + } form { margin-bottom: 0; .dropdown.inline { @@ -49,10 +56,25 @@ padding: 8px; border: none; color: #eee; + font-size: 13px; + } + .input-small { + width: 70px; + margin-left: 5px; + } + .checkbox { + padding: 0; + margin: 0; } .btn-success { .border-radius(5px); } + .btn-cancel, .btn-cancel:active { + background: none; + border: none; + box-shadow: none; + color: @red; + } } .toggle-btns { .btn { @@ -75,6 +97,32 @@ margin-left: 1px; } } + label { + margin-right: 0; + font-size: 13px; + } + div.controls-group.well{ + height: 180px; + background: none; + border: none; + padding: 10px 0; + } + .row-fluid.fieldsets { + margin-bottom: 10px; + .inline { + width: 32%; + } + .inline:nth-child(3) { + text-align: right; + width: 34%; + } + } + .row-fluid.fieldsets:last-child { + margin-bottom: 0; + } + #skipRows { + margin-left: 5px; + } } #query-options-tray:before { content: ''; @@ -86,7 +134,4 @@ border-width: 15px; width: 0; height: 0; -} -#button-options { - margin-top: 20px; } \ No newline at end of file diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less index 271c9dae6..26e3ffa1c 100644 --- a/app/addons/documents/assets/less/documents.less +++ b/app/addons/documents/assets/less/documents.less @@ -17,6 +17,7 @@ @import "advancedOptions.less"; @import "changes.less"; @import "sidenav.less"; +@import "headers.less"; tr.all-docs-item { border: none; @@ -42,11 +43,6 @@ button.beautify { } -#query-options-tray div.controls-group.well{ - height: 180px; - margin-right: 17px; -} - /** used in all_docs_list.html **/ .view { table td div { diff --git a/app/addons/documents/assets/less/headers.less b/app/addons/documents/assets/less/headers.less new file mode 100644 index 000000000..3df552cab --- /dev/null +++ b/app/addons/documents/assets/less/headers.less @@ -0,0 +1,25 @@ +.header-left { + width: 300px; + float: left; +} +.header-right { + .searchbox-container { + position: relative; + right: inherit; + height: 38px; + input[type="text"] { + .border-radius(5px); + font-size: 13px; + padding: 8px 35px 8px 10px; + } + .btn-primary { + background: none repeat scroll 0% 0% transparent; + border: none; + position: absolute; + right: 0; + padding-top: 7px; + z-index: 2; + color: #999; + } + } +} \ No newline at end of file diff --git a/app/addons/documents/templates/advanced_options.html b/app/addons/documents/templates/advanced_options.html index 8e8bb3680..0502301fe 100644 --- a/app/addons/documents/templates/advanced_options.html +++ b/app/addons/documents/templates/advanced_options.html @@ -20,21 +20,21 @@
- +
API Options - +
-
+
- - + +
<% if (hasReduce) { %> @@ -66,9 +66,9 @@
- +
Keys - +