mirror of https://github.com/Lissy93/dashy.git
Merge pull request #73 from Lissy93/REFACTOR_ui-improvments
Refactor UI improvments
This commit is contained in:
Alicia Sykes
GitHub
commit
c818d62baf
|
|
@ -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
|
||||
|
|
|
|||
29
README.md
29
README.md
|
|
@ -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)**
|
||||
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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');
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue