You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2016/05/26 07:22:29 UTC
fauxton commit: updated refs/heads/master to 4f2401a
Repository: couchdb-fauxton
Updated Branches:
refs/heads/master 88b470d44 -> 4f2401a04
Convert Jump to doc to React
Convert the jump to docs component in the all_docs page to React.
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/4f2401a0
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/4f2401a0
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/4f2401a0
Branch: refs/heads/master
Commit: 4f2401a04af7b18e56a706d711e66088c79a53cf
Parents: 88b470d
Author: Garren Smith <ga...@gmail.com>
Authored: Wed May 18 13:57:37 2016 +0200
Committer: Garren Smith <ga...@gmail.com>
Committed: Thu May 26 09:22:05 2016 +0200
----------------------------------------------------------------------
app/addons/documents/assets/less/documents.less | 1 +
.../documents/assets/less/index-results.less | 38 ----------
app/addons/documents/assets/less/jumptodoc.less | 22 ++++++
.../index-results.components.react.jsx | 3 +-
app/addons/documents/jumptodoc.react.jsx | 57 +++++++++++++++
.../rev-browser.components.react.jsx | 1 -
app/addons/documents/templates/jumpdoc.html | 20 ------
.../tests/nightwatch/deletesDocuments.js | 2 +-
.../tests/nightwatch/selectDocViaTypeahead.js | 14 ++--
app/addons/documents/views.js | 34 +--------
assets/less/fauxton.less | 73 +++++++++++---------
11 files changed, 129 insertions(+), 136 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/assets/less/documents.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less
index 99d616c..8ce8aa6 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -21,6 +21,7 @@
@import "doc-editor.less";
@import "header.less";
@import "revision-browser";
+@import "jumptodoc";
.two-sides-toggle-button {
font-size: 15px;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/assets/less/index-results.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/index-results.less b/app/addons/documents/assets/less/index-results.less
index 39c3bde..ac420c2 100644
--- a/app/addons/documents/assets/less/index-results.less
+++ b/app/addons/documents/assets/less/index-results.less
@@ -156,44 +156,6 @@
overflow: visible;
min-height: 300px;
}
-
- .Select div.Select-control {
- border-radius: initial;
- border: none;
- }
-
- .Select .Select-menu-outer {
- border-radius: inherit;
- border: none;
- }
-
- .Select-option {
- color: #fff;
- background-color: #333333;
- }
-
- .Select-option {
- color: #fff;
- background-color: #333333;
- }
-
- .Select-option:hover {
- background-color: #E33F3B;
- }
-
- .Select-option:last-child {
- border-radius: initial;
- }
-
- .Select .is-focused:not(.is-open) > .Select-control {
- box-shadow: transparent;
- }
-
- .Select .Select-menu {
- min-height: 291px;
- background-color: #333333;
- }
-
}
.document-result-screen {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/assets/less/jumptodoc.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/jumptodoc.less b/app/addons/documents/assets/less/jumptodoc.less
new file mode 100644
index 0000000..6302ec7
--- /dev/null
+++ b/app/addons/documents/assets/less/jumptodoc.less
@@ -0,0 +1,22 @@
+// 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.
+
+.searchbox-wrapper {
+ overflow: visible;
+ height: 64px;
+ width: 235px;
+}
+
+#header-search {
+ overflow: visible;
+ position: absolute;
+}
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/index-results/index-results.components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/index-results/index-results.components.react.jsx b/app/addons/documents/index-results/index-results.components.react.jsx
index 86393ac..f7d93dc 100644
--- a/app/addons/documents/index-results/index-results.components.react.jsx
+++ b/app/addons/documents/index-results/index-results.components.react.jsx
@@ -24,8 +24,7 @@ define([
'react-select',
'react-addons-css-transition-group',
- '../../../../assets/js/plugins/prettify',
- 'react-select/dist/react-select.css'
+ '../../../../assets/js/plugins/prettify'
],
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/jumptodoc.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/jumptodoc.react.jsx b/app/addons/documents/jumptodoc.react.jsx
new file mode 100644
index 0000000..3b27b59
--- /dev/null
+++ b/app/addons/documents/jumptodoc.react.jsx
@@ -0,0 +1,57 @@
+// 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.
+
+define([
+ '../../app',
+ '../../core/api',
+ 'react',
+ 'react-dom',
+ 'react-select',
+ 'lodash'
+], (app, FauxtonAPI, React, ReactDOM, ReactSelect, {debounce}) => {
+
+ const JumpToDoc = ({database, allDocs}) => {
+ const options = allDocs.map(doc => {
+ return {
+ value: doc.get('_id'),
+ label: doc.get('_id')
+ };
+ });
+ return (
+ <div id="jump-to-doc" class="input-append">
+ <ReactSelect
+ name="jump-to-doc"
+ placeholder="Document ID"
+ className="input-large jump-to-doc"
+ options={options}
+ clearable={false}
+ onChange={({value: docId}) => {
+ const url = FauxtonAPI.urls('document', 'app', app.utils.safeURLName(database.id), app.utils.safeURLName(docId) );
+ FauxtonAPI.navigate(url, {trigger: true});
+ }}
+ />
+ </div>
+ );
+ };
+
+ JumpToDoc.propTypes = {
+ database: React.PropTypes.object.isRequired,
+ allDocs: React.PropTypes.object.isRequired,
+ };
+
+ return {
+ JumpToDoc,
+ render: (el, database, allDocs) => {
+ ReactDOM.render(<JumpToDoc database={database} allDocs={allDocs} />, $(el)[0]);
+ }
+ };
+});
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/rev-browser/rev-browser.components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/rev-browser/rev-browser.components.react.jsx b/app/addons/documents/rev-browser/rev-browser.components.react.jsx
index 66e68a1..89c44eb 100644
--- a/app/addons/documents/rev-browser/rev-browser.components.react.jsx
+++ b/app/addons/documents/rev-browser/rev-browser.components.react.jsx
@@ -27,7 +27,6 @@ define([
'brace',
- 'react-select/less/default.less',
'jsondiffpatch/public/formatters-styles/html.css'
], (FauxtonAPI, app, React, ReactDOM, RevActions, RevStores, ReactComponents,
ReactBootstrap, ReactSelect, jdp, jdpformatters, ace) => {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/templates/jumpdoc.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/jumpdoc.html b/app/addons/documents/templates/jumpdoc.html
deleted file mode 100644
index e7e301b..0000000
--- a/app/addons/documents/templates/jumpdoc.html
+++ /dev/null
@@ -1,20 +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.
-*/%>
-
-<form id="jump-to-doc">
- <div class="input-append">
- <input type="text" id="jump-to-doc-id" class="input-large" autocomplete="off" placeholder="Document ID" />
- <span><button class="btn btn-primary" type="submit"><i class="icon icon-search"></i></button></span>
- </div>
-</form>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/tests/nightwatch/deletesDocuments.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/nightwatch/deletesDocuments.js b/app/addons/documents/tests/nightwatch/deletesDocuments.js
index 339e6b8..622c357 100644
--- a/app/addons/documents/tests/nightwatch/deletesDocuments.js
+++ b/app/addons/documents/tests/nightwatch/deletesDocuments.js
@@ -115,7 +115,7 @@ module.exports = {
.waitForElementPresent('#editor-container', waitTime, false)
.clickWhenVisible('#doc-editor-actions-panel button[title="Delete"]')
.clickWhenVisible('.confirmation-modal button.btn.btn-success')
- .waitForElementPresent('#jump-to-doc-id', waitTime, false)
+ .waitForElementPresent('#jump-to-doc', waitTime, false)
//check raw JSON
.url(baseUrl + '/' + newDatabaseName + '/_all_docs')
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/tests/nightwatch/selectDocViaTypeahead.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/nightwatch/selectDocViaTypeahead.js b/app/addons/documents/tests/nightwatch/selectDocViaTypeahead.js
index 54ca26f..217c9b0 100644
--- a/app/addons/documents/tests/nightwatch/selectDocViaTypeahead.js
+++ b/app/addons/documents/tests/nightwatch/selectDocViaTypeahead.js
@@ -21,21 +21,17 @@ module.exports = {
.populateDatabase(newDatabaseName, 3)
.loginToGUI()
.url(baseUrl + '/#/database/' + newDatabaseName + '/_all_docs')
- .waitForElementPresent('#jump-to-doc-id', waitTime, false)
+ .waitForElementPresent('#jump-to-doc', waitTime, false)
+ .keys(['\uE00C'])
.waitForElementPresent('.prettyprint', waitTime, false)
.waitForElementPresent('.documents-pagination', waitTime, false)
.waitForElementPresent('.breadcrumb .js-lastelement', waitTime, false)
.click('.burger')
// we need to explicitly show the doc field because it's hidden on Travis due to screen width
- .execute("$('.closeMenu .with-sidebar .searchbox-wrapper').show();")
- .setValue('#jump-to-doc-id', ['_des'])
-
- .waitForElementPresent('li[data-value="_design/testdesigndoc"]', waitTime, false)
- .waitForElementVisible('li[data-value="_design/testdesigndoc"]', waitTime, false)
- .click('#jump-to-doc .typeahead.dropdown-menu li[data-value="_design/testdesigndoc"]')
-
- .setValue('#jump-to-doc-id', [client.Keys.ENTER])
+ .execute("$('.searchbox-wrapper').show();")
+ .setValue('#jump-to-doc .Select-input input', ['_des'])
+ .keys(['\uE015', '\uE015', '\uE006'])
.waitForElementPresent('.panel-button.upload', waitTime, false)
.end();
}
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index b121bb1..6c46076 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -20,12 +20,13 @@ define([
// Views
"./queryoptions/queryoptions.react",
"./queryoptions/actions",
+ './jumptodoc.react',
//plugins
"../../../assets/js/plugins/prettify"
],
-function (app, FauxtonAPI, Components, Documents, Databases, QueryOptions, QueryActions) {
+function (app, FauxtonAPI, Components, Documents, Databases, QueryOptions, QueryActions, JumpToDoc) {
var Views = {};
@@ -51,16 +52,11 @@ function (app, FauxtonAPI, Components, Documents, Databases, QueryOptions, Query
_.bindAll(this);
this.selectVisible = false;
FauxtonAPI.Events.on('success:bulkDelete', this.selectAllMenu);
-
- // insert the Search Docs field
- this.headerSearch = this.insertView("#header-search", new Views.JumpToDoc({
- database: this.database,
- collection: this.database.allDocs
- }));
},
afterRender: function () {
QueryOptions.render('#query-options');
+ JumpToDoc.render('#header-search', this.database, this.database.allDocs);
this.toggleQueryOptionsHeader(this.isHidden);
},
@@ -102,30 +98,6 @@ function (app, FauxtonAPI, Components, Documents, Databases, QueryOptions, Query
}
});
- Views.JumpToDoc = FauxtonAPI.View.extend({
- template: "addons/documents/templates/jumpdoc",
-
- initialize: function (options) {
- this.database = options.database;
- },
-
- events: {
- "submit #jump-to-doc": "jumpToDoc"
- },
-
- jumpToDoc: function (event) {
- event.preventDefault();
- var docId = this.$('#jump-to-doc-id').val().trim();
- var url = FauxtonAPI.urls('document', 'app', app.utils.safeURLName(this.database.id), app.utils.safeURLName(docId) );
- FauxtonAPI.navigate(url, {trigger: true});
- },
-
- afterRender: function () {
- this.typeAhead = new Components.DocSearchTypeahead({el: '#jump-to-doc-id', database: this.database});
- this.typeAhead.render();
- }
- });
-
Documents.Views = Views;
return Documents;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4f2401a0/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 5ed50d9..439a1a3 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -13,6 +13,7 @@
@import "variables.less";
@import "bootstrap/bootstrap.less";
@import "bootstrap/mixins.less";
+@import "../../node_modules/react-select/less/default.less";
#grid {
.core {
@@ -458,40 +459,6 @@ body #dashboard .flex-body#breadcrumbs {
.header-left{
position: relative;
- #header-dropdown-menu {
- position: absolute;
- top: 0;
- .dropdown-toggle {
- color: #666666;
- &:before {
- margin: 6px -5px 0 6px;
- }
- }
- .fonticon-vertical-ellipsis {
- &:before {
- font-size: 20px;
- }
- }
- a {
- padding: 10px;
- text-decoration: none;
- }
-
- .dropdown {
- height: @collapsedNavWidth;
- border-left: 1px solid #ccc;
- padding: 18px 0px;
- }
- .dropdown-menu {
- left: -115px;
- top: 48px;
-
- a.icon:before {
- font-size: 14px;
- padding-right: 7px;
- }
- }
- }
}
.header-right {
@@ -527,6 +494,44 @@ body #dashboard .flex-body#breadcrumbs {
}
}
+// react-select color design
+.Select div.Select-control {
+ border-radius: initial;
+ border: none;
+}
+
+.Select .Select-menu-outer {
+ border-radius: inherit;
+ border: none;
+}
+
+.Select-option {
+ color: #fff;
+ background-color: #333333;
+}
+
+.Select .is-focused {
+ color: #fff;
+ background-color: #333333;
+}
+
+.Select-option:hover {
+ background-color: #E33F3B;
+}
+
+.Select-option:last-child {
+ border-radius: initial;
+}
+
+.Select .is-focused:not(.is-open) > .Select-control {
+ box-shadow: transparent;
+}
+
+.Select .Select-menu {
+ min-height: 291px;
+ background-color: #333333;
+}
+
//----footer--///
footer.pagination-footer {