Avoid three-scrollbar situation in Acq -> Providers -> Invoices tab

You can certainly still get two scrollbars here, which is unfortunate,
but at least you shouldn't be able to get three anymore.

This solution also gives us a way to deal with the same problem if/when
it is seen in other interfaces (I feel like I've seen it occasionally).

Before now, AutoGrid created a content pane dynamically and placed
place it in the DOM before its own root DOM node.  Depending on where
that lands in a surrounding hierarchy of dijit.layout.ContentPane
objects, that can create a situation where more scrollbars are generated
to show more DOM objects in a limited space.  This generated content
pane is where AutoGrid puts its Back, Next and potentially Filter links.

Now you can specify a DOM node where you want that material to go
instead, and control the layout better.

Signed-off-by: Lebbeous Fogle-Weekley <lebbeous@esilibrary.com>

diff --git a/Open-ILS/src/templates/conify/global/acq/provider.tt2 b/Open-ILS/src/templates/conify/global/acq/provider.tt2
index 655d838..d6eed14 100644 (file)
--- a/Open-ILS/src/templates/conify/global/acq/provider.tt2
+++ b/Open-ILS/src/templates/conify/global/acq/provider.tt2
@@ -61,8 +61,10 @@
             <button dojoType='dijit.form.Button' onClick='paListGrid.deleteSelected()'>Delete Selected</button>
             </div>
         </div>
+        <div id="paPaginator"></div>
         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:100px'>
             <table  jsId="paListGrid"
+                    paginatorSlot="'pcPaginator'"
                     dojoType="openils.widget.AutoGrid"
                     fieldOrder="['id', 'address_type', 'provider', 'street1', 'street2', 'city', 'county', 'state', 'country', 'post_code']"
                     requiredFields="['street1', 'city', 'state', 'country', 'post_code']"
@@ -82,8 +84,10 @@
             <button dojoType='dijit.form.Button' onClick='pcListGrid.deleteSelected()'>Delete Selected</button>
             </div>
         </div>
+        <div id="pcPaginator"></div>
         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:200px'>
             <table  jsId="pcListGrid"
+                    paginatorSlot="'paPaginator'"
                     dojoType="openils.widget.AutoGrid"
                     fieldOrder="['id', 'name', 'provider', 'role', 'email']"
                     requiredFields="['name']"
@@ -101,8 +105,10 @@
                 <button dojoType='dijit.form.Button' onClick='pcaListGrid.deleteSelected()'>Delete Selected</button>
             </div>
         </div>
+        <div id="pcaPaginator"></div>
         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:200px'>
             <table  jsId="pcaListGrid"
+                    paginatorSlot="'pcaPaginator'"
                     dojoType="openils.widget.AutoGrid"
                     fieldOrder="['id', 'address_type', 'contact', 'street1', 'street2', 'city', 'county', 'state', 'country', 'post_code']"
                     requiredFields="['street1', 'city', 'state', 'country', 'post_code']"
@@ -122,8 +128,10 @@
                 <button dojoType='dijit.form.Button' onClick='padListGrid.deleteSelected()'>Delete Selected</button>
             </div>
         </div>
+        <div id="padPaginator"></div>
         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:200px'>
             <table  jsId="padListGrid"
+                    paginatorSlot="'padPaginator'"
                     dojoType="openils.widget.AutoGrid"
                     fieldOrder="['id', 'provider', 'code', 'description',  'provider', 'ident', 'remove',  'tag', 'subfield', 'xpath']"
                     requiredFields="['code', 'description', 'xpath']"
@@ -149,8 +157,10 @@
             <button dojoType='dijit.form.Button' onClick='phsListGrid.deleteSelected()'>Delete Selected</button>
             </div>
         </div>
+        <div id="phsPaginator"></div>
         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:400px'>
             <table  jsId="phsListGrid"
+                    paginatorSlot="'phsPaginator'"
                     dojoType="openils.widget.AutoGrid"
                     fieldOrder="['id', 'provider', 'name', 'subfield']"
                     requiredFields="['name', 'subfield']"
@@ -162,10 +172,15 @@
     </div>
 
     <div dojoType="dijit.layout.ContentPane" title="Invoices" id="tab-invoice">
-        <big class="oils-acq-basic-roomy"><strong>Invoices</strong></big>
+        <div dojoType="dijit.layout.ContentPane" layoutAlign="top" class='oils-header-panel' style="height:10%">
+            <div>Invoices</div>
+            <div></div>
+        </div>
+        <div id="invPaginator"></div>
         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="height:400px">
             <table jsId="invListGrid"
                 dojoType="openils.widget.AutoGrid"
+                paginatorSlot="'invPaginator'"
                 fieldOrder="['inv_ident', 'receiver', 'shipper']"
                 suppressFields="['id', 'provider']"
                 query="{id: '*'}"

diff --git a/Open-ILS/web/js/dojo/openils/widget/AutoGrid.js b/Open-ILS/web/js/dojo/openils/widget/AutoGrid.js
index 921f977..0f95301 100644 (file)
--- a/Open-ILS/web/js/dojo/openils/widget/AutoGrid.js
+++ b/Open-ILS/web/js/dojo/openils/widget/AutoGrid.js
@@ -28,6 +28,7 @@ if(!dojo._hasResource['openils.widget.AutoGrid']) {
             selectorWidth : '1.5',
             showColumnPicker : false,
             columnPickerPrefix : null,
+            paginatorSlot : null,   /* takes DOM node ID */
             displayLimit : 15,
             displayOffset : 0,
             requiredFields : null,
@@ -83,8 +84,15 @@ if(!dojo._hasResource['openils.widget.AutoGrid']) {
 
                 if(!this.hidePaginator) {
                     var self = this;
-                    this.paginator = new dijit.layout.ContentPane();
 
+                    var paginator_node;
+
+                    if (this.paginatorSlot) {
+                        paginator_node = dojo.byId(this.paginatorSlot);
+                    } else {
+                        paginator_node = new dijit.layout.ContentPane().domNode;
+                        dojo.place(paginator_node, this.domNode, 'before');
+                    }
 
                     var back = dojo.create('a', {
                         innerHTML : 'Back',  // TODO i18n
@@ -108,9 +116,8 @@ if(!dojo._hasResource['openils.widget.AutoGrid']) {
                         }
                     });
 
-                    dojo.place(this.paginator.domNode, this.domNode, 'before');
-                    dojo.place(back, this.paginator.domNode);
-                    dojo.place(forw, this.paginator.domNode);
+                    dojo.place(back, paginator_node);
+                    dojo.place(forw, paginator_node);
 
                     if(this.showLoadFilter) {
                         dojo.require('openils.widget.PCrudFilterDialog');
@@ -131,7 +138,7 @@ if(!dojo._hasResource['openils.widget.AutoGrid']) {
                                     self.filterDialog.show();
                                 }
                             }),
-                            this.paginator.domNode
+                            paginator_node
                         );
                     }
 
@@ -140,7 +147,7 @@ if(!dojo._hasResource['openils.widget.AutoGrid']) {
                         src:'/opac/images/progressbar_green.gif', // TODO configured path
                         style:'height:16px;width:16px;'
                     });
-                    dojo.place(this.loadProgressIndicator, this.paginator.domNode);
+                    dojo.place(this.loadProgressIndicator, paginator_node);
                 }
             },