Improves on the ifram modal functionality

src/components/IframeModal.vue

@@ -1,7 +1,8 @@
 <template>
-  <modal name="iframe-modal" :resizable="true"
-    :adaptive="true" width="80%" height="80%">
-    <iframe :src="url" class="frame" />
+  <modal :name="name" :resizable="true" width="80%" height="80%" @closed="$emit('closed')">
+    <div slot="top-right" @click="hide()">Close</div>
+    <a @click="hide()" class="close-button" title="Close">x</a>
+    <iframe :src="url" @keydown.esc="close" class="frame"/>
   </modal>
 </template>
 
@@ -9,17 +10,24 @@
 export default {
   name: 'IframeModal',
   props: {
-    url: String,
+    name: String,
   },
+  data: () => ({
+    url: '#',
+  }),
   methods: {
-    show: function show() {
-      this.$modal.show('iframe-modal');
+    show: function show(url) {
+      this.url = url;
+      this.$modal.show(this.name);
+    },
+    hide: function hide() {
+      this.$modal.hide(this.name);
     },
   },
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 
 .frame {
   width: 100%;
@@ -27,4 +35,23 @@ export default {
   border: none;
 }
 
+.close-button {
+  position: absolute;
+  right: 0;
+  padding: 0.5rem;
+  border: 0;
+  border-radius: 0 0 0 10px;
+  background: var(--primary);
+  color: var(--background);
+  border-left: 1px solid var(--primary);
+  border-bottom: 1px solid var(--primary);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--background);
+    color: var(--primary);
+  }
+
+}
+
 </style>

src/components/Item.vue

@@ -1,32 +1,30 @@
-<template>
-  <a
-    :href="target !== 'iframe' ? url : '#'"
-    v-on:click="itemOpened()"
-    :class="`item ${!icon? 'short': ''}`"
-    v-tooltip="getTooltipOptions()"
-    :target="target === 'newtab' ? '_blank' : ''"
-    rel="noopener noreferrer"
-    tabindex="0"
-  >
-    <!-- Item Text -->
-    <div class="tile-title" :id="`tile-${id}`">
-      <span class="text">{{ title }}</span>
-      <div class="overflow-dots">...</div>
-    </div>
-    <!-- Item Icon -->
-    <Icon :icon="icon" :url="url" />
-    <div :class="`opening-method-icon  ${!icon? 'short': ''}`">
-      <NewTabOpenIcon v-if="target === 'newtab'" />
-      <SameTabOpenIcon v-else-if="target === 'sametab'" />
-      <IframeOpenIcon v-else-if="target === 'iframe'" />
-    </div>
-    <IframeModal v-if="target === 'iframe'" :url="url" ref="iframeModal"/>
-  </a>
+<template ref="container">
+    <a @click="itemOpened"
+      :href="target !== 'iframe' ? url : '#'"
+      :target="target === 'newtab' ? '_blank' : ''"
+      :class="`item ${!icon? 'short': ''}`"
+      :id="`link-${id}`"
+      v-tooltip="getTooltipOptions()"
+      rel="noopener noreferrer"
+      tabindex="0"
+    >
+      <!-- Item Text -->
+      <div class="tile-title" :id="`tile-${id}`">
+        <span class="text">{{ title }}</span>
+        <div class="overflow-dots">...</div>
+      </div>
+      <!-- Item Icon -->
+      <Icon :icon="icon" :url="url" />
+      <div :class="`opening-method-icon  ${!icon? 'short': ''}`">
+        <NewTabOpenIcon v-if="target === 'newtab'" />
+        <SameTabOpenIcon v-else-if="target === 'sametab'" />
+        <IframeOpenIcon v-else-if="target === 'iframe'" />
+      </div>
+    </a>
 </template>
 
 <script>
 import Icon from '@/components/ItemIcon.vue';
-import IframeModal from '@/components/IframeModal.vue';
 
 import NewTabOpenIcon from '@/assets/icons/open-new-tab.svg';
 import SameTabOpenIcon from '@/assets/icons/open-current-tab.svg';
@@ -59,14 +57,15 @@ export default {
     NewTabOpenIcon,
     SameTabOpenIcon,
     IframeOpenIcon,
-    IframeModal,
   },
   methods: {
-    /* Called when an item is opened, so that search field can be reset */
-    itemOpened() {
-      this.$emit('itemClicked');
-      if (this.target === 'iframe') {
-        this.$refs.iframeModal.show();
+    /* Called when an item is clicked, manages the opening of iframe & resets the search field */
+    itemOpened(e) {
+      if (e.altKey || this.target === 'iframe') {
+        e.preventDefault();
+        this.$emit('triggerModal', this.url);
+      } else {
+        this.$emit('itemClicked');
       }
     },
     /**
@@ -103,6 +102,10 @@ export default {
 @import '../../src/styles/constants.scss';
 
 /* Item wrapper */
+.item-wrapper {
+
+}
+
 .item {
   flex-grow: 1;
   height: 100px;
@@ -128,6 +131,9 @@ export default {
   &.short {
     height: 18px;
   }
+  .item {
+    color: var(--primary);
+  }
 }
 
 /* Text in tile */
@@ -160,8 +166,8 @@ export default {
     .overflow-dots {
       display: block;
       opacity: 1;
-      background: black;
-      // background: $overflow-ellipse;
+      // background: var(--background-transparent);
+      background: #283e51;
       position: absolute;
       z-index: 5;
       right: 0;
@@ -256,4 +262,8 @@ export default {
   z-index: 3;
 }
 
+.disabled-link {
+  pointer-events: none;
+}
+
 </style>

src/components/ItemGroup.vue

@@ -23,14 +23,22 @@
         :target="item.target"
         :svg="item.svg"
         @itemClicked="$emit('itemClicked')"
+        @triggerModal="triggerModal"
       />
+      <div ref="modalContainer"></div>
     </div>
+    <IframeModal
+      :ref="`iframeModal-${groupId}`"
+      :name="`iframeModal-${groupId}`"
+      @closed="$emit('itemClicked')"
+    />
   </Collapsable>
 </template>
 
 <script>
 import Item from '@/components/Item.vue';
 import Collapsable from '@/components/Collapsable.vue';
+import IframeModal from '@/components/IframeModal.vue';
 
 export default {
   name: 'ItemGroup',
@@ -43,11 +51,17 @@ export default {
   components: {
     Collapsable,
     Item,
+    IframeModal,
   },
   methods: {
+    /* Returns a unique lowercase string, based on name, for section ID */
     makeId(str) {
       return str.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
     },
+    /* Opens the iframe modal */
+    triggerModal(url) {
+      this.$refs[`iframeModal-${this.groupId}`].show(url);
+    },
   },
 };
 </script>

src/data/conf.yml

@@ -21,12 +21,12 @@ sections:
     description: Malicious traffic detection system
     icon: networking/maltrail.png
     iconType: img
-    url: 192.168.1.1:8338
+    url: http://192.168.1.1:8338
   - title: Ntopng
     description: Network traffic probe and network use monitor
     icon: networking/ntop.png
     iconType: img
-    url: 192.168.1.1:3001
+    url: http://192.168.1.1:3001
   - title: Sensei
     description: Additional data features
     icon: networking/sensei.png
@@ -143,7 +143,7 @@ sections:
   - title: Switch
     description: Manage VLANs on Ubiquity Ethernet switch
     icon: ''
-    url: "/"
+    url: "#"
 - name: External Utilities
   displayData:
     collapsed: true