From e8014dcef616738ac8bac221bc52cf0307b31153 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 30 Jul 2015 22:38:41 -0400
Subject: [PATCH] LP#1452950 Patron reg fixed navigation

Make the patron navigation tabs fixed.  Adds a fixed patron
edit/registration action bar.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Galen Charlton <gmc@esilibrary.com>
---
 Open-ILS/src/templates/staff/circ/patron/index.tt2 | 65 ++++++++++++---------
 .../src/templates/staff/circ/patron/register.tt2   |  4 ++
 .../src/templates/staff/circ/patron/t_edit.tt2     | 67 +++++++++++++---------
 .../src/templates/staff/circ/patron/t_summary.tt2  | 28 ++++++++-
 Open-ILS/src/templates/staff/css/circ.css.tt2      | 49 ++++++++++++----
 .../web/js/ui/default/staff/circ/patron/app.js     |  4 ++
 6 files changed, 151 insertions(+), 66 deletions(-)

diff --git a/Open-ILS/src/templates/staff/circ/patron/index.tt2 b/Open-ILS/src/templates/staff/circ/patron/index.tt2
index 3234b95f1c..a224fa1e69 100644
--- a/Open-ILS/src/templates/staff/circ/patron/index.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/index.tt2
@@ -46,36 +46,23 @@ angular.module('egCoreMod').run(['egStrings', function(s) {
 }]);
 </script>
 
+<!-- add room for the fixed navigation elements -->
+<style ng-if="is_patron_edit">
+  #top-content-container { padding-top: 120px; }
+</style>
+<style ng-if="!is_patron_edit">
+  #top-content-container { padding-top: 80px; }
+</style>
+
+
 [% END %]
 
 <div class="row">
   <div class="col-md-3">
-    <div ng-show="patron()">
-      <h4 title="{{patron().id()}}">
-        <div class="flex-row">
-          <div class="flex-cell">
-            [% l('[_1], [_2] [_3]', 
-                '{{patron().family_name()}}',
-                '{{patron().first_given_name()}}',
-                '{{patron().second_given_name()}}') %]
-          </div>
-          <div ng-show="tab != 'search'">
-            <a href ng-click="toggle_expand_summary()"
-              title="[% l('Collapse Patron Summary Display') %]"
-              ng-hide="collapse_summary()">
-              <span class="glyphicon glyphicon-resize-small"></span>
-            </a>
-            <a href ng-click="toggle_expand_summary()"
-              title="[% l('Expand Patron Summary Display') %]"
-              ng-show="collapse_summary()">
-              <span class="glyphicon glyphicon-resize-full"></span>
-            </a>
-          </div>
-        </div><!-- row -->
-      </h4>
-    </div><!-- if patron -->
-  </div><!-- col -->
-  <div class="col-md-9">
+    <!-- just here to keep this slot open for the patron summary column -->
+  </div>
+
+  <div class="col-md-9" id="patron-fixed-tabs">
     <ul class="nav nav-pills nav-pills-like-tabs">
       <li ng-class="{active : tab == 'checkout', disabled : !patron()}">
         <a a-disabled="!patron()" href="./circ/patron/{{patron().id()}}/checkout">[% l('Check Out') %]</a>
@@ -157,6 +144,32 @@ angular.module('egCoreMod').run(['egStrings', function(s) {
         <a href="./circ/patron/search">[% l('Patron Search') %]</a>
       </li>
     </ul>
+    <div class="flex-row patron-reg-actions-bar" ng-if="is_patron_edit()">
+      <div>
+        <span>
+          [% l('Show:') %]
+          <span class="pad-all-min" ng-show="!display_required_fields">
+            <a href>[% l('Required Fields') %]</a>
+          </span>
+          <span class="pad-all-min" ng-show="!display_suggested_fields">
+            <a href>[% l('Suggested Fields') %]</a>
+          </span>
+          <span class="pad-all-min" ng-show="!display_all_fields">
+            <a href>[% l('All Fields') %]</a>
+          </span>
+        </span>
+      </div>
+      <div class="flex-cell"></div>
+      <div>
+        <span class="pad-all-min">
+          <button type="button" class="btn btn-default">[% l('Save') %]</button>
+        </span>
+        <span class="pad-all-min">
+          <button type="button" class="btn btn-default">[% l('Save & Clone') %]</button>
+        </span>
+      </div>
+    </div>
+
   </div><!-- col -->
 </div><!-- row -->
 
diff --git a/Open-ILS/src/templates/staff/circ/patron/register.tt2 b/Open-ILS/src/templates/staff/circ/patron/register.tt2
index a0b2af49fa..cdbc19929f 100644
--- a/Open-ILS/src/templates/staff/circ/patron/register.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/register.tt2
@@ -9,6 +9,10 @@
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/circ/patron/register.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/circ/patron/regctl.js"></script>
 <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/circ.css" />
+<style>
+  <!-- add room for the fixed navigation elements -->
+  #top-content-container { padding-top: 170px; }
+</style>
 [% END %]
 
 <div ng-view></div>
diff --git a/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
index 59bf318db8..8d82201cb0 100644
--- a/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
@@ -1,41 +1,52 @@
 [% DOC_IMG = '/images/question-mark.png' %]
 
 <!-- register banner -->
-<div ng-if="!patron_id" 
-  class="container-fluid" style="text-align:center">
-  <div class="alert alert-info alert-less-pad strong-text-2">
-    <span >[% l('Register Patron') %]</span>
+<div ng-if="!patron_id" class='patron-reg-fixed-bar'>
+
+  <div class="container-fluid" style="text-align:center">
+    <div class="alert alert-info alert-less-pad strong-text-2">
+      <span >[% l('Register Patron') %]</span>
+    </div>
+  </div>
+
+  <div class="flex-row" class='patron-reg-actions-bar'>
+    <div>
+      <span>
+        [% l('Show:') %]
+        <span class="pad-all-min" ng-show="!display_required_fields">
+          <a href>[% l('Required Fields') %]</a>
+        </span>
+        <span class="pad-all-min" ng-show="!display_suggested_fields">
+          <a href>[% l('Suggested Fields') %]</a>
+        </span>
+        <span class="pad-all-min" ng-show="!display_all_fields">
+          <a href>[% l('All Fields') %]</a>
+        </span>
+      </span>
+    </div>
+    <div class="flex-cell"></div>
+    <div>
+      <span class="pad-all-min">
+        <button type="button" class="btn btn-default">[% l('Save') %]</button>
+      </span>
+      <span class="pad-all-min">
+        <button type="button" class="btn btn-default">[% l('Save & Clone') %]</button>
+      </span>
+    </div>
   </div>
 </div>
 
 <!-- edit banner -->
-<div ng-if="patron_id" 
+<div ng-if="patron_id"
     class="strong-text-2">[% l('Patron Edit') %]</div>
 
 <!-- IDL field documentation window -->
-<div id="reg-control-actions">
-  <div class="pad-all-min">
-    <button type="button" class="btn btn-default">[% l('Save') %]</button>
-  </div>
-  <div class="pad-all-min">
-    <button type="button" class="btn btn-default">[% l('Save & Clone') %]</button>
-  </div>
-  <div class="pad-all-min" ng-show="!display_required_fields">
-    <a href>[% l('Required Fields') %]</a>
-  </div>
-  <div class="pad-all-min" ng-show="!display_suggested_fields">
-    <a href>[% l('Suggested Fields') %]</a>
-  </div>
-  <div class="pad-all-min" ng-show="!display_all_fields">
-    <a href>[% l('All Fields') %]</a>
-  </div>
-  <fieldset id="reg-field-doc" ng-show="selected_field_doc">
-    <legend>
-    {{idl_fields[selected_field_doc.fm_class()][selected_field_doc.field()].label}}
-    </legend>
-    <div>{{selected_field_doc.string()}}</div>
-  </fieldset>
-</div>
+<fieldset id="reg-field-doc" ng-show="selected_field_doc">
+  <legend>
+  {{idl_fields[selected_field_doc.fm_class()][selected_field_doc.field()].label}}
+  </legend>
+  <div>{{selected_field_doc.string()}}</div>
+</fieldset>
 
 [% MACRO formfield(cls, field, path, input_type) BLOCK;
 
diff --git a/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2
index 7c880b993b..1cb43fa596 100644
--- a/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2
@@ -1,5 +1,31 @@
 
-<div ng-cloak>
+<div ng-cloak class="patron-summary-grid-wrapper">
+  <div class="row">
+    <div class="col-md-12">
+      <h4 title="{{patron().id()}}">
+        <div class="flex-row">
+          <div class="flex-cell">
+            [% l('[_1], [_2] [_3]', 
+                '{{patron().family_name()}}',
+                '{{patron().first_given_name()}}',
+                '{{patron().second_given_name()}}') %]
+          </div>
+          <div ng-show="tab != 'search'">
+            <a href ng-click="toggle_expand_summary()"
+              title="[% l('Collapse Patron Summary Display') %]"
+              ng-hide="collapse_summary()">
+              <span class="glyphicon glyphicon-resize-small"></span>
+            </a>
+            <a href ng-click="toggle_expand_summary()"
+              title="[% l('Expand Patron Summary Display') %]"
+              ng-show="collapse_summary()">
+              <span class="glyphicon glyphicon-resize-full"></span>
+            </a>
+          </div>
+        </div>
+      </h4>
+    </div>
+  </div>
   <div ng-show="patron()" id="patron-summary-grid">
     <div class="row" 
       ng-class="{'patron-summary-divider' : !$index}"
diff --git a/Open-ILS/src/templates/staff/css/circ.css.tt2 b/Open-ILS/src/templates/staff/css/circ.css.tt2
index 87a670ce97..b2049ad6f9 100644
--- a/Open-ILS/src/templates/staff/css/circ.css.tt2
+++ b/Open-ILS/src/templates/staff/css/circ.css.tt2
@@ -1,3 +1,10 @@
+
+/* push the patron summary up to compensate for the extra
+ * padding required to support the fixed navigation */
+.patron-summary-grid-wrapper {
+  margin-top: -60px;
+}
+
 /** style to make a grid look like a striped table */
 #patron-summary-grid div.row {padding: 3px; border-right: 2px solid rgb(248, 248, 248);}
 #patron-summary-grid div.row:nth-child(odd) {background-color: rgb(248, 248, 248);}
@@ -18,6 +25,16 @@ but the ones I'm finding aren't quite cutting it..*/
   margin-bottom: 5px;
 }
 
+#patron-fixed-tabs {
+    position: fixed;
+    top: 50px;
+    right: 15px;
+    padding-top: 20px;
+    padding-top: 10px;
+    z-index: 1;
+    background-color: rgba(255,255,255,1);
+}
+
 /* let search form elements fill their containers w/ slight padding */
 #patron-search-form-row {margin-left: 0px;}
 #patron-search-form div.col-md-2 { padding: 2px; }
@@ -77,19 +94,10 @@ but the ones I'm finding aren't quite cutting it..*/
 
 
 /* floating div along top-right with field documentation */
-#reg-control-actions {
+#reg-field-doc {
     position: fixed;
     top:160px;
-    right:10px;
-    /*width:200px;*/
-    border:2px dashed #d9e8f9;
-    -moz-border-radius: 10px;
-    font-weight: bold;
-    padding: 10px;
-    margin-top: 10px;
-}
-
-#reg-field-doc {
+    right:20px;
     border:2px dashed #d9e8f9;
     -moz-border-radius: 10px;
     font-weight: bold;
@@ -110,6 +118,25 @@ but the ones I'm finding aren't quite cutting it..*/
     font-weight: normal;
 }
 
+.patron-reg-fixed-bar {
+    position: fixed;
+    top:50px;
+    right: 20px;
+    left: 20px;
+    padding-top: 20px;
+    padding-bottom: 10px;
+    z-index: 1;
+    background-color: rgba(255,255,255,1);
+}
+
+.patron-reg-actions-bar {
+  padding: 5px;
+}
+.patron-reg-actions-bar span {
+  font-weight: bold;
+}
+
+
 /* -- end patron registration -- */
 
 [%# 
diff --git a/Open-ILS/web/js/ui/default/staff/circ/patron/app.js b/Open-ILS/web/js/ui/default/staff/circ/patron/app.js
index 46aab7c6e5..9d98693fd4 100644
--- a/Open-ILS/web/js/ui/default/staff/circ/patron/app.js
+++ b/Open-ILS/web/js/ui/default/staff/circ/patron/app.js
@@ -557,6 +557,10 @@ function($q , $timeout , $location , egCore,  egUser , $locale) {
        ['$scope','$q','$location','$filter','egCore','egUser','patronSvc',
 function($scope,  $q,  $location , $filter,  egCore,  egUser,  patronSvc) {
 
+    $scope.is_patron_edit = function() {
+        return Boolean($location.path().match(/patron\/\d+\/edit$/));
+    }
+
     // returns true if a redirect occurs
     function redirectToAlertPanel() {
 
-- 
2.11.0