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
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/14bb0f28 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/14bb0f28 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/14bb0f28 Branch: refs/heads/secondary-indexes Commit: 14bb0f28953dc831a6e303d01379ba97cb3ca188 Parents: 80e4524 Author: Jenn Schiffer <[email protected]> Authored: Sun Aug 24 16:33:43 2014 +0200 Committer: deathbearbrown <[email protected]> Committed: Mon Aug 25 09:35:31 2014 -0400 ---------------------------------------------------------------------- .../documents/assets/less/advancedOptions.less | 85 +++++++++++++++----- app/addons/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(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/14bb0f28/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 ce8b546..83b1655 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 http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/14bb0f28/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 271c9da..26e3ffa 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 { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/14bb0f28/app/addons/documents/assets/less/headers.less ---------------------------------------------------------------------- diff --git a/app/addons/documents/assets/less/headers.less b/app/addons/documents/assets/less/headers.less new file mode 100644 index 0000000..3df552c --- /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 http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/14bb0f28/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 8e8bb36..0502301 100644 --- a/app/addons/documents/templates/advanced_options.html +++ b/app/addons/documents/templates/advanced_options.html @@ -20,21 +20,21 @@ the License. <form class="js-view-query-update custom-inputs"> <div class="query-group"> - <span class="add-on"> + <div class="add-on"> API Options <a class="help-link" href="<%-getDocUrl(documentation)%>" target="_blank"> <i class="icon-question-sign"></i> </a> - </span> + </div> <div class="errors-container"></div> <div class="controls-group"> - <div class="row-fluid"> + <div class="row-fluid fieldsets"> <div class="checkbox inline"> - <input id="select2" name="include_docs" type="checkbox" value="true"> - <label for="include_docs">Include Docs</label> + <input id="check1" name="include_docs" type="checkbox" value="true"> + <label for="check1">Include Docs</label> </div> <% if (hasReduce) { %> @@ -66,9 +66,9 @@ the License. </div> <div class="query-group"> - <span class="add-on"> + <div class="add-on"> Keys - </span> + </div> <!-- tabs for choosing Keys or Start & end --> <div class="btn-group toggle-btns row-fluid"> <label for="showKeys" class="drop-down btn"> @@ -110,25 +110,26 @@ the License. <div class="controls-group query-group"> <!-- Limit and Skip are conditional --> - <span class="add-on"> + <div class="add-on"> Additional Parameters - </span> + </div> - <div class="row-fluid"> + <div class="row-fluid fieldsets"> <% if (showStale) { %> <div class="checkbox inline"> <input id="check7" name="stale" type="checkbox" value="ok"> <label for="check7">Stale</label> </div> <% } %> - <div class="checkbox inline"> - <input id="check6" name="update_seq" type="checkbox" value="true"> - <label for="check6">Update Sequence</label> - </div> + + <div class="checkbox inline"> + <input id="check6" name="update_seq" type="checkbox" value="true"> + <label for="check6">Update Sequence</label> + </div> <div class="dropdown inline"> <label class="drop-down"> - Limit: + Limit <select name="limit" class="input-small"> <option selected="selected">None</option> <option>5</option> @@ -144,10 +145,10 @@ the License. </div> - <div class="row-fluid"> + <div class="row-fluid fieldsets"> <div class="checkbox inline"> - <input id="select2" name="descending" type="checkbox" value="true"> - <label for="descending">Descending</label> + <input id="check3" name="descending" type="checkbox" value="true"> + <label for="check3">Descending</label> </div> <div class="dropdown inline"> @@ -160,14 +161,18 @@ the License. </div> <div class="controls-group query-group"> - <span class="add-on"> + <div class="add-on"> Query the DB - </span> + </div> <div id="button-options" class="controls controls-row"> <button type="submit" class="btn btn-success"> <i class="fonticon-play icon"></i> Query </button> + + <a class="btn btn-cancel"> + Cancel + </a> </div> </div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/14bb0f28/app/addons/documents/templates/all_docs_layout.html ---------------------------------------------------------------------- diff --git a/app/addons/documents/templates/all_docs_layout.html b/app/addons/documents/templates/all_docs_layout.html deleted file mode 100644 index 90de57c..0000000 --- a/app/addons/documents/templates/all_docs_layout.html +++ /dev/null @@ -1,13 +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. ---> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/14bb0f28/app/addons/documents/views-advancedopts.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/views-advancedopts.js b/app/addons/documents/views-advancedopts.js index f8a1be6..9a00c63 100644 --- a/app/addons/documents/views-advancedopts.js +++ b/app/addons/documents/views-advancedopts.js @@ -40,7 +40,8 @@ function(app, FauxtonAPI, resizeColumns ) { "change form.js-view-query-update select": "updateFilters", "submit form.js-view-query-update": "updateView", "click .toggle-btns > label": "toggleQueryKeys", - "click #toggle-query": "toggleQuery" + "click #toggle-query": "toggleQuery", + "click .btn-cancel": "resetForm" }, toggleQueryKeys: function(e){ @@ -62,10 +63,19 @@ function(app, FauxtonAPI, resizeColumns ) { } }, - toggleQuery: function (event) { - console.log('togglequery'); + toggleQuery: function(event) { $('#dashboard-content').scrollTop(0); this.$('#query-options-tray').toggle(); + }, + + resetForm: function() { + $('input, textarea').each(function(){ + $(this).val(''); + }); + $('input:checkbox').attr('checked', false); + $("select").each(function(){ + this.selectedIndex = 0; + }); }, showKeys: function(){ http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/14bb0f28/app/helpers.js ---------------------------------------------------------------------- diff --git a/app/helpers.js b/app/helpers.js index acaaba2..2810350 100644 --- a/app/helpers.js +++ b/app/helpers.js @@ -36,6 +36,7 @@ function(utils, d3) { return path; }; + // Get the URL for documentation, wiki, wherever we store it. // update the URLs in documentation_urls.js Helpers.docs = {
