Reimplement layer settings dropdown

package.json

@@ -21,6 +21,7 @@
     "vue": "^2.6.6",
     "vue-feather-icons": "^5.0.0",
     "vue-js-modal": "^1.3.31",
+    "vue-outside-events": "^1.1.3",
     "vue-router": "^3.1.3",
     "vue2-leaflet": "^2.2.1",
     "vuejs-datepicker": "^1.6.2",

src/components/AppHeader.vue

@@ -12,65 +12,21 @@
       </div>
       <div class="nav-item">
         <LayersIcon size="1x" />
-        <div class="dropdown">
-          <button class="dropdown-button button" title="Show/hide layers">
-            Layer Settings
-          </button>
-          <div class="dropdown-body">
-            <label tabindex="0">
-              <input
-                type="checkbox"
-                :checked="map.layers.last"
-                @change="
-                  setMapLayerVisibility({
-                    layer: 'last',
-                    visibility: $event.target.checked,
-                  })
-                "
-              />
-              Show last known locations
-            </label>
-            <label tabindex="0">
-              <input
-                type="checkbox"
-                :checked="map.layers.line"
-                @change="
-                  setMapLayerVisibility({
-                    layer: 'line',
-                    visibility: $event.target.checked,
-                  })
-                "
-              />
-              Show location history (line)
-            </label>
-            <label tabindex="0">
-              <input
-                type="checkbox"
-                :checked="map.layers.points"
-                @change="
-                  setMapLayerVisibility({
-                    layer: 'points',
-                    visibility: $event.target.checked,
-                  })
-                "
-              />
-              Show location history (points)
-            </label>
-            <label tabindex="0">
-              <input
-                type="checkbox"
-                :checked="map.layers.heatmap"
-                @change="
-                  setMapLayerVisibility({
-                    layer: 'heatmap',
-                    visibility: $event.target.checked,
-                  })
-                "
-              />
-              Show location heatmap
-            </label>
-          </div>
-        </div>
+        <Dropdown label="Layer Settings" title="Show/hide layers">
+          <label v-for="option in layerSettingsOptions" :key="option.layer">
+            <input
+              type="checkbox"
+              :checked="map.layers[option.layer]"
+              @change="
+                setMapLayerVisibility({
+                  layer: option.layer,
+                  visibility: $event.target.checked,
+                })
+              "
+            />
+            {{ option.label }}
+          </label>
+        </Dropdown>
       </div>
       <div class="nav-item">
         <CalendarIcon size="1x" />
@@ -158,6 +114,7 @@ import {
 } from "vue-feather-icons";
 import Datepicker from "vuejs-datepicker";
 
+import Dropdown from "@/components/Dropdown";
 import * as types from "@/store/mutation-types";
 
 export default {
@@ -169,6 +126,17 @@ export default {
     SmartphoneIcon,
     UserIcon,
     Datepicker,
+    Dropdown,
+  },
+  data() {
+    return {
+      layerSettingsOptions: [
+        { layer: "last", label: "Show last known locations" },
+        { layer: "line", label: "Show location history (line)" },
+        { layer: "points", label: "Show location history (points)" },
+        { layer: "heatmap", label: "Show location heatmap" },
+      ],
+    };
   },
   computed: {
     ...mapState(["users", "devices", "map"]),

src/components/Dropdown.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="dropdown" v-focus-outside="hide" v-click-outside="hide">
+    <button class="dropdown-button button" :title="title" @click="toggle">
+      {{ label }}
+    </button>
+    <div v-if="active" class="dropdown-body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      active: false,
+    };
+  },
+  methods: {
+    toggle() {
+      this.active = !this.active;
+    },
+    hide() {
+      this.active = false;
+    },
+  },
+};
+</script>

src/main.js

@@ -3,8 +3,10 @@ import App from "@/App.vue";
 import router from "@/router";
 import store from "@/store";
 import VModal from "vue-js-modal";
+import VOutsideEvents from "vue-outside-events";
 
 Vue.use(VModal);
+Vue.use(VOutsideEvents);
 
 Vue.config.productionTip = false;
 

src/styles/_base.scss

@@ -236,7 +236,6 @@ pre {
 }
 
 .dropdown-body {
-  display: none;
   position: absolute;
   margin-top: 12px;
   padding: 8px 0;
@@ -269,10 +268,6 @@ pre {
   left: 20px;
 }
 
-.dropdown:focus-within .dropdown-body {
-  display: block;
-}
-
 .feather {
   vertical-align: middle;
 }

yarn.lock

@@ -10629,6 +10629,11 @@ vue-loader@^15.7.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-outside-events@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/vue-outside-events/-/vue-outside-events-1.1.3.tgz#75b3e3b7856590fbe4455c87075b54f92b2a9654"
+  integrity sha512-8FZqTRy3JUd1L/CFDoUPpuk4uM3piWFX1EixgKp4E3iOwDZfDHZVsnPYORbazs41XFB5u1EVPUOzbrR8iI4ImQ==
+
 vue-router@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.3.tgz#e6b14fabc0c0ee9fda0e2cbbda74b350e28e412b"