Remove visibility popover, add eye icon button

client/src/components/icons/ClosedEyeIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path
+      d="M99.5,48.11a56.91,56.91,0,0,0-21-21.19L91.18,14.26a3.85,3.85,0,1,0-5.44-5.44L71.21,23.36A56.73,56.73,0,0,0,.5,48.11a3.84,3.84,0,0,0,0,3.79,56.92,56.92,0,0,0,21,21.19L8.82,85.74a3.85,3.85,0,1,0,5.44,5.44L28.79,76.64A56.66,56.66,0,0,0,50,80.79,57,57,0,0,0,99.5,51.89,3.84,3.84,0,0,0,99.5,48.11ZM8.32,50a49.09,49.09,0,0,1,56.9-20.66L27.15,67.42A49.25,49.25,0,0,1,8.32,50ZM50,73.09a49,49,0,0,1-15.22-2.43L72.85,32.59A49.25,49.25,0,0,1,91.68,50,49.27,49.27,0,0,1,50,73.09Z"/>
+  </svg>
+</template>

client/src/components/visibility/VisibilityAction.vue

@@ -1,40 +1,84 @@
 <template>
   <div class="visibility-action">
     <a @click="toggleVisibility()" v-if="canManageContent" class="visibility-action__action-button">
-      <eye-icon class="visibility-action__action-icon action-icon"></eye-icon>
+      <closed-eye-icon v-if="hidden" class="visibility-action__action-icon action-icon"></closed-eye-icon>
+      <eye-icon v-else class="visibility-action__action-icon action-icon"></eye-icon>
     </a>
-    <visibility-popover
-      @hide-me="showVisibility = false"
-      :show="showVisibility"
-      :block="block"
-      class="visibility-action__visibility-menu"
-    ></visibility-popover>
   </div>
 </template>
 
 <script>
   import EyeIcon from '@/components/icons/EyeIcon';
-  import VisibilityPopover from '@/components/visibility/VisibilityPopover';
+  import ClosedEyeIcon from '@/components/icons/ClosedEyeIcon';
 
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
+  import CHANGE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/mutateContentBlock.gql';
+  // import UPDATE_OBJECTIVE_GROUP_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateObjectiveGroupVisibility.gql';
 
   export default {
     props: ['block'],
 
     components: {
-      VisibilityPopover,
-      EyeIcon
+      EyeIcon,
+      ClosedEyeIcon
     },
 
     computed: {
       canManageContent() {
         return this.me.permissions.includes('users.can_manage_school_class_content');
+      },
+      isContentBlock() {
+        return this.block.__typename === 'ContentBlockNode';
+      },
+      schoolClass() {
+        return this.me.selectedClass || {id: 'U2Nob29sQ2xhc3NOb2RlOjE='}; // todo: remove after merge with select class feature
+      },
+      hidden() {
+        return (this.isContentBlock ? this.block.userCreated : !!this.block.owner)
+          ? this.block.visibleFor.findIndex(el => el.id === this.schoolClass.id) === -1
+          : this.block.hiddenFor.findIndex(el => el.id === this.schoolClass.id) > -1;
       }
     },
 
     methods: {
       toggleVisibility() {
-        this.showVisibility = !this.showVisibility;
+        let hidden = !this.hidden;
+        let schoolClassId = this.schoolClass.id;
+
+        const visibility = [{
+          schoolClassId,
+          hidden
+        }];
+
+        let mutation, variables;
+        const id = this.block.id;
+
+        if (this.isContentBlock) {
+          mutation = CHANGE_CONTENT_BLOCK_MUTATION;
+          variables = {
+            input: {
+              id,
+              contentBlock: {
+                visibility
+              }
+            }
+          }
+        }
+        // todo: refactor for single objectives when concept is clear
+        // else {
+        //   mutation = UPDATE_OBJECTIVE_GROUP_VISIBILITY_MUTATION;
+        //   variables = {
+        //     input: {
+        //       id,
+        //       visibility
+        //     }
+        //   }
+        // }
+
+        this.$apollo.mutate({
+          mutation,
+          variables
+        });
       },
     },
 
@@ -57,6 +101,7 @@
 
 <style scoped lang="scss">
   .visibility-action {
+    margin-top: 9px;
 
     &__visibility-menu {
       top: 40px;

client/src/components/visibility/VisibilityPopover.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="visibility-menu" v-if="show" v-click-outside="hidePopover">
-    <h3 class="visibility-menu__title">Sichtbarkeit</h3>
-    <div v-for="schoolClass in schoolClassVisibility" :key="schoolClass.id" class="visibility-menu__item">
-      <checkbox :checked="!schoolClass.hidden"
-                :item="schoolClass"
-                :label="schoolClass.name"
-                v-on:input="updateVisibility"
-      ></checkbox>
-    </div>
-  </div>
-</template>
-
-<script>
-  import CHANGE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/mutateContentBlock.gql';
-  import UPDATE_OBJECTIVE_GROUP_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateObjectiveGroupVisibility.gql';
-  import Checkbox from '@/components/Checkbox';
-  import ME_QUERY from '@/graphql/gql/meQuery.gql'
-
-  export default {
-    props: ['show', 'block'],
-
-    components: {
-      Checkbox
-    },
-
-    apollo: {
-      me: {
-        query: ME_QUERY,
-      },
-    },
-
-    data() {
-      return {
-        me: {}
-      }
-    },
-
-    methods: {
-      updateVisibility(checked, item) {
-        item.hidden = !checked;
-
-        const visibility = this.schoolClassVisibility.map(g => {
-          return {
-            schoolClassId: g.id,
-            hidden: g.hidden || false
-          }
-        });
-
-        let mutation, variables;
-        const id = this.block.id;
-
-        if (this.isContentBlock) {
-          mutation = CHANGE_CONTENT_BLOCK_MUTATION;
-          variables = {
-            input: {
-              id,
-              contentBlock: {
-                visibility
-              }
-            }
-          }
-        } else {
-          mutation = UPDATE_OBJECTIVE_GROUP_VISIBILITY_MUTATION;
-          variables = {
-            input: {
-              id,
-              visibility
-            }
-          }
-        }
-
-        this.$apollo.mutate({
-          mutation,
-          variables
-        });
-      },
-      hidePopover() {
-        this.$emit('hide-me');
-      },
-      isSchoolClassHidden(schoolClass) {
-        return (this.isContentBlock ? this.block.userCreated : !!this.block.owner)
-          ? this.block.visibleFor.findIndex(el => el.id === schoolClass.id) === -1
-          : this.block.hiddenFor.findIndex(el => el.id === schoolClass.id) > -1;
-      }
-    },
-
-    computed: {
-      schoolClasses() {
-        return this.$getRidOfEdges(this.me.schoolClasses);
-      },
-
-      isContentBlock() {
-        return this.block.__typename === 'ContentBlockNode';
-      },
-
-      schoolClassVisibility() {
-        return this.schoolClasses.map(schoolClass => {
-          return {
-            ...schoolClass,
-            hidden: this.isSchoolClassHidden(schoolClass)
-          }
-        });
-      }
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
-
-  .visibility-menu {
-    border-radius: 13px;
-    border: 1px solid $color-silver-light;
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
-    width: 180px;
-    box-sizing: border-box;
-    padding: 19px;
-    left: -130px;
-    position: absolute;
-    z-index: 9;
-    background-color: $color-white;
-
-    &__title {
-      font-size: toRem(19px);
-      margin-bottom: 10px;
-    }
-
-    &__item {
-      margin-bottom: 18px;
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
-</style>

client/src/styles/_actions.scss

@@ -1,5 +1,4 @@
 .action-icon {
-  width: 40px;
-  height: 40px;
+  width: 30px;
   fill: $color-silver-dark;
 }