better layouting for import-export, error display fixes

This commit is contained in:
Henry Jameson 2018-12-11 16:36:27 +03:00
parent c189a08dff
commit 83b85cd412
2 changed files with 34 additions and 20 deletions

View File

@ -1,8 +1,11 @@
<template>
<div class="import-export">
<div class="import-export-container">
<slot name="before"/>
<button class="btn" @click="exportData">{{ exportLabel }}</button>
<button class="btn" @click="importData">{{ importLabel }}</button>
<p v-if="importFailed" class="import-warning">{{ importFailedText }}</p>
<slot name="afterButtons"/>
<p v-if="importFailed" class="alert error">{{ importFailedText }}</p>
<slot name="afterError"/>
</div>
</template>
@ -73,3 +76,12 @@ export default {
}
}
</script>
<style lang="scss">
.import-export-container {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
}
</style>

View File

@ -2,6 +2,14 @@
<div class="style-switcher">
<div class="presets-container">
<div class="save-load">
<export-import
:exportObject='exportedTheme'
:exportLabel='$t("settings.export_theme")'
:importLabel='$t("settings.import_theme")'
:importFailedText='$t("settings.invalid_theme_imported")'
:onImport='onImport'
:validator='importValidator'>
<template slot="before">
<div class="presets">
{{$t('settings.presets')}}
<label for="preset-switcher" class='select'>
@ -18,14 +26,8 @@
<i class="icon-down-open"/>
</label>
</div>
<export-import
:exportObject='exportedTheme'
:exportLabel='$t("settings.export_theme")'
:importLabel='$t("settings.import_theme")'
:importFailedText='$t("settings.invalid_theme_imported")'
:onImport='onImport'
:validator='importValidator'
/>
</template>
</export-import>
</div>
<div class="save-load-options">
<span class="keep-option">