fix api bar help icon style api bar button on fixed header refactor css for header trays use Events to close trays Fix for the header on view save
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/f5fd76db Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/f5fd76db Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/f5fd76db Branch: refs/heads/secondary-indexes Commit: f5fd76db072d5f6b6bba7a2249cd93f17a2dc033 Parents: 18839b8 Author: Jenn Schiffer <[email protected]> Authored: Sun Aug 24 16:33:43 2014 +0200 Committer: deathbearbrown <[email protected]> Committed: Mon Aug 25 09:37:36 2014 -0400 ---------------------------------------------------------------------- .../documents/assets/less/advancedOptions.less | 35 ++------- .../documents/templates/advanced_options.html | 2 +- app/addons/documents/views-advancedopts.js | 15 ++-- app/addons/fauxton/components.js | 13 +++- app/addons/fauxton/templates/api_bar.html | 4 +- app/addons/indexes/routes-core.js | 20 +++++- app/addons/indexes/routes-viewindexes.js | 13 +--- assets/less/fauxton.less | 37 ++-------- assets/less/headers.less | 76 ++++++++++++++------ 9 files changed, 112 insertions(+), 103 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f5fd76db/app/addons/documents/assets/less/advancedOptions.less ---------------------------------------------------------------------- diff --git a/app/addons/documents/assets/less/advancedOptions.less b/app/addons/documents/assets/less/advancedOptions.less index 6febf3b..16ddb2b 100644 --- a/app/addons/documents/assets/less/advancedOptions.less +++ b/app/addons/documents/assets/less/advancedOptions.less @@ -13,27 +13,17 @@ /*for advanced options css*/ .advanced-options.well { - display: inline-block; - background: none; - border: none; box-shadow: none; + border: none; + background: none; +} + +#query-options-tray:before { + right: 140px; } + #query-options-tray { - display: none; - .border-radius(5px); width: 490px; - position: absolute; - right: 5px; - z-index: 11; - background-color: #333; - color: #fff; - padding: 0; - margin: 0; - .add-on { - padding: 0; - margin: 0; - line-height: 1em; - } .query-group { padding: 20px; border-bottom: 1px solid #555; @@ -126,15 +116,4 @@ #skipRows { margin-left: 5px; } -} -#query-options-tray:before { - content: ''; - position: absolute; - top: -25px; - right: 140px; - border-color: transparent transparent #333 transparent; - border-style: solid; - border-width: 15px; - width: 0; - height: 0; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f5fd76db/app/addons/documents/templates/advanced_options.html ---------------------------------------------------------------------- diff --git a/app/addons/documents/templates/advanced_options.html b/app/addons/documents/templates/advanced_options.html index 5e0e77f..95bbe5c 100644 --- a/app/addons/documents/templates/advanced_options.html +++ b/app/addons/documents/templates/advanced_options.html @@ -16,7 +16,7 @@ the License. Query Options </a> -<div id="query-options-tray"> +<div id="query-options-tray" class="tray"> <form class="js-view-query-update custom-inputs"> <div class="query-group"> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f5fd76db/app/addons/documents/views-advancedopts.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/views-advancedopts.js b/app/addons/documents/views-advancedopts.js index 0a91914..993750f 100644 --- a/app/addons/documents/views-advancedopts.js +++ b/app/addons/documents/views-advancedopts.js @@ -26,6 +26,7 @@ function(app, FauxtonAPI, resizeColumns ) { className: "advanced-options well", initialize: function (options) { + FauxtonAPI.Events.on('AdvancedOptions:closeTray', this.closeTray); this.database = options.database; this.ddocName = options.ddocName; this.viewName = options.viewName; @@ -64,18 +65,22 @@ function(app, FauxtonAPI, resizeColumns ) { toggleQuery: function(event) { $('#dashboard-content').scrollTop(0); this.$('#query-options-tray').toggle(); - $('.api-navbar').hide(); + FauxtonAPI.Events.trigger('APIbar:closeTray'); }, + closeTray: function(){ + $('#query-options-tray').hide(); + }, + resetForm: function() { - $('input, textarea').each(function(){ + this.$('input, textarea').each(function(){ $(this).val(''); }); - $('input:checkbox').attr('checked', false); - $("select").each(function(){ + this.$('input:checkbox').attr('checked', false); + this.$("select").each(function(){ this.selectedIndex = 0; }); - $('#query-options-tray').hide(); + this.$('#query-options-tray').hide(); }, showKeys: function(){ http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f5fd76db/app/addons/fauxton/components.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js index 3784b8d..e8bd559 100644 --- a/app/addons/fauxton/components.js +++ b/app/addons/fauxton/components.js @@ -97,6 +97,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) { }, initialize: function(options){ + FauxtonAPI.Events.on('APIbar:closeTray', this.closeTray); var _options = options || {}; this.endpoint = _options.endpoint || '_all_docs'; this.documentation = _options.documentation || 'docs'; @@ -109,8 +110,8 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) { }else{ $currentTarget.removeClass("fonticon-minus").addClass("fonticon-plus"); } - $('#query-options-tray').hide(); - $('.api-navbar').toggle(); + FauxtonAPI.Events.trigger('AdvancedOptions:closeTray'); + this.$('.api-navbar').toggle(); }, serialize: function() { @@ -123,15 +124,22 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) { hide: function(){ this.$el.addClass('hide'); }, + show: function(){ this.$el.removeClass('hide'); }, + + closeTray: function(){ + $('.api-navbar').hide(); + }, + update: function(endpoint) { this.show(); this.endpoint = endpoint[0]; this.documentation = endpoint[1]; this.render(); }, + afterRender: function(){ ZeroClipboard.config({ moviePath: "/assets/js/plugins/zeroclipboard/ZeroClipboard.swf" }); var client = new ZeroClipboard(this.$(".copy-url")); @@ -147,7 +155,6 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) { }); }); } - }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f5fd76db/app/addons/fauxton/templates/api_bar.html ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/templates/api_bar.html b/app/addons/fauxton/templates/api_bar.html index 255087d..9db0d7b 100644 --- a/app/addons/fauxton/templates/api_bar.html +++ b/app/addons/fauxton/templates/api_bar.html @@ -17,12 +17,12 @@ the License. API URL </a> <div class="clearfix"></div> -<div class="api-navbar" style="display: none"> +<div class="api-navbar tray"> <div class="input-prepend input-append"> <span class="add-on"> API URL <a class="help-link" data-bypass="true" href="<%-getDocUrl(documentation)%>" target="_blank"> - <i class="fonticon-link"></i> + <i class="icon-question-sign"></i> </a> </span> <input id="api-url-text" type="text" class="input-xxlarge" value="<%- endpoint %>"> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f5fd76db/app/addons/indexes/routes-core.js ---------------------------------------------------------------------- diff --git a/app/addons/indexes/routes-core.js b/app/addons/indexes/routes-core.js index 65f33bc..402ae99 100644 --- a/app/addons/indexes/routes-core.js +++ b/app/addons/indexes/routes-core.js @@ -24,6 +24,11 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) { layout: "two_pane", initialize: function (route, masterLayout, options) { + _.bindAll(this); + var params = this.createParams(), + urlParams = params.urlParams, + docParams = params.docParams; + this.databaseName = options[0]; this.data = { @@ -42,6 +47,19 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) { limit: 500 } }); + + + /* -------------------------------------------------- + Set up right header + ----------------------------------------------------*/ + + this.rightHeader = this.setView("#api-navbar", new Views.RightHeader({ + database: this.data.database, + model: this.data.database, + endpoint: this.data.designDocs.urlRef("apiurl", urlParams), + documentation: "docs" + })); + }, events: { @@ -162,8 +180,6 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) { this.documentsView.setParams(docParams, urlParams); this.documentsView.forceRender(); - - this.rightHeader.updateApiUrl([collection.urlRef("apiurl", urlParams), "docs"]); }, /* -------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f5fd76db/app/addons/indexes/routes-viewindexes.js ---------------------------------------------------------------------- diff --git a/app/addons/indexes/routes-viewindexes.js b/app/addons/indexes/routes-viewindexes.js index f3bb65b..546d72c 100644 --- a/app/addons/indexes/routes-viewindexes.js +++ b/app/addons/indexes/routes-viewindexes.js @@ -37,7 +37,7 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Co /* -------------------------------------------------- remove right header ----------------------------------------------------*/ - this.rightheader && this.rightheader.remove(); + this.rightHeader && this.rightHeader.remove(); /* -------------------------------------------------- Insert Preview Screen View @@ -116,17 +116,6 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Co /* -------------------------------------------------- - Set up right header - ----------------------------------------------------*/ - - this.rightheader = this.setView("#api-navbar", new Views.RightHeader({ - database: this.data.database, - model: this.data.database, - endpoint: this.data.indexedDocs.urlRef("apiurl", urlParams), - documentation: "docs" - })); - - /* -------------------------------------------------- Insert View Editor ----------------------------------------------------*/ this.viewEditor = this.setView("#left-content", new Views.ViewEditor({ http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f5fd76db/assets/less/fauxton.less ---------------------------------------------------------------------- diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less index e8a9fdb..74c698a 100644 --- a/assets/less/fauxton.less +++ b/assets/less/fauxton.less @@ -249,37 +249,25 @@ div.spinner { } .api-url-btn { - margin-top: 5px; - margin-bottom: 5px; .icon { font-size: 11px; } + background: none; + border: none; + padding: 0; + margin: 0; +} +.api-url-btn:hover { + background: none; } - .api-navbar { - .border-radius(5px); - position: absolute; - right: 5px; - background-color: #333; padding: 5px 20px; - z-index: 2; .input-append.input-prepend { margin-bottom: 0px; .copying { background-color: #999; transition: background-color 5ms linear; } - .add-on { - background: none; - padding: 0px; - margin: 10px 0; - border: none; - display: block; - text-align: left; - color: #fff; - text-shadow: none; - height: auto; - } .input-xxlarge { .border-radius(5px 0 0 5px); border: none; @@ -315,17 +303,6 @@ div.spinner { } } } -.api-navbar:before { - content: ''; - position: absolute; - top: -25px; - right: 30px; - border-color: transparent transparent #333 transparent; - border-style: solid; - border-width: 15px; - width: 0; - height: 0; -} .js-filter-form { .help-block { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f5fd76db/assets/less/headers.less ---------------------------------------------------------------------- diff --git a/assets/less/headers.less b/assets/less/headers.less index 149e90b..a110714 100644 --- a/assets/less/headers.less +++ b/assets/less/headers.less @@ -21,7 +21,6 @@ .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1)); } - .fixed-header{ height: 60px; background-color: @breadcrumbBG; @@ -119,6 +118,10 @@ } } +.fixed-header { + +} + .header-left{ position: relative; #header-dropdown-menu { @@ -143,11 +146,58 @@ } } +.tray { + display: none; + .border-radius(5px); + position: absolute; + right: 5px; + top: 55px; + z-index: 11; + background-color: #333; + color: #fff; + margin: 0; + .add-on { + font-size: 16px; + background: none; + padding: 0px; + margin: 10px 0; + border: none; + display: block; + text-align: left; + color: #fff; + text-shadow: none; + height: auto; + line-height: 1em; + } +} +.tray:before { + content: ''; + position: absolute; + top: -25px; + border-color: transparent transparent #333 transparent; + border-style: solid; + border-width: 15px; + width: 0; + height: 0; +} +.fixed-header, .header-right { - .add-on { - font-size: 16px; + > .btn { + padding: 0; + margin: 0; + } + > .button, + > .button a, + .api-url-btn > button, + .btn-primary { + color: #666; + font-size: 13px; + line-height: 3em; } +} + +.header-right { .well { padding: 0; margin: 0; @@ -171,17 +221,6 @@ color: #999; } } - > .btn { - padding: 0; - margin: 0; - } - > .button, - > .button a, - .api-url-btn > button { - color: #666; - font-size: 13px; - line-height: 3em; - } > div { float: right; height: 60px; @@ -193,11 +232,8 @@ > div:last-child { border-left: none; } - .api-url-btn { - background: none; - border: none; - padding: 0; - margin: 0; - } +} +.api-navbar:before { + right: 25px; }
