add redact color

app/javascript/template_builder/documents_editor_page.vue

@@ -36,7 +36,8 @@
         <div
           v-for="(rect, rectIndex) in page.redact"
           :key="`redact-${rectIndex}`"
-          class="absolute bg-black"
+          class="absolute"
+          :class="rect.color === 'white' ? 'bg-white' : 'bg-black'"
           :style="{
             left: `${rect.x * 100}%`,
             top: `${rect.y * 100}%`,

app/javascript/template_builder/documents_editor_redact.vue

@@ -22,7 +22,8 @@
           <div
             v-for="(rect, rectIndex) in redactRects"
             :key="`rect-${rectIndex}`"
-            class="absolute bg-black pointer-events-none"
+            class="absolute pointer-events-none"
+            :class="color === 'white' ? 'bg-white' : 'bg-black'"
             :style="{
               left: `${rect.x * 100}%`,
               top: `${rect.y * 100}%`,
@@ -47,6 +48,26 @@
       </div>
     </div>
     <div class="w-56 flex-none border-l px-4 py-4 space-y-2">
+      <div class="flex items-center justify-between mb-1">
+        <span class="text-sm pl-1">{{ t('color') }}</span>
+        <div
+          class="join rounded"
+          style="height: 28px"
+        >
+          <button
+            v-for="option in colors"
+            :key="option"
+            class="btn btn-sm join-item !h-7 !min-h-0 bg-white input-bordered hover:border-base-content/20 hover:bg-base-100/50 px-2"
+            :class="{ '!bg-base-200': color === option }"
+            @click.prevent="color = option"
+          >
+            <span
+              class="block w-10 h-4 border border-base-content/30"
+              :style="{ backgroundColor: option }"
+            />
+          </button>
+        </div>
+      </div>
       <button
         class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
         :disabled="!hasRedactions && !wasReset"
@@ -122,11 +143,15 @@ export default {
       selectedNodes: {},
       freeRects: [],
       rects: [],
+      color: 'black',
       wasReset: false,
       marquee: null
     }
   },
   computed: {
+    colors () {
+      return ['black', 'white']
+    },
     rotate () {
       return this.page.rotate || 0
     },
@@ -186,6 +211,10 @@ export default {
     }
   },
   created () {
+    if ((this.page.redact || []).some((rect) => rect.color === 'white')) {
+      this.color = 'white'
+    }
+
     if (this.imagePage) {
       this.rects = (this.page.redact || []).map((rect) => ({ ...rect }))
 
@@ -238,7 +267,17 @@ export default {
       return { x, y }
     },
     apply () {
-      this.$emit('apply', this.redactRects)
+      const rects = this.redactRects.map((rect) => {
+        const next = { x: rect.x, y: rect.y, w: rect.w, h: rect.h }
+
+        if (this.color === 'white') {
+          next.color = 'white'
+        }
+
+        return next
+      })
+
+      this.$emit('apply', rects)
     },
     reset () {
       this.wasReset = true

app/javascript/template_builder/i18n.js

@@ -111,6 +111,7 @@ const en = {
   flip_horizontal: 'Flip horizontal',
   flip_vertical: 'Flip vertical',
   there_is_no_text_to_redact_on_this_page: 'This page contains only images. Redact tool can be used only with text pages',
+  color: 'Color',
   reset: 'Reset',
   upload_to_document: 'Upload to "{document}"',
   replace_existing_document: 'Replace existing document',
@@ -351,6 +352,7 @@ const es = {
   flip_horizontal: 'Voltear horizontal',
   flip_vertical: 'Voltear vertical',
   there_is_no_text_to_redact_on_this_page: 'Esta página contiene solo imágenes. La herramienta de censura solo puede usarse con páginas de texto',
+  color: 'Color',
   reset: 'Restablecer',
   upload_to_document: 'Subir a "{document}"',
   replace_existing_document: 'Reemplazar documento existente',
@@ -597,6 +599,7 @@ const it = {
   flip_horizontal: 'Rifletti orizzontale',
   flip_vertical: 'Rifletti verticale',
   there_is_no_text_to_redact_on_this_page: 'Questa pagina contiene solo immagini. Lo strumento di oscuramento può essere usato solo con pagine di testo',
+  color: 'Colore',
   reset: 'Reimposta',
   upload_to_document: 'Carica in "{document}"',
   replace_existing_document: 'Sostituisci documento esistente',
@@ -837,6 +840,7 @@ const pt = {
   flip_horizontal: 'Inverter horizontal',
   flip_vertical: 'Inverter vertical',
   there_is_no_text_to_redact_on_this_page: 'Esta página contém apenas imagens. A ferramenta de censura só pode ser usada com páginas de texto',
+  color: 'Cor',
   reset: 'Redefinir',
   upload_to_document: 'Enviar para "{document}"',
   replace_existing_document: 'Substituir documento existente',
@@ -1083,6 +1087,7 @@ const fr = {
   flip_horizontal: 'Miroir horizontal',
   flip_vertical: 'Miroir vertical',
   there_is_no_text_to_redact_on_this_page: 'Cette page ne contient que des images. L\'outil de caviardage ne peut être utilisé qu\'avec des pages de texte',
+  color: 'Couleur',
   reset: 'Réinitialiser',
   upload_to_document: 'Téléverser dans "{document}"',
   replace_existing_document: 'Remplacer le document existant',
@@ -1326,6 +1331,7 @@ const de = {
   flip_horizontal: 'Horizontal spiegeln',
   flip_vertical: 'Vertikal spiegeln',
   there_is_no_text_to_redact_on_this_page: 'Diese Seite enthält nur Bilder. Das Schwärzungswerkzeug kann nur mit Textseiten verwendet werden',
+  color: 'Farbe',
   reset: 'Zurücksetzen',
   upload_to_document: 'In "{document}" hochladen',
   replace_existing_document: 'Vorhandenes Dokument ersetzen',
@@ -1569,6 +1575,7 @@ const nl = {
   flip_horizontal: 'Horizontaal spiegelen',
   flip_vertical: 'Verticaal spiegelen',
   there_is_no_text_to_redact_on_this_page: 'Deze pagina bevat alleen afbeeldingen. De redactietool kan alleen worden gebruikt met tekstpagina\'s',
+  color: 'Kleur',
   reset: 'Opnieuw instellen',
   upload_to_document: 'Uploaden naar "{document}"',
   replace_existing_document: 'Bestaand document vervangen',