diff options
author | Christopher Lenz <cmlenz@apache.org> | 2008-06-02 21:57:35 +0000 |
---|---|---|
committer | Christopher Lenz <cmlenz@apache.org> | 2008-06-02 21:57:35 +0000 |
commit | efd28ccaa331fc983749dd6322fb4f4303c2e3b7 (patch) | |
tree | 69329772f2f0d17e31aa78fb8f08892036bb1542 /share/www | |
parent | 303230cb554aa07ce7ada5520b4d3dc0bb89ec51 (diff) |
* The map/reduce function textareas in Futon are now horizontally resizable split-pane style
* The initial height of the view code textareas is adjusted to the number of lines in the map/reduce functions.
git-svn-id: https://svn.apache.org/repos/asf/incubator/couchdb/trunk@662587 13f79535-47bb-0310-9956-ffa450edef68
Diffstat (limited to 'share/www')
-rw-r--r-- | share/www/browse/database.html | 33 | ||||
-rw-r--r-- | share/www/script/browse.js | 12 | ||||
-rw-r--r-- | share/www/script/jquery.resizer.js | 38 | ||||
-rw-r--r-- | share/www/style/layout.css | 35 |
4 files changed, 77 insertions, 41 deletions
diff --git a/share/www/browse/database.html b/share/www/browse/database.html index 120c47c6..3405dbb4 100644 --- a/share/www/browse/database.html +++ b/share/www/browse/database.html @@ -37,7 +37,7 @@ specific language governing permissions and limitations under the License. $(document).ready(function() { $("h1 strong").text(page.db.name); $("#viewcode span").click(function() { - $("#viewcode").toggleClass("expanded"); + $("#viewcode").toggleClass("collapsed"); }); $("#viewcode button.run").click(function() { page.updateDocumentListing(); @@ -51,9 +51,15 @@ specific language governing permissions and limitations under the License. $("#viewcode button.saveas").click(function() { page.saveViewAs(); }); - $("#viewcode textarea").resizable({ + $("#viewcode textarea").makeResizable({ always: true, - grippie: $("#viewcode .bottom") + grippie: $("#viewcode .bottom"), + vertical: true + }); + $("#viewcode td.map").makeResizable({ + always: true, + grippie: $("#viewcode td.splitter"), + horizontal: true }); // Restore preferences/state from cookies @@ -108,21 +114,24 @@ specific language governing permissions and limitations under the License. <li><button class="delete">Delete Database</button></li> </ul> - <div id="viewcode" style="display: none"> + <div id="viewcode" class="collapsed" style="display: none"> <div class="top"> <a id="designdoc-link"></a> <span id="view-toggle">View Code</span> </div> - <div class="code map"> - <label for="viewcode_map">Map Function:</label> - <textarea id="viewcode_map" class="map" rows="5" cols="79" spellcheck="false" wrap="off">function(doc) { + <table summary="View functions"><tr> + <td class="code map"> + <label for="viewcode_map">Map Function:</label> + <textarea id="viewcode_map" class="map" rows="5" cols="20" spellcheck="false" wrap="off">function(doc) { emit(null, doc); }</textarea> - </div> - <div class="code reduce"> - <label for="viewcode_reduce">Reduce Function (optional):</label> - <textarea id="viewcode_reduce" class="reduce" rows="5" cols="79" spellcheck="false" wrap="off"></textarea> - </div> + </td> + <td class="splitter"></td> + <td class="code reduce"> + <label for="viewcode_reduce">Reduce Function (optional):</label> + <textarea id="viewcode_reduce" class="reduce" rows="5" cols="20" spellcheck="false" wrap="off"></textarea> + </td> + </tr></table> <div class="bottom"> <button class="save" type="button" disabled>Save</button> <button class="saveas" type="button">Save As…</button> diff --git a/share/www/script/browse.js b/share/www/script/browse.js index d7e3fcee..7c6440dd 100644 --- a/share/www/script/browse.js +++ b/share/www/script/browse.js @@ -214,10 +214,14 @@ function CouchDatabasePage() { } }, success: function(resp) { - page.storedViewCode = resp.views[localViewName]; - $("#viewcode_map").val(page.storedViewCode.map); - $("#viewcode_reduce").val(page.storedViewCode.reduce || ""); + var viewCode = resp.views[localViewName]; + $("#viewcode_map").val(viewCode.map); + $("#viewcode_reduce").val(viewCode.reduce || ""); + var lines = Math.max(viewCode.map.split("\n").length, + (viewCode.reduce ? viewCode.reduce.split("\n").length : 1)); + $("#viewcode textarea").attr("rows", Math.min(15, Math.max(3, lines))); $("#viewcode button.revert, #viewcode button.save").attr("disabled", "disabled"); + page.storedViewCode = viewCode; if (callback) callback(); } }); @@ -744,7 +748,7 @@ function CouchDocumentPage() { tools.appendTo(td); input.val(prettyPrintJSON(value)).appendTo(td); input.each(function() { this.focus(); this.select(); }); - if (needsTextarea) input.resizable(); + if (needsTextarea) input.makeResizable({vertical: true}); } function _initKey(doc, row, fieldName) { diff --git a/share/www/script/jquery.resizer.js b/share/www/script/jquery.resizer.js index 081c7177..f020d3e2 100644 --- a/share/www/script/jquery.resizer.js +++ b/share/www/script/jquery.resizer.js @@ -12,10 +12,12 @@ (function($) { - $.fn.resizable = function(options) { + $.fn.makeResizable = function(options) { options = options || {}; options.always = options.always || false; options.grippie = options.grippie || null; + options.minWidth = options.minWidth || 100; + options.maxWidth = options.maxWidth || null; options.minHeight = options.minHeight || 32; options.maxHeight = options.maxHeight || null; @@ -28,19 +30,33 @@ grippie.addClass("grippie"); var elem = $(this); grippie.mousedown(function(e) { - var pos = e.screenY; - var height = elem.height(); + var pos = {x: e.screenX, y: e.screenY}; + var dimensions = {width: elem.width(), height: elem.height()}; $(document) .mousemove(function(e) { - var offset = e.screenY - pos; - if (offset) { - var newHeight = height + offset; - if (newHeight >= options.minHeight && - (!options.maxHeight || newHeight <= options.maxHeight)) { - elem.height(newHeight); - height = newHeight; + if (options.horizontal) { + var offset = e.screenX - pos.x; + if (offset) { + var newWidth = dimensions.width + offset; + if (newWidth >= options.minWidth && + (!options.maxWidth || newWidth <= options.maxWidth)) { + elem.width(newWidth); + dimensions.width = newWidth; + } + pos.x = e.screenX; + } + } + if (options.vertical) { + var offset = e.screenY - pos.y; + if (offset) { + var newHeight = dimensions.height + offset; + if (newHeight >= options.minHeight && + (!options.maxHeight || newHeight <= options.maxHeight)) { + elem.height(newHeight); + dimensions.height = newHeight; + } + pos.y = e.screenY; } - pos = e.screenY; } document.onselectstart = function() { return false }; // for IE return false; diff --git a/share/www/style/layout.css b/share/www/style/layout.css index 0dd93a19..6f84aaae 100644 --- a/share/www/style/layout.css +++ b/share/www/style/layout.css @@ -249,13 +249,13 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight; /* View function editing */ #viewcode { background: #fff; border: 1px solid; - border-color: #999 #ddd #ddd #999; margin: 0 0 1em; padding: 0 .5em; + border-color: #999 #ddd #ddd #999; margin: 0 0 1em; overflow: hidden; } #viewcode .top, #viewcode .bottom { background-color: #e9e9e9; border: 1px solid; border-color: #ddd #ddd #e9e9e9 #ddd; color: #333; - margin: 0 -.5em; padding: 0 .5em 2px; + padding: 0 .5em 2px; } -#viewcode .top { color: #aaa; font-size: 95%; } +#viewcode .top { border-bottom: 1px solid #ddd; color: #aaa; font-size: 95%; } #viewcode .top span { background: url(../image/twisty.gif) 0 3px no-repeat; border: none; color: #666; cursor: pointer; display: block; font-size: 90%; margin: 0; padding: 2px 0 0 15px; @@ -264,15 +264,22 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight; padding: 2px 2px 0 0; } #viewcode .top a:link, #viewcode .top a:visited { color: #999; } -#viewcode .code, #viewcode .bottom { display: none; } -#viewcode .code { float: left; padding: .2em 0; width: 49%; } -#viewcode .code label { font-size: 90%; color: #999; } +#viewcode table { border-collapse: separate; border-spacing: 0; + margin: 0; table-layout: fixed; width: 100%; max-width: 100%; +} +#viewcode table td.splitter { background: #e9e9e9; cursor: col-resize; + width: 4px; +} +#viewcode table td.map { border-right: 1px solid #ccc; } +#viewcode table td.reduce { border-left: 1px solid #ccc; } +#viewcode .code label { font-size: 90%; color: #999; padding: 0 .5em; + white-space: nowrap; +} #viewcode .code textarea { border: none; border-top: 1px solid #ccc; - color: #333; margin: 0 0 .4em; min-height: 50px; max-width: 98%; - padding: .2em 0; resize: none; + color: #333; margin: 0; min-height: 50px; padding: .4em 0 0; resize: none; + width: 100%; } -#viewcode .code textarea:focus { background: #ffffe9; } -#viewcode div.map { border-right: 3px double #ccc; margin-right: .5em; } +#viewcode .code textarea:focus { background: #e9e9ff; } #viewcode .bottom { border-bottom: none; clear: left; padding: 1px 3px; } #viewcode .bottom button { font-size: 90%; margin: 0 1em 0 0; padding-left: 2em; padding-right: 2em; @@ -284,10 +291,10 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight; float: right; margin: 0 0 0 1em; } #viewcode .bottom button.save { font-weight: bold; } -#viewcode .grippie { background-position: 49% 50%; } -#viewcode.expanded .top { border-bottom: 1px solid #ddd; } -#viewcode.expanded .top span { background-position: 0 -96px; } -#viewcode.expanded .code, #viewcode.expanded .bottom { display: block; } +#viewcode .grippie { background-position: 50% 50%; } +#viewcode.collapsed .top { border-bottom: none; } +#viewcode.collapsed .top span { background-position: 0 -96px; } +#viewcode.collapsed table, #viewcode.collapsed .bottom { display: none; } /* Database table */ |