From 40e30735cebb9d49eadfffdecd5fd1dfa4c2926e Mon Sep 17 00:00:00 2001
From: Christine Morgan <cmorgan@noblenet.org>
Date: Thu, 21 Nov 2019 12:53:11 -0500
Subject: [PATCH] LP1735568, LP1830443: MARC Editor Fixes

These style changes to the current MARC Editor fix the indicator box
resize problem and the blank subfield problem while improving usability.
Colors were tested using the Chrome extension Colorblindly, a
colorblindness simulator.

Signed-off-by: Christine Morgan <cmorgan@noblenet.org>
Signed-off-by: Elaine Hardy <ehardy@georgialibraries.org>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---
 .../templates/staff/cat/share/t_marcedit.tt2  | 45 ++++++++++---------
 .../staff/cat/share/t_marcedit_editable.tt2   |  6 +--
 Open-ILS/src/templates/staff/css/cat.css.tt2  | 38 +++++++++++-----
 3 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/Open-ILS/src/templates/staff/cat/share/t_marcedit.tt2 b/Open-ILS/src/templates/staff/cat/share/t_marcedit.tt2
index 5ba785945b..1421b65145 100644
--- a/Open-ILS/src/templates/staff/cat/share/t_marcedit.tt2
+++ b/Open-ILS/src/templates/staff/cat/share/t_marcedit.tt2
@@ -24,7 +24,7 @@
         [% l('Stack subfields') %]
       </label>
     </div>
-    <div class="">
+    <div class="col-md-2">
       <div class="input-group pad-horiz">
         <span class="input-group-addon"><b>[% l('Record Type') %]</b></span>
         <span class="input-group-addon">{{calculated_record_type}}</span>
@@ -56,7 +56,7 @@
     <textarea class="marcflateditor" cols="120" rows="40" ng-model="flat_text_marc" ng-blur="saveFlatTextMARC()"></textarea>
   </div>
   <div ng-show="!flatEditor.isEnabled">
-    <div class="row pad-vert">
+    <div class="row pad-vert marcffcontainer">
       <div class="marcffeditor">
         <div class="row col-md-12">
             <eg-marc-edit-fixed-field fixed-field="Type" fixed-field-label="[% l('Type') | html %]" record="record"></eg-marc-edit-fixed-field>
@@ -148,9 +148,9 @@
         </div>
       </div>
     </div>
-    <div class="marcrecord pad-vert">
+    <div>
       <div uib-collapse="!showHelp">
-        <div class="row">
+        <div class="row keyboardhelp">
           <div class="col-md-4">
             <ul>
                <li>[% l('Undo: CTRL-z') %]</li>
@@ -178,23 +178,26 @@
         </div>
       </div>
       <div>
-        <eg-marc-edit-leader record="record" on-keydown="onKeydown"/>
-      </div>
-      <div>
-        <eg-marc-edit-controlfield 
-          ng-repeat="field in controlfields" 
-          field="field" on-keydown="onKeydown"
-          id="r{{field.record.subfield('901','c')[1]}}f{{field.position}}"
-          context-functions="context_functions"
-        />
-      </div>
-      <div>
-        <eg-marc-edit-datafield 
-          ng-repeat="field in datafields" 
-          field="field" on-keydown="onKeydown" 
-          id="r{{field.record.subfield('901','c')[1]}}f{{field.position}}"
-          context-functions="context_functions"
-        />
+      <div class="marcrecord">
+        <div>
+          <eg-marc-edit-leader record="record" on-keydown="onKeydown"/>
+        </div>
+        <div>
+          <eg-marc-edit-controlfield 
+            ng-repeat="field in controlfields" 
+            field="field" on-keydown="onKeydown"
+            id="r{{field.record.subfield('901','c')[1]}}f{{field.position}}"
+            context-functions="context_functions"
+          />
+        </div>
+        <div>
+          <eg-marc-edit-datafield 
+            ng-repeat="field in datafields" 
+            field="field" on-keydown="onKeydown" 
+            id="r{{field.record.subfield('901','c')[1]}}f{{field.position}}"
+            context-functions="context_functions"
+          />
+        </div>
       </div>
     </div>
   </div>
diff --git a/Open-ILS/src/templates/staff/cat/share/t_marcedit_editable.tt2 b/Open-ILS/src/templates/staff/cat/share/t_marcedit_editable.tt2
index 1e5888f000..a5c8301d40 100644
--- a/Open-ILS/src/templates/staff/cat/share/t_marcedit_editable.tt2
+++ b/Open-ILS/src/templates/staff/cat/share/t_marcedit_editable.tt2
@@ -2,8 +2,8 @@
 <input
   ng-show="itype != 'sfv'"
   ng-disabled="{{isInputDisabled}}"
-  ng-class="['marcedit', {'marcsfcode': itype == 'sfc','marcind': itype == 'ind' || itype == 'tag', 'focusable': itype != 'sfv'}]"
-  style="font-family: 'Lucida Console', Monaco, monospace; min-width: 1ch; margin: 0 -2px;"
+  ng-class="['marcedit', {'marcsfcode': itype == 'sfc','marcind': itype == 'ind', 'marctag': itype == 'tag', 'focusable': itype != 'sfv'}]"
+  style="font-family: 'Lucida Console', Monaco, monospace; min-width: 1ch; margin: 2px 2px;"
   ng-model="content"
   size="{{content.length * 1.1}}"
   maxlength="{{max}}"
@@ -14,7 +14,7 @@
   class=""
   ng-class="['marcedit', {'marcsfvalue': itype == 'sfv', 'focusable': itype == 'sfv'}]"
   ng-show="itype == 'sfv'"
-  style="font-family: 'Lucida Console', Monaco, monospace; display: inline-block; min-width: 1ch; margin: 0 -1px; padding: 0;"
+  style="font-family: 'Lucida Console', Monaco, monospace; display: inline-block; min-width: 20ch; margin: 0 -1px; padding: 0 5px; border-left: 1px solid gray !important;"
   ng-model="content"
 >{{content}}</div>
 </span>
diff --git a/Open-ILS/src/templates/staff/css/cat.css.tt2 b/Open-ILS/src/templates/staff/css/cat.css.tt2
index ced13b3676..8b432272b0 100644
--- a/Open-ILS/src/templates/staff/css/cat.css.tt2
+++ b/Open-ILS/src/templates/staff/css/cat.css.tt2
@@ -9,7 +9,9 @@
 }
 
 .marcrecord {
-    //background-color: #f5f5f5;
+    background-color: #ddd;
+    padding: 10px; /* provide consistant space around marc field editor */
+    margin: 0 -15px; /* line up editing sections left and right */
 }
 
 .marcflateditor {
@@ -23,7 +25,7 @@
 }
 
 .marcedit {
-    background-color: #f5f5f5;
+    background-color: #fff;
     border-collapse: collapse;
     border: solid thin gray;
     padding: 0px 5px 0px 5px;
@@ -39,34 +41,42 @@ input.marcedit:focus {
     background-color: lightcyan;
 }
 
+.keyboardhelp {
+    background-color: #fff;
+    border-bottom: 1px solid gray;
+}
+
 .marcffeditor {
     max-width: 800px;
 }
 
 .fixed-field-box {
-    border: 1px solid gray;
+    border: none;
+}
+.marcffcontainer {
+     background-color: lightcyan;
+     border-bottom: 1px solid gray;
 }
-
 .marcsfvalue {
-    border-left: 0px !important;
+    border-left: 1px !important;
 }
 
 .marcsfcode {
     color: blue;
     font-weight: normal;
     text-align: center;
-    padding-left: 0px !important;
-    border-left: 0px !important;
-    border-right: 0px !important;
+    margin-left: 0px !important;
+    width: 1.5em;
 }
 
 .marcsfcodedelimiter {
+    background-color: #ddd;
     color: blue;
     font-family: 'Lucida Console', Monaco, monospace;
     font-weight: normal;
     text-align: center;
     padding-right: 0px !important;
-    border-right: 0px !important;
+    border: none !important;
 }
 
 .unvalidatedheading {
@@ -77,6 +87,13 @@ input.marcedit:focus {
     text-align: center;
 }
 
+.marcind {
+    width: 1.5em;
+}
+.marctag {
+    width: 2.6em;
+}
+
 .marcEditableControlfield {
     text-align: left;
 }
@@ -311,5 +328,4 @@ table.custom-label-table td {
   overflow-x: scroll;
   overflow-y: scroll;
   white-space: nowrap;
-}
-
+}
\ No newline at end of file
-- 
2.43.2