Merge pull request #79 from fhstp/feature_viewsettings

ViewOptionsPanel.vue

src/components/SideMenu.vue

@@ -82,39 +82,6 @@
           </span>
           <span>Kennzahlen</span>
         </button>
-
-        <button class="button" @click="togglePseudonyms">
-          <span class="icon">
-            <font-awesome-icon icon="user-secret" />
-          </span>
-          <span v-if="pseudonyms">De-Anonymisieren</span>
-          <span v-else>Anonymisieren</span>
-          <span></span>
-        </button>
-
-        <button class="button" @click.stop="toggleHorizons">
-          <span class="icon">
-            <font-awesome-icon icon="rss" />
-          </span>
-          <span v-if="horizons">Horizonte aus</span>
-          <span v-else>Horizonte ein</span>
-        </button>
-
-        <button class="button" @click.stop="toggleConnections">
-          <span class="icon">
-            <font-awesome-icon icon="project-diagram" />
-          </span>
-          <span v-if="connections">Verbindungen aus</span>
-          <span v-else>Verbindungen ein</span>
-        </button>
-
-        <button class="button" @click.stop="toggleAlteriNames">
-          <span class="icon">
-            <font-awesome-icon icon="font" />
-          </span>
-          <span v-if="alteriNames">Kontaktnamen aus</span>
-          <span v-else>Kontaktnamen ein</span>
-        </button>
       </div>
 
       <a href="http://www.easynwk.com/" target="_blank">Über die easyNWK</a>

src/components/ViewOptionsPanel.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="panel">
+    <p class="panel-heading" @click.stop="isOpen = !isOpen">
+      <span>Ansichtseinstellungen</span>
+      <span class="icon is-medium clickAble right">
+        <font-awesome-icon v-if="isOpen" icon="chevron-up" />
+        <font-awesome-icon v-else icon="chevron-down" size="1x" />
+      </span>
+    </p>
+    <form class="panel-block form">
+      <div class="field is-horizontal">
+        <div class="field-body">
+          <div id="view-settings" class="field" v-if="isOpen">
+            <div class="control">
+              <div class="buttons">
+                <a class="button" @click="togglePseudonyms">
+                  <span class="icon">
+                    <font-awesome-icon icon="user-secret" />
+                  </span>
+                  <span v-if="pseudonyms">De-Anonymisieren</span>
+                  <span v-else>Anonymisieren</span>
+                  <span></span>
+                </a>
+
+                <button class="button" @click.stop="toggleHorizons">
+                  <span class="icon">
+                    <font-awesome-icon icon="rss" />
+                  </span>
+                  <span v-if="horizons">Horizonte aus</span>
+                  <span v-else>Horizonte ein</span>
+                </button>
+
+                <br />
+
+                <button class="button" @click.stop="toggleConnections">
+                  <span class="icon">
+                    <font-awesome-icon icon="project-diagram" />
+                  </span>
+                  <span v-if="connections">Verbindungen aus</span>
+                  <span v-else>Verbindungen ein</span>
+                </button>
+
+                <button class="button" @click.stop="toggleAlteriNames">
+                  <span class="icon">
+                    <font-awesome-icon icon="font" />
+                  </span>
+                  <span v-if="alteriNames">Kontaktnamen aus</span>
+                  <span v-else>Kontaktnamen ein</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from "vue";
+import { useStore } from "@/store";
+
+export default defineComponent({
+  setup() {
+    const store = useStore();
+
+    const isOpen = ref(false);
+
+    return {
+      pseudonyms: computed(() => store.state.pseudonym.active),
+      togglePseudonyms: () => store.commit("pseudonym/toggle"),
+      horizons: computed(() => store.state.view.horizons),
+      toggleHorizons: () => store.commit("view/toggle", "horizons"),
+      connections: computed(() => store.state.view.connections),
+      toggleConnections: () => store.commit("view/toggle", "connections"),
+      alteriNames: computed(() => store.state.view.alteriNames),
+      toggleAlteriNames: () => store.commit("view/toggle", "alteriNames"),
+      isOpen: isOpen,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.right {
+  float: right;
+}
+</style>

src/main.ts

@@ -26,7 +26,8 @@ import {
   faSave,
   faFileImage,
   faFileCsv,
-  // faChevronDown,
+  faChevronDown,
+  faChevronUp,
   // faUndoAlt,
   // faRedoAlt,
   faUndo,
@@ -55,7 +56,8 @@ library.add(
   faSave,
   faFileImage,
   faFileCsv,
-  // faChevronDown,
+  faChevronDown,
+  faChevronUp,
   // faUndoAlt,
   // faRedoAlt,
   faUndo,

src/views/Home.vue

@@ -20,6 +20,7 @@
             <EgoEditForm v-if="egoEditMode" @edit-finished="editEgoFinished" />
 
             <AlteriPanel v-if="!egoEditMode" />
+            <ViewOptionsPanel />
             <StatisticsPanel v-if="$store.state.view.statistics" />
           </div>
         </div>
@@ -44,6 +45,7 @@ import SideMenu from "@/components/SideMenu.vue";
 import NetworkMap from "@/components/NetworkMap.vue";
 import UndoRedo from "@/components/UndoRedo.vue";
 import StatisticsPanel from "@/components/StatisticsPanel.vue";
+import ViewOptionsPanel from "@/components/ViewOptionsPanel.vue";
 
 export default defineComponent({
   components: {
@@ -55,6 +57,7 @@ export default defineComponent({
     SideMenu,
     UndoRedo,
     StatisticsPanel,
+    ViewOptionsPanel,
   },
 
   setup() {