⚡ Reusable save/cancel buttons for new config editors

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",

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>

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);

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,

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() {

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

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>

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,

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>

src/components/LinkItems/Section.vue

@@ -238,8 +238,12 @@ export default {
     },
     /* Deletes current section, in local state */
     removeSection() {
+      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 */