🔀 Merge pull request #146 from Lissy93/FEATURE/multi-tasking-support

[FEATURE] Multi-Tasking Support in Workspace View
Closes #144

.github/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## ✨ 1.5.8 - Multi-Tasking Support in Workspace View [PR #146](https://github.com/Lissy93/dashy/pull/146)
+- Adds option to keep launched apps open in the background, to reduce friction when switching between websites, Re: #144
+- This can be enabled by setting `appConfig.enableMultiTasking: true`
+- Note that having many apps opened simultaneously, will have an impact on performance
+
 ## ✨ 1.5.7 - Adds Support for Material Design Icons [PR #141](https://github.com/Lissy93/dashy/pull/141)
 - Enables user to use any icon from [materialdesignicons.com](https://dev.materialdesignicons.com/icons), Re: #139
 - Also adds support for [simpleicons.org](https://simpleicons.org/)

docs/configuring.md

@@ -72,6 +72,7 @@ To disallow any changes from being written to disk via the UI config editor, set
 **`externalStyleSheet`** | `string`  or `string[]` | _Optional_ | Either a URL to an external stylesheet or an array or URLs, which can be applied as themes within the UI
 **`customCss`** | `string` | _Optional_ | Raw CSS that will be applied to the page. This can also be set from the UI. Please minify it first.
 **`hideComponents`** | `object` | _Optional_ | A list of key page components (header, footer, search, settings, etc) that are present by default, but can be removed using this option. See [`appConfig.hideComponents`](#appconfighideComponents-optional)
+**`enableMultiTasking`** | `boolean` | _Optional_ | If set to true, will keep apps open in the background when in the workspace view. Useful for quickly switching between multiple sites, and preserving their state, but comes at the cost of performance.
 **`allowConfigEdit`** | `boolean` | _Optional_ | Should prevent / allow the user to write configuration changes to the conf.yml from the UI. When set to `false`, the user can only apply changes locally using the config editor within the app, whereas if set to `true` then changes can be written to disk directly through the UI. Defaults to `true`. Note that if authentication is enabled, the user must be of type `admin` in order to apply changes globally.
 **`enableErrorReporting`** | `boolean` | _Optional_ | Enable reporting of unexpected errors and crashes. This is off by default, and **no data will ever be captured unless you explicitly enable it**. Turning on error reporting helps previously unknown bugs get discovered and fixed. Dashy uses [Sentry](https://github.com/getsentry/sentry) for error reporting. Defaults to `false`.
 **`sentryDsn`** | `boolean` | _Optional_ | If you need to monitor errors in your instance, then you can use Sentry to collect and process bug reports. Sentry can be self-hosted, or used as SaaS, once your instance is setup, then all you need to do is pass in the DSN here, and enable error reporting. You can learn more on the [Sentry DSN Docs](https://docs.sentry.io/product/sentry-basics/dsn-explainer/). Note that this will only ever be used if `enableErrorReporting` is explicitly enabled.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "license": "MIT",
   "main": "server",
   "scripts": {

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>

src/utils/ConfigSchema.json

@@ -239,6 +239,11 @@
             }
           }
         },
+        "enableMultiTasking": {
+          "type": "boolean",
+          "default": false,
+          "description": "If set to true, will keep apps opened in the workspace open in the background. Useful for switching between sites, but comes at the cost of performance"
+        },
         "allowConfigEdit": {
           "type": "boolean",
           "default": true,

src/views/Workspace.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="work-space">
     <SideBar :sections="sections" @launch-app="launchApp" />
-    <WebContent :url="url" />
+    <WebContent :url="url" v-if="!isMultiTaskingEnabled" />
+    <MultiTaskingWebComtent :url="url" v-else />
   </div>
 </template>
 
 <script>
 
 import SideBar from '@/components/Workspace/SideBar';
 import WebContent from '@/components/Workspace/WebContent';
+import MultiTaskingWebComtent from '@/components/Workspace/MultiTaskingWebComtent';
 import Defaults from '@/utils/defaults';
 import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper';
 
@@ -24,9 +26,15 @@ export default {
     ApplyLocalTheme,
     ApplyCustomVariables,
   }),
+  computed: {
+    isMultiTaskingEnabled() {
+      return this.appConfig.enableMultiTasking || false;
+    },
+  },
   components: {
     SideBar,
     WebContent,
+    MultiTaskingWebComtent,
   },
   methods: {
     launchApp(url) {