From 5c3667003ad47e235e7a78cb785ce74eca0923a6 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 19 Jul 2021 21:52:12 +0100 Subject: [PATCH 1/8] :sparkles: Adds new helper function to handle item hotkeys --- src/utils/ConfigHelpers.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/utils/ConfigHelpers.js b/src/utils/ConfigHelpers.js index 97003b57..a1848b66 100644 --- a/src/utils/ConfigHelpers.js +++ b/src/utils/ConfigHelpers.js @@ -60,3 +60,17 @@ export const getCustomColors = () => { const configColors = config.appConfig.customColors || {}; return Object.assign(configColors, localColors); }; + +/** + * Returns a list of items which the user has assigned a hotkey to + * So that when the hotkey is pressed, the app/ service can be launched + */ +export const getCustomKeyShortcuts = () => { + const results = []; + const sections = config.sections || []; + sections.forEach((section) => { + const itemsWithHotKeys = section.items.filter(item => item.hotkey); + results.push(itemsWithHotKeys.map(item => ({ hotkey: item.hotkey, url: item.url }))); + }); + return results.flat(); +}; From 23d7339be8304539cb2ee4c6cfa0bb7f798221bb Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 19 Jul 2021 21:52:54 +0100 Subject: [PATCH 2/8] :sparkles: Handles the launching of items using custom hotkey --- src/components/Settings/SearchBar.vue | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue index 0083c21f..160edbc3 100644 --- a/src/components/Settings/SearchBar.vue +++ b/src/components/Settings/SearchBar.vue @@ -18,6 +18,7 @@ From 642c42bfe2b1f8edf7afcb7ef3301cdc30f0593d Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 19 Jul 2021 21:54:38 +0100 Subject: [PATCH 3/8] :sparkles: Adds new prop for hotkey, will pass down to OpeningMethod --- src/components/LinkItems/ItemGroup.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/LinkItems/ItemGroup.vue b/src/components/LinkItems/ItemGroup.vue index 276c762c..7eb4589c 100644 --- a/src/components/LinkItems/ItemGroup.vue +++ b/src/components/LinkItems/ItemGroup.vue @@ -30,6 +30,7 @@ :statusCheckUrl="item.statusCheckUrl" :statusCheckHeaders="item.statusCheckHeaders" :itemSize="newItemSize" + :hotkey="item.hotkey" :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)" :statusCheckInterval="getStatusCheckInterval()" @itemClicked="$emit('itemClicked')" From 48438022689b4090bd69667ac9b1b6f627b9412f Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 19 Jul 2021 21:55:05 +0100 Subject: [PATCH 4/8] :sparkles: Shows icon on hover for items with hotkey bound --- src/components/LinkItems/Item.vue | 9 ++++-- .../LinkItems/ItemOpenMethodIcon.vue | 30 +++++++++++++++---- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index 02fd719c..7234c1fd 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -20,8 +20,9 @@ - + -
- - - - +
+
+ + + + +
+
+ {{ hotkey }} +
@@ -23,6 +28,7 @@ export default { isSmall: Boolean, // If true, will apply small class position: String, // Position classes: top, bottom, left, right isTransparent: Boolean, // If true, will apply opacity + hotkey: Number, // Optional hotkey to also display }, methods: { /* Returns custom class string, from optional props */ @@ -49,7 +55,6 @@ export default { width: 1rem; margin: 2px; path { - // fill: var(--primary); fill: currentColor; } } @@ -68,4 +73,17 @@ export default { } } +div.hotkey-denominator { + position: absolute; + font-size: 0.8rem; + margin: 2px; + bottom: 2px; + color: currentColor; + border-radius: 18px; + border: 1px solid currentColor; + padding: 0.1rem 0.4rem 0.2rem 0.4rem; + &.top { right: 0; } // Position opposite of opening method icon + &.bottom { left: 0; } +} + From b51aff6dbd2cc06a157709caefb16c98d9fbea0e Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 19 Jul 2021 21:55:56 +0100 Subject: [PATCH 5/8] :card_file_box: Adds new attribute, item.hotkey for quick launching --- docs/configuring.md | 1 + src/utils/ConfigSchema.json | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/docs/configuring.md b/docs/configuring.md index 616e54d1..1216c6ab 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -118,6 +118,7 @@ To disallow any changes from being written to disk via the UI config editor, set **`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`, `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. +**`hotkey`** | `number` | _Optional_ | Give frequently opened applications a numeric hotkey, between `0 - 9`. You can then just press that key to launch that application. **`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` **`statusCheckUrl`** | `string` | _Optional_ | If you've enabled `statusCheck`, and want to use a different URL to what is defined under the item, then specify it here **`statusCheckHeaders`** | `object` | _Optional_ | If you're endpoint requires any specific headers for the status checking, then define them here diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json index 73987ef7..86615453 100644 --- a/src/utils/ConfigSchema.json +++ b/src/utils/ConfigSchema.json @@ -364,6 +364,10 @@ "default": "newtab", "description": "Opening method, when item is clicked" }, + "hotkey": { + "type": "number", + "description": "A numeric shortcut key, between 0 and 9. Useful for quickly launching frequently used applications" + }, "color": { "type": "string", "description": "A custom fill color of the item" From 539b4e80f4c04a2611470a98ad7c762be520dd65 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 19 Jul 2021 22:07:11 +0100 Subject: [PATCH 6/8] :memo: Include note about custom shortcuts in Readme --- README.md | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index b93b0a50..b215ce5a 100644 --- a/README.md +++ b/README.md @@ -17,17 +17,18 @@ ## Features 🌈 - Instant search by name, domain and tags - just start typing -- Full keyboard shortcuts for navigation, searching and launching -- Multiple color themes, with easy method for adding more -- Easy to customize every part of your dashboard, layout, icon sizes and colors etc -- Many options for icons, including full Font-Awesome support and the ability to auto-fetch icon from URLs favicon +- Full customizable keyboard shortcuts for navigation, filtering and launching apps +- Multiple built-in color themes, with UI color configurator and support for custom CSS +- Easy to customize every part of your dashboard, layout, icon sizes, behavior and colors etc +- Many options for icons, including Font-Awesome support, auto-fetching service favicon, images and emojis - Option to show service status for each of your apps / links, for basic availability and uptime monitoring - Multiple ways of opening apps, either in your browser, a pop-up modal or workspace view - Option for full-screen background image, custom nav-bar links, html footer, title, and more - Encrypted cloud backup and restore feature available -- Optional authentication, requiring user to log in -- Easy single-file YAML-based configuration +- Optional authentication, requiring admins and non-privileged users to log in +- Easy single-file YAML-based configuration, which can also be configured directly through the UI - Small bundle size, fully responsive UI and PWA makes the app easy to use on any device +- Easy to setup with Docker, or on bare metal, or with 1-Click cloud deployment - Plus lots more... ## Demo ⚡ @@ -268,6 +269,20 @@ Here's a quick demo of the workspace view: --- +## Searching and Shortcuts 🔎 + +Quickly finding and launching applications is the primary aim of Dashy. To that end instant search and customizable keyboard shortcuts are built-in. + +To start filtering, just start typing. No need to select the search bar or use any special key. You can then use either the tab key or arrow keys to select and move between results, and hit enter to launch the currently selected application. You can also use `Alt + Enter` on a selected app to launch it in a popup modal, `Ctrl + Enter` to open in new tab, or right-click on it to see all opening methods. + +For apps that you use regularly, you can set a custom keybinding. Use the `hotkey` parameter on a certain item to specify a numeric key, between `0 - 9`. You can then launch that app, by just pressing that key, which is very useful for services you use frequently. + +Hit `Esc` at anytime to close any open apps, clear the search field, or hide any modals. + +**[⬆️ Back to Top](#dashy)** + +--- + ## Config Editor ⚙️ From the Settings Menu in Dashy, you can download, backup, edit and rest your config. An interactive editor makes editing the config file easy, it will tell you if you've got any errors. After making your changes, you can either apply them locally, or export into your main config file. After saving to the config file to the disk, the app will need to be rebuilt. This will happen automatically, but may take a few minutes. You can also manually trigger a rebuild from the Settings Menu. A full list of available config options can be found [here](./docs/configuring.md). It's recommend to make a backup of your configuration, as you can then restore it into a new instance of Dashy, without having to set it up again. [json2yaml](https://www.json2yaml.com/) is very useful for converting between YAML to JSON and visa versa. From b51c56d8e7d720e572e7f290a69c70245bcd3d78 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 19 Jul 2021 22:09:30 +0100 Subject: [PATCH 7/8] :memo: Include note about custom shortcuts in Readme --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index b215ce5a..6d279f4e 100644 --- a/README.md +++ b/README.md @@ -277,6 +277,15 @@ To start filtering, just start typing. No need to select the search bar or use a For apps that you use regularly, you can set a custom keybinding. Use the `hotkey` parameter on a certain item to specify a numeric key, between `0 - 9`. You can then launch that app, by just pressing that key, which is very useful for services you use frequently. +Example: + +```yaml +- title: Bookstack + icon: far fa-books + url: https://bookstack.local/ + hotkey: 8 +``` + Hit `Esc` at anytime to close any open apps, clear the search field, or hide any modals. **[⬆️ Back to Top](#dashy)** From 00688c001c3bea9b6797de6723f654732c692ad0 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 19 Jul 2021 22:12:41 +0100 Subject: [PATCH 8/8] :bookmark: Bumps to V 1.4.1 - Custom keybindings now supported --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2ef1fff7..95db1abe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Dashy", - "version": "1.4.0", + "version": "1.4.1", "license": "MIT", "main": "server", "scripts": {