mirror of https://github.com/Lissy93/dashy.git
✨ Builds a modal for exporting config to file or clipboard
This commit is contained in:
Alicia Sykes
parent
cd40bb192f
commit
da7717b6f2
|
|
@ -0,0 +1 @@
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 736 B |
|
|
@ -0,0 +1,124 @@
|
||||||
|
<template>
|
||||||
|
<modal
|
||||||
|
:name="modalName"
|
||||||
|
:resizable="true"
|
||||||
|
width="50%"
|
||||||
|
height="80%"
|
||||||
|
classes="dashy-modal edit-item"
|
||||||
|
@closed="modalClosed"
|
||||||
|
>
|
||||||
|
<div class="export-config-inner">
|
||||||
|
<!-- Download and Copy to CLipboard Buttons -->
|
||||||
|
<h3>{{ $t('interactive-editor.export.export-title') }}</h3>
|
||||||
|
<div class="download-button-container">
|
||||||
|
<Button :click="copyConfigToClipboard"
|
||||||
|
v-tooltip="tooltip($t('interactive-editor.export.copy-clipboard-tooltip'))">
|
||||||
|
{{ $t('interactive-editor.export.copy-clipboard-btn') }}
|
||||||
|
<CopyConfigIcon />
|
||||||
|
</Button>
|
||||||
|
<Button :click="downloadConfig"
|
||||||
|
v-tooltip="tooltip($t('interactive-editor.export.download-file-tooltip'))">
|
||||||
|
{{ $t('interactive-editor.export.download-file-btn') }}
|
||||||
|
<DownloadConfigIcon />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<!-- View Config in Tree Mode Section -->
|
||||||
|
<h3>{{ $t('interactive-editor.export.view-title') }}</h3>
|
||||||
|
<tree-view :data="config" class="config-tree-view" />
|
||||||
|
</div>
|
||||||
|
</modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import JsYaml from 'js-yaml';
|
||||||
|
import Button from '@/components/FormElements/Button';
|
||||||
|
import StoreKeys from '@/utils/StoreMutations';
|
||||||
|
import { modalNames } from '@/utils/defaults';
|
||||||
|
|
||||||
|
import DownloadConfigIcon from '@/assets/interface-icons/config-download-file.svg';
|
||||||
|
import CopyConfigIcon from '@/assets/interface-icons/interactive-editor-copy-clipboard.svg';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ExportConfigMenu',
|
||||||
|
components: {
|
||||||
|
Button,
|
||||||
|
CopyConfigIcon,
|
||||||
|
DownloadConfigIcon,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
modalName: modalNames.EXPORT_CONFIG_MENU,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
computed: {
|
||||||
|
config() {
|
||||||
|
return this.$store.state.config;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
convertJsonToYaml() {
|
||||||
|
return JsYaml.dump(this.config);
|
||||||
|
},
|
||||||
|
downloadConfig() {
|
||||||
|
const filename = 'dashy_conf.yml';
|
||||||
|
const config = this.convertJsonToYaml();
|
||||||
|
const element = document.createElement('a');
|
||||||
|
element.setAttribute('href', `data:text/plain;charset=utf-8, ${encodeURIComponent(config)}`);
|
||||||
|
element.setAttribute('download', filename);
|
||||||
|
element.style.display = 'none';
|
||||||
|
document.body.appendChild(element);
|
||||||
|
element.click();
|
||||||
|
document.body.removeChild(element);
|
||||||
|
},
|
||||||
|
copyConfigToClipboard() {
|
||||||
|
const config = this.convertJsonToYaml();
|
||||||
|
navigator.clipboard.writeText(config);
|
||||||
|
this.$toasted.show(this.$t('config.data-copied-msg'));
|
||||||
|
},
|
||||||
|
modalClosed() {
|
||||||
|
this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
|
||||||
|
},
|
||||||
|
tooltip(content) {
|
||||||
|
return {
|
||||||
|
content, trigger: 'hover focus', delay: 250, classes: 'in-modal-tt',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '@/styles/style-helpers.scss';
|
||||||
|
@import '@/styles/media-queries.scss';
|
||||||
|
.tooltip { z-index: 99; }
|
||||||
|
.export-config-inner {
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--interactive-editor-background);
|
||||||
|
color: var(--interactive-editor-color);
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
h3 {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
.download-button-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 0.5rem 1rem;
|
||||||
|
border-bottom: 1px dashed var(--interactive-editor-color);
|
||||||
|
button { margin: 0 1rem; }
|
||||||
|
}
|
||||||
|
.config-tree-view {
|
||||||
|
padding: 0.5rem;
|
||||||
|
font-family: var(--font-monospace);
|
||||||
|
color: var(--interactive-editor-color);
|
||||||
|
background: var(--interactive-editor-background-darker);
|
||||||
|
border-radius: var(--curve-factor);
|
||||||
|
box-shadow: 0px 0px 3px var(--interactive-editor-color);
|
||||||
|
span {
|
||||||
|
font-family: var(--font-monospace);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue