You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@couchdb.apache.org by garrensmith <gi...@git.apache.org> on 2014/07/21 09:10:18 UTC
[GitHub] couchdb-fauxton pull request: Update sidebar
GitHub user garrensmith opened a pull request:
https://github.com/apache/couchdb-fauxton/pull/8
Update sidebar
This is the new redesigned sidebar UI for documents. The idea is that design doc functions will be first class citizens.
Screenshot:
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/garrensmith/couchdb-fauxton Update-Sidebar
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/couchdb-fauxton/pull/8.patch
To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:
This closes #8
----
commit 70c2db3a2777b9821f4d228838337c4af17ba976
Author: suelockwood <de...@apache.org>
Date: 2014-04-18T15:25:43Z
Sidebar UI - design doc oriented
commit 7ba62243188af24f0e041524196a1349b3c8aa91
Author: Garren Smith <ga...@gmail.com>
Date: 2014-05-19T16:12:44Z
Fauxton: Refactor sidebar nav for new design
commit 773fb7675c74f6ca536a5c6a0b8733868c016c0f
Author: sean barclay <fu...@hotmail.com>
Date: 2014-05-29T04:08:21Z
Fauxton: Clean up css for new sidebar
commit b96092a68ea14fd6d1c794671a5c0cecd38dc56a
Author: Garren Smith <ga...@gmail.com>
Date: 2014-06-03T14:44:18Z
Add accordian to sections
commit 2e0aa52d9ae013618a241a297b88c9980a0d0e2b
Author: sean barclay <fu...@hotmail.com>
Date: 2014-06-05T05:14:46Z
Fauxton: Improve css and add fonts
commit dded24624c9fadf42230d4f45dc814a7bdeb947a
Author: Garren Smith <ga...@gmail.com>
Date: 2014-06-11T12:30:03Z
Correct icons
commit 595a2d34a20a620324e4c2368500098471766304
Author: sean barclay <fu...@hotmail.com>
Date: 2014-06-11T12:49:39Z
Fauxton: Improve css and icons for new sidenav
commit dc5810b3a3068b77b50533e4d5a1f921094d1810
Author: Garren Smith <ga...@gmail.com>
Date: 2014-06-18T15:14:21Z
update icons location
commit 66b278ba52fe88a6df696170e6b5c3645a34c3e0
Author: sean barclay <fu...@hotmail.com>
Date: 2014-06-23T17:19:07Z
Fauxton: add missing mixin
commit d6421cbba45ad739600a292878da48852a8cc68f
Author: Garren Smith <ga...@gmail.com>
Date: 2014-06-30T08:21:41Z
Fixes from review
commit a41bdb015c13d832dc4db6c1a2f87de5f246133b
Author: Garren Smith <ga...@gmail.com>
Date: 2014-06-30T09:32:37Z
Copy fonts across on deploy
----
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by sebastianrothbucher <gi...@git.apache.org>.
Github user sebastianrothbucher commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/8#issuecomment-49663272
it looks (and feels) awesome!
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by kxepal <gi...@git.apache.org>.
Github user kxepal commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/8#issuecomment-49669504
Issues from https://github.com/apache/couchdb/pull/248 are still actual. I'll recopy them here:
1. Scrollbar overlap by tabs frame issue
!(http://i.imgur.com/ZzWriRl.png)
2. Accordion fade colour feels too dark in comparison with other red. This isn't wrong colour hex code, but is about how we see the same colours in different (bright/dark) context - we see them different even if they don't => we feel broken design while it technically isn't.
3. New sidebar doesn't updates API URL for Design Doc Metadata item. Btw, this actually view index info.
Few ideas to fix/improve UX a lot:
1. May be move New doc and New index items from submenu on the sidebar? It doesn't always figure where they are while both are more common operations rather then Permissions and Compaction.
2.May be rename accordion item view to Views? And don't show it if there are no any views for specified ddoc.
3. May be instead of having Design Doc Metadata and collapsed Views accordion items have single menu item Views and on click by it show View Index Info and list of all available views on main working frame (where view results get rendered)? Otherwise design doesn't scale for upcoming show/list and other functions.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by deathbearbrown <gi...@git.apache.org>.
Github user deathbearbrown commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/8#discussion_r15191595
--- Diff: app/addons/documents/templates/attachments_footer.html ---
@@ -0,0 +1,20 @@
+<!--
+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.
+-->
+
+<ul>
--- End diff --
I think this can be removed??
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/8#issuecomment-49754614
Great thanks everyone for the feedback. I've merged it in.
@kxepal could you open a ticket with your UX improvements etc. We cannot address them now but in time we will.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by deathbearbrown <gi...@git.apache.org>.
Github user deathbearbrown commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/8#discussion_r15191548
--- Diff: app/addons/documents/sidebarviews.js ---
@@ -0,0 +1,243 @@
+// 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",
+
+ "api",
+ "addons/fauxton/components",
+
+ "addons/documents/resources",
+ "addons/databases/resources"
+],
+
+function(app, FauxtonAPI, Components, Documents, Databases) {
+ var Views = {};
+
+ Views.Sidebar = FauxtonAPI.View.extend({
+ template: "addons/documents/templates/sidebar",
+ className: "sidenav",
+ tagName: "nav",
+ events: {
+ "click button#delete-database": "showDeleteDatabaseModal"
+ },
+
+ initialize: function(options) {
+ this.database = options.database;
+ if (options.ddocInfo) {
+ this.ddocID = options.ddocInfo.id;
+ this.currView = options.ddocInfo.currView;
+ }
+ },
+ showDeleteDatabaseModal: function(event){
+ this.deleteDBModal.showModal();
+ },
+
+ serialize: function() {
+ var docLinks = FauxtonAPI.getExtensions('docLinks'),
+ newLinks = FauxtonAPI.getExtensions('sidebar:newLinks'),
+ addLinks = FauxtonAPI.getExtensions('sidebar:links'),
+ extensionList = FauxtonAPI.getExtensions('sidebar:list');
+ return {
+ changes_url: '#' + this.database.url('changes'),
+ permissions_url: '#' + this.database.url('app') + '/permissions',
+ db_url: '#' + this.database.url('index'),
+ database: this.collection.database,
+ database_url: '#' + this.database.url('app'),
+ docLinks: docLinks,
+ addLinks: addLinks,
+ newLinks: newLinks,
+ extensionList: extensionList > 0
+ };
+ },
+
+
+ beforeRender: function(manage) {
+ this.deleteDBModal = this.setView(
+ '#delete-db-modal',
+ new Views.DeleteDBModal({database: this.database})
+ );
+
+ var database = this.collection.database,
+ newurl = "#" + database.url('app') + '/new';
+
+ var newLinks = [{
+ title: 'Add new',
+ links: [{
+ title: 'New Doc',
+ url: newurl,
+ icon: 'fonticon-plus-circled'
+ },{
+ title: 'New Design Doc',
+ url: newurl,
+ icon: 'fonticon-plus-circled'
+ }]
+ }];
+
+ this.insertView("#new-all-docs-button", new Components.MenuDropDown({
+ links: newLinks,
+ }));
+
+ this.insertView("#new-design-docs-button", new Components.MenuDropDown({
+ links: newLinks,
+ }));
+
+ this.collection.each(function(design) {
+ if (design.has('doc')){
+ this.insertView(new Views.DdocSidenav({
+ model: design,
+ collection: this.collection
+ }));
+ }
+ },this);
+ },
+
+ afterRender: function () {
+ if (this.selectedTab) {
+ this.setSelectedTab(this.selectedTab);
+ }
+ },
+
+ setSelectedTab: function (selectedTab) {
+ this.selectedTab = selectedTab;
+ var $selectedTab = this.$('#' + selectedTab);
+
+ this.$('li').removeClass('active');
+ $selectedTab.parent().addClass('active');
+
+ if ($selectedTab.parents(".accordion-body").length !== 0){
+ $selectedTab
+ .parents(".accordion-body")
+ .addClass("in")
+ .parents(".nav-header")
+ .find(">.js-collapse-toggle").addClass("down");
+
+ this.$('.js-toggle-' + $selectedTab.data('ddoctype')).addClass("down");
+ }
+ }
+ });
+
+ Views.DdocSidenav = FauxtonAPI.View.extend({
+ tagName: "ul",
+ className: "nav nav-list",
+ template: "addons/documents/templates/design_doc_menu",
+ events: {
+ "click .js-collapse-toggle": "toggleArrow"
+ },
+
+ toggleArrow: function(e){
+ this.$(e.currentTarget).toggleClass("down");
+ },
+ buildIndexList: function(collection, selector, ddocType){
+ var design = this.model.id.replace(/^_design\//,"");
+
+ this.insertView(".accordion-body", new Views.IndexItem({
+ selector: selector,
+ ddoc: design,
+ collection: collection[selector],
+ ddocType: ddocType,
+ database: this.model.collection.database.id
+ }));
+ },
+
+ serialize: function(){
+ var ddocName = this.model.id.replace(/^_design\//,"");
+ return{
+ database: this.collection.database,
+ designDoc: ddocName,
+ ddoc_clean: app.utils.removeSpecialCharacters(ddocName),
+ ddoc_encoded: app.utils.safeURLName(ddocName),
+ database_encoded: app.utils.safeURLName(this.model.collection.database.id),
+ };
+ },
+ beforeRender: function(manage) {
+ var ddocDocs = this.model.get("doc"),
--- End diff --
can we split this up into more methods and call them in here?
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith closed the pull request at:
https://github.com/apache/couchdb-fauxton/pull/8
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/8#issuecomment-49764632
Yes. I fixed the api and metadata issues as well as the issues that @deathbearbrown mentioned.
On 22 Jul 2014, at 5:54 PM, Alexander Shorin <no...@github.com> wrote:
> @garrensmith have you fix other issues (not UX suggestions)?
>
> —
> Reply to this email directly or view it on GitHub.
>
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by kxepal <gi...@git.apache.org>.
Github user kxepal commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/8#issuecomment-49764895
cool, thanks!
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by deathbearbrown <gi...@git.apache.org>.
Github user deathbearbrown commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/8#discussion_r15191681
--- Diff: app/addons/fauxton/components.js ---
@@ -533,6 +533,31 @@ function(app, FauxtonAPI, ace, spin) {
});
+
+ //Menu Drop down component. It takes links in this format and renders the Dropdown:
+ // [{
+ // title: 'Section Title (optional)',
+ // links: [{
+ // icon: 'icon-class (optional)',
+ // url: 'clickalble-url',
+ // title: 'name of link'
+ // }]
+ // }]
+ Components.MenuDropDown = FauxtonAPI.View.extend({
--- End diff --
:heart:
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Update sidebar
Posted by kxepal <gi...@git.apache.org>.
Github user kxepal commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/8#issuecomment-49758654
@garrensmith have you fix other issues (not UX suggestions)?
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---