AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 82 Pull requests 20 Projects Releases 1 Wiki Activity

better layouting for import-export, error display fixes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/export_import/export_import.vue
View file

@ -1,8 +1,11 @@
<template> <template>
<div class="import-export"> <div class="import-export-container">
<slot name="before"/>
<button class="btn" @click="exportData">{{ exportLabel }}</button> <button class="btn" @click="exportData">{{ exportLabel }}</button>
<button class="btn" @click="importData">{{ importLabel }}</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> </div>
</template> </template>
@ -73,3 +76,12 @@ export default {
} }
} }
</script> </script>
<style lang="scss">
.import-export-container {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
}
</style>

38
src/components/style_switcher/style_switcher.vue
View file

@ -2,30 +2,32 @@
<div class="style-switcher"> <div class="style-switcher">
<div class="presets-container"> <div class="presets-container">
<div class="save-load"> <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 <export-import
:exportObject='exportedTheme' :exportObject='exportedTheme'
:exportLabel='$t("settings.export_theme")' :exportLabel='$t("settings.export_theme")'
:importLabel='$t("settings.import_theme")' :importLabel='$t("settings.import_theme")'
:importFailedText='$t("settings.invalid_theme_imported")' :importFailedText='$t("settings.invalid_theme_imported")'
:onImport='onImport' :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>
<div class="save-load-options"> <div class="save-load-options">
<span class="keep-option"> <span class="keep-option">