From 058e809bb4d4f9955e43ab2d5f25e38bc47f5c15 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 12 Mar 2021 14:30:37 +0100
Subject: [PATCH] Add toggle element

---
 .../components/modules/ModuleNavigation.vue   | 18 ++--
 .../components/toggle-menu/ToggleEditing.vue  | 15 ++--
 client/src/components/ui/Toggle.vue           | 90 +++++++++++++++++++
 client/src/styles/_variables.scss             |  1 +
 4 files changed, 106 insertions(+), 18 deletions(-)
 create mode 100644 client/src/components/ui/Toggle.vue

diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index aedce220..3ce61f8e 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -45,17 +45,15 @@
       class="module-navigation__toggle-menu"
       v-if="canManageContent"
     >
+      <a
+        class="module-navigation__actions"
+        data-cy="module-settings-button">Snapshots</a>
+
       <router-link
         :to="{name: 'module-settings'}"
-        class="module-navigation__settings"
+        class="module-navigation__actions"
         data-cy="module-settings-button">Einstellungen</router-link>
       <toggle-editing v-if="onModulePage"/>
-      <toggle-solutions-for-module
-        :slug="module.slug"
-        :enabled="module.solutionsEnabled"
-        class="module-navigation__solution-toggle"
-        data-cy="toggle-enable-solutions"
-        v-if="onModulePage && module.id"/>
     </div>
   </nav>
 
@@ -163,8 +161,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   @mixin module-navigation-typography {
     font-family: $sans-serif-font-family;
@@ -225,8 +222,9 @@
       align-items: center;
     }
 
-    &__settings {
+    &__actions {
       @include regular-text;
+      margin-right: $medium-spacing;
     }
   }
 </style>
diff --git a/client/src/components/toggle-menu/ToggleEditing.vue b/client/src/components/toggle-menu/ToggleEditing.vue
index a5095ad9..856cc454 100644
--- a/client/src/components/toggle-menu/ToggleEditing.vue
+++ b/client/src/components/toggle-menu/ToggleEditing.vue
@@ -1,30 +1,29 @@
 <template>
-  <checkbox
+  <toggle
     :checked="checked"
-    class="toggle-editing"
     label="Modul anpassen"
     @input="toggle"/>
 </template>
 
 <script>
-  import Checkbox from '@/components/Checkbox';
   import {mapState, mapActions} from 'vuex';
+  import Toggle from '@/components/ui/Toggle';
 
   export default {
     components: {
-      Checkbox,
+      Toggle
     },
 
     computed: {
       ...mapState({
         checked: 'editModule',
-      })
+      }),
     },
 
     methods: {
       ...mapActions({
-        toggle: 'editModule'
-      })
-    }
+        toggle: 'editModule',
+      }),
+    },
   };
 </script>
diff --git a/client/src/components/ui/Toggle.vue b/client/src/components/ui/Toggle.vue
new file mode 100644
index 00000000..8133a2e9
--- /dev/null
+++ b/client/src/components/ui/Toggle.vue
@@ -0,0 +1,90 @@
+<template>
+  <label
+    :for="id"
+    class="toggle">
+    <input
+      :id="id"
+      :checked="checked"
+      class="toggle__input"
+      type="checkbox"
+      @change.prevent="$emit('input', $event.target.checked)">
+    <span class="toggle__toggle-wrapper">
+      <span class="toggle__toggle"/>
+    </span>
+    <span class="toggle__label">{{ label }}</span>
+  </label>
+</template>
+
+<script>
+  export default {
+    props: {
+      label: {
+        type: String,
+        default: '',
+      },
+      checked: {
+        type: Boolean,
+        default: false,
+      },
+    },
+
+    data() {
+      return {
+        id: null,
+      };
+    },
+    mounted() {
+      this.id = this._uid;
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .toggle {
+    @include default-box-shadow;
+    border-radius: $round-border-radius;
+    border: 1px solid $color-silver;
+    padding: $small-spacing $medium-spacing;
+    display: flex;
+    cursor: pointer;
+
+    &__toggle-wrapper {
+      background-color: $color-silver;
+      width: 42px;
+      height: 24px;
+      border-radius: $round-border-radius;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      padding: 0 6px;
+      margin-right: $small-spacing;
+    }
+
+    &__input {
+      display: none;
+    }
+
+    &__input:checked + &__toggle-wrapper {
+      background-color: $color-brand;
+    }
+
+    &__input:checked + &__toggle-wrapper &__toggle {
+      margin-left: 14px;
+    }
+
+    &__toggle {
+      width: 16px;
+      height: 16px;
+      border-radius: $round-border-radius;
+      background-color: $color-white;
+      margin-left: 0;
+      transition: margin-left 0.5s;
+    }
+
+    &__label {
+      @include regular-text;
+    }
+  }
+</style>
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 44efdd5d..0ee65d82 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -55,6 +55,7 @@ $list-height: 52px;
 
 $default-border-radius: 13px;
 $input-border-radius: 3px;
+$round-border-radius: 32px;
 
 //modal stuff
 $modal-lateral-padding: 34px;