Mercurial > gemma
annotate client/src/application/Linetool.vue @ 941:8a80ef09a62c
client: improve identify
* Remove trigger that unfolds the box when features are identified.
Rationale: This makes the user interface too "jumpy".
* Instead add a style change for the icon to indicate if data is available.
It will use the bootstrap `text-info` style class.
* Simplify code that detects if a bottleneck was identified.
| author | Bernhard Reiter <bernhard@intevation.de> |
|---|---|
| date | Tue, 09 Oct 2018 17:00:49 +0200 |
| parents | 2990a878b16b |
| children |
| rev | line source |
|---|---|
| 649 | 1 <template> |
| 2 <div @click="drawLine" class="ui-element d-flex shadow drawtool"> | |
| 3 <i :class="icon"></i> | |
| 4 </div> | |
| 5 </template> | |
| 6 | |
| 7 <style lang="scss"> | |
| 8 .drawtool { | |
| 9 position: absolute; | |
| 10 bottom: 0; | |
| 11 right: 0; | |
| 12 background-color: white; | |
| 13 padding: $small-offset; | |
| 14 border-radius: $border-radius; | |
| 15 margin-left: $offset; | |
| 16 height: $icon-width; | |
| 17 width: $icon-height; | |
| 18 margin-bottom: $offset; | |
| 19 margin-right: $offset; | |
| 20 z-index: 2; | |
| 21 } | |
|
752
f09cbe80a864
refac: small improvements
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
22 |
|
903
2990a878b16b
fix cut with scissors
Thomas Junk <thomas.junk@intevation.de>
parents:
752
diff
changeset
|
23 .inverted { |
|
752
f09cbe80a864
refac: small improvements
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
24 color: #0077ff; |
|
f09cbe80a864
refac: small improvements
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
25 } |
| 649 | 26 </style> |
| 27 | |
| 28 <script> | |
|
903
2990a878b16b
fix cut with scissors
Thomas Junk <thomas.junk@intevation.de>
parents:
752
diff
changeset
|
29 import { mapGetters, mapState } from "vuex"; |
| 649 | 30 |
| 31 export default { | |
| 32 name: "linetool", | |
| 33 methods: { | |
| 34 drawLine() { | |
| 35 this.$store.commit("application/toggleDrawModeLine"); | |
| 36 } | |
| 37 }, | |
| 38 computed: { | |
| 39 ...mapGetters("application", ["drawMode"]), | |
|
903
2990a878b16b
fix cut with scissors
Thomas Junk <thomas.junk@intevation.de>
parents:
752
diff
changeset
|
40 ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]), |
| 649 | 41 icon() { |
| 42 return { | |
| 43 fa: true, | |
|
903
2990a878b16b
fix cut with scissors
Thomas Junk <thomas.junk@intevation.de>
parents:
752
diff
changeset
|
44 "fa-pencil": !this.selectedMorph, |
|
2990a878b16b
fix cut with scissors
Thomas Junk <thomas.junk@intevation.de>
parents:
752
diff
changeset
|
45 "fa-pencil inverted": !this.selectedMorph && this.drawMode, |
|
2990a878b16b
fix cut with scissors
Thomas Junk <thomas.junk@intevation.de>
parents:
752
diff
changeset
|
46 "fa-cut": this.selectedMorph, |
|
2990a878b16b
fix cut with scissors
Thomas Junk <thomas.junk@intevation.de>
parents:
752
diff
changeset
|
47 "fa-cut inverted": this.selectedMorph && this.drawMode |
| 649 | 48 }; |
| 49 } | |
| 50 } | |
| 51 }; | |
| 52 </script> |