Estilização da modal de configuração dos termos do plugin Spam Detect…

…or (Ref.: #2)
mapasculturais · Oct 9, 2024 · 9d6f9a0 · 9d6f9a0
1 parent ea42fe7
commit 9d6f9a0
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 25 deletions.
diff --git a/assets-src/sass/4-components/_c-spam-add-config.scss b/assets-src/sass/4-components/_c-spam-add-config.scss
@@ -0,0 +1,55 @@
+@use '../2-atoms/a-mixins' as *;
+
+.spam-add-config {
+
+    &__content {
+        display: grid;
+        grid-template-columns: 1fr size(1) 1fr;
+        gap: size(15) size(25);
+        align-items: start;
+    }
+
+    &__add {
+        display: grid;
+        gap: size(8);
+    }
+
+    &__title {
+        font-size: var(--mc-font-size-md);
+    }
+
+    &__tags {
+        overflow: auto;
+        max-height: 300px;
+
+        & > ul.mc-tag-list__tagList {
+            flex-direction: row;  
+            justify-content: center;
+        }
+    }
+
+    &__tag {
+        &--notification {
+            background-color: var(--mc-warning-500);
+            color: var(--mc-black);
+        }
+
+        &--block {
+            background-color: var(--mc-danger-500);
+            color: var(--mc-white);
+        }
+    }
+
+    &__notification,
+    &__block {
+        display: grid;
+        gap: size(25);
+        max-height: size(400);
+        max-width: size(550);
+    }
+
+    &__vertical-divisor {
+        height: 100%;
+        border-left: size(1) solid var(--mc-gray-500);
+    }
+}
diff --git a/assets-src/sass/plugin-SpamDetector.scss b/assets-src/sass/plugin-SpamDetector.scss
@@ -10,6 +10,7 @@
 
 
 /* ----- 4: COMPONENTS ------- */
+@import '4-components/c-spam-add-config';
 
 
 /* ----- 5: AREAS ------- */
diff --git a/components/spam-add-config/template.php b/components/spam-add-config/template.php
@@ -13,17 +13,40 @@
 
 ?>
 <div id="spam-add-config">
-    <h3> <?= i::__('Configuração de Tags para Notificação e Bloqueio')?></h3>
-
-    <div>
-        <label> <?= i::__('Adicione os textos para serem notificados')?></label>
-        <input type="text" placeholder="Digite uma nova tag de notificação" @keydown="change($event, 'notificationTags')"  @blur="clear($event)">
-        <mc-tag-list :tags="notificationTags" @remove="saveTags()" editable></mc-tag-list>
-    </div>
-
-    <div>
-        <label> <?= i::__('Adicione os textos para serem bloqueados')?></label>
-        <input type="text" placeholder="Digite uma nova tag de bloqueio" @keydown="change($event, 'blockedTags')" @blur="clear($event)">
-        <mc-tag-list :tags="blockedTags"  @remove="saveTags()" editable></mc-tag-list>
-    </div>
+
+    <mc-modal button-label="<?php i::_e('Controle de Spam') ?>" title="<?= i::esc_attr__('Configuração dos filtros de conteúdo') ?>">
+        <template #button='{close, open, toogle, loading}'>
+            <a href="#" @click="open()">
+                <mc-icon name="security"> </mc-icon>
+                <?= i::__('Controle de SPAM') ?>
+            </a>
+        </template>
+
+        <template #actions="modal">
+            <div class="spam-add-config__content">
+                <div class="spam-add-config__notification">
+                    <div class="spam-add-config__add">
+                        <span class="spam-add-config__title semibold"> <?= i::__('Notificações')?></span>
+                        <div class="field">
+                            <input type="text" placeholder="Digite uma nova palavra chave de notificação" @keydown="change($event, 'notificationTags')"  @blur="clear($event)">
+                        </div>    
+                    </div>
+                    <mc-tag-list class="spam-add-config__tags scrollbar" classes="spam-add-config__tag spam-add-config__tag--notification" :tags="notificationTags" @remove="saveTags()" editable></mc-tag-list>
+                </div>
+
+                <div class="spam-add-config__vertical-divisor"></div>
+
+                <div class="spam-add-config__block">
+                    <div class="spam-add-config__add">
+                        <span class="spam-add-config__title semibold"> <?= i::__('Bloqueio')?></span>
+                        <div class="field">
+                            <input type="text" placeholder="Digite uma nova palavra chave de bloqueio" @keydown="change($event, 'blockedTags')" @blur="clear($event)">
+                        </div>
+                    </div>
+                    <mc-tag-list class="spam-add-config__tags scrollbar" classes="spam-add-config__tag spam-add-config__tag--block" :tags="blockedTags"  @remove="saveTags()" editable></mc-tag-list>
+                </div>
+            </div>
+        </template>
+    </mc-modal>
+
 </div>
diff --git a/layouts/parts/configuration-menu.php b/layouts/parts/configuration-menu.php
@@ -14,16 +14,5 @@
 ");
 ?>
 <li>
-    <mc-modal button-label="<?php i::_e('Controle de Spam') ?>">
-        <template #button='{close, open, toogle, loading}'>
-            <a href="#" @click="open()">
-                <mc-icon name="security"> </mc-icon>
-                <?= i::__('Controle de SPAM') ?>
-            </a>
-        </template>
-
-        <template #actions="modal">
-            <spam-add-config></spam-add-config>
-        </template>
-    </mc-modal>
+    <spam-add-config></spam-add-config>
 </li>