Merge pull request #727 from lcnetdev/copycat-prefs-expansion

Expand customization for CopyCat record comparison

Author: f-osorio

src/stores/preference.js

@@ -1565,11 +1565,29 @@ export const usePreferenceStore = defineStore('preference', {
       '--c-edit-copy-cat-card-marc-hover' : {
           value:'transparent',
           desc: 'The color of the subfield when hovering over the MARC.',
-          descShort: 'Marc Hover',
+          descShort: 'MARC Hover',
           type: 'color',
           group: 'Copy Cat',
           range: null
       },
+
+      '--c-edit-copy-cat-comp-existing' : {
+          value:'#fafad2',
+          desc: 'When comparing, color of the background for the existing record.',
+          descShort: 'Existing Color',
+          type: 'color',
+          group: 'Copy Cat',
+          range: null
+      },
+      '--c-edit-copy-cat-comp-new' : {
+          value:'#e3ffd8',
+          desc: 'When comparing, color of the background for the new record.',
+          descShort: 'New Color',
+          type: 'color',
+          group: 'Copy Cat',
+          range: null
+      },
+
       '--n-edit-copy-cat-font-size' : {
           desc: 'The fontsize of the text in the Copy Cat search.',
           descShort: 'Font Size',
@@ -1589,13 +1607,13 @@ export const usePreferenceStore = defineStore('preference', {
         group: 'Copy Cat',
         range: [true,false]
       },
-	  '--n-edit-copyt-cat-prio': {
-	  	desc: 'Default Prority for CopyCat',
-		descShort: 'Priority Default',
-		value: '3',
-		type: 'string',
-		group: 'Copy Cat'
-	  }
+      '--n-edit-copyt-cat-prio': {
+        desc: 'Default Prority for CopyCat',
+      descShort: 'Priority Default',
+      value: '3',
+      type: 'string',
+      group: 'Copy Cat'
+      }
 
 
     }
@@ -2052,6 +2070,9 @@ export const usePreferenceStore = defineStore('preference', {
     styleModalBackgroundColor(){ return `background-color: ${this.returnValue('--c-edit-modals-background-color')};`},
     styleModalTextColor(){ return `color: ${this.returnValue('--c-edit-modals-text-color')};`},
 
+    styleCopyCatBackgroundColor(){ return `background-color: ${this.returnValue('--c-edit-copy-cat-components')};`},
+    styleCopyCatTextColor(){ return `color: ${this.returnValue('--c-edit-copy-cat-font-color')};`},
+
 
 
 

src/views/copyCatComponents/RecordComparison.vue

@@ -5,7 +5,7 @@
         :lock-scroll="true" class="comparison-modal" content-class="comparison-modal-content">
 
         <div ref="compModalContainer" class="comp-modal-container">
-            <div :style="`position: relative; ${this.preferenceStore.styleModalBackgroundColor()}; ${this.preferenceStore.styleModalTextColor()}`"
+            <div :style="`position: relative; ${this.preferenceStore.styleCopyCatBackgroundColor()}; ${this.preferenceStore.styleCopyCatTextColor()}`"
                 class="comp-container-outer">
 
                 <div class="header">
@@ -15,7 +15,7 @@
                 <splitpanes class="default-theme" vertical>
                     <pane max-size="50">
                         <h3>CopyCat Record</h3>
-                        <div class="marc-wrapper record-copycat">
+                        <div class="marc-wrapper record-copycat" :style="{'background-color': this.preferenceStore.returnValue('--c-edit-copy-cat-comp-new')}">
                             <div class="marc" v-html="recordCopyCat" @mouseover="highlightTags" @mouseout="highlightTags"></div>
                             <!-- {{ recordCopyCat }} -->
                             <!-- .native.capture -->
@@ -25,7 +25,7 @@
                         <span class="heading">
                             <h3>Existing BFDB Record</h3> <a :href="existingRecordUrl.replace('8080', '8230')" target="_blank">link to BFDB</a>
                         </span>
-                        <div class="marc-wrapper record-existing">
+                        <div class="marc-wrapper record-existing" :style="{'background-color': this.preferenceStore.returnValue('--c-edit-copy-cat-comp-existing')}">
                             <!-- <pre v-if="recordExisting.length > 0">
                                 {{ recordExisting }}
                             </pre> -->
@@ -38,7 +38,7 @@
                 </splitpanes>
 
                 <div v-if="!preview"
-                    :style="`${this.preferenceStore.styleModalBackgroundColor()}; ${this.preferenceStore.styleModalTextColor()}`"
+                    :style="`${this.preferenceStore.styleCopyCatBackgroundColor()}; ${this.preferenceStore.styleCopyCatTextColor()}`"
                     class="footer">
                     <h1 v-if="Object.keys(recordExisting).length > 0">There is an existing record. If you continue, the copycat record will overlay the existing record.</h1>
                     <h1 v-else>There is no existing record. If you continue, you will create a new record.</h1>
@@ -180,13 +180,13 @@ export default {
 
 .record-existing,
 .record-copycat {
-    background-color: #e3ffd8;
+    /* background-color: #e3ffd8; */
     width: inherit;
     overflow-wrap: anywhere;
 }
 
 .record-existing {
-    background-color: #fafad2;
+    /* background-color: #fafad2; */
     width: inherit;
     overflow-wrap: anywhere;
 }