⚡ Reusable save/cancel buttons for new config editors

2021-10-26 17:01:36 +01:00 · 2021-10-26 17:01:36 +01:00 · 6bdc4fe313
parent 70ebce4da7
commit 6bdc4fe313
10 changed files with 131 additions and 82 deletions
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@ -217,7 +217,16 @@
      "cancel-stage-btn": "Cancel"
    },
    "edit-section": {
-      "edit-tooltip": "Click to Edit, or right-click for more options"
+      "edit-section-title": "Edit Section",
+      "edit-tooltip": "Click to Edit, or right-click for more options",
+      "remove-confirm": "Are you sure you want to remove this section? This action can be undone later."
+    },
+    "edit-app-config": {
+      "warning-msg-title": "Proceed with Caution",
+      "warning-msg-l1": "The following options are for advanced app configuration.",
+      "warning-msg-l2": "If you are unsure about any of the fields, please reference the",
+      "warning-msg-docs": "documentation",
+      "warning-msg-l3": "to avoid unintended consequences."
    },
    "export": {
      "export-title": "Export Config",
--- 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>
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@ -33,7 +33,7 @@
      <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openItemSettings()" />
    </a>
    <ContextMenu
-      :show="contextMenuOpen"
+      :show="contextMenuOpen && !isAddNew"
      v-click-outside="closeContextMenu"
      :posX="contextPos.posX"
      :posY="contextPos.posY"
@ -86,14 +86,14 @@ export default {
      type: String,
      validator: targetValidator,
    },
-    itemSize: String,
-    enableStatusCheck: Boolean,
-    statusCheckHeaders: Object,
-    statusCheckUrl: String,
-    statusCheckInterval: Number,
-    statusCheckAllowInsecure: Boolean,
-    parentSectionTitle: String,
-    isAddNew: Boolean,
+    itemSize: String, // Item size: small | medium | large
+    enableStatusCheck: Boolean, // Should run status checks
+    statusCheckHeaders: Object, // Custom status check headers
+    statusCheckUrl: String, // Custom URL for status check endpoint
+    statusCheckInterval: Number, // Num seconds beteween repeating checks
+    statusCheckAllowInsecure: Boolean, // Status check ignore SSL certs
+    parentSectionTitle: String, // Title of parent section (for add new)
+    isAddNew: Boolean, // Only set if 'fake' item used as Add New button
  },
  components: {
    Icon,
--- a/src/components/LinkItems/ItemContextMenu.vue
+++ b/src/components/LinkItems/ItemContextMenu.vue
@ -5,41 +5,41 @@
      <!-- Open Options -->
      <ul class="menu-section">
        <li class="section-title">
-          {{ $t('menu.open-section-title') }}
+          {{ $t('context-menus.item.open-section-title') }}
        </li>
        <li @click="launch('sametab')">
          <SameTabOpenIcon />
-          <span>{{ $t('menu.sametab') }}</span>
+          <span>{{ $t('context-menus.item.sametab') }}</span>
        </li>
        <li @click="launch('newtab')">
          <NewTabOpenIcon />
-          <span>{{ $t('menu.newtab') }}</span>
+          <span>{{ $t('context-menus.item.newtab') }}</span>
        </li>
        <li @click="launch('modal')">
          <IframeOpenIcon />
-          <span>{{ $t('menu.modal') }}</span>
+          <span>{{ $t('context-menus.item.modal') }}</span>
        </li>
        <li @click="launch('workspace')">
          <WorkspaceOpenIcon />
-          <span>{{ $t('menu.workspace') }}</span>
+          <span>{{ $t('context-menus.item.workspace') }}</span>
        </li>
      </ul>
      <!-- Edit Options -->
      <ul class="menu-section">
        <li class="section-title">
-          {{ $t('menu.options-section-title') }}
+          {{ $t('context-menus.item.options-section-title') }}
        </li>
        <li @click="openSettings()">
          <EditIcon />
-          <span>{{ $t('menu.edit-item') }}</span>
+          <span>{{ $t('context-menus.item.edit-item') }}</span>
        </li>
        <li v-if="isEditMode" @click="openMoveMenu()">
          <MoveIcon />
-          <span>{{ $t('menu.move-item') }}</span>
+          <span>{{ $t('context-menus.item.move-item') }}</span>
        </li>
        <li v-if="isEditMode" @click="openDeleteItem()">
          <BinIcon />
-          <span>{{ $t('menu.remove-item') }}</span>
+          <span>{{ $t('context-menus.item.remove-item') }}</span>
        </li>
      </ul>
    </div>
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@ -238,8 +238,12 @@ export default {
    },
    /* Deletes current section, in local state */
    removeSection() {
-      const payload = { sectionIndex: this.index, sectionName: this.title };
-      this.$store.commit(StoreKeys.REMOVE_SECTION, payload);
+      const confirmMsg = this.$t('interactive-editor.edit-section.remove-confirm');
+      const youSure = confirm(confirmMsg); // eslint-disable-line no-alert, no-restricted-globals
+      if (youSure) {
+        const payload = { sectionIndex: this.index, sectionName: this.title };
+        this.$store.commit(StoreKeys.REMOVE_SECTION, payload);
+      }
      this.closeContextMenu();
    },
    /* Open custom context menu, and set position */