Mercurial > gemma
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) { |