Mercurial > gemma
changeset 1414:92d9dec88add
added indicator to info button when identifiedFeatures are present
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Thu, 29 Nov 2018 10:29:57 +0100 |
| parents | c5e004b97394 |
| children | d4fc5f3c1252 |
| files | client/src/components/map/toolbar/Identify.vue client/src/components/map/toolbar/Toolbar.vue |
| diffstat | 2 files changed, 24 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/toolbar/Identify.vue Thu Nov 29 09:59:10 2018 +0100 +++ b/client/src/components/map/toolbar/Identify.vue Thu Nov 29 10:29:57 2018 +0100 @@ -1,6 +1,9 @@ <template> <div @click="$store.commit('application/showIdentify', !showIdentify)" class="toolbar-button"> <font-awesome-icon icon="info" :class="{'text-info': showIdentify}"></font-awesome-icon> + <span :class="['indicator', { show: !showIdentify && (identifiedFeatures.length || currentMeasurement) }]"> + {{ badgeCount }} + </span> </div> </template> @@ -23,7 +26,11 @@ export default { name: "identify", computed: { - ...mapState("application", ["showIdentify"]) + ...mapState("application", ["showIdentify"]), + ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), + badgeCount() { + return this.identifiedFeatures.length + !!this.currentMeasurement; + } } }; </script>
--- a/client/src/components/map/toolbar/Toolbar.vue Thu Nov 29 09:59:10 2018 +0100 +++ b/client/src/components/map/toolbar/Toolbar.vue Thu Nov 29 10:29:57 2018 +0100 @@ -41,10 +41,26 @@ box-shadow: $shadow-xs z-index: 2 pointer-events: auto + position: relative + overflow: hidden .inverted color: $color-info .grey color: #ddd + .indicator + color: #fff + background: $color-info + position: absolute + bottom: -14px + left: -14px + padding: 2px 4px 1px + font-size: 11px + line-height: 11px + border-top-right-radius: $border-radius + transition: bottom 0.3s, left 0.3s + &.show + left: 0 + bottom: 0 </style> <script>