added svg legend icons

Author: yvess

vue/src/components/LegendIcon.vue

@@ -0,0 +1,55 @@
+<template>
+  <svg
+    :class="isPrimary ? 'is-primary' : 'no-primary'"
+    viewBox="0 0 20 20"
+    width="20" height="20"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle v-if="shape === 'circle'"
+      cx="10" cy="10"
+      :r="9 * attr.size"
+      :stroke="attr.strokeColor"
+      :stroke-width="attr.strokeWidth"
+      :stroke-opacity="attr.strokeOpacity"
+      :fill="attr.fillColor"
+      :fill-opacity="attr.fillOpacity"
+    />
+    <rect v-else-if="shape === 'square'"
+      :x="'calc(50% - ' + attr.size * 10 + ')'"
+      :y="'calc(50% - ' + attr.size * 10 + ')'"
+      :width="attr.size * 20"
+      :height="attr.size * 20"
+      :stroke-width="attr.strokeWidth"
+      :stroke="attr.strokeColor"
+      :stroke-opacity="attr.strokeOpacity"
+      :fill="attr.fillColor"
+      :fill-opacity="attr.fillOpacity"
+    />
+    <line v-else-if="shape === 'line'"
+      x1="0" x2="100%"
+      y1="50%"
+      y2="50%"
+      :stroke="attr.strokeColor"
+      :stroke-width="attr.strokeWidth"
+      :opacity="attr.strokeOpacity"
+    />
+  </svg>
+</template>
+
+<style>
+</style>
+
+
+<script>
+export default {
+  name: 'LegendIcon',
+  data() {
+    return {};
+  },
+
+  props: {
+    shape: String,
+    isPrimary: Boolean,
+    attr: Object
+  }
+};
+</script>

vue/src/components/SnapshotMeta.vue

@@ -18,19 +18,7 @@
         class="pa-0 mb-1"
         >
         <v-list-item-icon class="my-0 mr-2">
-          <v-icon v-if="item.shape === 'circle'"
-            :color="item.color"
-            :style="{ fontSize: 1.6 * item.size + 'em', opacity: item.opacity}">
-              mdi-circle-outline</v-icon>
-          <v-icon v-else-if="item.shape === 'square'"
-            :color="item.color"
-            :style="{ fontSize: 1.6 * item.size + 'em', opacity: item.opacity}">mdi-square</v-icon>
-          <span v-else-if="item.shape === 'line'" class="legend--line"
-            :style="{
-              backgroundColor: item.color,
-              height: 0.5 * item.size + 'em',
-              opacity: item.opacity}">&nbsp;
-          </span>
+          <legend-icon :shape="item.shape" :isPrimary="item.primary" :attr="item" />
         </v-list-item-icon>
         <v-list-item-content class="py-0">
           <v-list-item-title>
@@ -45,16 +33,24 @@
 
 <style>
 .legend .v-list-item--dense,
-.legend.v-list--dense .v-list-item {
+.legend.v-list--dense .v-list-item,
+.legend .v-list-item__content {
   min-height: 24px;
 }
+
 .v-list-item__icon {
   min-width: auto;
 }
+
+.legend .v-list-item__content {
+  padding-bottom: 4px !important;
+}
+
 .legend--line {
   margin: auto 0;
   width: 2em;
 }
+
 a.legend--hash,
 .legend--hash:visited,
 .legend--hash:hover,
@@ -65,6 +61,11 @@ a.legend--hash,
 </style>
 
 <script>
+import Vue from 'vue';
+import LegendIcon from './LegendIcon.vue';
+
+Vue.component('legend-icon', LegendIcon);
+
 export default {
   name: 'SnapshotMeta',
   data() {

vue/src/views/Snapshot.vue

@@ -33,8 +33,7 @@
       clipped="clipped"
       app
       width="320"
-      v-model="snapshotnav"
-      >
+      v-model="snapshotnav">
       <router-link id="logo" :to="'/' + $i18n.locale + '/'" class="px-4 py-1 d-block">
         <img alt="gemeindescan logo" height="50" src="@/assets/images/gemeindescan-logo.svg">
       </router-link>
@@ -68,9 +67,9 @@
       </div>
 
       <v-toolbar
-       width="320"
-       absolute
-       bottom>
+        width="320"
+        absolute
+        bottom>
         <div class="useractions">
           <user-actions noRequest="1" />
         </div>
@@ -109,7 +108,7 @@
         class="px-4 py-2"
         :style="'width:' + legendWidth"
         v-bind:class="{open: mapinfoopen}"
-      >
+        >
         <v-icon
           style="position: absolute; top:0; right:0;"
           class="pa-2"