Adds ability for user to show/ hide settings menu

For a cleaner, less clutterd UI
This commit is contained in:
Alicia Sykes 2021-06-03 12:19:55 +01:00
parent af57d8ea71
commit 78314f96c6
9 changed files with 249 additions and 41 deletions

View File

@ -1,6 +1,6 @@
--- ---
pageInfo: pageInfo:
title: Dashy title: Bookmarks
navLinks: navLinks:
- title: Home - title: Home
path: / path: /
@ -9,26 +9,170 @@ pageInfo:
- title: Source Code - title: Source Code
path: https://github.com/Lissy93/dashy path: https://github.com/Lissy93/dashy
appConfig: appConfig:
theme: colorful theme: dracula
fontAwesomeKey: 0821c65656 fontAwesomeKey: 13014ae648
sections: sections:
- name: Getting Started - name: Productivity
icon: far fa-star icon: fas fa-calendar-check
items: items:
- title: Source - title: ProtonMail
description: Source code and documentation on GitHub description: Secure Encrypted Email
icon: favicon
url: https://mail.protonmail.com/
- title: AnonAddy
description: Mail aliasing and forwarding service
icon: favicon
url: https://app.anonaddy.com/
- title: LessPass
description: Deterministic password generator
icon: favicon
url: https://lesspass.com/
- title: EteSync
description: Calendar, contacts and tasks
icon: favicon
url: https://client.etesync.com/
- title: Live Coin Watch
description: Real-time crypto prices and read-only portfolio
icon: favicon
url: https://www.livecoinwatch.com/
- title: Standard Notes
description: Encrypted productivity suit
icon: favicon
url: https://app.standardnotes.org/
- name: Social
icon: fas fa-thumbs-up
items:
- title: Discord
icon: fab fa-discord
url: https://discord.com/channels/
- title: Mastodon
icon: fab fa-mastodon
url: https://mastodon.social/
- title: Reddit
icon: fab fa-reddit
url: https://www.reddit.com/
- title: Twitter
icon: fab fa-twitter
url: https://twitter.com/
- title: YouTube
icon: fab fa-youtube
url: https://youtube.com/
- title: Instagram
icon: fab fa-instagram
url: https://www.instagram.com/
- name: Coding
icon: fas fa-code
displayData:
rows: 2
items:
- title: StackOverflow
icon: fab fa-stack-overflow
url: https://stackoverflow.com/
- title: GitHub
icon: fab fa-github icon: fab fa-github
url: https://github.com/Lissy93/dashy url: https://github.com/
- title: Issues - title: Grep App
description: View currently open issues, or raise a new one icon: fas fa-slash
icon: fas fa-bug description: Allows you to search the contents of files within GitHub repos, with a RegEx option too
url: https://github.com/Lissy93/dashy/issues url: https://grep.app/
- title: Demo 1 - title: Hoppscotch
description: 'Live Demo #1' icon: fas fa-dice-d6
icon: far fa-rocket description: API development tool
url: https://dashy-demo-1.netlify.app url: https://hoppscotch.io/
- title: Demo 2 - title: Regexr
description: 'Live Demo #2' icon: fas fa-code
icon: fad fa-planet-ringed description: App for creating, testing and understanding regular expressions
url: https://dashy-demo-2.netlify.app url: https://regexr.com/
- title: Tmate
icon: fas fa-terminal
description: Instant TMUX-based terminal sharing
url: https://tmate.io/
- title: Debian Handbook
icon: fab fa-linux
url: https://debian-handbook.info/browse/stable/
- title: Crontab Guru
description: Editor for cron schedule expressions
icon: fas fa-pen-square
url: https://crontab.guru/
- title: CyberChef
description: All in one encryption, encoding, hashes etc
icon: fas fa-user-astronaut
url: https://gchq.github.io/CyberChef/
- title: SSL Labs Tester
description: Check SSL Certificates
icon: fab fa-expeditedssl
url: https://www.ssllabs.com/ssltest/
- title: JSON Formatter
description: JSON validator, beautifier and convertor
url: https://jsonformatter.org/
icon: fas fa-brackets-curly
- title: JSFiddle
url: https://jsfiddle.net/
icon: fab fa-jsfiddle
- title: Digital Ocean
description: Affordable, preformant cloud services
url: https://cloud.digitalocean.com/
icon: fab fa-digital-ocean
- title: HealthChecks.io
description: Off-site cron job and service monitoring
icon: fal fa-monitor-heart-rate
url: https://healthchecks.io/
- name: Utilities
icon: fas fa-briefcase
displayData:
itemSize: small
cols: 2
items:
- title: Chroniker Timer
description: A productivity timer
url: https://chroniker.co/
- title: CopyChar
description: easily search and copy any symbol
url: https://copychar.cc/
- title: DeepL
description: Fast, accurate, secure online multi-language translator
url: https://www.deepl.com/translator
- title: Font Generator
description: Use ASCII characters for different plaintext fonts
url: https://www.fontgeneratoronline.com/
- title: JSON Formatter
description: CSV, JSON, YAML, XML and more formatting tools
url: https://jsonformatter.org/
- title: Time.Is
description: Time.Is
url: https://time.is/
- title: Torrent Parts
description: Inspect and edit what's in your Torrent file or Magnet link
url: https://torrent.parts/
- title: Photo College
url: https://www.befunky.com/create/collage/
- title: MD5 Hash
url: http://www.miraclesalad.com/webtools/md5.php
- title: GitHub Stars Over Time
url: https://seladb.github.io/StarTrack-js/
- title: Text & List Tools
url: https://pinetools.com/c-text-lists/
- title: Online Text Tools
description: More text tools, allowing for RegEx actions
url: https://onlinetexttools.com/
- title: Conversao
description: Instantly convert a unit to all others
url: https://conversao.net/eng/
- title: Omni Calculators
description: A collection of thousands of calculators
url: https://www.omnicalculator.com/
- title: Dr Meme
description: Meme Generator
url: https://www.drmemes.com/
- title: ASCII Tree Generator
description: For displaying directory structure
url: https://ascii-tree-generator.com/
- title: ASCII Diagram Drawer
description: For using box characters to draw boxes
url: For using box characters to draw boxes
- title: Bullet Converter
description: Small script I use
url: https://listed.to/p/LxO8yHsB9E#bc
- title: Lenny Face Maker
description: Easily generate ASCII Lenny emojis
url: https://www.fontspace.com/lenny-face

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"></path></svg>

After

Width:  |  Height:  |  Size: 712 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sliders-h" class="svg-inline--fa fa-sliders-h fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M496 384H160v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h80v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h336c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160h-80v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h336v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h80c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16C7.2 64 0 71.2 0 80v32c0 8.8 7.2 16 16 16h208v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h208c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16z"></path></svg>

After

Width:  |  Height:  |  Size: 847 B

View File

@ -34,7 +34,7 @@ footer {
color: var(--medium-grey); color: var(--medium-grey);
opacity: var(--dimming-factor); opacity: var(--dimming-factor);
background: var(--background-darker); background: var(--background-darker);
margin-top: 7px; margin-top: 1.5rem;
border-top: 1px solid var(--outline-color); border-top: 1px solid var(--outline-color);
} }

View File

@ -3,8 +3,10 @@
<!-- Button and label --> <!-- Button and label -->
<span>Config</span> <span>Config</span>
<div class="config-buttons"> <div class="config-buttons">
<IconSpanner v-tooltip="tooltip('Update configuration locally')" @click="showEditor()" /> <IconSpanner @click="showEditor()" tabindex="-2"
<IconCloud v-tooltip="tooltip('Backup / restore cloud config')" @click="showCloudModal()" /> v-tooltip="tooltip('Update configuration locally')" />
<IconCloud @click="showCloudModal()" tabindex="-2"
v-tooltip="tooltip('Backup / restore cloud config')" />
</div> </div>
<!-- Modal containing all the configuration options --> <!-- Modal containing all the configuration options -->

View File

@ -5,6 +5,7 @@
v-if="searchVisible" v-if="searchVisible"
:active="!modalOpen" :active="!modalOpen"
/> />
<div class="options-outer">
<div class="options-container" v-if="settingsVisible"> <div class="options-container" v-if="settingsVisible">
<ThemeSelector :themes="availableThemes" <ThemeSelector :themes="availableThemes"
:confTheme="getInitialTheme()" :userThemes="getUserThemes()" /> :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
@ -13,21 +14,31 @@
<ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig" <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
@modalChanged="modalChanged" /> @modalChanged="modalChanged" />
</div> </div>
<div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
<button @click="toggleSettingsVisibility()"
v-tooltip="`${settingsVisible? 'Hide' : 'Open'} Settings Menu`" tabindex="-2">
<IconClose v-if="settingsVisible" />
<IconOpen v-else />
</button>
</div>
</div>
<KeyboardShortcutInfo /> <KeyboardShortcutInfo />
</section> </section>
</template> </template>
<script> <script>
import Defaults from '@/utils/defaults'; import Defaults, { localStorageKeys } from '@/utils/defaults';
import SearchBar from '@/components/Settings/SearchBar'; import SearchBar from '@/components/Settings/SearchBar';
import ConfigLauncher from '@/components/Settings/ConfigLauncher'; import ConfigLauncher from '@/components/Settings/ConfigLauncher';
import ThemeSelector from '@/components/Settings/ThemeSelector'; import ThemeSelector from '@/components/Settings/ThemeSelector';
import LayoutSelector from '@/components/Settings/LayoutSelector'; import LayoutSelector from '@/components/Settings/LayoutSelector';
import ItemSizeSelector from '@/components/Settings/ItemSizeSelector'; import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo'; import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
import IconOpen from '@/assets/interface-icons/config-open-settings.svg';
import IconClose from '@/assets/interface-icons/config-close.svg';
export default { export default {
name: 'FilterTile', name: 'SettingsContainer',
props: { props: {
displayLayout: String, displayLayout: String,
iconSize: String, iconSize: String,
@ -44,6 +55,8 @@ export default {
LayoutSelector, LayoutSelector,
ItemSizeSelector, ItemSizeSelector,
KeyboardShortcutInfo, KeyboardShortcutInfo,
IconOpen,
IconClose,
}, },
methods: { methods: {
userIsTypingSomething(something) { userIsTypingSomething(something) {
@ -70,11 +83,19 @@ export default {
if (typeof userThemes === 'string') return [userThemes]; if (typeof userThemes === 'string') return [userThemes];
return userThemes; return userThemes;
}, },
toggleSettingsVisibility() {
this.settingsVisible = !this.settingsVisible;
localStorage.setItem(localStorageKeys.HIDE_SETTINGS, this.settingsVisible);
},
getSettingsVisibility() {
return JSON.parse(localStorage[localStorageKeys.HIDE_SETTINGS]
|| Defaults.visibleComponents.settings);
},
}, },
data() { data() {
return { return {
searchVisible: Defaults.visibleComponents.searchBar && !this.modalOpen, searchVisible: Defaults.visibleComponents.searchBar,
settingsVisible: Defaults.visibleComponents.settings, settingsVisible: this.getSettingsVisibility(),
}; };
}, },
}; };
@ -91,13 +112,19 @@ export default {
background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%); background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
box-shadow: var(--settings-container-shadow); box-shadow: var(--settings-container-shadow);
} }
.options-outer {
display: flex;
position: relative;
flex: 1;
background: var(--settings-background);
}
.options-container { .options-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-end; align-items: flex-end;
justify-content: flex-end; justify-content: flex-end;
flex: 1; flex: 1;
padding: 0.5rem 1rem; padding: 0.5rem 1.5rem 0.5rem 1rem;
border-radius: var(--curve-factor-navbar) 0 0; border-radius: var(--curve-factor-navbar) 0 0;
background: var(--settings-background); background: var(--settings-background);
div { div {
@ -108,6 +135,38 @@ export default {
} }
} }
.show-hide-container {
display: flex;
// align-items: center;
background: var(--settings-background);
color: var(--settings-text-color);
width: 1.5rem;
position: absolute;
top: 4px;
right: 4px;
&.show-btn {
width: 2rem;
top: 0.5rem;
right: 0.5rem;
}
button {
width: 100%;
padding: 2px 2px 0 2px;
margin: 2px;
border-radius: var(--curve-factor);
height: fit-content;
background: none;
border: none;
color: var(--settings-text-color);
cursor: pointer;
opacity: var(--dimming-factor);
}
&:hover button {
background: var(--settings-text-color);
color: var(--settings-background);
}
}
@include tablet { @include tablet {
section { section {
display: block; display: block;
@ -120,7 +179,7 @@ export default {
} }
@include phone { @include phone {
.options-container { .options-container, .show-hide-button {
display: none; display: none;
} }
} }

View File

@ -33,7 +33,7 @@ const router = new Router({
appConfig: localAppConfig || appConfig || {}, appConfig: localAppConfig || appConfig || {},
}, },
meta: { meta: {
title: 'Home Page', title: pageInfo.title || 'Home Page',
metaTags: [ metaTags: [
{ {
name: 'description', name: 'description',

View File

@ -298,9 +298,6 @@ html[data-theme='material'], html[data-theme='material-dark'] {
max-height: 6rem; max-height: 6rem;
margin: 0.2rem; margin: 0.2rem;
padding: 0.5rem; padding: 0.5rem;
.overflow-dots {
display: none;
}
img { img {
padding: 0.1rem 0.25rem; padding: 0.1rem 0.25rem;
} }
@ -355,6 +352,9 @@ html[data-theme='material'], html[data-theme='material-dark'] {
div { div {
transition: all 0.2s linear 0s; transition: all 0.2s linear 0s;
} }
.overflow-dots {
display: none;
}
&:before { &:before {
content: "\f054"; content: "\f054";
font-family: FontAwesome; font-family: FontAwesome;

View File

@ -53,6 +53,7 @@ module.exports = {
APP_CONFIG: 'appConfig', APP_CONFIG: 'appConfig',
BACKUP_ID: 'backupId', BACKUP_ID: 'backupId',
BACKUP_HASH: 'backupHash', BACKUP_HASH: 'backupHash',
HIDE_SETTINGS: 'hideSettings',
}, },
modalNames: { modalNames: {
CONF_EDITOR: 'CONF_EDITOR', CONF_EDITOR: 'CONF_EDITOR',