[FEATURE] Opening methods, and context menu

README.md

@@ -9,10 +9,9 @@
 [![Awesome Self-Hosted](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/awesome-selfhosted/awesome-selfhosted#personal-dashboards)
 ![Docker Pulls](https://img.shields.io/docker/pulls/lissy93/dashy?logo=docker&style=flat-square)
 ![Stars](https://flat.badgen.net/github/stars/lissy93/dashy?icon=github)
-![Current Version](https://img.shields.io/github/package-json/v/lissy93/dashy?style=flat-square&logo=azurepipelines&color=00af87)
 ![GitHub Status](https://flat.badgen.net/github/status/lissy93/dashy?icon=github)
-![App Size](https://img.shields.io/github/languages/code-size/lissy93/dashy?style=flat-square)
-![Code Quality](https://app.codacy.com/project/badge/Grade/3be23a4a3a8a4689bd47745b201ecb74)
+![License MIT](https://img.shields.io/badge/License-MIT-09be48?style=flat-square&logo=opensourceinitiative)
+![Current Version](https://img.shields.io/github/package-json/v/lissy93/dashy?style=flat-square&logo=azurepipelines&color=00af87)
 
 ## Features 🌈
 
@@ -89,8 +88,6 @@ Dashy supports 1-Click deployments on several popular cloud platforms (with more
 - [Deploy with Vercel](https://vercel.com/new/project?template=https://github.com/lissy93/dashy)
 - [Deploy with PWD](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml)
 
-**[⬆️ Back to Top](#dashy)**
-
 #### Basic Commands
 
 The following commands can be run on Dashy. If you are using Docker, than precede each command with `docker exec -it [container-id]`, where container id can be found by running `docker ps`, e.g. `docker exec -it 92490c12baff yarn build`.
@@ -106,6 +103,8 @@ If you prefer [`NPM`](https://docs.npmjs.com), then just replace `yarn` with `np
 - `yarn test` - Runs tests, and outputs results
 - `yarn install` - Install all dependencies
 
+**[⬆️ Back to Top](#dashy)**
+
 ---
 
 ## Configuring 🔧
@@ -200,10 +199,39 @@ At present, access control is handled on the frontend, and therefore in security
 
 > For full monitoring documentation, see: [**Status Indicators**](./docs/status-indicators.md)
 
-Dashy has an optional feature that can display a small icon ([like this](./docs/assets/status-check-demo.gif)) next to each of your running services, indicating it's current status. This is useful if you are using Dashy as your homelab's start page, as it gives you an overview of the health of each of your running services. Hovering over the indicator will show additional information, including average response time and an error message for services which are down.
+Dashy has an optional feature that can display a small icon next to each of your running services, indicating it's current status. This is useful if you are using Dashy as your homelab's start page, as it gives you an overview of the health of each of your running services. Hovering over the indicator will show additional information, including average response time and an error message for services which are down.
 
 By default, this feature is off, but you can enable it globally by setting `appConfig.statusCheck: true`, or enable/ disable it for an individual item, with `item[n].statusCheck`. You can also specify an time interval in seconds under `appConfig.statusCheckInterval`, which will determine how often to recheck services, if this value is `0`, then status is only checked on initial page load, this is default behavior.
 
+<p align="center">
+  <img alt="Status Checks demo" src="/docs/assets/status-check-demo.gif" width="600">
+</p>
+
+**[⬆️ Back to Top](#dashy)**
+
+---
+
+## Opening Methods 🖱️
+
+One of the primary purposes of Dashy is to make launching commonly used apps and services as quick as possible. To aid in this, there are several different options on how items can be opened. You can configure your preference by setting the `target` property of any item, to one of the following values:
+- `sametab` - The app will be launched in the current tab
+- `newtab` - The app will be launched in a new tab
+- `modal` - Launch app in a resizable/ movable popup modal on the current page
+- `workspace` - Changes to Workspace view, and launches app
+
+Even if the target is not set (or is set to `sametab`), you can still launch any given app in an alternative method: Alt + Click will open the modal, and Ctrl + Click will open in a new tab. You can also right-click on any item to see all options (as seen in the screenshot below). This custom context menu can be disabled by setting `appConfig.disableContextMenu: true`.
+
+<p align="center">
+  <img width="500" src="https://i.ibb.co/vmZdSRt/dashy-context-menu-2.png" />
+</p>
+
+The modal and workspace views work by rendering the target application in an iframe. For this to work, the HTTP response header [`X-Frame-Options`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) for a given application needs to be set to `ALLOW`. If you are getting a `Refused to Connect` error then this header is set to `DENY` (or `SAMEORIGIN` and it's on a different host).
+
+Here's a quick demo of the workspace view:
+<p align="center">
+  <img alt="Workspace view demo" src="/docs/assets/workspace-demo.gif" width="600">
+</p>
+
 **[⬆️ Back to Top](#dashy)**
 
 ---
@@ -240,18 +268,12 @@ Before you submit your pull request, please ensure the following:
 - Your pull request will need to be up-to-date with master, and the PR template must be filled in
 
 ### Repo Status
-![Open Issues](https://flat.badgen.net/github/open-issues/lissy93/dashy?icon=github)
-![Closed Issues](https://flat.badgen.net/github/closed-issues/lissy93/dashy?icon=github)
+
 ![Open PRs](https://flat.badgen.net/github/open-prs/lissy93/dashy?icon=github)
 ![Total PRs](https://flat.badgen.net/github/prs/lissy93/dashy?icon=github)
 ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/lissy93/dashy?style=flat-square)
 ![Last Commit](https://flat.badgen.net/github/last-commit/lissy93/dashy?icon=github)
 ![Contributors](https://flat.badgen.net/github/contributors/lissy93/dashy?icon=github)
-![GitHub Status](https://flat.badgen.net/github/status/lissy93/dashy?icon=github)
-![Stars](https://flat.badgen.net/github/stars/lissy93/dashy?icon=github)
-![Docker Pulls](https://img.shields.io/docker/pulls/lissy93/dashy?logo=docker&style=flat-square)
-![Total Lines](https://img.shields.io/tokei/lines/github/lissy93/dashy?style=flat-square)
-![Maintenance](https://img.shields.io/maintenance/yes/2021?style=flat-square)
 
 **[⬆️ Back to Top](#dashy)**
 
@@ -268,6 +290,9 @@ If you've found a bug, or something that isn't working as you'd expect, please r
 - [Ask a Question 🤷‍♀️](https://github.com/Lissy93/dashy/issues/new?assignees=Lissy93&labels=%F0%9F%A4%B7%E2%80%8D%E2%99%82%EF%B8%8F+Question&template=question------.md&title=%5BQUESTION%5D)
 - [Share Feedback 🌈](https://github.com/Lissy93/dashy/issues/new?assignees=&labels=%F0%9F%8C%88+Feedback&template=share-feedback---.md&title=%5BFEEDBACK%5D)
 
+[**Issue Status**](https://isitmaintained.com/project/lissy93/dashy) ![Resolution Time](http://isitmaintained.com/badge/resolution/lissy93/dashy.svg)  ![Open Issues](http://isitmaintained.com/badge/open/lissy93/dashy.svg) ![Closed Issues](https://badgen.net/github/closed-issues/lissy93/dashy)
+
+
 For more general questions about any of the technologies used, [StackOverflow](https://stackoverflow.com/questions/) may be more helpful first port of info
 
  If you need to get in touch securely with the author (me, Alicia Sykes), drop me a message at:

docs/configuring.md

@@ -61,16 +61,17 @@ All fields are optional, unless otherwise stated.
 **`enableFontAwesome`** | `boolean` | _Optional_ | Where `true` is enabled, if left blank font-awesome will be enabled only if required by 1 or more icons
 **`fontAwesomeKey`** | `string` | _Optional_ | If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL  (e.g. `13014ae648`)
 **`faviconApi`** | `string` | _Optional_ | Which service to use to resolve favicons. Set to `local` to do this locally, without using an API. Available options are: `local`, `faviconkit`, `google`, `clearbit`, `webmasterapi` and `allesedv`. Defaults to `faviconkit`. See [Icons](/docs/icons.md#favicons) for more info
+**`auth`** | `array` | _Optional_ | An array of objects containing usernames and hashed passwords. If this is not provided, then authentication will be off by default, and you will not need any credentials to access the app. Note authentication is done on the client side, and so if your instance of Dashy is exposed to the internet, it is recommend to configure your web server to handle this. See [`auth`](#appconfigauth-optional)
 **`layout`** | `string` | _Optional_ | App layout, either `horizontal`, `vertical`, `auto` or `sidebar`. Defaults to `auto`. This specifies the layout and direction of how sections are positioned on the home screen. This can also be modified from the UI.
 **`iconSize`** | `string` | _Optional_ | The size of link items / icons. Can be either `small`, `medium,` or `large`. Defaults to `medium`. This can also be set directly from the UI.
 **`theme`** | `string` | _Optional_ | The default theme for first load (you can change this later from the UI)
 **`cssThemes`** | `string[]` | _Optional_ | An array of custom theme names which can be used in the theme switcher dropdown
 **`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.
 **`showSplashScreen`** | `boolean` | _Optional_ | Should display a splash screen while the app is loading. Defaults to false, except on first load
-**`auth`** | `array` | _Optional_ | An array of objects containing usernames and hashed passwords. If this is not provided, then authentication will be off by default, and you will not need any credentials to access the app. Note authentication is done on the client side, and so if your instance of Dashy is exposed to the internet, it is recommend to configure your web server to handle this. See [`auth`](#appconfigauth-optional)
 **`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.
 **`disableServiceWorker`** | `boolean` | _Optional_ | Service workers cache web applications to improve load times and offer basic offline functionality, and are enabled by default in Dashy. The service worker can sometimes cause older content to be cached, requiring the app to be hard-refreshed. If you do not want SW functionality, or are having issues with caching, set this property to `true` to disable all service workers.
+**`disableContextMenu`** | `boolean` | _Optional_ | If set to `true`, the custom right-click context menu will be disabled. Defaults to `false`.
 
 **[⬆️ Back to Top](#configuring)**
 
@@ -103,7 +104,7 @@ All fields are optional, unless otherwise stated.
 **`description`** | `string` | _Optional_ | Additional info about an item, which is shown in the tooltip on hover, or visible on large tiles
 **`url`** | `string` | Required | The URL / location of web address for when the item is clicked
 **`icon`** | `string` | _Optional_ | The icon for a given item. Can be a font-awesome icon, favicon, remote URL or local URL. See [`item.icon`](#sectionicon-and-sectionitemicon)
-**`target`** | `string` | _Optional_ | The opening method for when the item is clicked, either `newtab`, `sametab` or `iframe`. Where `newtab` will open the link in a new tab, `sametab` will open it in the current tab, and `iframe` will open a pop-up modal with the content displayed within that iframe. Note that for the iframe to load, you must have set the CORS headers to either allow `*` ot allow the domain that you are hosting Dashy on, for some websites and self-hosted services, this is already set.
+**`target`** | `string` | _Optional_ | The opening method for when the item is clicked, either `newtab`, `sametab`, `modal` or `workspace`. Where `newtab` will open the link in a new tab, `sametab` will open it in the current tab, and `modal` will open a pop-up modal with the content displayed within that iframe. Note that for the iframe to load, you must have set the CORS headers to either allow `*` ot allow the domain that you are hosting Dashy on, for some websites and self-hosted services, this is already set.
 **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping the URL associated with the current service, and display its status as a dot next to the item. The value here will override `appConfig.statusCheck` so you can turn off or on checks for a given service. Defaults to `appConfig.statusCheck`, falls back to `false`
 **`color`** | `string` | _Optional_ | An optional color for the text and font-awesome icon to be displayed in. Note that this will override the current theme and so may not display well
 **`backgroundColor`** | `string` | _Optional_ | An optional background fill color for the that given item. Again, this will override the current theme and so might not display well against the background

docs/theming.md

@@ -120,8 +120,9 @@ You can target specific elements on the UI with these variables. All are optiona
 - `--status-check-tooltip-color` - Text color for the status check tooltips. Defaults to `--primary`
 - `--code-editor-color` - Text color used within raw code editors. Defaults to `--black`
 - `--code-editor-background` - Background color for raw code editors. Defaults to `--white`
-
-
+- `--context-menu-color` - Text color for right-click context menu over items. Defaults to `--primary`
+- `--context-menu-background` - Background color of right-click context menu. Defaults to `--background`
+- `--context-menu-secondary-color` - Border and outline color for context menu. Defaults to `--background-darker`
 
 #### Non-Color Variables
 - `--outline-color` - Used to outline focused or selected elements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.2.5",
+  "version": "1.3.5",
   "license": "MIT",
   "main": "server",
   "scripts": {
@@ -86,4 +86,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

src/components/LinkItems/Collapsable.vue

@@ -42,11 +42,6 @@ export default {
   components: {
     Icon,
   },
-  data() {
-    return {
-      isOpen: !this.collapsed,
-    };
-  },
   methods: {
     /* Check that row & column span is valid, and not over the max */
     checkSpanNum(span, classPrefix) {

src/components/LinkItems/ContextMenu.vue

@@ -0,0 +1,116 @@
+<template>
+  <transition name="slide">
+    <div class="context-menu" v-if="show && menuEnabled"
+      :style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
+      <ul>
+        <li @click="launch('sametab')">
+          <SameTabOpenIcon />
+          <span>Open in Current Tab</span>
+        </li>
+        <li @click="launch('newtab')">
+          <NewTabOpenIcon />
+          <span>Open in New Tab</span>
+        </li>
+        <li @click="launch('modal')">
+          <IframeOpenIcon />
+          <span>Open in Pop-Up Modal</span>
+        </li>
+        <li @click="launch('workspace')">
+          <WorkspaceOpenIcon />
+          <span>Open in Workspace View</span>
+        </li>
+      </ul>
+    </div>
+  </transition>
+</template>
+
+<script>
+// Import icons for each element
+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';
+import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg';
+
+export default {
+  name: 'ContextMenu',
+  inject: ['config'],
+  components: {
+    SameTabOpenIcon,
+    NewTabOpenIcon,
+    IframeOpenIcon,
+    WorkspaceOpenIcon,
+  },
+  props: {
+    posX: Number, // The X coordinate for positioning
+    posY: Number, // The Y coordinate for positioning
+    show: Boolean, // Should show or hide the menu
+  },
+  data() {
+    return {
+      menuEnabled: !this.isMenuDisabled(), // Specifies if the context menu should be used
+    };
+  },
+  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);
+    },
+    /* Checks if the user as disabled context menu in config */
+    isMenuDisabled() {
+      if (this.config && this.config.appConfig) {
+        return !!this.config.appConfig.disableContextMenu;
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+div.context-menu {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  z-index: 8;
+  background: var(--context-menu-background);
+  color: var(--context-menu-color);
+  border: 1px solid var(--context-menu-secondary-color);
+  border-radius: var(--curve-factor);
+  box-shadow: var(--context-menu-shadow);
+  opacity: 0.98;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    li {
+      cursor: pointer;
+      padding: 0.5rem 1rem;
+      display: flex;
+      flex-direction: row;
+      font-size: 1rem;
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--context-menu-secondary-color);
+      }
+      &:hover {
+        background: var(--context-menu-secondary-color);
+      }
+      svg {
+        width: 1rem;
+         margin-right: 0.5rem;
+          path { fill: currentColor; }
+      }
+    }
+  }
+}
+
+// Define enter and leave transitions
+.slide-enter-active { animation: slide-in .1s; }
+.slide-leave-active { animation: slide-in .1s reverse; }
+@keyframes slide-in {
+  0% { transform: scaleY(0.5) scaleX(0.8) translateY(-50px); }
+  100% { transform: scaleY(1) translateY(0) translateY(0); }
+}
+</style>