Merge pull request #73 from Lissy93/REFACTOR_ui-improvments

Refactor UI improvments
This commit is contained in:
Alicia Sykes 2021-06-28 23:02:41 +01:00 committed by GitHub
commit c818d62baf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 144 additions and 42 deletions

View File

@ -1,27 +1,20 @@
**Thank you for contributing to Dashy! So that your PR can be handled effectively, please populate the following fields (delete sections that are not applicable)**
*Thank you for contributing to Dashy! So that your PR can be handled effectively, please populate the following fields (delete sections that are not applicable)*
### Category
> Please indicate the type of change your PR introduces
**Category**:
> One of: Bugfix / Feature / Code style update / Refactoring Only / Build related changes / Documentation / Other (please specify)
Bugfix / Feature / Code style update / Refactoring Only / Build related changes / Documentation / Other (please specify)
### Overview
**Overview**
> Briefly outline your new changes...
**Issue Number** _(if applicable)_ #00
### Issue Number _(if applicable)_
#00
### New Vars _(if applicable)_
**New Vars** _(if applicable)_
> If you've added any new build scripts, environmental variables, config file options, dependency or devDependency, please outline here
### Screenshot _(if applicable)_
**Screenshot** _(if applicable)_
> If you've introduced any significant UI changes, please include a screenshot
### Code Quality Checklist _(Please complete)_
**Code Quality Checklist** _(Please complete)_
- [ ] All changes are backwards compatible
- [ ] All lint checks and tests are passing
- [ ] There are no (new) build warnings or errors

View File

@ -18,12 +18,11 @@
- 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
- Customizable layout options, and item sizes
- Quickly preview a website, by holding down the Alt key while clicking, to open it in a resizable pop-up modal
- 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
- Option to show service status for each of your apps / links, for basic availability and uptime monitoring
- Additional info for each item visible on hover (including opening method icon and description as a tooltip)
- Option for full-screen background image, custom nav-bar links, and custom footer text
- 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
@ -77,8 +76,8 @@ docker run -d \
--restart=always \
lissy93/dashy:latest
```
Healthchecks are pre-configured to monitor the uptime and response times of Dashy, and the status of which can be seen in the container logs, e.g. `docker inspect --format "{{json .State.Health }}" [container-id]`.
You can also build the Docker container from source, by cloning the repo, cd'ing into it and running `docker build .` and `docker compose up`.
#### Deploying from Source 🚀
You will need both [git](https://git-scm.com/downloads) and the latest or LTS version of [Node.js](https://nodejs.org/) installed on your system
@ -91,7 +90,7 @@ You will need both [git](https://git-scm.com/downloads) and the latest or LTS ve
#### Deploy to the Cloud
Dashy supports 1-Click deployments on several popular cloud platforms (with more on the way!). To get started, just click a link below:
Dashy supports 1-Click deployments on several popular cloud platforms. To get started, just click a link below:
- [Deploy to Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/dashy)
- [Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/Lissy93/dashy)
- [Deploy with Vercel](https://vercel.com/new/project?template=https://github.com/lissy93/dashy)
@ -99,8 +98,7 @@ Dashy supports 1-Click deployments on several popular cloud platforms (with more
#### 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`.
If you prefer [`NPM`](https://docs.npmjs.com), then just replace `yarn` with `npm run` in the following commands.
The following commands can be run on Dashy.
- `yarn build` - Builds the project for production, and outputs it into `./dist`
- `yarn start` - Starts a web server, and serves up the production site from `./dist`
@ -112,6 +110,11 @@ 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
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`.
If you prefer [`NPM`](https://docs.npmjs.com), then just replace `yarn` with `npm run` in the following commands.
In Docker, [healthchecks](https://docs.docker.com/engine/reference/builder/#healthcheck) are pre-configured to monitor the uptime and response times of Dashy, and the status of which will show in your Docker monitoring app, or the `docker ps` command, or the container logs, using: `docker inspect --format "{{json .State.Health }}" [container-id]`.
**[⬆️ Back to Top](#dashy)**
---
@ -126,7 +129,7 @@ In the production environment, the app needs to be rebuilt in order for changes
You can check that your config matches Dashy's [schema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.json) before deploying, by running `yarn validate-config.`
It is now possible to update Dashy's config directly through the UI, and have changes written to disk. You can disable this feature by setting: `appConfig.allowConfigEdit: false`. If you are using users within Dashy, then you need to be logged in to a user of `type: admin` in order to modify the configuration globally. You can also trigger a rebuild of the app through the UI (Settings --> Rebuild). The current theme, and other visual preferences are only stored locally, unless otherwise specified in the config file. The option to only apply config changes locally is still available, and can be used in conjunction with the cloud backup feature to sync data between instances.
It is now possible also possible to update Dashy's config directly through the UI, and have changes written to disk. You can disable this feature by setting: `appConfig.allowConfigEdit: false`. If you are using users within Dashy, then you need to be logged in to a user of `type: admin` in order to modify the configuration globally. You can also trigger a rebuild of the app through the UI (Settings --> Rebuild).
You may find these [example config](https://gist.github.com/Lissy93/000f712a5ce98f212817d20bc16bab10) helpful for getting you started
@ -247,7 +250,7 @@ Here's a quick demo of the workspace view:
## 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.
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.
<p align="center">
<img alt="Workspace view demo" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/config-editor-demo.gif" width="600">
@ -279,7 +282,7 @@ If you are new to Vue.js or web development and want to learn more, [here are so
Pull requests are welcome, and would by much appreciated!
Some ideas for PRs include: bug fixes, improve the docs, add new themes, implement a new widget, add or improve the display options, improve or refactor the code, or implement a new feature.
Some ideas for PRs include: bug fixes, improve the docs, submit a screenshot of your dashboard to the showcase, add new themes, implement a new widget, add or improve the display options, improve or refactor the code, or implement a new feature.
Before you submit your pull request, please ensure the following:
- Must be backwards compatible
@ -326,16 +329,18 @@ For more general questions about any of the technologies used, [StackOverflow](h
## Documentation 📘
- [Getting Started](/docs/deployment.md)
- [Deployment](/docs/deployment.md)
- [Configuring](/docs/configuring.md)
- [Developing](/docs/developing.md)
- [Contributing](/docs/contributing.md)
- [User Guide](/docs/user-guide.md)
- [Troubleshooting](/docs/troubleshooting.md)
- [Backup & Restore](/docs/backup-restore.md)
- [Status Indicators](/docs/status-indicators.md)
- [Theming](/docs/theming.md)
- [Icons](/docs/icons.md)
- [Authentication](/docs/authentication.md)
- [Showcase](/docs/showcase.md)
**[⬆️ Back to Top](#dashy)**

View File

@ -35,8 +35,8 @@
## Submitting your Dashboard
#### How to Submit
- Open an Issue
- Open a PR
- [Open an Issue](https://git.io/Jceik)
- [Open a PR](https://github.com/Lissy93/dashy/compare)
#### What to Include
Please include the following information:

View File

@ -214,6 +214,7 @@ export default {
&:hover {
box-shadow: var(--item-hover-shadow);
background: var(--item-background-hover);
color: var(--item-text-color-hover);
position: relative;
.tile-title span.text {
white-space: pre-wrap;
@ -278,12 +279,14 @@ export default {
/* Specify layout for alternate sized icons */
.item {
/* Small Tile Specific Themes */
&.size-small {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
height: 2rem;
padding-top: 4px;
div img, div svg.missing-image {
width: 2rem;
}
@ -298,6 +301,7 @@ export default {
}
}
}
/* Medium Tile Specific Themes */
&.size-medium {
display: flex;
flex-direction: column;
@ -312,14 +316,42 @@ export default {
max-width: 160px;
}
}
/* Large Tile Specific Themes */
&.size-large {
height: 100px;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
text-align: left;
overflow: hidden;
align-items: center;
max-height: 6rem;
margin: 0.2rem;
padding: 0.5rem;
img {
padding: 0.1rem 0.25rem;
}
.tile-title {
height: auto;
padding: 0.1rem 0.25rem;
span.text {
position: relative;
font-weight: bold;
font-size: 1.1rem;
width: 100%;
}
p.description {
display: block;
margin: 0;
white-space: pre-wrap;
font-size: .9em;
text-overflow: ellipsis;
}
}
}
p.description {
display: none;
display: none; // By default, we don't show the description
}
&:before {
&:before { // Certain themes (e.g. material) show css animated fas icon on hover
display: none;
font-family: FontAwesome;
content: var(--open-icon, "\f054") !important;

View File

@ -36,7 +36,7 @@ footer {
text-align: center;
color: var(--medium-grey);
opacity: var(--dimming-factor);
background: var(--background-darker);
background: var(--footer-background);
margin-top: 1.5rem;
border-top: 1px solid var(--outline-color);
@include tablet-down {

View File

@ -83,7 +83,7 @@ export default {
background: var(--search-container-background);
label {
display: inline;
color: var(--settings-text-color);
color: var(--search-label-color);
margin: 0.5rem;
display: inline;
}

View File

@ -42,6 +42,7 @@
--nav-link-border-color: transparent;
--nav-link-border-color-hover: var(--primary);
--item-text-color: var(--primary);
--item-text-color-hover: var(--item-text-color);
--item-group-outer-background: var(--primary);
--item-group-heading-text-color: var(--item-group-background);
--item-group-heading-text-color-hover: var(--background);
@ -49,8 +50,10 @@
--settings-text-color: var(--primary);
--search-container-background: var(--background-darker);
--search-field-background: var(--background);
--search-label-color: var(--settings-text-color);
--footer-text-color: var(--medium-grey);
--footer-text-color-link: var(--primary);
--footer-background: var(--background-darker);
--welcome-popup-background: var(--background-darker);
--welcome-popup-text-color: var(--primary);
--config-code-background: #fff;

View File

@ -97,6 +97,39 @@ html[data-theme='matrix'] {
}
}
html[data-theme='blue-purple'] {
--primary: #54dbf8;
--background: #e5e8f5;
--background-darker: #5346f3;
--font-headings: 'Sniglet', cursive;
--dimming-factor: 0.8;
--curve-factor: 6px;
--settings-text-color: var(--background-darker);
--item-text-color: var(--background-darker);
--item-background: var(--white);
--item-background-hover: var(--primary);
--item-group-heading-text-color: var(--background-darker);
--item-group-background: var(--background);
--footer-text-color: var(--white);
--context-menu-background: var(--white);
--context-menu-color: var(--background-darker);
--context-menu-secondary-color: var(--primary);
.item {
box-shadow: none;
border: 1px solid var(--background-darker);
}
section.filter-container form label {
color: var(--primary);
}
footer {
color: var(--white);
}
}
html[data-theme='hacker-girl'] {
--background: #000;
--background-darker: #000;
@ -658,7 +691,8 @@ html[data-theme='vaporware'] {
--curve-factor: 2px;
--curve-factor-navbar: 6px;
--login-form-color: #09bfe6;
--config-settings-background: #100e2c;
.home {
background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%);
}
@ -719,4 +753,30 @@ html[data-theme='vaporware'] {
// background-size: cover;
// div.home { background: none; }
// }
}
html[data-theme='cyberpunk'] {
--pink: #ff2a6d;
--pale: #d1f7ff;
--aqua: #05d9e8;
--teal: #005678;
--blue: #01012b;
--gold: #ebeb0f;
--primary: var(--gold);
--background: var(--blue);
--background-darker: var(--pink);
--heading-text-color: var(--blue);
--nav-link-background-color-hover: var(--blue);
--nav-link-text-color-hover: var(--pink);
--nav-link-border-color-hover: var(--blue);
--config-settings-background: var(--blue);
--config-settings-color: var(--pink);
--search-label-color: var(--blue);
--item-group-background: var(--blue);
--item-text-color: var(--pale);
--scroll-bar-color: var(--aqua);
--scroll-bar-background: var(--teal);
--footer-background: var(--aqua);
--font-headings: 'Audiowide', cursive;
}

View File

@ -57,4 +57,7 @@ html {
@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');
/* Jam */
@import url('https://fonts.googleapis.com/css2?family=Sniglet&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sniglet&display=swap');
/* Cyber Punk */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

View File

@ -31,8 +31,10 @@ module.exports = {
'raspberry-jam',
'bee',
'tiger',
'blue-purple',
'material-original',
'material-dark-original',
'cyberpunk',
'vaporware',
'high-contrast-dark',
'high-contrast-light',

View File

@ -160,13 +160,17 @@ export default {
},
/* Checks if any of the icons are Font Awesome glyphs */
checkIfFontAwesomeNeeded() {
let isFound = false;
let isNeeded = false;
if (!this.sections) return false;
this.sections.forEach((section) => {
if (section.icon && section.icon.includes('fa-')) isNeeded = true;
section.items.forEach((item) => {
if (item.icon && item.icon.includes('fa-')) isFound = true;
if (item.icon && item.icon.includes('fa-')) isNeeded = true;
});
});
return isFound;
const currentTheme = localStorage[localStorageKeys.THEME]; // Some themes require FA
if (['material', 'material-dark'].includes(currentTheme)) isNeeded = true;
return isNeeded;
},
/* Injects font-awesome's script tag, only if needed */
initiateFontAwesome() {

View File

@ -9,8 +9,8 @@ module.exports = {
chainWebpack: config => {
config.module.rules.delete('svg');
},
configureWebpack: {
performance: { hints: false },
module: {
rules: [
{ test: /.svg$/, loader: 'vue-svg-loader' },
@ -26,12 +26,12 @@ module.exports = {
}),
],
},
pwa: {
name: 'Dashy',
manifestPath: './manifest.json',
themeColor: '#00af87',
msTileColor: '#0b1021',
mode: 'production',
iconPaths: {
manifestCrossorigin: 'use-credentials',
favicon64: './web-icons/favicon-64x64.png',