Repository: couchdb-fauxton Updated Branches: refs/heads/master 799cfd33b -> 5aeb8c43e
Breadcrumbs React port: remove jump-to-db PR: #739 PR-URL: https://github.com/apache/couchdb-fauxton/pull/739 Reviewed-By: garren smith <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/5aeb8c43 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/5aeb8c43 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/5aeb8c43 Branch: refs/heads/master Commit: 5aeb8c43eed5195e7abce2cb9509120df601e517 Parents: 799cfd3 Author: Robert Kowalski <[email protected]> Authored: Wed Jun 29 10:28:47 2016 +0200 Committer: Robert Kowalski <[email protected]> Committed: Fri Aug 12 16:56:15 2016 +0200 ---------------------------------------------------------------------- app/addons/documents/routes-documents.js | 7 -- app/addons/documents/shared-routes.js | 26 +--- .../documents/tests/nightwatch/lookaheadTray.js | 28 ----- .../switchDatabaseViaLookaheadTray.js | 42 ------- app/addons/fauxton/components.js | 126 ------------------- app/addons/fauxton/templates/header_left.html | 3 - .../fauxton/templates/lookahead_tray.html | 16 --- app/addons/permissions/routes.js | 16 --- assets/less/trays.less | 99 --------------- 9 files changed, 1 insertion(+), 362 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5aeb8c43/app/addons/documents/routes-documents.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/routes-documents.js b/app/addons/documents/routes-documents.js index 7858177..469f99f 100644 --- a/app/addons/documents/routes-documents.js +++ b/app/addons/documents/routes-documents.js @@ -53,7 +53,6 @@ var DocumentsRouteObject = BaseRoute.extend({ initialize: function (route, masterLayout, options) { this.initViews(options[0]); - this.listenToLookaheadTray(); }, establish: function () { @@ -191,12 +190,6 @@ var DocumentsRouteObject = BaseRoute.extend({ this.apiUrl = function () { return [FauxtonAPI.urls('changes', 'apiurl', this.database.id, ''), this.database.documentation()]; }; - }, - - cleanup: function () { - // we're no longer interested in listening to the lookahead tray event on this route object - this.stopListening(FauxtonAPI.Events, 'lookaheadTray:update', this.onSelectDatabase); - FauxtonAPI.RouteObject.prototype.cleanup.apply(this); } }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5aeb8c43/app/addons/documents/shared-routes.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/shared-routes.js b/app/addons/documents/shared-routes.js index 5248c46..e96b8af 100644 --- a/app/addons/documents/shared-routes.js +++ b/app/addons/documents/shared-routes.js @@ -44,24 +44,6 @@ var BaseRoute = FauxtonAPI.RouteObject.extend({ }); }, - onSelectDatabase: function (dbName) { - this.cleanup(); - this.initViews(dbName); - - var url = FauxtonAPI.urls('allDocs', 'app', app.utils.safeURLName(dbName), ''); - FauxtonAPI.navigate(url, { - trigger: true - }); - - // we need to start listening again because cleanup() removed the listener, but in this case - // initialize() doesn't fire to re-set up the listener - this.listenToLookaheadTray(); - }, - - listenToLookaheadTray: function () { - this.listenTo(FauxtonAPI.Events, 'lookaheadTray:update', this.onSelectDatabase); - }, - getAllDatabases: function () { return new Databases.List(); //getAllDatabases() can be overwritten instead of hard coded into initViews }, @@ -89,13 +71,7 @@ var BaseRoute = FauxtonAPI.RouteObject.extend({ addLeftHeader: function () { this.leftheader = this.setView('#breadcrumbs', new Components.LeftHeader({ databaseName: this.database.safeID(), - crumbs: this.getCrumbs(this.database), - lookaheadTrayOptions: { - databaseCollection: this.allDatabases, - toggleEventName: 'lookaheadTray:toggle', - onUpdateEventName: 'lookaheadTray:update', - placeholder: 'Enter database name' - } + crumbs: this.getCrumbs(this.database) })); }, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5aeb8c43/app/addons/documents/tests/nightwatch/lookaheadTray.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/tests/nightwatch/lookaheadTray.js b/app/addons/documents/tests/nightwatch/lookaheadTray.js deleted file mode 100644 index 08da65b..0000000 --- a/app/addons/documents/tests/nightwatch/lookaheadTray.js +++ /dev/null @@ -1,28 +0,0 @@ -// Licensed under the Apache License, Version 2.0 (the "License"); you may not -// use this file except in compliance with the License. You may obtain a copy of -// the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT -// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the -// License for the specific language governing permissions and limitations under -// the License. - - - -module.exports = { - 'The tray opens': function (client) { - var waitTime = client.globals.maxWaitTime, - newDatabaseName = client.globals.testDatabaseName, - baseUrl = client.globals.test_settings.launch_url; - - client - .loginToGUI() - .url(baseUrl + '/#/database/' + newDatabaseName + '/_all_docs') - .clickWhenVisible('.lookahead-tray-link') - .waitForElementVisible('.lookahead-tray', waitTime, false) - .end(); - } -}; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5aeb8c43/app/addons/documents/tests/nightwatch/switchDatabaseViaLookaheadTray.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/tests/nightwatch/switchDatabaseViaLookaheadTray.js b/app/addons/documents/tests/nightwatch/switchDatabaseViaLookaheadTray.js deleted file mode 100644 index 9f8358e..0000000 --- a/app/addons/documents/tests/nightwatch/switchDatabaseViaLookaheadTray.js +++ /dev/null @@ -1,42 +0,0 @@ -// Licensed under the Apache License, Version 2.0 (the "License"); you may not -// use this file except in compliance with the License. You may obtain a copy of -// the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT -// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the -// License for the specific language governing permissions and limitations under -// the License. - - - -module.exports = { - 'Confirm switching databases via lookahead tray': function (client) { - var waitTime = client.globals.maxWaitTime, - newDatabaseName = client.globals.testDatabaseName, - secondDatabaseName = newDatabaseName + "2", - baseUrl = client.globals.test_settings.launch_url; - - client - .loginToGUI() - - // create the second database - .createDatabase(secondDatabaseName) - - // now select the first database, and select the second db from the lookahead tray - .url(baseUrl + '/#/database/' + newDatabaseName + '/_all_docs') - .clickWhenVisible('#breadcrumbs .lookahead-tray-link') - .setValue('#breadcrumbs .search-autocomplete', [secondDatabaseName, client.Keys.ENTER]) - .waitForElementVisible('#breadcrumbs .lookahead-tray-link', waitTime, false) - .getText('body', function (result) { - - // check the breadcrumb title is now the second database name. That indicates a successful redirect - client.assert.containsText('#breadcrumbs .lookahead-tray-link', secondDatabaseName); - }) - - .deleteDatabase(secondDatabaseName) - .end(); - } -}; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5aeb8c43/app/addons/fauxton/components.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js index 124b679..540f508 100644 --- a/app/addons/fauxton/components.js +++ b/app/addons/fauxton/components.js @@ -25,14 +25,10 @@ Components.LeftHeader = FauxtonAPI.View.extend({ template: "addons/fauxton/templates/header_left", initialize: function (options) { - this.lookaheadTrayOptions = options.lookaheadTrayOptions || null; this.crumbs = options.crumbs || []; this.dbName = options.databaseName; - // listen for breadcrumb clicks - this.listenTo(FauxtonAPI.Events, 'breadcrumb:click', this.toggleTray); - this.listenTo(FauxtonAPI.Events, 'lookaheadTray:close', this.unselectLastBreadcrumb); }, updateCrumbs: function (crumbs) { @@ -50,19 +46,9 @@ Components.LeftHeader = FauxtonAPI.View.extend({ this.breadcrumbs.unselectLastBreadcrumb(); }, - toggleTray: function () { - if (this.lookaheadTray !== null) { - this.lookaheadTray.toggleTray(); - } - }, - beforeRender: function () { this.setUpCrumbs(); this.setUpDropDownMenu(); - - if (this.lookaheadTray !== null) { - this.setUpLookaheadTray(); - } }, setUpCrumbs: function () { @@ -84,22 +70,6 @@ Components.LeftHeader = FauxtonAPI.View.extend({ this.dropdown = this.insertView("#header-dropdown-menu", new Components.MenuDropDownReact({ links: dropdownMenuLinks, })); - }, - - setUpLookaheadTray: function () { - var options = this.lookaheadTrayOptions, - dbNames = options.databaseCollection.getDatabaseNames(), - currentDBName = this.crumbs[1].name; - - // remove the current database name from the list - dbNames = _.without(dbNames, currentDBName); - - this.lookaheadTray = this.insertView("#header-lookahead", new Components.LookaheadTray({ - data: dbNames, - toggleEventName: options.toggleEventName, - onUpdateEventName: options.onUpdateEventName, - placeholder: options.placeholder - })); } }); @@ -121,10 +91,6 @@ Components.Breadcrumbs = FauxtonAPI.View.extend({ tagName: "ul", template: "addons/fauxton/templates/breadcrumbs", - events: { - "click .js-lastelement": "toggleLastElement" - }, - serialize: function () { var crumbs = _.clone(this.crumbs); @@ -141,14 +107,6 @@ Components.Breadcrumbs = FauxtonAPI.View.extend({ }; }, - toggleLastElement: function (event) { - if (this.toggleDisabled) { - return; - } - this.$(event.currentTarget).toggleClass('js-enabled'); - FauxtonAPI.Events.trigger('breadcrumb:click'); - }, - unselectLastBreadcrumb: function () { if (this.toggleDisabled) { return; @@ -383,90 +341,6 @@ Components.DbSearchTypeahead = Components.Typeahead.extend({ }); -Components.LookaheadTray = FauxtonAPI.View.extend({ - className: "lookahead-tray tray", - template: "addons/fauxton/templates/lookahead_tray", - placeholder: "Enter to search", - - events: { - 'click #js-close-tray': 'closeTray', - 'keyup': 'onKeyup' - }, - - serialize: function () { - return { - placeholder: this.placeholder - }; - }, - - initialize: function (opts) { - this.data = opts.data; - this.toggleEventName = opts.toggleEventName; - this.onUpdateEventName = opts.onUpdateEventName; - - var trayIsVisible = _.bind(this.trayIsVisible, this); - var closeTray = _.bind(this.closeTray, this); - $("body").on("click.lookaheadTray", function (e) { - if (!trayIsVisible()) { return; } - if ($(e.target).closest(".lookahead-tray").length === 0 && - $(e.target).closest('.lookahead-tray-link').length === 0) { - closeTray(); - } - }); - }, - - afterRender: function () { - var that = this; - this.dbSearchTypeahead = new Components.Typeahead({ - el: 'input.search-autocomplete', - source: that.data, - onUpdateEventName: that.onUpdateEventName - }); - this.dbSearchTypeahead.render(); - }, - - clearValue: function () { - this.$('.search-autocomplete').val(''); - }, - - cleanup: function () { - $("body").off("click.lookaheadTray"); - }, - - trayIsVisible: function () { - return this.$el.is(":visible"); - }, - - toggleTray: function () { - if (this.trayIsVisible()) { - this.closeTray(); - } else { - this.openTray(); - } - }, - - openTray: function () { - var speed = FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED; - this.$el.velocity('transition.slideDownIn', speed, function () { - this.$el.find('input').focus(); - }.bind(this)); - }, - - closeTray: function () { - var $tray = this.$el; - $tray.velocity("reverse", FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED, function () { - $tray.hide(); - }); - FauxtonAPI.Events.trigger('lookaheadTray:close'); - }, - - onKeyup: function (e) { - if (e.which === 27) { - this.closeTray(); - } - } -}); - //need to make this into a backbone view... var routeObjectSpinner; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5aeb8c43/app/addons/fauxton/templates/header_left.html ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/templates/header_left.html b/app/addons/fauxton/templates/header_left.html index e7d48d1..2e76c23 100644 --- a/app/addons/fauxton/templates/header_left.html +++ b/app/addons/fauxton/templates/header_left.html @@ -16,6 +16,3 @@ the License. <!-- Menu gear--> <div id="header-dropdown-menu" class="add-dropdown"></div> - -<!-- lookahead tray --> -<div id="header-lookahead"></div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5aeb8c43/app/addons/fauxton/templates/lookahead_tray.html ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/templates/lookahead_tray.html b/app/addons/fauxton/templates/lookahead_tray.html deleted file mode 100644 index d7f3cc4..0000000 --- a/app/addons/fauxton/templates/lookahead_tray.html +++ /dev/null @@ -1,16 +0,0 @@ -<%/* -Licensed under the Apache License, Version 2.0 (the "License"); you may not -use this file except in compliance with the License. You may obtain a copy of -the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, WITHOUT -WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the -License for the specific language governing permissions and limitations under -the License. -*/%> -<input type="text" class="search-autocomplete" placeholder="<%-placeholder%>" /> -<button class="btn btn-primary search-btn" type="submit"><i class="icon icon-search"></i></button> -<div id="js-close-tray" class="fonticon-cancel"></div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5aeb8c43/app/addons/permissions/routes.js ---------------------------------------------------------------------- diff --git a/app/addons/permissions/routes.js b/app/addons/permissions/routes.js index 367525a..0c930bf 100644 --- a/app/addons/permissions/routes.js +++ b/app/addons/permissions/routes.js @@ -29,7 +29,6 @@ var PermissionsRouteObject = BaseRoute.extend({ docOptions.include_docs = true; this.initViews(options[0]); - this.listenToLookaheadTray(); }, initViews: function (databaseName) { @@ -55,20 +54,6 @@ var PermissionsRouteObject = BaseRoute.extend({ ]; }, - listenToLookaheadTray: function () { - this.listenTo(FauxtonAPI.Events, 'lookaheadTray:update', this.onSelectDatabase); - }, - - onSelectDatabase: function (dbName) { - this.cleanup(); - this.initViews(dbName); - - FauxtonAPI.navigate('/database/' + app.utils.safeURLName(dbName) + '/permissions', { - trigger: true - }); - this.listenToLookaheadTray(); - }, - permissions: function () { Actions.fetchPermissions(this.database, this.security); this.setComponent('#dashboard-content', Permissions.PermissionsController); @@ -86,7 +71,6 @@ var PermissionsRouteObject = BaseRoute.extend({ this.removeView('#breadcrumbs'); } this.removeComponent('#sidebar-content'); - this.stopListening(FauxtonAPI.Events, 'lookaheadTray:update', this.onSelectDatabase); } }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5aeb8c43/assets/less/trays.less ---------------------------------------------------------------------- diff --git a/assets/less/trays.less b/assets/less/trays.less index f519cdf..efe19b5 100644 --- a/assets/less/trays.less +++ b/assets/less/trays.less @@ -92,105 +92,6 @@ height: 0; } -.lookahead-tray-link { - cursor: pointer; - position: relative; /* ensures :after elements are also hidden when overflowed */ -} - -.lookahead-tray-link:after { - content: @icon-play; - font-family: @fauxtonFont; - font-style: normal; - font-weight: normal; - font-variant: normal; - line-height: 1; - text-decoration: inherit; - text-rendering: optimizeLegibility; - text-transform: none; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-smoothing: antialiased; - font-size: 8px; - color: #777; - margin: 8px; - display: inline-block; - position: absolute; - .rotate(90deg); -} - -.lookahead-tray-link.js-enabled:after { - color: @orange; -} - -#breadcrumbs .breadcrumb li.lookahead-tray-link.js-enabled { - color: @linkColor; -} - -.lookahead-tray.tray { - width: 298px; - padding: 0px; - right: 16px; - border: none; - - &:before { - left: 132px; - } - input { - margin: 10px; - padding-right: 30px; - font-size: 16px; - width: 244px; - } - - .search-btn { - background: transparent; - margin-left: -38px; - margin-right: 20px; - border: 0px; - padding: 0px; - color: #cccccc; - } - - .dropdown-menu { - position: relative; - border: 0px; - background-color: #333333; - - /* unfortunate, but the typeahead plugin adds these values inline */ - left: 0px !important; - top: 0px !important; - - width: 298px; - text-overflow: ellipsis; - overflow: hidden; - - & > li { - overflow: hidden; - text-overflow: ellipsis; - - & > a { - text-overflow: ellipsis; - padding: 10px 20px; - font-size: 16px; - overflow: hidden; - } - - strong { - color: @white; - } - } - } - - .fonticon-cancel { - display: inline-block; - width: 20px; - height: 20px; - font-size: 12px; - color: #cccccc; - cursor: pointer; - } -} - #header-lookahead .dropdown-menu li.active { width: 100%; }
