From 7e186255a6a43cfeab6293df38344700f655b543 Mon Sep 17 00:00:00 2001
From: Julia Boeck <sakura.ju22150@gmail.com>
Date: Thu, 7 Jul 2022 10:39:07 +0200
Subject: [PATCH 1/4] ViewOptionsPanel.vue erstellt, in SideMenu.vue entfernt
 und ViewOptionsPanel.vue in Home.vue eingebunden

---
 src/components/SideMenu.vue         |  31 -------
 src/components/ViewOptionsPanel.vue | 120 ++++++++++++++++++++++++++++
 src/views/Home.vue                  |   3 +
 3 files changed, 123 insertions(+), 31 deletions(-)
 create mode 100644 src/components/ViewOptionsPanel.vue

diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 49f476b..69b4f63 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -83,38 +83,7 @@
           <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>
diff --git a/src/components/ViewOptionsPanel.vue b/src/components/ViewOptionsPanel.vue
new file mode 100644
index 0000000..080ae9e
--- /dev/null
+++ b/src/components/ViewOptionsPanel.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="panel">
+    <p class="panel-heading">
+      <span>Ansichtseinstellungen</span>
+      <span class="buttons are-small right">
+        <button id="btn-toggle" class="button" @click.stop="toggle">
+          <span id="icon-span" class="icon is-small">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+              <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+              <path
+                d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"
+              />
+            </svg>
+          </span>
+        </button>
+      </span>
+    </p>
+    <form class="panel-block form">
+      <div class="field is-horizontal">
+        <div class="field-body">
+          <div id="view-settings" class="field invis">
+            <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>
+import { defineComponent, ref, computed, onMounted, watch } from "vue";
+import { useStore } from "@/store";
+
+export default defineComponent({
+  setup(props, { emit }) {
+    const store = useStore();
+
+    const toggle = () => {
+      const btn = document.querySelector("#icon-span");
+      const el = document.querySelector("#view-settings");
+      if (el.classList.contains("invis")) {
+        el.classList.remove("invis");
+        btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"/></svg>`;
+      } else {
+        el.classList.add("invis");
+        btn.innerHTML = `          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>
+`;
+      }
+    };
+
+    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"),
+      toggle,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.invis {
+  display: none;
+  float: right;
+}
+
+.btn-toggle {
+  display: inline-flex;
+}
+
+.right {
+  float: right;
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f8075b6..39be291 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -20,6 +20,7 @@
             <EgoEditForm v-if="egoEditMode" @edit-finished="editEgoFinished" />
 
             <AlteriPanel v-if="!egoEditMode" />
+            <FeatureBar />
             <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,
+    FeatureBar: ViewOptionsPanel,
   },
 
   setup() {

From e5e532e81ba26b243fe2b7c6b073f1f450ea6ff8 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Mon, 18 Jul 2022 13:46:19 +0200
Subject: [PATCH 2/4] simplify: use vue-fontawesome, v-if to toggle
 open/collapsed

---
 src/components/ViewOptionsPanel.vue | 48 ++++++-----------------------
 src/main.ts                         |  6 ++--
 2 files changed, 14 insertions(+), 40 deletions(-)

diff --git a/src/components/ViewOptionsPanel.vue b/src/components/ViewOptionsPanel.vue
index 080ae9e..2eb7139 100644
--- a/src/components/ViewOptionsPanel.vue
+++ b/src/components/ViewOptionsPanel.vue
@@ -1,24 +1,16 @@
 <template>
   <div class="panel">
-    <p class="panel-heading">
+    <p class="panel-heading" @click.stop="isOpen = ! isOpen">
       <span>Ansichtseinstellungen</span>
-      <span class="buttons are-small right">
-        <button id="btn-toggle" class="button" @click.stop="toggle">
-          <span id="icon-span" class="icon is-small">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-              <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
-              <path
-                d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"
-              />
-            </svg>
-          </span>
-        </button>
+      <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 invis">
+          <div id="view-settings" class="field" v-if="isOpen">
             <div class="control">
               <div class="buttons">
               <a class="button" @click="togglePseudonyms">
@@ -68,26 +60,15 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, computed, onMounted, watch } from "vue";
+<script lang="ts">
+import { defineComponent, ref, computed } from "vue";
 import { useStore } from "@/store";
 
 export default defineComponent({
-  setup(props, { emit }) {
+  setup() {
     const store = useStore();
 
-    const toggle = () => {
-      const btn = document.querySelector("#icon-span");
-      const el = document.querySelector("#view-settings");
-      if (el.classList.contains("invis")) {
-        el.classList.remove("invis");
-        btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"/></svg>`;
-      } else {
-        el.classList.add("invis");
-        btn.innerHTML = `          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>
-`;
-      }
-    };
+    const isOpen = ref(false);
 
     return {
       pseudonyms: computed(() => store.state.pseudonym.active),
@@ -98,22 +79,13 @@ export default defineComponent({
       toggleConnections: () => store.commit("view/toggle", "connections"),
       alteriNames: computed(() => store.state.view.alteriNames),
       toggleAlteriNames: () => store.commit("view/toggle", "alteriNames"),
-      toggle,
+      isOpen: isOpen,
     };
   },
 });
 </script>
 
 <style lang="scss">
-.invis {
-  display: none;
-  float: right;
-}
-
-.btn-toggle {
-  display: inline-flex;
-}
-
 .right {
   float: right;
 }
diff --git a/src/main.ts b/src/main.ts
index 7d6687e..45da443 100644
--- a/src/main.ts
+++ b/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,

From 497e2a4d4d095c786eb163dd83027ae41a981214 Mon Sep 17 00:00:00 2001
From: Julia Boeck <sakura.ju22150@gmail.com>
Date: Thu, 11 Aug 2022 10:42:24 +0200
Subject: [PATCH 3/4] npm run lint

---
 src/components/SideMenu.vue         |  2 -
 src/components/ViewOptionsPanel.vue | 66 ++++++++++++++---------------
 2 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 69b4f63..fedd46e 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -82,8 +82,6 @@
           </span>
           <span>Kennzahlen</span>
         </button>
-
-
       </div>
 
       <a href="http://www.easynwk.com/" target="_blank">Über die easyNWK</a>
diff --git a/src/components/ViewOptionsPanel.vue b/src/components/ViewOptionsPanel.vue
index 2eb7139..2036de2 100644
--- a/src/components/ViewOptionsPanel.vue
+++ b/src/components/ViewOptionsPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel">
-    <p class="panel-heading" @click.stop="isOpen = ! isOpen">
+    <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" />
@@ -13,44 +13,40 @@
           <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>
+                <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="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>
 
-              <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>
+                <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>

From 40d27ad9f9c70af498e5e95adaa9e70b6403c17c Mon Sep 17 00:00:00 2001
From: Julia Boeck <sakura.ju22150@gmail.com>
Date: Thu, 11 Aug 2022 10:51:23 +0200
Subject: [PATCH 4/4] =?UTF-8?q?=C3=84nderungen=20durchgef=C3=BChrt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Home.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 39be291..3460c8b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -20,7 +20,7 @@
             <EgoEditForm v-if="egoEditMode" @edit-finished="editEgoFinished" />
 
             <AlteriPanel v-if="!egoEditMode" />
-            <FeatureBar />
+            <ViewOptionsPanel />
             <StatisticsPanel v-if="$store.state.view.statistics" />
           </div>
         </div>
@@ -57,7 +57,7 @@ export default defineComponent({
     SideMenu,
     UndoRedo,
     StatisticsPanel,
-    FeatureBar: ViewOptionsPanel,
+    ViewOptionsPanel,
   },
 
   setup() {