mirror of https://github.com/lissy93/dashy
180 lines
5.7 KiB
Vue
180 lines
5.7 KiB
Vue
<template>
|
|
<transition name="slide-fade">
|
|
<div class="kb-sc-info" v-if="!shouldHide">
|
|
<h5>{{ popupContent.title }}</h5>
|
|
<div class="close" title="Hide forever [Esc]" @click="hideWelcomeHelper()">x</div>
|
|
<p :title="popupContent.hoverText">{{ popupContent.message }}</p>
|
|
<p :title="popupContent.hoverText">{{ popupContent.messageContinued }}</p>
|
|
<div class="action-buttons">
|
|
<button @click="exportConfig">Export Local Config</button>
|
|
<button @click="saveConfig">Save Changes to Disk</button>
|
|
<button @click="resetLocalConfig">Reset Local Changes</button>
|
|
<button @click="hideWelcomeHelper">Dismiss this Notification</button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { localStorageKeys, modalNames } from '@/utils/defaults';
|
|
import StoreKeys from '@/utils/StoreMutations';
|
|
import configSavingMixin from '@/mixins/ConfigSaving';
|
|
|
|
export default {
|
|
name: 'KeyboardShortcutInfo',
|
|
mixins: [configSavingMixin],
|
|
data() {
|
|
return {
|
|
shouldHide: true, // False = show/ true = hide. Intuitive, eh?
|
|
timeDelay: 2000, // Short delay in ms before popup appears
|
|
popupContent: {
|
|
title: '⚠️ You\'re using a local config',
|
|
message: `This means that your settings are saved in this browser only,
|
|
and won't persist across devices.`,
|
|
messageContinued: `To ensure you don't loose your changes,
|
|
it's recommended to download a copy of your config, so you can restore it later.`,
|
|
hoverText: 'Press [Esc] to hide this warning',
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
exportConfig() {
|
|
this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
|
|
this.shouldHide = true;
|
|
},
|
|
saveConfig() {
|
|
const localConfig = this.$store.state.config;
|
|
this.writeConfigToDisk(localConfig);
|
|
this.shouldHide = true;
|
|
},
|
|
resetLocalConfig() {
|
|
const msg = `${this.$t('config.reset-config-msg-l1')} `
|
|
+ `${this.$t('config.reset-config-msg-l2')}\n\n${this.$t('config.reset-config-msg-l3')}`;
|
|
const isTheUserSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals
|
|
if (isTheUserSure) {
|
|
localStorage.clear();
|
|
this.$toasted.show(this.$t('config.data-cleared-msg'));
|
|
this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
|
|
this.shouldHide = true;
|
|
}
|
|
},
|
|
/**
|
|
* Returns true if the key exists in session storage, otherwise false
|
|
* And the !! just converts 'false' to false, as strings resolve to true
|
|
*/
|
|
shouldHideWelcomeMessage() {
|
|
return !!localStorage[localStorageKeys.HIDE_INFO_NOTIFICATION];
|
|
},
|
|
/**
|
|
* Update session storage, so that it won't be shown again
|
|
* Trigger the hide function, and remove the event listerner
|
|
*/
|
|
hideWelcomeHelper() {
|
|
this.shouldHide = true;
|
|
localStorage.setItem(localStorageKeys.HIDE_INFO_NOTIFICATION, true);
|
|
window.removeEventListener('keyup', this.keyPressEvent);
|
|
},
|
|
/* Passed to window function, to add/ remove event listener */
|
|
keyPressEvent(event) {
|
|
if (event.keyCode === 27) this.hideWelcomeHelper();
|
|
},
|
|
},
|
|
/**
|
|
* Once mounted, if it's the users first time here, then we wait 3 seconds,
|
|
* and show the helpfull little keyboard shortcut dialog.
|
|
* Then we listen for the Esc key to be pressed, and hide the dialog.
|
|
*/
|
|
mounted() {
|
|
const shouldHide = this.shouldHideWelcomeMessage();
|
|
if (!shouldHide) {
|
|
window.setTimeout(() => { this.shouldHide = shouldHide; }, this.timeDelay);
|
|
window.addEventListener('keyup', this.keyPressEvent);
|
|
} else { // Meh, component not needed.
|
|
// No point wasting valuable bytes of your 32GB Ram, lets kill it
|
|
this.$destroy();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@import '@/styles/media-queries.scss';
|
|
|
|
.kb-sc-info {
|
|
position: fixed;
|
|
width: 30em;
|
|
bottom: 0;
|
|
right: 10px;
|
|
margin: 0.5em;
|
|
padding: 0.1em 0.3em;
|
|
z-index: 6;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--welcome-popup-background);
|
|
-webkit-box-shadow: 2px 1px 5px #130f23;
|
|
box-shadow: 2px 1px 5px #130f23;
|
|
border: 1px solid var(--welcome-popup-text-color);
|
|
color: var(--welcome-popup-text-color);
|
|
background: var(--welcome-popup-background);
|
|
cursor: default;
|
|
opacity: 0.94;
|
|
@include phone {
|
|
display: none;
|
|
}
|
|
h5 { /* The dialog title */
|
|
position: absolute;
|
|
top: -35px;
|
|
left: 20px;
|
|
border: 1px solid var(--welcome-popup-text-color);
|
|
color: var(--welcome-popup-text-color);
|
|
background: var(--welcome-popup-background);
|
|
padding: 4px;
|
|
border-radius: var(--curve-factor);
|
|
}
|
|
.close { /* The little exit icon, in top-right */
|
|
float: right;
|
|
border-radius: 20px;
|
|
width: 1em;
|
|
padding: 0 0 6px 6px;
|
|
height: 1em;
|
|
background: var(--transparent-50);
|
|
margin-top: 3px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
&:hover {
|
|
border: 1px solid var(--welcome-popup-text-color);
|
|
opacity: var(--dimming-factor);
|
|
}
|
|
}
|
|
}
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 1em;
|
|
button {
|
|
padding: 0.2rem;
|
|
background: var(--welcome-popup-background);
|
|
color: var(--welcome-popup-text-color);
|
|
border: 1px solid var(--welcome-popup-text-color);
|
|
border-radius: var(--curve-factor);
|
|
transition: all 0.2s ease-in-out;
|
|
&:hover {
|
|
background: var(--welcome-popup-text-color);
|
|
color: var(--welcome-popup-background);
|
|
}
|
|
}
|
|
}
|
|
/* Animations, animations everywhere */
|
|
.slide-fade-enter-active {
|
|
transition: all 1s ease;
|
|
}
|
|
.slide-fade-leave-active {
|
|
transition: all .8s cubic-bezier(.93,.01,.89,.5);
|
|
}
|
|
.slide-fade-enter, .slide-fade-leave-to {
|
|
transform: translateY(35em);
|
|
opacity: 0;
|
|
}
|
|
</style>
|