Mercurial > gemma

comparison client/src/components/layers/Layers.vue @ 2387:f185503ef35a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: unified box's header styles by creating a reusable component The clients html/css and resulting look and feel of the app is partially very inconsistent. By moving code to more small and reusable components consistency will hopefully be increased.
author Markus Kottlaender <markus@intevation.de>
date Mon, 25 Feb 2019 15:02:34 +0100
parents 531e776cb81d
children bb5286acfee2
comparison
equal deleted inserted replaced
2386:24e3e86b8cb6 2387:f185503ef35a
4 'box ui-element rounded bg-white text-nowrap', 4 'box ui-element rounded bg-white text-nowrap',
5 { expanded: showLayers } 5 { expanded: showLayers }
6 ]" 6 ]"
7 > 7 >
8 <div style="width: 18rem"> 8 <div style="width: 18rem">
9 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> 9 <UIBoxHeader icon="layer-group" title="Layers" :closeCallback="close" />
10 <font-awesome-icon icon="layer-group" class="mr-2"></font-awesome-icon
11 ><translate>Layers</translate>
12 <font-awesome-icon
13 icon="times"
14 class="ml-auto text-muted pointer"
15 @click="$store.commit('application/showLayers', false)"
16 ></font-awesome-icon>
17 </h6>
18 <div class="d-flex flex-column p-3 small"> 10 <div class="d-flex flex-column p-3 small">
19 <Layerselect 11 <Layerselect
20 v-for="(layer, index) in layersForLegend" 12 v-for="(layer, index) in layersForLegend"
21 :layerindex="index" 13 :layerindex="index"
22 :layername="layer.name" 14 :layername="layer.name"
53 computed: { 45 computed: {
54 ...mapGetters("map", ["layersForLegend"]), 46 ...mapGetters("map", ["layersForLegend"]),
55 ...mapState("application", ["showLayers"]) 47 ...mapState("application", ["showLayers"])
56 }, 48 },
57 methods: { 49 methods: {
50 close() {
51 this.$store.commit("application/showLayers", false);
52 },
58 visibilityToggled(layer) { 53 visibilityToggled(layer) {
59 this.$store.commit("map/toggleVisibility", layer); 54 this.$store.commit("map/toggleVisibility", layer);
60 } 55 }
61 } 56 }
62 }; 57 };