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

✨ Adds export styles functionality

This commit is contained in:
Alicia Sykes 2021-07-18 16:54:36 +01:00
parent 4c44ddef26
commit 97f3e3c747
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Settings/CustomThemeMaker.vue
View File

@ -31,6 +31,9 @@
/> />
</div> <!-- End of color list --> </div> <!-- End of color list -->
</div> </div>
<p @click="exportToClipboard" class="action-text-btn">
Export Custom Variables
</p>
<p @click="resetAndSave" class="action-text-btn show-all-vars-btn"> <p @click="resetAndSave" class="action-text-btn show-all-vars-btn">
Reset Styles for '{{ themeToEdit }}' Reset Styles for '{{ themeToEdit }}'
</p> </p>
@ -101,6 +104,15 @@ export default {
this.customColors = this.makeInitialData(mainCssVars); this.customColors = this.makeInitialData(mainCssVars);
this.saveChanges(); this.saveChanges();
}, },
exportToClipboard() {
const themeName = this.themeToEdit.replace(/^\w/, c => c.toUpperCase());
let clipboardText = `// Custom Colors for ${themeName}\n`;
Object.keys(this.customColors).forEach((customVar) => {
clipboardText += (`--${customVar}: ${this.customColors[customVar]};\n`);
});
navigator.clipboard.writeText(clipboardText);
this.$toasted.show(`Theme data for ${themeName} copied to clipboard`);
},
/* Returns a JSON object, with the variable name as key, and color as value */ /* Returns a JSON object, with the variable name as key, and color as value */
makeInitialData(variableArray) { makeInitialData(variableArray) {
const data = {}; const data = {};
@ -168,6 +180,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/styles/style-helpers.scss';
div.theme-configurator-wrapper { div.theme-configurator-wrapper {
position: absolute; position: absolute;
@ -175,7 +188,7 @@ div.theme-configurator-wrapper {
right: 1rem; right: 1rem;
width: 16rem; width: 16rem;
min-height: 12rem; min-height: 12rem;
max-height: 25rem; max-height: 28rem;
padding: 0.5rem; padding: 0.5rem;
z-index: 5; z-index: 5;
overflow-y: visible; overflow-y: visible;
@ -193,12 +206,13 @@ div.theme-configurator-wrapper {
div.color-row-container { div.color-row-container {
max-height: 16rem; max-height: 16rem;
overflow-y: visible; overflow-y: visible;
@extend .scroll-bar;
div.color-row { div.color-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.25rem 0; padding: 0.25rem 0;
&:not(:last-child) { border-bottom: 1px dashed var(--primary); } border-bottom: 1px dashed var(--primary);
label.color-name { label.color-name {
text-transform: capitalize; text-transform: capitalize;
} }