Mercurial > gemma
changeset 3889:851c0ccba59b
client: configuration: separated sections in tabs
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 10 Jul 2019 14:06:07 +0200 |
parents | ccd77fe5072c |
children | 589f308d5802 |
files | client/src/components/systemconfiguration/ColorSettings.vue client/src/components/systemconfiguration/DataAccuracy.vue client/src/components/systemconfiguration/MapLayers.vue client/src/components/systemconfiguration/MorphologyClassbreaks.vue client/src/components/systemconfiguration/PDFTemplates.vue client/src/components/systemconfiguration/Systemconfiguration.vue |
diffstat | 6 files changed, 78 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/ColorSettings.vue Wed Jul 10 13:17:41 2019 +0200 +++ b/client/src/components/systemconfiguration/ColorSettings.vue Wed Jul 10 14:06:07 2019 +0200 @@ -1,6 +1,5 @@ <template> - <div class="d-flex flex-column pb-4 border-bottom"> - <h5 class="py-2 px-3 mb-2 m-0"><translate>Color Settings</translate></h5> + <div class="d-flex flex-column py-4"> <div class="px-3 container-fluid"> <div class="row"> <div class="col-sm-2">
--- a/client/src/components/systemconfiguration/DataAccuracy.vue Wed Jul 10 13:17:41 2019 +0200 +++ b/client/src/components/systemconfiguration/DataAccuracy.vue Wed Jul 10 14:06:07 2019 +0200 @@ -1,8 +1,5 @@ <template> - <div class="d-flex flex-column pb-4 border-bottom"> - <h5 class="py-2 px-3 mb-2 m-0"> - <translate>Data Availability/Accuracy</translate> - </h5> + <div class="d-flex flex-column py-4"> <div class="px-3 container-fluid"> <div class="row"> <div class="col-sm-6 d-flex flex-column">
--- a/client/src/components/systemconfiguration/MapLayers.vue Wed Jul 10 13:17:41 2019 +0200 +++ b/client/src/components/systemconfiguration/MapLayers.vue Wed Jul 10 14:06:07 2019 +0200 @@ -1,6 +1,5 @@ <template> - <div class="d-flex flex-column pb-4 border-bottom"> - <h5 class="py-2 px-3 mb-2 m-0"><translate>Map Layers</translate></h5> + <div class="d-flex flex-column py-4"> <div class="px-3 container-fluid"> <div class="row"> <div class="col-sm-6">
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue Wed Jul 10 13:17:41 2019 +0200 +++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue Wed Jul 10 14:06:07 2019 +0200 @@ -1,8 +1,5 @@ <template> - <div class="d-flex flex-column pb-4 border-bottom"> - <h5 class="py-2 px-3 mb-2 m-0"> - <translate>Bottleneck Morphology Classbreaks</translate> - </h5> + <div class="d-flex flex-column py-4"> <div class="px-3"> <h6 class="font-weight-bold"><translate>Sounding Result</translate></h6> <div class="d-flex flex-wrap">
--- a/client/src/components/systemconfiguration/PDFTemplates.vue Wed Jul 10 13:17:41 2019 +0200 +++ b/client/src/components/systemconfiguration/PDFTemplates.vue Wed Jul 10 14:06:07 2019 +0200 @@ -1,6 +1,5 @@ <template> - <div class="d-flex flex-column pb-4 border-bottom"> - <h5 class="py-2 px-3 m-0"><translate>PDF-Templates</translate></h5> + <div class="d-flex flex-column pb-4"> <input @change="uploadTemplate" id="uploadTemplate" @@ -39,7 +38,7 @@ </div> </template> </UITableBody> - <div class="px-3 mt-2"> + <div class="p-3 border-top"> <button class="btn btn-info btn-sm mr-2" @click="
--- a/client/src/components/systemconfiguration/Systemconfiguration.vue Wed Jul 10 13:17:41 2019 +0200 +++ b/client/src/components/systemconfiguration/Systemconfiguration.vue Wed Jul 10 14:06:07 2019 +0200 @@ -4,17 +4,79 @@ <div class="card my-2 mr-2 flex-fill shadow-xs"> <UIBoxHeader icon="wrench" :title="systemconfigurationLabel" /> <div class="text-left flex-fill" style="overflow: auto"> - <PDFTemplates /> - <ColorSettings v-if="isSysAdmin" /> - <MapLayers v-if="isSysAdmin" /> - <DataAccuracy v-if="isSysAdmin" /> - <MorphologyClassbreaks v-if="isSysAdmin" /> + <ul class="nav nav-pills nav-fill border-bottom"> + <li class="nav-item"> + <a + :class="['nav-link', { active: activeTab === 'pdf-templates' }]" + href="#" + @click.prevent="activeTab = 'pdf-templates'" + > + <translate>PDF-Templates</translate> + </a> + </li> + <li class="nav-item" v-if="isSysAdmin"> + <a + :class="['nav-link', { active: activeTab === 'color-settings' }]" + href="#" + @click.prevent="activeTab = 'color-settings'" + > + <translate>Color Settings</translate> + </a> + </li> + <li class="nav-item" v-if="isSysAdmin"> + <a + :class="['nav-link', { active: activeTab === 'map-layers' }]" + href="#" + @click.prevent="activeTab = 'map-layers'" + > + <translate>Map Layers</translate> + </a> + </li> + <li class="nav-item" v-if="isSysAdmin"> + <a + :class="['nav-link', { active: activeTab === 'data-accuracy' }]" + href="#" + @click.prevent="activeTab = 'data-accuracy'" + > + <translate>Data Availability/Accuracy</translate> + </a> + </li> + <li class="nav-item" v-if="isSysAdmin"> + <a + :class="[ + 'nav-link', + { active: activeTab === 'morphology-classbreaks' } + ]" + href="#" + @click.prevent="activeTab = 'morphology-classbreaks'" + > + <translate>Bottleneck Morphology Classbreaks</translate> + </a> + </li> + </ul> + <keep-alive> + <PDFTemplates v-if="activeTab === 'pdf-templates'" /> + <ColorSettings v-if="isSysAdmin && activeTab === 'color-settings'" /> + <MapLayers v-if="isSysAdmin && activeTab === 'map-layers'" /> + <DataAccuracy v-if="isSysAdmin && activeTab === 'data-accuracy'" /> + <MorphologyClassbreaks + v-if="isSysAdmin && activeTab === 'morphology-classbreaks'" + /> + </keep-alive> </div> <!-- card-body --> </div> </div> </template> +<style lang="sass"> +.nav-pills + .nav-link + border-radius: 0 + &.active + background: $color-info +</style> + <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. @@ -34,7 +96,11 @@ import { mapGetters } from "vuex"; export default { - name: "systemconfiguration", + data() { + return { + activeTab: "pdf-templates" + }; + }, components: { Spacer: () => import("../Spacer"), PDFTemplates: () => import("./PDFTemplates"),