🔁 Merge pull request #541 from Ateroz/fix-context-menu-mobile

🐛 Fix context menu on mobile/touch devices
Fixes #508

src/components/LinkItems/Collapsable.vue

@@ -17,6 +17,8 @@
       <h3>{{ title }}</h3>
       <EditModeIcon v-if="isEditMode" @click="openEditModal"
         v-tooltip="editTooltip()" class="edit-mode-item" />
+      <OpenIcon @click.prevent.stop="openContextMenu" @contextmenu.prevent
+        class="edit-mode-item" />
     </label>
     <div class="collapsible-content">
       <div class="content-inner">
@@ -31,6 +33,7 @@
 import { localStorageKeys } from '@/utils/defaults';
 import Icon from '@/components/LinkItems/ItemIcon.vue';
 import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
+import OpenIcon from '@/assets/interface-icons/config-open-settings.svg';
 
 export default {
   name: 'CollapsableContainer',
@@ -48,6 +51,7 @@ export default {
   components: {
     Icon,
     EditModeIcon,
+    OpenIcon,
   },
   computed: {
     isEditMode() {
@@ -244,6 +248,8 @@ export default {
     float: right;
     right: 0.5rem;
     top: 0.5rem;
+    margin-left: 0.2rem;
+    margin-right: 0.2rem;
   }
 
   /* Makes sections fill available space */

src/components/LinkItems/SectionContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="slide">
     <div class="context-menu" v-if="show && !isMenuDisabled"
-      :style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
+      :style="posX && posY ? calcPosition() : ''">
       <!-- Open Options -->
       <ul class="menu-section">
         <li @click="openSection()">
@@ -59,6 +59,13 @@ export default {
     removeSection() {
       this.$emit('removeSection');
     },
+    calcPosition() {
+      const bounds = this.$parent.$el.getBoundingClientRect();
+      const left = this.posX < (bounds.right + bounds.left) / 2;
+      const position = `top:${this.posY}px;${left ? 'left' : 'right'}:\
+        ${left ? this.posX : document.documentElement.clientWidth - this.posX}px;`;
+      return position;
+    },
   },
 };
 </script>