comparison client/src/components/identify/Identify.vue @ 2387:f185503ef35a

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 20e4efa64320
children ef928c63388a
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: showIdentify } 5 { expanded: showIdentify }
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="info" title="Identified" :closeCallback="close" />
10 <font-awesome-icon icon="info" class="mr-2"></font-awesome-icon>
11 <translate>Identified</translate>
12 <font-awesome-icon
13 icon="times"
14 class="ml-auto text-muted"
15 @click="$store.commit('application/showIdentify', false)"
16 ></font-awesome-icon>
17 </h6>
18 <div class="features flex-grow-1 text-left"> 10 <div class="features flex-grow-1 text-left">
19 <div v-if="currentMeasurement"> 11 <div v-if="currentMeasurement">
20 <small class="d-block bg-dark text-light text-center px-2 py-1"> 12 <small class="d-block bg-dark text-light text-center px-2 py-1">
21 {{ $gettext("Measurement") }} 13 {{ $gettext("Measurement") }}
22 </small> 14 </small>
127 ...mapState("application", ["showIdentify"]), 119 ...mapState("application", ["showIdentify"]),
128 ...mapGetters("map", ["filteredIdentifiedFeatures"]), 120 ...mapGetters("map", ["filteredIdentifiedFeatures"]),
129 ...mapState("map", ["currentMeasurement"]) 121 ...mapState("map", ["currentMeasurement"])
130 }, 122 },
131 methods: { 123 methods: {
124 close() {
125 this.$store.commit("application/showIdentify", false);
126 },
132 featureId(feature) { 127 featureId(feature) {
133 // cut away everything from the last . to the end 128 // cut away everything from the last . to the end
134 return feature.getId().replace(/[.][^.]*$/, ""); 129 return feature.getId().replace(/[.][^.]*$/, "");
135 }, 130 },
136 featureLabel(feature) { 131 featureLabel(feature) {