Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-12-27 19:03:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

🌐 Adds localisation for Settings, Config and Theme maker

Browse Source
This commit is contained in:
Alicia Sykes 2021-07-24 16:18:28 +01:00
parent ef3468e2fb
commit 55aeb44c1a
6 changed files with 77 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/assets/locales/en-GB.json
View File

@ -49,6 +49,29 @@
"css-note-l2": "Styles overrides are only stored locally, so it is recommended to make a copy of your CSS.",
"css-note-l3": "To remove all custom styles, delete the contents and hit Save Changes"
},
"settings": {
"theme-label": "Theme",
"layout-label": "Layout",
"layout-auto": "Auto",
"layout-horizontal": "Horizontal",
"layout-vertical": "Vertical",
"item-size-label": "Item Size",
"item-size-small": "Small",
"item-size-medium": "Medium",
"item-size-large": "Large",
"config-launcher-label": "Config"
},
"theme-maker": {
"title": "Theme Configurator",
"export-button": "Export Custom Variables",
"reset-button": "Reset Styles for",
"show-all-button": "Show All Variables",
"save-button": "Save",
"cancel-button": "Cancel",
"saved-toast": "{theme} Updated Successfully",
"copied-toast": "Theme data for {theme} copied to clipboard",
"reset-toast": "Custom Colors for {theme} Removed"
},
"config-editor": {
"save-location-label": "Save Location",
"location-local-label": "Apply Locally",

4
src/components/Settings/ConfigLauncher.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="config-options">
<!-- Button and label -->
<span>Config</span>
<span>{{ $t('settings.config-launcher-label') }}</span>
<div class="config-buttons">
<IconSpanner @click="showEditor()" tabindex="-2"
v-tooltip="tooltip('Update configuration locally')" />
v-tooltip="tooltip('Update configuration')" />
<IconCloud @click="showCloudModal()" tabindex="-2"
v-tooltip="tooltip('Backup / restore cloud config')" />
</div>

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

@ -1,6 +1,6 @@
<template>
<div :class="`theme-configurator-wrapper ${showingAllVars ? 'showing-all' : ''}`">
<h3 class="configurator-title">Theme Configurator</h3>
<h3 class="configurator-title">{{ $t('theme-maker.title') }}</h3>
<div class="color-row-container">
<div class="color-row" v-for="colorName in Object.keys(customColors)" :key="colorName">
<label :for="`color-input-${colorName}`" class="color-name">
@ -33,17 +33,21 @@
</div> <!-- End of color list -->
</div>
<p @click="exportToClipboard" class="action-text-btn">
Export Custom Variables
{{ $t('theme-maker.export-button') }}
</p>
<p @click="resetAndSave" class="action-text-btn show-all-vars-btn">
Reset Styles for '{{ themeToEdit }}'
{{ $t('theme-maker.reset-button') }} '{{ themeToEdit }}'
</p>
<p @click="findAllVariableNames" class="action-text-btn">
Show All Variables
{{ $t('theme-maker.show-all-button') }}
</p>
<div class="action-buttons">
<Button :click="saveChanges"><SaveIcon />Save</Button>
<Button :click="resetUnsavedColors"><CancelIcon />Cancel</Button>
<Button :click="saveChanges">
<SaveIcon /> {{ $t('theme-maker.save-button') }}
</Button>
<Button :click="resetUnsavedColors">
<CancelIcon /> {{ $t('theme-maker.cancel-button') }}
</Button>
</div>
</div>
</template>
@ -89,7 +93,7 @@ export default {
const priorSettings = JSON.parse(localStorage[localStorageKeys.CUSTOM_COLORS] || '{}');
priorSettings[this.themeToEdit] = this.customColors;
localStorage.setItem(localStorageKeys.CUSTOM_COLORS, JSON.stringify(priorSettings));
this.$toasted.show('Theme Updates Succesfully');
this.$toasted.show(this.$t('theme-maker.saved-toast', { theme: this.themeToEdit }));
this.$emit('closeThemeConfigurator');
},
/* Itterates over available variables, removing them from the DOM */
@ -107,7 +111,7 @@ export default {
delete priorSettings[this.themeToEdit];
localStorage.setItem(localStorageKeys.CUSTOM_COLORS, JSON.stringify(priorSettings));
this.resetUnsavedColors();
this.$toasted.show(`Custom Colors for ${this.themeToEdit} Removed`);
this.$toasted.show(this.$t('theme-maker.reset-toast', { theme: this.themeToEdit }));
},
/* Generates CSS for the currently applied variables, and copys to users clipboard */
exportToClipboard() {
@ -117,7 +121,7 @@ export default {
clipboardText += (`--${customVar}: ${this.customColors[customVar]};\n`);
});
navigator.clipboard.writeText(clipboardText);
this.$toasted.show(`Theme data for ${themeName} copied to clipboard`);
this.$toasted.show(this.$t('theme-maker.copied-toast', { theme: themeName }));
},
/* Returns a JSON object, with the variable name as key, and color as value */
makeInitialData(variableArray) {

26
src/components/Settings/ItemSizeSelector.vue
View File

@ -1,13 +1,25 @@
<template>
<div>
<span class="options-label">Icon Size</span>
<span class="options-label">{{ $t('settings.item-size-label') }}</span>
<div class="display-options">
<IconSmall @click="updateIconSize('small')" v-tooltip="tooltip('Small')"
:class="`layout-icon ${iconSize === 'small' ? 'selected' : ''}`" tabindex="-2" />
<IconMedium @click="updateIconSize('medium')" v-tooltip="tooltip('Medium')"
:class="`layout-icon ${iconSize === 'medium' ? 'selected' : ''}`" tabindex="-2" />
<IconLarge @click="updateIconSize('large')" v-tooltip="tooltip('Large')"
:class="`layout-icon ${iconSize === 'large' ? 'selected' : ''}`" tabindex="-2" />
<IconSmall
@click="updateIconSize('small')"
v-tooltip="tooltip($t('settings.item-size-small'))"
:class="`layout-icon ${iconSize === 'small' ? 'selected' : ''}`"
tabindex="-2"
/>
<IconMedium
@click="updateIconSize('medium')"
v-tooltip="tooltip($t('settings.item-size-medium'))"
:class="`layout-icon ${iconSize === 'medium' ? 'selected' : ''}`"
tabindex="-2"
/>
<IconLarge
@click="updateIconSize('large')"
v-tooltip="tooltip($t('settings.item-size-large'))"
:class="`layout-icon ${iconSize === 'large' ? 'selected' : ''}`"
tabindex="-2"
/>
</div>
</div>
</template>

26
src/components/Settings/LayoutSelector.vue
View File

@ -1,13 +1,25 @@
<template>
<div>
<span class="options-label">Layout</span>
<span class="options-label">{{ $t('settings.layout-label') }}</span>
<div class="display-options">
<IconDeafault @click="updateDisplayLayout('auto')" v-tooltip="tooltip('Auto')"
:class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`" tabindex="-2" />
<IconHorizontal @click="updateDisplayLayout('horizontal')" v-tooltip="tooltip('Horizontal')"
:class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" tabindex="-2" />
<IconVertical @click="updateDisplayLayout('vertical')" v-tooltip="tooltip('Vertical')"
:class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" tabindex="-2" />
<IconDeafault
@click="updateDisplayLayout('auto')"
v-tooltip="tooltip($t('settings.layout-auto'))"
:class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`"
tabindex="-2"
/>
<IconHorizontal
@click="updateDisplayLayout('horizontal')"
v-tooltip="tooltip($t('settings.layout-horizontal'))"
:class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`"
tabindex="-2"
/>
<IconVertical
@click="updateDisplayLayout('vertical')"
v-tooltip="tooltip($t('settings.layout-vertical'))"
:class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`"
tabindex="-2"
/>
</div>
</div>
</template>

2
src/components/Settings/ThemeSelector.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="theme-selector-section" v-click-outside="closeThemeConfigurator">
<div>
<span class="theme-label">Theme</span>
<span class="theme-label">{{ $t('settings.theme-label') }}</span>
<v-select
:options="themeNames"
v-model="selectedTheme"