From 3c1a03e5fc3a2480041e52399892e4abe2efd6a5 Mon Sep 17 00:00:00 2001
From: Mike Rylander <mrylander@gmail.com>
Date: Fri, 13 Feb 2015 18:13:44 -0500
Subject: [PATCH] LP#1402797 Start styling marc editor via css

Signed-off-by: Mike Rylander <mrylander@gmail.com>
Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 Open-ILS/src/templates/staff/base.tt2         |   1 +
 Open-ILS/src/templates/staff/css/cat.css.tt2  | 120 ++++++++++++++++++
 .../ui/default/staff/cat/services/marcedit.js |  24 ++--
 3 files changed, 135 insertions(+), 10 deletions(-)
 create mode 100644 Open-ILS/src/templates/staff/css/cat.css.tt2

diff --git a/Open-ILS/src/templates/staff/base.tt2 b/Open-ILS/src/templates/staff/base.tt2
index ce9cc5ebb7..9f92d3da2e 100644
--- a/Open-ILS/src/templates/staff/base.tt2
+++ b/Open-ILS/src/templates/staff/base.tt2
@@ -14,6 +14,7 @@
     [% ELSE %]
     <link rel="stylesheet" href="[% WEB_BUILD_PATH %]/css/evergreen-staff-client-deps.[% EVERGREEN_VERSION %].min.css" />
     [% END %]
+    <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/cat.css" />
     <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/style.css" />
     <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/print.css" type="text/css" media="print" />
   </head>
diff --git a/Open-ILS/src/templates/staff/css/cat.css.tt2 b/Open-ILS/src/templates/staff/css/cat.css.tt2
new file mode 100644
index 0000000000..7370b92c13
--- /dev/null
+++ b/Open-ILS/src/templates/staff/css/cat.css.tt2
@@ -0,0 +1,120 @@
+.marcrecord {
+    background-color: lightgrey;
+}
+
+.marcedit {
+    background-color: lightgrey;
+    border-collapse: collapse;
+    border: solid thin gray;
+    padding: 0px 5px 0px 5px;
+}
+
+input.marcedit:focus {
+    background-color: lightcyan;
+}
+
+.marcsfcode {
+    color: blue;
+    font-weight: normal;
+    text-align: center;
+}
+
+.marctag, .marcind {
+    text-align: center;
+}
+
+.marcEditableControlfield {
+    text-align: left;
+}
+
+.marcSubfieldCode, .marcInd1, .marcInd2, .marcTag {
+    width: 1em;
+}
+
+.marcSubfieldDelimiter, .marcSubfieldCode {
+    color: blue;
+}
+
+.marcInd1, .marcInd2, .marcTag {
+    text-align: center;
+}
+
+.marcSubfield {
+    min-width: 1em;
+}
+
+.tooltip {
+    /* width: 10em; */
+}
+
+caption {
+    font-weight: bold;
+}
+
+grid row, grid column {
+    border-collapse: collapse;
+    border: solid thin gray;
+    vertical-align: bottom;
+}
+
+grid column {
+    background-color: lightgray; 
+    padding: 2px;
+}
+
+grid#leaderGrid textbox {
+    min-width: 1em;
+}
+
+grid#leaderGrid label {
+    font-weight: bold;
+}
+
+grid#leaderGrid label, grid#leaderGrid textbox {
+    visibility: hidden;
+}
+
+grid#leaderGrid[type="BKS"] *[set~="BKS"], grid#leaderGrid[type="BKS"] *[set~="BKS"] + textbox {
+    visibility: visible;
+}
+
+grid#leaderGrid[type="SER"] *[set~="SER"], grid#leaderGrid[type="SER"] *[set~="SER"] + textbox {
+    visibility: visible;
+}
+
+grid#leaderGrid[type="VIS"] *[set~="VIS"], grid#leaderGrid[type="VIS"] *[set~="VIS"] + textbox {
+    visibility: visible;
+}
+
+grid#leaderGrid[type="MIX"] *[set~="MIX"], grid#leaderGrid[type="MIX"] *[set~="MIX"] + textbox {
+    visibility: visible;
+}
+
+grid#leaderGrid[type="MAP"] *[set~="MAP"], grid#leaderGrid[type="MAP"] *[set~="MAP"] + textbox {
+    visibility: visible;
+}
+
+grid#leaderGrid[type="SCO"] *[set~="SCO"], grid#leaderGrid[type="SCO"] *[set~="SCO"] + textbox {
+    visibility: visible;
+}
+
+grid#leaderGrid[type="REC"] *[set~="REC"], grid#leaderGrid[type="REC"] *[set~="REC"] + textbox {
+    visibility: visible;
+}
+
+grid#leaderGrid[type="COM"] *[set~="COM"], grid#leaderGrid[type="COM"] *[set~="COM"] + textbox {
+    visibility: visible;
+}
+
+grid#leaderGrid[type="AUT"] *[set~="AUT"], grid#leaderGrid[type="AUT"] *[set~="AUT"] + textbox {
+    visibility: visible;
+}
+
+grid#leaderGrid[type="MFHD"] *[set~="MFHD"], grid#leaderGrid[type="MFHD"] *[set~="MFHD"] + textbox {
+    visibility: visible;
+}
+
+grid[name="-none-"] * label { color: black; }
+
+.marcValidated { color: black; }
+.marcUnvalidated { color: red; }
diff --git a/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js b/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
index 7580a14c93..bb5279a61d 100644
--- a/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
+++ b/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
@@ -138,9 +138,11 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
         transclude: true,
         restrict: 'E',
         template: '<span>'+
-                    '<span><eg-marc-edit-editable '+
+                    '<span class="marcsfcode"><label class="marcedit"'+
+                        'for="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}s{{subfield[2]}}code" '+
+                        '>‡</label><eg-marc-edit-editable '+
                         'itype="sfc" '+
-                        'class="marcsfcode" '+
+                        'class="marcedit" '+
                         'field="field" '+
                         'subfield="subfield" '+
                         'content="subfield[0]" '+
@@ -150,7 +152,7 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                     '/></span>'+
                     '<span><eg-marc-edit-editable '+
                         'itype="sfv" '+
-                        'class="marcsfvalue" '+
+                        'class="marcedit marcsfvalue" '+
                         'field="field" '+
                         'subfield="subfield" '+
                         'content="subfield[1]" '+
@@ -169,6 +171,7 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
         restrict: 'E',
         template: '<span><eg-marc-edit-editable '+
                       'itype="ind" '+
+                      'class="marcedit marcind" '+
                       'field="field" '+
                       'content="ind" '+
                       'max="1" '+
@@ -186,6 +189,7 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
         restrict: 'E',
         template: '<span><eg-marc-edit-editable '+
                       'itype="tag" '+
+                      'class="marcedit marctag" '+
                       'field="field" '+
                       'content="tag" '+
                       'max="3" '+
@@ -202,9 +206,9 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
         transclude: true,
         restrict: 'E',
         template: '<div>'+
-                    '<span><eg-marc-edit-tag class="marctag" field="field" tag="field.tag" on-keydown="onKeydown"/></span>'+
-                    '<span><eg-marc-edit-ind class="marcind" field="field" ind="field.ind1" on-keydown="onKeydown" ind-number="1"/></span>'+
-                    '<span><eg-marc-edit-ind class="marcind" field="field" ind="field.ind2" on-keydown="onKeydown" ind-number="2"/></span>'+
+                    '<span><eg-marc-edit-tag field="field" tag="field.tag" on-keydown="onKeydown"/></span>'+
+                    '<span><eg-marc-edit-ind field="field" ind="field.ind1" on-keydown="onKeydown" ind-number="1"/></span>'+
+                    '<span><eg-marc-edit-ind field="field" ind="field.ind2" on-keydown="onKeydown" ind-number="2"/></span>'+
                     '<span><eg-marc-edit-subfield ng-repeat="subfield in field.subfields" subfield="subfield" field="field" on-keydown="onKeydown"/></span>'+
                   '</div>',
         scope: { field: "=", onKeydown: '=' }
@@ -216,11 +220,11 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
         transclude: true,
         restrict: 'E',
         template: '<div>'+
-                    '<span><eg-marc-edit-tag class="marctag" field="field" tag="field.tag" on-keydown="onKeydown"/></span>'+
+                    '<span><eg-marc-edit-tag field="field" tag="field.tag" on-keydown="onKeydown"/></span>'+
                     '<span><eg-marc-edit-editable '+
                       'itype="cfld" '+
                       'field="field" '+
-                      'class="marcdata" '+
+                      'class="marcedit marcdata" '+
                       'content="field.data" '+
                       'on-keydown="onKeydown" '+
                       'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}data"'+
@@ -236,14 +240,14 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
         restrict: 'E',
         template: '<div>'+
                     '<span><eg-marc-edit-editable '+
-                      'class="marctag" '+
+                      'class="marcedit marctag" '+
                       'content="tag" '+
                       'on-keydown="onKeydown" '+
                       'id="leadertag" '+
                       'disabled="disabled"'+
                       '/></span>'+
                     '<span><eg-marc-edit-editable '+
-                      'class="marcdata" '+
+                      'class="marcedit marcdata" '+
                       'itype="ldr" '+
                       'max="{{record.leader.length}}" '+
                       'content="record.leader" '+
-- 
2.43.2