⚡ Reusable save/cancel buttons for new config editors

2021-10-26 17:01:36 +01:00
parent 70ebce4da7
commit 6bdc4fe313
10 changed files with 131 additions and 82 deletions
--- a/src/components/InteractiveEditor/EditAppConfig.vue
+++ b/src/components/InteractiveEditor/EditAppConfig.vue
@@ -9,17 +9,21 @@
  >
  <div class="edit-app-config-inner">
  <h3>{{ $t('interactive-editor.menu.edit-app-config-btn') }}</h3>
+  <!-- Show caution message -->
  <div class="app-config-intro">
-    <p class="use-caution">Proceed with Caution</p>
-    The following options are for advanded app configration.
-    If you are unsure about any of the fields, please reference the
-    <a href="https://dashy.to/docs/configuring#appconfig-optional">documentation</a>
-    to avoid unintended consequences.
+    <p class="use-caution">
+      {{ $t('interactive-editor.edit-app-config.warning-msg-title') }}
+    </p>
+    {{ $t('interactive-editor.edit-app-config.warning-msg-l1') }}
+    {{ $t('interactive-editor.edit-app-config.warning-msg-l2') }}
+    <a href="https://dashy.to/docs/configuring#appconfig-optional">
+      {{ $t('interactive-editor.edit-app-config.warning-msg-docs') }}
+    </a>
+    {{ $t('interactive-editor.edit-app-config.warning-msg-l3') }}
  </div>
-  <Button class="save-app-config-btn" :click="saveToState">
-    {{ $t('interactive-editor.menu.save-stage-btn') }}
-    <SaveIcon />
-  </button>
+  <!-- Save Button, upper -->
+  <SaveCancelButtons :saveClick="saveToState" :cancelClick="cancelEditing" />
+  <!-- The main form -->
  <FormSchema
    :schema="schema"
    v-model="formData"
@@ -28,10 +32,8 @@
    class="app-config-form"
    name="appConfigForm"
  ></FormSchema>
-  <Button class="save-app-config-btn" :click="saveToState">
-    {{ $t('interactive-editor.menu.save-stage-btn') }}
-    <SaveIcon />
-  </button>
+  <!-- Save Button, lower -->
+  <SaveCancelButtons :saveClick="saveToState" :cancelClick="cancelEditing" />
  </div>
  </modal>
 </template>
@@ -41,8 +43,7 @@ import FormSchema from '@formschema/native';
 import DashySchema from '@/utils/ConfigSchema';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
-import Button from '@/components/FormElements/Button';
-import SaveIcon from '@/assets/interface-icons/save-config.svg';
+import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';

 export default {
  name: 'EditAppConfig',
@@ -56,8 +57,7 @@ export default {
  props: {},
  components: {
    FormSchema,
-    Button,
-    SaveIcon,
+    SaveCancelButtons,
  },
  mounted() {
    this.formData = this.appConfig;
@@ -76,6 +76,9 @@ export default {
      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
    },
+    cancelEditing() {
+      this.$modal.hide(this.modalName);
+    },
    /* Called when modal manually closed, updates state to allow searching again */
    modalClosed() {
      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
@@ -126,9 +129,6 @@ export default {
      color: var(--interactive-editor-color);
    }
  }
-  button.save-app-config-btn {
-    margin: 0.5rem auto 1.5rem;
-  }
 }

 </style>
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -65,7 +65,7 @@
      </div>
    </div>
    <!-- Save to state button -->
-    <Button class="edit-item-save-btn" :click="saveItem">Save</Button>
+    <SaveCancelButtons :saveClick="saveItem" :cancelClick="modalClosed" />
    </div>
  </modal>
 </template>
@@ -73,10 +73,10 @@
 <script>
 import AddIcon from '@/assets/interface-icons/interactive-editor-add.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
+import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
 import Input from '@/components/FormElements/Input';
 import Radio from '@/components/FormElements/Radio';
 import Select from '@/components/FormElements/Select';
-import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
@@ -102,9 +102,9 @@ export default {
    Input,
    Radio,
    Select,
-    Button,
    AddIcon,
    BinIcon,
+    SaveCancelButtons,
  },
  mounted() {
    if (!this.isNew) { // Get existing item data
@@ -304,16 +304,6 @@ export default {
    border-color: var(--interactive-editor-color);
    background: var(--interactive-editor-background);
  }
-  button.edit-item-save-btn {
-    color: var(--interactive-editor-color);
-    border-color: var(--interactive-editor-color);
-    background: var(--interactive-editor-background);
-    &:hover {
-      color: var(--interactive-editor-background);
-      border-color: var(--interactive-editor-color);
-      background: var(--interactive-editor-color);
-    }
-  }
  svg {
    path { fill: var(--interactive-editor-color); }
    background: var(--interactive-editor-background);
--- a/src/components/InteractiveEditor/EditPageInfo.vue
+++ b/src/components/InteractiveEditor/EditPageInfo.vue
@@ -1,11 +1,8 @@
 <template>
  <modal
-    :name="modalName"
-    :resizable="true"
-    width="50%"
-    height="80%"
+    :name="modalName" @closed="modalClosed"
+    :resizable="true" width="50%" height="80%"
    classes="dashy-modal edit-page-info"
-    @closed="modalClosed"
  >
  <div class="edit-page-info-inner">
  <h3>{{ $t('interactive-editor.menu.edit-page-info-btn') }}</h3>
@@ -19,7 +16,7 @@
    <Button type="submit">
      {{ $t('interactive-editor.menu.save-stage-btn') }}
      <SaveIcon />
-    </button>
+    </Button>
  </FormSchema>
  </div>
  </modal>
@@ -42,7 +39,6 @@ export default {
      modalName: modalNames.EDIT_PAGE_INFO,
    };
  },
-  props: {},
  components: {
    FormSchema,
    Button,
--- a/src/components/InteractiveEditor/EditSection.vue
+++ b/src/components/InteractiveEditor/EditSection.vue
@@ -8,15 +8,17 @@
    @closed="modalClosed"
  >
  <div class="edit-section-inner">
-    <h3>Edit Section</h3>
+    <h3>{{ $t('interactive-editor.edit-section.edit-section-title') }}</h3>
    <FormSchema
      :schema="customSchema"
      v-model="sectionData"
      name="editSectionForm"
      class="edit-section-form"
    />
-    <!-- Save to state button -->
-    <Button class="edit-section-save-btn" :click="saveSection">Save</Button>
+    <SaveCancelButtons
+      :saveClick="saveSection"
+      :cancelClick="modalClosed"
+    />
    </div>
  </modal>
 </template>
@@ -25,8 +27,8 @@
 import FormSchema from '@formschema/native';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
-import Button from '@/components/FormElements/Button';
 import { modalNames } from '@/utils/defaults';
+import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';

 export default {
  name: 'EditSection',
@@ -34,7 +36,7 @@ export default {
    sectionIndex: Number,
  },
  components: {
-    Button,
+    SaveCancelButtons,
    FormSchema,
  },
  data() {
--- a/src/components/InteractiveEditor/MoveItemTo.vue
+++ b/src/components/InteractiveEditor/MoveItemTo.vue
@@ -23,16 +23,7 @@
        label="Append To"
        :initialOption="appendTo"
      />
-      <div class="button-wrapper">
-        <Button class="save-move" :click="save">
-          {{ $t('interactive-editor.menu.save-stage-btn') }}
-          <SaveIcon />
-        </Button>
-        <Button class="save-move" :click="close">
-          {{ $t('interactive-editor.menu.cancel-stage-btn') }}
-          <CancelIcon />
-        </Button>
-      </div>
+      <SaveCancelButtons :saveClick="save" :cancelClick="close" />
    </div>
  </modal>
 </template>
@@ -40,9 +31,7 @@
 <script>
 import Select from '@/components/FormElements/Select';
 import Radio from '@/components/FormElements/Radio';
-import Button from '@/components/FormElements/Button';
-import SaveIcon from '@/assets/interface-icons/save-config.svg';
-import CancelIcon from '@/assets/interface-icons/config-close.svg';
+import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';

@@ -51,9 +40,7 @@ export default {
  components: {
    Select,
    Radio,
-    Button,
-    SaveIcon,
-    CancelIcon,
+    SaveCancelButtons,
  },
  props: {
    itemId: String, // Unique ID for item
--- a/src/components/InteractiveEditor/SaveCancelButtons.vue
+++ b/src/components/InteractiveEditor/SaveCancelButtons.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="save-cancel-btn-container">
+    <Button class="save-app-config-btn" :click="saveClick">
+      {{ $t('interactive-editor.menu.save-stage-btn') }}
+      <SaveIcon />
+    </Button>
+    <Button class="save-app-config-btn" :click="cancelClick">
+      {{ $t('interactive-editor.menu.cancel-stage-btn') }}
+      <CancelIcon />
+    </Button>
+  </div>
+</template>
+
+<script>
+
+import Button from '@/components/FormElements/Button';
+import SaveIcon from '@/assets/interface-icons/save-config.svg';
+import CancelIcon from '@/assets/interface-icons/config-close.svg';
+
+export default {
+  name: 'SaveCancelButton',
+  props: {
+    saveClick: Function,
+    cancelClick: Function,
+  },
+  components: {
+    Button,
+    SaveIcon,
+    CancelIcon,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.save-cancel-btn-container {
+  display: flex;
+  margin: 0.5rem 0;
+  justify-content: center;
+  border-top: 1px dashed var(--interactive-editor-color);
+    button {
+    margin: 1rem 0.5rem;
+    color: var(--interactive-editor-color);
+    border-color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background);
+    svg {
+      border: none;
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+    &:hover {
+      color: var(--interactive-editor-background);
+      border-color: var(--interactive-editor-color);
+      background: var(--interactive-editor-color);
+      svg {
+        background: var(--interactive-editor-color);
+        path { fill: var(--interactive-editor-background); }
+      }
+    }
+  }
+}
+</style>