Merge branch 'master' of github.com:Lissy93/dashy into FEATURE/minimal-view

src/components/LinkItems/ContextMenu.vue

@@ -5,19 +5,19 @@
       <ul>
         <li @click="launch('sametab')">
           <SameTabOpenIcon />
-          <span>Open in Current Tab</span>
+          <span>{{ $t('menu.sametab') }}</span>
         </li>
         <li @click="launch('newtab')">
           <NewTabOpenIcon />
-          <span>Open in New Tab</span>
+          <span>{{ $t('menu.newtab') }}</span>
         </li>
         <li @click="launch('modal')">
           <IframeOpenIcon />
-          <span>Open in Pop-Up Modal</span>
+          <span>{{ $t('menu.modal') }}</span>
         </li>
         <li @click="launch('workspace')">
           <WorkspaceOpenIcon />
-          <span>Open in Workspace View</span>
+          <span>{{ $t('menu.workspace') }}</span>
         </li>
       </ul>
     </div>

src/components/LinkItems/Item.vue

@@ -3,7 +3,7 @@
     <a @click="itemOpened"
       @mouseup.right="openContextMenu"
       @contextmenu.prevent
-      :href="target !== 'modal' ? url : '#'"
+      :href="(target !== 'modal' && target !== 'workspace') ? url : '#'"
       :target="target === 'newtab' ? '_blank' : ''"
       :class="`item ${!icon? 'short': ''} size-${itemSize}`"
       v-tooltip="getTooltipOptions()"
@@ -100,6 +100,8 @@ export default {
       if (e.altKey || this.target === 'modal') {
         e.preventDefault();
         this.$emit('triggerModal', this.url);
+      } else if (this.target === 'workspace') {
+        router.push({ name: 'workspace', query: { url: this.url } });
       } else {
         this.$emit('itemClicked');
       }

src/components/LinkItems/ItemIcon.vue

@@ -1,10 +1,19 @@
 <template>
   <div class="item-icon">
+    <!-- Font-Awesome Icon -->
     <i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
+    <!-- Emoji Icon -->
     <i v-else-if="iconType === 'emoji'" :class="`emoji-icon ${size}`" >{{getEmoji(iconPath)}}</i>
+    <!-- Material Design Icon -->
+    <span v-else-if="iconType === 'mdi'"  :class=" `mdi ${icon} ${size}`"></span>
+    <!-- Simple-Icons -->
+    <object v-else-if="iconType === 'si'" :class="`simple-icons ${size}`"
+      type="image/svg+xml" :data="getSimpleIcon(icon)"></object>
+    <!-- Standard image asset icon -->
     <img v-else-if="icon" :src="iconPath" @error="imageNotFound"
       :class="`tile-icon ${size} ${broken ? 'broken' : ''}`"
     />
+    <!-- Icon could not load/ broken url -->
     <BrokenImage v-if="broken" class="missing-image" />
   </div>
 </template>
@@ -12,7 +21,7 @@
 <script>
 import BrokenImage from '@/assets/interface-icons/broken-icon.svg';
 import ErrorHandler from '@/utils/ErrorHandler';
-import { faviconApi as defaultFaviconApi, faviconApiEndpoints } from '@/utils/defaults';
+import { faviconApi as defaultFaviconApi, faviconApiEndpoints, iconCdns } from '@/utils/defaults';
 import EmojiUnicodeRegex from '@/utils/EmojiUnicodeRegex';
 import emojiLookup from '@/utils/emojis.json';
 
@@ -28,17 +37,18 @@ export default {
     BrokenImage,
   },
   computed: {
+    /* Determines the type of icon */
     iconType: function iconType() {
       return this.determineImageType(this.icon);
     },
+    /* Gets the icon path, dependent on icon type */
     iconPath: function iconPath() {
       return this.getIconPath(this.icon, this.url);
     },
   },
   data() {
     return {
-      broken: false,
-      // faviconApi: this.config.appConfig.faviconApi || defaultFaviconApi,
+      broken: false, // If true, was unable to resolve icon
     };
   },
   methods: {
@@ -80,7 +90,7 @@ export default {
     getFavicon(fullUrl) {
       if (this.shouldUseDefaultFavicon(fullUrl)) { // Check if we should use local icon
         const urlParts = fullUrl.split('/');
-        if (urlParts.length >= 2) return `${urlParts[0]}/${urlParts[1]}/${urlParts[2]}/favicon.ico`;
+        if (urlParts.length >= 2) return `${urlParts[0]}/${urlParts[1]}/${urlParts[2]}/${iconCdns.faviconName}`;
       } else if (fullUrl.includes('http')) { // Service is running publicly
         const host = this.getHostName(fullUrl);
         const faviconApi = this.config.appConfig.faviconApi || defaultFaviconApi;
@@ -95,11 +105,18 @@ export default {
       const isLocalIP = /(127\.)|(192\.168\.)|(10\.)|(172\.1[6-9]\.)|(172\.2[0-9]\.)|(172\.3[0-1]\.)|(::1$)|([fF][cCdD])|(localhost)/;
       return (isLocalIP.test(fullUrl) || this.config.appConfig.faviconApi === 'local');
     },
+    /* Fetches the path of local images, from Docker container */
     getLocalImagePath(img) {
-      return `/item-icons/${img}`;
+      return `${iconCdns.localPath}/${img}`;
     },
+    /* Formats the URL for fetching the generative icons */
     getGenerativeIcon(url) {
-      return `https://ipsicon.io/${this.getHostName(url)}.svg`;
+      return `${iconCdns.generative}/${this.getHostName(url)}.svg`;
+    },
+    /* Formats the URL for getting Simple-Icons SVG asset */
+    getSimpleIcon(img) {
+      const imageName = img.replace('si-', '');
+      return `${iconCdns.si}/${imageName}.svg`;
     },
     /* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
     getIconPath(img, url) {
@@ -108,8 +125,10 @@ export default {
         case 'img': return this.getLocalImagePath(img);
         case 'favicon': return this.getFavicon(url);
         case 'generative': return this.getGenerativeIcon(url);
-        case 'svg': return img;
-        case 'emoji': return img;
+        case 'mdi': return img; // Material design icons
+        case 'simple-icons': return this.getSimpleIcon(img);
+        case 'svg': return img; // Local SVG icon
+        case 'emoji': return img; // Emoji/ unicode
         default: return '';
       }
     },
@@ -121,12 +140,15 @@ export default {
       else if (this.isUrl(img)) imgType = 'url';
       else if (this.isImage(img)) imgType = 'img';
       else if (img.includes('fa-')) imgType = 'font-awesome';
+      else if (img.includes('mdi-')) imgType = 'mdi';
+      else if (img.includes('si-')) imgType = 'si';
       else if (img === 'favicon') imgType = 'favicon';
       else if (img === 'generative') imgType = 'generative';
       else if (this.isEmoji(img).isEmoji) imgType = 'emoji';
       else imgType = 'none';
       return imgType;
     },
+    /* For a given URL, return the hostname only. Used for favicon and generative icons */
     getHostName(url) {
       try { return new URL(url).hostname; } catch (e) { return url; }
     },
@@ -140,6 +162,7 @@ export default {
 </script>
 
 <style lang="scss">
+  /* Default Image Icon */
   .tile-icon {
       width: 2rem;
       // filter: var(--item-icon-transform);
@@ -152,7 +175,8 @@ export default {
         width: 3rem;
       }
   }
-  i.fas, i.fab, i.far, i.fal, i.fad {
+  /* Font-Awesome and Material Design Icons */
+  i.fas, i.fab, i.far, i.fal, i.fad, span.mdi {
     font-size: 2rem;
     color: currentColor;
     margin: 1px 4px;
@@ -163,6 +187,9 @@ export default {
       font-size: 2.5rem;
     }
   }
+  span.mdi {
+    font-size: 2.5rem;
+  }
   object.tile-icon {
     width: 55px;
     height: 55px;
@@ -170,6 +197,13 @@ export default {
       fill: currentColor;
     }
   }
+  /* Simple Icons */
+  object.simple-icons {
+    width: 2rem;
+    &.small { width: 1.5rem; }
+    &.large { width: 2.5rem; }
+  }
+  /* Emoji Icons */
   i.emoji-icon {
     font-style: normal;
     font-size: 2rem;
@@ -181,6 +215,7 @@ export default {
       font-size: 2.5rem;
     }
   }
+  /* Icon Not Found */
   .missing-image {
     width: 3.5rem;
     path {

src/components/Workspace/MultiTaskingWebComtent.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="multi-taking-view" ref="container"></div>
+</template>
+
+<script>
+import Vue from 'vue';
+import WebContent from '@/components/Workspace/WebContent';
+
+export default {
+  name: 'WebContent',
+  props: {
+    url: String, // The URL of currently visible app
+  },
+  data: () => ({
+    openApps: [], // List of all currently open apps
+  }),
+  watch: {
+    /* Update the currently open app, when URL changes */
+    url() { this.launchApp(); },
+  },
+  methods: {
+    /* Check if app already open or not, and call appropriate opener */
+    launchApp() {
+      if (this.openApps.includes(this.url)) {
+        this.openExistingApp();
+      } else {
+        this.openApps.push(this.url);
+        this.appendNewApp();
+      }
+    },
+    /* Opens a new app */
+    appendNewApp() {
+      const ComponentClass = Vue.extend(WebContent);
+      const instance = new ComponentClass({
+        propsData: { url: this.url, id: btoa(this.url) },
+      });
+      instance.$mount(); // pass nothing
+      this.$refs.container.appendChild(instance.$el);
+    },
+    /* Switches visibility to an already open app */
+    openExistingApp() {
+      Array.from(document.getElementsByClassName('web-content')).forEach((frame) => {
+        frame.classList.add('hide');
+      });
+      document.getElementById(btoa(this.url)).classList.remove('hide');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+iframe {
+  position: absolute;
+  left: var(--side-bar-width);
+  height: calc(100% - var(--header-height));
+  width: calc(100% - var(--side-bar-width));
+  border: none;
+  background: white;
+}
+
+</style>

src/components/Workspace/SideBarItem.vue

@@ -44,8 +44,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/media-queries.scss';
-@import '@/styles/style-helpers.scss';
 
 div.side-bar-item {
   color: var(--side-bar-color);
@@ -56,8 +54,10 @@ div.side-bar-item {
     border: none;
     box-shadow: none;
     p.small-title {
-      margin: 0.1rem auto;
+      margin: 0.1rem 0 0 -0.5rem;
       font-size: 0.6rem;
+      transform: rotate(-25deg);
+      padding: 0.5rem 0;
     }
   }
 }

src/components/Workspace/WebContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="web-content">
+  <div class="web-content" :id="id">
     <iframe :src="url" />
   </div>
 </template>
@@ -10,13 +10,15 @@ export default {
   name: 'WebContent',
   props: {
     url: String,
+    id: {
+      type: String,
+      default: 'web-app-view',
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/media-queries.scss';
-@import '@/styles/style-helpers.scss';
 
 iframe {
   position: absolute;
@@ -27,4 +29,8 @@ iframe {
   background: white;
 }
 
+.web-content.hide {
+  display: none;
+}
+
 </style>