Add new modal for changing visibility

client/cypress/integration/frontend/rooms/room-page.spec.js

@@ -5,16 +5,18 @@ describe('The Room Page', () => {
   const entryTitle = 'some title';
   const slug = 'ein-historisches-festival';
 
-  const operations = {
+  const RoomEntriesQuery = {
-    MeQuery: getMinimalMe({}),
-    RoomEntriesQuery: {
       room: {
         slug,
         roomEntries: {
           edges: [],
         },
       },
-    },
+    };
+
+  const operations = {
+    MeQuery: getMinimalMe({}),
+    RoomEntriesQuery,
     AddRoomEntry: {
       addRoomEntry: {
         roomEntry: {
@@ -58,4 +60,25 @@ describe('The Room Page', () => {
 
     cy.get('.room-entry__content:first').should('contain', entryText).should('contain', 'Rachel Green');
   });
+
+  it('changes visibility of a room', () => {
+    const MeQuery = getMinimalMe({
+      isTeacher: true
+    });
+    const operations = {
+      MeQuery,
+      RoomEntriesQuery
+    };
+
+    cy.mockGraphqlOps({
+      operations,
+    });
+
+    cy.visit(`/room/${slug}`);
+    cy.getByDataCy('toggle-room-actions-menu').click();
+    cy.getByDataCy('change-visibility').click();
+    cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen');
+    cy.getByDataCy('select-option').eq(1).click();
+    cy.getByDataCy('save').click();
+  });
 });

client/cypress/integration/frontend/rooms/rooms-page.spec.js

@@ -84,7 +84,7 @@ describe('The Rooms Page', () => {
     cy.get('[data-cy=add-room]').should('not.exist');
   });
 
-  it.only('adds a room as teacher', () => {
+  it('adds a room as teacher', () => {
     const getRoom = (title, appearance, description) => {
       let id = title.toLowerCase().replace(' ', '-');
       return {

client/src/App.vue

@@ -39,6 +39,7 @@
   import FullscreenVideo from '@/components/FullscreenVideo';
   import DeactivatePerson from '@/components/profile/DeactivatePerson';
   import SnapshotCreated from '@/components/modules/SnapshotCreated';
+  import ChangeVisibility from '@/components/rooms/ChangeVisibility';
   import {mapGetters} from 'vuex';
   import ScrollUp from '@/components/ScrollUp';
   import ReadOnlyBanner from '@/components/ReadOnlyBanner';
@@ -72,6 +73,7 @@
       FullscreenVideo,
       DeactivatePerson,
       SnapshotCreated,
+      ChangeVisibility,
     },
 
     computed: {

client/src/components/modules/SnapshotCreated.vue

@@ -68,9 +68,7 @@
 
   .snapshot-created {
     &__heading {
-      @include heading-2;
+      @include modal-heading;
-      margin-bottom: 0;
-      line-height: 1.5;
     }
 
     &__content {

client/src/components/rooms/ChangeVisibility.vue

@@ -0,0 +1,64 @@
+<template>
+  <modal
+    :hide-header="false"
+    :small="true"
+    class="change-visibility">
+    <h1
+      class="change-visibility__heading"
+      data-cy="modal-title"
+      slot="header">Sichtbarkeit anpassen</h1>
+    <div class="change-visibility__content">
+      <radiobutton
+        :checked="!restricted"
+        label="Raumeinträge sind für alle Lernenden sichtbar"
+        @input="restrict(false)"/>
+      <radiobutton
+        :checked="restricted"
+        label="Lernende sehen nur die eigenen Beiträge"
+        @input="restrict(true)"/>
+    </div>
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  import Radiobutton from '@/components/Radiobutton';
+
+  export default {
+    components: {
+      Radiobutton,
+      Modal,
+    },
+
+    data() {
+      return {
+        restricted: undefined
+      };
+    },
+
+    mounted() {
+      this.restricted = this.$modal.state.payload.restricted;
+    },
+
+    methods: {
+      select(restricted) {
+        this.restricted = restricted;
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .change-visibility {
+    &__heading {
+      @include modal-heading;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+</style>

client/src/components/rooms/RoomActions.vue

@@ -4,6 +4,7 @@
     data-cy="room-actions">
     <a
       class="room-actions__more-link"
+      data-cy="toggle-room-actions-menu"
       @click="toggleMenu">
       <ellipses/>
     </a>
@@ -20,8 +21,9 @@
       <li class="popover-links__link">
         <popover-link
           icon="eye-icon"
+          data-cy="change-visibility"
           text="Sichtbarkeit anpassen"
-          @link-action="editRoom()"/>
+          @link-action="changeVisibility()"/>
       </li>
       <li class="popover-links__link">
         <popover-link
@@ -89,6 +91,16 @@
       editRoom() {
         this.$router.push({name: 'edit-room', params: {id: this.id}});
       },
+      changeVisibility() {
+        console.log('changeVisibility');
+        this.$modal.open('change-visibility', {restricted: false})
+          .then(() => {
+            console.log('yay');
+          })
+          .catch(() => {
+            console.log('nay');
+          });
+      }
     },
   };
 </script>

client/src/styles/_mixins.scss

@@ -1,5 +1,6 @@
 @import 'variables';
 @import 'functions';
+@import 'mixins/typography';
 
 @mixin widget-shadow-base {
   border-radius: $default-border-radius;
@@ -77,121 +78,6 @@
     @content
   }
 }
-
-@mixin main-title {
-  font-family: $sans-serif-font-family;
-  font-weight: 800;
-  font-size: toRem(64px);
-}
-
-@mixin heading-1 {
-  font-family: $sans-serif-font-family;
-  font-weight: 600;
-  font-size: toRem(44px);
-}
-
-@mixin heading-2 {
-  font-family: $sans-serif-font-family;
-  font-weight: 600;
-  font-size: toRem(34px);
-}
-
-@mixin heading-3 {
-  font-family: $sans-serif-font-family;
-  font-weight: 600;
-  font-size: toRem(24px);
-}
-
-@mixin heading-4 {
-  font-family: $sans-serif-font-family;
-  font-weight: 600;
-  font-size: toRem(18px);
-}
-
-@mixin regular-text {
-  font-family: $sans-serif-font-family;
-  font-weight: 400;
-  font-size: toRem(18px);
-}
-
-@mixin small-text {
-  font-family: $sans-serif-font-family;
-  font-weight: 400;
-  //font-size: toRem(16px); todo: did this really change or is this only for the subnavigation
-  font-size: toRem(14px);
-}
-
-@mixin tiny-text {
-  font-size: toRem(11px);
-  font-family: $sans-serif-font-family;
-  font-weight: $font-weight-regular;
-  color: $color-silver-dark;
-}
-
-@mixin aside-text {
-  @include regular-text;
-  font-size: toRem(14px);
-}
-
-@mixin aside-with-cheese {
-  @include aside-text;
-  font-weight: 600;
-}
-
-@mixin navigation-link {
-  font-family: $sans-serif-font-family;
-  color: $color-charcoal-dark;
-  font-size: toRem(18px);
-  font-weight: 600;
-}
-
-@mixin large-link {
-  font-family: $sans-serif-font-family;
-  font-size: toRem(18px);
-  font-weight: 400;
-}
-
-@mixin meta-title {
-  color: $color-silver-dark;
-  font-size: toRem(36px);
-  font-weight: 300;
-  font-family: $serif-font-family;
-  line-height: $default-heading-line-height;
-}
-
-@mixin inline-title {
-  @include regular-text;
-  color: $color-silver-dark;
-}
-
-@mixin lead-paragraph {
-  font-family: $serif-font-family;
-  line-height: 1.4;
-  font-size: toRem(26px);
-}
-
-@mixin regular-paragraph {
-  font-family: $serif-font-family;
-  font-size: toRem(18px);
-}
-
-@mixin default-link {
-  font-size: toRem(14px);
-  font-family: $sans-serif-font-family;
-  font-weight: $font-weight-regular;
-  cursor: pointer;
-
-  &--active {
-    color: $color-brand;
-  }
-}
-
-@mixin page-form-input-heading {
-  display: block;
-  margin-bottom: $medium-spacing;
-  @include heading-3;
-}
-
 @mixin light-border($border-position) {
   border-#{$border-position}: 1px solid $color-silver;
 }
@@ -302,13 +188,3 @@
   border: 0;
   min-height: 110px;
 }
-
-@mixin popover-link {
-  @include large-link;
-  padding: $small-spacing 0;
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}

client/src/styles/mixins/_typography.scss

@@ -0,0 +1,129 @@
+@mixin main-title {
+  font-family: $sans-serif-font-family;
+  font-weight: 800;
+  font-size: toRem(64px);
+}
+
+@mixin heading-1 {
+  font-family: $sans-serif-font-family;
+  font-weight: 600;
+  font-size: toRem(44px);
+}
+
+@mixin heading-2 {
+  font-family: $sans-serif-font-family;
+  font-weight: 600;
+  font-size: toRem(34px);
+}
+
+@mixin heading-3 {
+  font-family: $sans-serif-font-family;
+  font-weight: 600;
+  font-size: toRem(24px);
+}
+
+@mixin heading-4 {
+  font-family: $sans-serif-font-family;
+  font-weight: 600;
+  font-size: toRem(18px);
+}
+
+@mixin modal-heading {
+  @include heading-2;
+  margin-bottom: 0;
+  line-height: 1.5;
+}
+
+@mixin regular-text {
+  font-family: $sans-serif-font-family;
+  font-weight: 400;
+  font-size: toRem(18px);
+}
+
+@mixin small-text {
+  font-family: $sans-serif-font-family;
+  font-weight: 400;
+  //font-size: toRem(16px); todo: did this really change or is this only for the subnavigation
+  font-size: toRem(14px);
+}
+
+@mixin tiny-text {
+  font-size: toRem(11px);
+  font-family: $sans-serif-font-family;
+  font-weight: $font-weight-regular;
+  color: $color-silver-dark;
+}
+
+@mixin aside-text {
+  @include regular-text;
+  font-size: toRem(14px);
+}
+
+@mixin aside-with-cheese {
+  @include aside-text;
+  font-weight: 600;
+}
+
+@mixin navigation-link {
+  font-family: $sans-serif-font-family;
+  color: $color-charcoal-dark;
+  font-size: toRem(18px);
+  font-weight: 600;
+}
+
+@mixin large-link {
+  font-family: $sans-serif-font-family;
+  font-size: toRem(18px);
+  font-weight: 400;
+}
+
+@mixin meta-title {
+  color: $color-silver-dark;
+  font-size: toRem(36px);
+  font-weight: 300;
+  font-family: $serif-font-family;
+  line-height: $default-heading-line-height;
+}
+
+@mixin inline-title {
+  @include regular-text;
+  color: $color-silver-dark;
+}
+
+@mixin lead-paragraph {
+  font-family: $serif-font-family;
+  line-height: 1.4;
+  font-size: toRem(26px);
+}
+
+@mixin regular-paragraph {
+  font-family: $serif-font-family;
+  font-size: toRem(18px);
+}
+
+@mixin default-link {
+  font-size: toRem(14px);
+  font-family: $sans-serif-font-family;
+  font-weight: $font-weight-regular;
+  cursor: pointer;
+
+  &--active {
+    color: $color-brand;
+  }
+}
+
+@mixin page-form-input-heading {
+  display: block;
+  margin-bottom: $medium-spacing;
+  @include heading-3;
+}
+
+@mixin popover-link {
+  @include large-link;
+  padding: $small-spacing 0;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}