🚧 Lays ground-work for the Edit Item modal form

src/components/InteractiveEditor/EditItem.vue

@@ -0,0 +1,44 @@
+<template>
+  <modal
+    :name="modalName"
+    :resizable="true"
+    width="55%"
+    height="80%"
+    classes="dashy-modal edit-item"
+    @closed="modalClosed"
+  >
+  <span>Item Editor</span>
+  <input />
+  </modal>
+</template>
+
+<script>
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+
+export default {
+  name: 'EditItem',
+  data() {
+    return {
+      modalName: modalNames.EDIT_ITEM,
+    };
+  },
+  props: {},
+  computed: {},
+  components: {},
+  mounted() {
+    this.$modal.show(modalNames.EDIT_ITEM);
+  },
+  methods: {
+    modalClosed() {
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+
+</style>

src/components/InteractiveEditor/EditSection.vue

@@ -0,0 +1,23 @@
+<template>
+  <span>Item Editor</span>
+</template>
+
+<script>
+
+export default {
+  name: 'EditSection',
+  data() {
+    return {};
+  },
+  props: {},
+  computed: {},
+  components: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+
+</style>

src/components/LinkItems/ContextMenu.vue

@@ -1,8 +1,9 @@
 <template>
   <transition name="slide">
-    <div class="context-menu" v-if="show && !isMenuDisabled()"
+    <div class="context-menu" v-if="show && !isMenuDisabled"
       :style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
-      <ul>
+      <ul class="menu-section">
+        <li class="section-title">Open In</li>
         <li @click="launch('sametab')">
           <SameTabOpenIcon />
           <span>{{ $t('menu.sametab') }}</span>
@@ -20,12 +21,20 @@
           <span>{{ $t('menu.workspace') }}</span>
         </li>
       </ul>
+      <ul class="menu-section">
+        <li class="section-title">Options</li>
+        <li @click="openSettings()">
+          <EditIcon />
+          <span>Edit</span>
+        </li>
+      </ul>
     </div>
   </transition>
 </template>
 
 <script>
 // Import icons for each element
+import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
 import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg';
 import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
@@ -34,6 +43,7 @@ import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg';
 export default {
   name: 'ContextMenu',
   components: {
+    EditIcon,
     SameTabOpenIcon,
     NewTabOpenIcon,
     IframeOpenIcon,
@@ -45,19 +55,18 @@ export default {
     show: Boolean, // Should show or hide the menu
   },
   computed: {
-    appConfig() {
-      return this.$store.getters.appConfig;
+    isMenuDisabled() {
+      return !!this.$store.getters.appConfig.disableContextMenu;
     },
   },
   methods: {
     /* Called on item click, emits an event up to Item */
     /* in order to launch the current app to a given target */
     launch(target) {
-      this.$emit('contextItemClick', target);
+      this.$emit('launchItem', target);
     },
-    /* Checks if the user as disabled context menu in config */
-    isMenuDisabled() {
-      return !!this.appConfig.disableContextMenu;
+    openSettings() {
+      this.$emit('openItemSettings');
     },
   },
 };
@@ -77,10 +86,13 @@ div.context-menu {
   box-shadow: var(--context-menu-shadow);
   opacity: 0.98;
 
-  ul {
+  ul.menu-section {
     list-style-type: none;
     margin: 0;
     padding: 0;
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--context-menu-color);
+    }
     li {
       cursor: pointer;
       padding: 0.5rem 1rem;
@@ -90,9 +102,14 @@ div.context-menu {
       &:not(:last-child) {
         border-bottom: 1px solid var(--context-menu-secondary-color);
       }
-      &:hover {
+      &:hover:not(.section-title) {
         background: var(--context-menu-secondary-color);
       }
+      &.section-title {
+        cursor: default;
+        font-weight: bold;
+        justify-content: center;
+      }
       svg {
         width: 1rem;
          margin-right: 0.5rem;

src/components/LinkItems/Item.vue

@@ -37,8 +37,10 @@
       :posX="contextPos.posX"
       :posY="contextPos.posY"
       :id="`context-menu-${id}`"
-      @contextItemClick="contextItemClick"
+      @launchItem="launchItem"
+      @openItemSettings="openItemSettings"
     />
+    <EditItem v-if="editMenuOpen" />
   </div>
 </template>
 
@@ -48,8 +50,10 @@ import router from '@/router';
 import Icon from '@/components/LinkItems/ItemIcon.vue';
 import ItemOpenMethodIcon from '@/components/LinkItems/ItemOpenMethodIcon';
 import StatusIndicator from '@/components/LinkItems/StatusIndicator';
+import EditItem from '@/components/InteractiveEditor/EditItem';
 import ContextMenu from '@/components/LinkItems/ContextMenu';
-import { localStorageKeys, serviceEndpoints } from '@/utils/defaults';
+import StoreKeys from '@/utils/StoreMutations';
+import { localStorageKeys, serviceEndpoints, modalNames } from '@/utils/defaults';
 
 export default {
   name: 'Item',
@@ -94,6 +98,7 @@ export default {
         posX: undefined,
         posY: undefined,
       },
+      editMenuOpen: false,
     };
   },
   components: {
@@ -101,6 +106,7 @@ export default {
     ItemOpenMethodIcon,
     StatusIndicator,
     ContextMenu,
+    EditItem,
   },
   methods: {
     /* Called when an item is clicked, manages the opening of modal & resets the search field */
@@ -194,7 +200,7 @@ export default {
         });
     },
     /* Handle navigation options from the context menu */
-    contextItemClick(method) {
+    launchItem(method) {
       const { url } = this;
       this.contextMenuOpen = false;
       switch (method) {
@@ -213,6 +219,13 @@ export default {
         default: window.open(url, '_blank');
       }
     },
+    /* Open the Edit Item moal form */
+    openItemSettings() {
+      this.editMenuOpen = true;
+      this.contextMenuOpen = false;
+      this.$modal.show(modalNames.EDIT_ITEM);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
     /* Used for smart-sort when sorting items by most used apps */
     incrementMostUsedCount(itemId) {
       const mostUsed = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}');

src/utils/defaults.js

@@ -119,11 +119,10 @@ module.exports = {
   /* Unique IDs of modals within the app */
   modalNames: {
     CONF_EDITOR: 'CONF_EDITOR',
-    CLOUD_BACKUP: 'CLOUD_BACKUP',
     REBUILD_APP: 'REBUILD_APP',
-    THEME_MAKER: 'THEME_MAKER',
     ABOUT_APP: 'ABOUT_APP',
     LANG_SWITCHER: 'LANG_SWITCHER',
+    EDIT_ITEM: 'EDIT_ITEM',
   },
   /* Key names for the top-level objects in conf.yml */
   topLevelConfKeys: {