From 6ef202337eb17f4bc14411da2b686969c1e8413c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 22:27:16 +0100
Subject: [PATCH] :bento: Adds icons for add + remove fields

---
 .../interactive-editor-add.svg                |  1 +
 .../interactive-editor-remove.svg             |  1 +
 src/components/InteractiveEditor/EditItem.vue | 33 +++++++++++++++----
 3 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/interface-icons/interactive-editor-add.svg
 create mode 100644 src/assets/interface-icons/interactive-editor-remove.svg

diff --git a/src/assets/interface-icons/interactive-editor-add.svg b/src/assets/interface-icons/interactive-editor-add.svg
new file mode 100644
index 00000000..bfa907d9
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-add.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" class="svg-inline--fa fa-plus fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/interactive-editor-remove.svg b/src/assets/interface-icons/interactive-editor-remove.svg
new file mode 100644
index 00000000..500af9cb
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-remove.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="trash-alt" class="svg-inline--fa fa-trash-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path></svg>
\ No newline at end of file
diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index 0a2a3a81..76507257 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -17,6 +17,7 @@
         :type="row.type"
         layout="horizontal"
         />
+        <BinIcon />
     </div>
     <div class="add-more-inputs">
       <h4>More Fields</h4>
@@ -26,7 +27,7 @@
           :key="row.name"
           @click="() => appendNewField(row.name)"
           class="add-field-tag">
-          ➕ {{ row.name }}
+          <AddIcon /> {{ row.name }}
         </span>
       </div>
     </div>
@@ -37,6 +38,8 @@
 <script>
 import Input from '@/components/FormElements/Input';
 import Button from '@/components/FormElements/Button';
+import AddIcon from '@/assets/interface-icons/interactive-editor-add.svg';
+import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
@@ -59,6 +62,8 @@ export default {
   components: {
     Input,
     Button,
+    AddIcon,
+    BinIcon,
   },
   mounted() {
     this.item = this.getItemFromState(this.itemId);
@@ -69,7 +74,7 @@ export default {
     makeInitialFormData() {
       const formData = [];
       const requiredFields = ['title', 'description', 'url', 'icon', 'target', 'hotkey', 'provider', 'tags'];
-      const acceptedTypes = ['text', 'number'];
+      const acceptedTypes = ['text'];
       const getType = (origType) => (acceptedTypes.includes(origType) ? origType : 'text');
       Object.keys(this.schema).forEach((property) => {
         const singleRow = {
@@ -109,6 +114,7 @@ export default {
         }
       });
     },
+    // removeSomeField(filedId) {},
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$emit('closeEditMenu');
@@ -127,6 +133,7 @@ export default {
   color: var(--config-settings-color);
   height: 100%;
   overflow-y: auto;
+  @extend .svg-button;
   h3.title {
     font-size: 1.2rem;
     margin: 0.25rem 0;
@@ -138,22 +145,28 @@ export default {
     opacity: var(--dimming-factor);
   }
   .row {
+    display: flex;
     padding: 0.5rem 0.25rem;
     &:not(:last-child) {
       border-bottom: 1px dotted var(--config-settings-color);
     }
-    .input-container input.input-field {
-      font-size: 1rem;
-      padding: 0.35rem 0.5rem;
+    .input-container {
+        width: 100%;
+        input.input-field {
+        font-size: 1rem;
+        padding: 0.35rem 0.5rem;
+      }
     }
   }
   .more-fields {
     display: flex;
     flex-wrap: wrap;
-    .add-field-tag {
+    span.add-field-tag {
       margin: 0.2rem;
       padding: 0.2rem 0.5rem;;
       min-width: 2rem;
+      display: flex;
+      align-items: center;
       cursor: pointer;
       text-align: center;
       border: 1px solid var(--config-settings-color);
@@ -161,6 +174,14 @@ export default {
       &:hover {
         background: var(--config-settings-color);
         color: var(--config-settings-background);
+        svg {
+          background: var(--config-settings-color);
+          path { fill: var(--config-settings-background); }
+        }
+      }
+      svg {
+        margin-right: 0.25rem;
+        border: none;
       }
     }
   }