Fixed the resizeColumns code that was the worst
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/96bd61ae Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/96bd61ae Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/96bd61ae Branch: refs/heads/secondary-indexes Commit: 96bd61ae3ac749cf2214f7aee83ba155343d8cae Parents: 6daad5d Author: deathbearbrown <[email protected]> Authored: Sun Aug 24 16:33:43 2014 +0200 Committer: deathbearbrown <[email protected]> Committed: Mon Aug 25 09:37:36 2014 -0400 ---------------------------------------------------------------------- app/addons/databases/templates/list.html | 2 +- app/addons/databases/views.js | 19 +-- .../documents/templates/all_docs_list.html | 2 +- app/addons/documents/views.js | 3 +- app/addons/fauxton/resizeColumns.js | 135 ++++++------------- app/templates/layouts/two_pane.html | 8 +- 6 files changed, 47 insertions(+), 122 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/96bd61ae/app/addons/databases/templates/list.html ---------------------------------------------------------------------- diff --git a/app/addons/databases/templates/list.html b/app/addons/databases/templates/list.html index b0569e7..874801c 100644 --- a/app/addons/databases/templates/list.html +++ b/app/addons/databases/templates/list.html @@ -24,6 +24,6 @@ the License. </tbody> </table> </div> -<footer class="pagination-footer window-resizeable"> +<footer class="pagination-footer window-resizeable-full"> <div id="database-pagination"></div> </footer> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/96bd61ae/app/addons/databases/views.js ---------------------------------------------------------------------- diff --git a/app/addons/databases/views.js b/app/addons/databases/views.js index 29158c8..99a5ea2 100644 --- a/app/addons/databases/views.js +++ b/app/addons/databases/views.js @@ -128,6 +128,7 @@ function(app, Components, FauxtonAPI, Databases) { this.$el.find(".js-db-graveyard").tooltip(); } }); + Views.List = FauxtonAPI.View.extend({ dbLimit: 20, perPage: 20, @@ -187,24 +188,6 @@ function(app, Components, FauxtonAPI, Databases) { setPage: function(page) { this.page = page || 1; }, - - afterRender: function() { - var that = this, - AllDBsArray = _.map(this.collection.toJSON(), function(item, key){ - return item.name; - }); - - this.dbSearchTypeahead = new Components.Typeahead({ - el: "input.search-autocomplete", - source: AllDBsArray, - onUpdate: function (item) { - that.switchDatabase(null, item); - } - }); - this.dbSearchTypeahead.render(); - this.$el.find(".js-db-graveyard").tooltip(); - }, - selectAll: function(evt){ $("input:checkbox").attr('checked', !$(evt.target).hasClass('active')); } http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/96bd61ae/app/addons/documents/templates/all_docs_list.html ---------------------------------------------------------------------- diff --git a/app/addons/documents/templates/all_docs_list.html b/app/addons/documents/templates/all_docs_list.html index bf7e250..4a9482d 100644 --- a/app/addons/documents/templates/all_docs_list.html +++ b/app/addons/documents/templates/all_docs_list.html @@ -24,7 +24,7 @@ the License. </div> <% } %> </div> -<footer class="pagination-footer window-resizeable"> +<footer class="pagination-footer window-resizeable<%=resizeLayout%>"> <div id="item-numbers"> </div> <div id="documents-pagination"></div> </footer> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/96bd61ae/app/addons/documents/views.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js index b292663..22cdf65 100644 --- a/app/addons/documents/views.js +++ b/app/addons/documents/views.js @@ -506,8 +506,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions, serialize: function() { return { - viewList: this.viewList, - expandDocs: this.expandDocs, + resizeLayout: this.viewList?"-half":"", endOfResults: !this.pagination.canShowNextfn() }; }, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/96bd61ae/app/addons/fauxton/resizeColumns.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/resizeColumns.js b/app/addons/fauxton/resizeColumns.js index 210ae4b..f88a3aa 100644 --- a/app/addons/fauxton/resizeColumns.js +++ b/app/addons/fauxton/resizeColumns.js @@ -23,129 +23,72 @@ define([ function(FauxtonAPI) { - -// Lets think about what this needs to do, so it can be rewritten. -/* - I have 3 types of resizable layouts: - - full size which will span across the content area that is - window.innerWidth - primaryNavWidth - - 2 panel which is the above divided by 2 with the left set on the second div - - "sidebar" which is window.innerWidth - primaryNavWidth - sidebarwidth - Also everything needs to account for border width - - Step 1: - - getPrimaryNavWidth - - get window.innerWidth - - get appContainerWidth AKA full width - - getPanelWidth (app container / 2) - - sidebarwidth (app container - sidebar) -*/ - - var Resize = function(options){ this.options = options; }; Resize.prototype = { - getPrimaryNavWidth: function(){ - var primaryNavWidth = $('body').hasClass('closeMenu') ? 64 : 220; - return primaryNavWidth; - }, - - getSidebarWidth: function(){}, - - getSinglePanelWidth: function(){ - var sidebarWidth = $('#sidebar-content').length > 0 ? $('#sidebar-content').outerWidth() : 0, - borders = parseInt($('#dashboard').css('border-left-width'), 10) + - parseInt($('#dashboard-content').css('border-left-width'), 10) + - parseInt($('#dashboard-content').css('border-right-width'), 10); - - return (this.getPrimaryNavWidth() + sidebarWidth + borders); - }, - - getTwoPanelWidth: function(){ - var borders = parseInt($('#dashboard').css('border-left-width'), 10) + - parseInt($('#right-content').css('border-left-width'), 10) + - parseInt($('#left-content').css('border-right-width'), 10)+ - parseInt($('#left-content').css('border-left-width'), 10) + - parseInt($('#right-content').css('border-right-width'), 10); - return (this.getPrimaryNavWidth()+ borders); - }, initialize: function(){ - // $(window).off('resize'); - var that = this; //add throttler :) + var that = this; this.lazyLayout = _.debounce(that.onResizeHandler, 300).bind(this); FauxtonAPI.utils.addWindowResize(this.lazyLayout,"animation"); FauxtonAPI.utils.initWindowResize(); this.onResizeHandler(); }, - updateOptions:function(options){ - this.options = {}; - this.options = options; - }, + onResizeHandler: function (){ + var fullWidth = this.getFullWidth(), + halfWidth = this.getHalfWidth(), + sidebarWidth = this.getSidebarContentWidth(), + left = $('.window-resizeable-half').length > 0? halfWidth : sidebarWidth; + + $('.window-resizeable').innerWidth(sidebarWidth); + $('.window-resizeable-half').innerWidth(halfWidth); + $('.window-resizeable-full').innerWidth(fullWidth); - turnOff:function(){ - FauxtonAPI.utils.removeWindowResize("animation"); + //set left + this.setLeftPosition(left); + //if there is a callback, run that + this.options.callback && this.options.callback(); + this.trigger('resize'); }, cleanupCallback: function(){ this.callback = null; }, - singlePanelResize: function(){ - var combinedWidth = window.innerWidth - this.getSinglePanelWidth(), - smallWidthConstraint = ($('#sidebar-content').length > 0)? 470:800, - panelWidth; - - if (combinedWidth > smallWidthConstraint) { - panelWidth = combinedWidth; - } else if (combinedWidth < smallWidthConstraint){ - panelWidth = smallWidthConstraint; - } - return panelWidth; + getPrimaryNavWidth: function(){ + var primaryNavWidth = $('body').hasClass('closeMenu') ? 64 : $('#primary-navbar').outerWidth(); + //$('body').hasClass('closeMenu') ? 64 : 220; + return primaryNavWidth; }, - getPanelWidth: function(){ - var panelWidth; - if ($('#dashboard').hasClass('two-pane')){ - panelWidth = (window.innerWidth - this.getTwoPanelWidth())/2; - } else { - panelWidth = this.singlePanelResize(); - } - return panelWidth; + getWindowWidth: function(){ + return window.innerWidth; }, - setPosition: function(panelWidth){ - var primary = this.getPrimaryNavWidth(); - $('.set-left-position').css('left',panelWidth+primary+4); + getFullWidth: function(){ + return this.getWindowWidth() - this.getPrimaryNavWidth(); }, - onResizeHandler: function (){ - //if there is an override, do that instead - if (this.options.onResizeHandler){ - this.options.onResizeHandler(); - } else { - /* - Just so we all are aware: - This entire file and the html of the layouts is bonkers - crazy. I hate what horrible things happened in this file. - It will change soon with a layout overhaul. - */ - - var panelWidth = this.getPanelWidth(); - var fullWidth = this.getPanelWidth(); - this.setPosition(panelWidth); - $('.window-resizeable').innerWidth(panelWidth); - $('.window-resizeable-full').innerWidth(fullWidth); - } - //if there is a callback, run that - if(this.options.callback) { - this.options.callback(); - } - this.trigger('resize'); + getSidebarWidth: function(){ + return $('#breadcrumbs').length > 0 ? $('#breadcrumbs').outerWidth() : 0; + }, + + getSidebarContentWidth: function(){ + return this.getFullWidth() - this.getSidebarWidth() -5; + }, + + getHalfWidth: function(){ + var fullWidth = this.getFullWidth(); + return fullWidth/2; + }, + + setLeftPosition: function(panelWidth){ + var primary = this.getPrimaryNavWidth(); + $('.set-left-position').css('left',panelWidth+primary+4); } }; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/96bd61ae/app/templates/layouts/two_pane.html ---------------------------------------------------------------------- diff --git a/app/templates/layouts/two_pane.html b/app/templates/layouts/two_pane.html index 053285a..aa7e30e 100644 --- a/app/templates/layouts/two_pane.html +++ b/app/templates/layouts/two_pane.html @@ -16,12 +16,12 @@ the License. <div id="dashboard" class="container-fluid two-pane"> <div id="global-notifications" class="container errors-container window-resizeable set-left-position"></div> <header class="fixed-header row-fluid"> - <div id="breadcrumbs" class="window-resizeable"></div> - <div id="api-navbar" class="window-resizeable"></div> + <div id="breadcrumbs" class="window-resizeable-half"></div> + <div id="api-navbar" class="window-resizeable-half"></div> </header> <div class="content-area two-pane"> - <div id="left-content" class="span6 window-resizeable"></div> - <div id="right-content" class="span6 window-resizeable set-left-position"></div> + <div id="left-content" class="span6 window-resizeable-half"></div> + <div id="right-content" class="span6 window-resizeable-half set-left-position"></div> </div> </div>
