tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🐛 #36 - New method for downloading config

This commit is contained in:
Alicia Sykes 2021-06-21 13:04:49 +01:00
parent 6f809460ff
commit 7ecb815ec3
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Configuration/ConfigContainer.vue
View File

@ -37,10 +37,8 @@
You are using a very small screen, and some screens in this menu may not be optimal You are using a very small screen, and some screens in this menu may not be optimal
</p> </p>
<div class="config-note"> <div class="config-note">
<p class="sub-title">Note:</p>
<span> <span>
All changes made here are stored locally. To apply globally, either export your config It is recommend to make a backup of your conf.yml file, before making any changes.
into your conf.yml file, or use the cloud backup/ restore feature.
</span> </span>
</div> </div>
</div> </div>
@ -48,10 +46,12 @@
<RebuildApp /> <RebuildApp />
</TabItem> </TabItem>
<TabItem name="View Config" class="code-container"> <TabItem name="View Config" class="code-container">
<pre id="conf-yaml">{{this.jsonParser(this.config)}}</pre> <pre id="conf-yaml">{{yaml}}</pre>
<div class="yaml-action-buttons"> <div class="yaml-action-buttons">
<h2>Actions</h2> <h2>Actions</h2>
<a class="yaml-button download" href="/conf.yml" download>Download Config</a> <a class="yaml-button download" @click="downloadConfigFile('conf.yml', yaml)">
Download Config
</a>
<a class="yaml-button copy" @click="copyConfigToClipboard()">Copy Config</a> <a class="yaml-button copy" @click="copyConfigToClipboard()">Copy Config</a>
<a class="yaml-button reset" @click="resetLocalSettings()">Reset Config</a> <a class="yaml-button reset" @click="resetLocalSettings()">Reset Config</a>
</div> </div>
@ -104,6 +104,9 @@ export default {
sections: function getSections() { sections: function getSections() {
return this.config.sections; return this.config.sections;
}, },
yaml() {
return this.jsonParser(this.config);
},
}, },
components: { components: {
EditSiteMeta, EditSiteMeta,
@ -157,6 +160,16 @@ export default {
}, 1900); }, 1900);
} }
}, },
/* Generates a new file, with the YAML contents, and triggers a download */
downloadConfigFile(filename, filecontents) {
const element = document.createElement('a');
element.setAttribute('href', `data:text/plain;charset=utf-8, ${encodeURIComponent(filecontents)}`);
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
},
}, },
mounted() { mounted() {
hljs.registerLanguage('yaml', yaml); hljs.registerLanguage('yaml', yaml);
@ -288,14 +301,16 @@ a.hyperlink-wrapper {
border: 1px dashed var(--config-settings-color); border: 1px dashed var(--config-settings-color);
border-radius: var(--curve-factor); border-radius: var(--curve-factor);
text-align: left; text-align: left;
opacity: 0.95; opacity: var(--dimming-factor);
color: var(--config-settings-color); color: var(--config-settings-color);
background: var(--config-settings-background); background: var(--config-settings-background);
cursor: default;
p.sub-title { p.sub-title {
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
display: inline; display: inline;
} }
&:hover { opacity: 1; }
display: none; display: none;
@include tablet-up { display: block; } @include tablet-up { display: block; }
} }