Add theme import feature

This commit is contained in:
Ole Bertram 2018-06-28 02:59:57 +02:00
parent f36984c4a4
commit d2b79856c6
No known key found for this signature in database
GPG key ID: E1B751CB4B7F8D28
3 changed files with 24 additions and 0 deletions

View file

@ -52,6 +52,28 @@ export default {
document.body.removeChild(e) document.body.removeChild(e)
}, },
importTheme () {
const filePicker = document.createElement('input')
filePicker.setAttribute('type', 'file')
filePicker.setAttribute('accept', '.json')
filePicker.addEventListener('change', event => {
if (event.target.files[0]) {
// eslint-disable-next-line no-undef
const reader = new FileReader()
reader.onload = ({target}) => {
const parsed = JSON.parse(target.result)
this.normalizeLocalState(parsed.colors, parsed.radii)
}
reader.readAsText(event.target.files[0])
}
})
document.body.appendChild(filePicker)
filePicker.click()
document.body.removeChild(filePicker)
},
setCustomTheme () { setCustomTheme () {
if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) { if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
// reset to picked themes // reset to picked themes

View file

@ -10,6 +10,7 @@
</div> </div>
<div> <div>
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button> <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
<button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
</div> </div>
<div class="color-container"> <div class="color-container">
<p>{{$t('settings.theme_help')}}</p> <p>{{$t('settings.theme_help')}}</p>

View file

@ -289,6 +289,7 @@ const en = {
theme: 'Theme', theme: 'Theme',
presets: 'Presets', presets: 'Presets',
export_theme: 'Export current theme', export_theme: 'Export current theme',
import_theme: 'Load saved theme',
theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.', theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.',
radii_help: 'Set up interface edge rounding (in pixels)', radii_help: 'Set up interface edge rounding (in pixels)',
background: 'Background', background: 'Background',