diff options
| author | Henry Jameson <me@hjkos.com> | 2018-12-11 16:36:27 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2018-12-11 16:36:27 +0300 |
| commit | 83b85cd412245b8bfb65ff650b5543da4974ae46 (patch) | |
| tree | e62da2ac5fdb5c7b95ba5d9ddf6984c3fabdffd0 /src | |
| parent | c189a08dffd2373172d9fd34af5954af146c2f36 (diff) | |
better layouting for import-export, error display fixes
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/export_import/export_import.vue | 16 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 38 |
2 files changed, 34 insertions, 20 deletions
diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue index 9914d54a..451a2668 100644 --- a/src/components/export_import/export_import.vue +++ b/src/components/export_import/export_import.vue @@ -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> diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 6acb7755..84963c81 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -2,30 +2,32 @@ <div class="style-switcher"> <div class="presets-container"> <div class="save-load"> - <div class="presets"> - {{$t('settings.presets')}} - <label for="preset-switcher" class='select'> - <select id="preset-switcher" v-model="selected" class="preset-switcher"> - <option v-for="style in availableStyles" - :value="style" - :style="{ - backgroundColor: style[1] || style.theme.colors.bg, - color: style[3] || style.theme.colors.text - }"> - {{style[0] || style.name}} - </option> - </select> - <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' - /> + :validator='importValidator'> + <template slot="before"> + <div class="presets"> + {{$t('settings.presets')}} + <label for="preset-switcher" class='select'> + <select id="preset-switcher" v-model="selected" class="preset-switcher"> + <option v-for="style in availableStyles" + :value="style" + :style="{ + backgroundColor: style[1] || style.theme.colors.bg, + color: style[3] || style.theme.colors.text + }"> + {{style[0] || style.name}} + </option> + </select> + <i class="icon-down-open"/> + </label> + </div> + </template> + </export-import> </div> <div class="save-load-options"> <span class="keep-option"> |