Add toggle element

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/helpers";
-  @import "@/styles/_mixins.scss";
 
   @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>

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>

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>

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;