From 6dd737a84f56f0aa978d591ffa90a4b6aec4161b Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Wed, 25 Aug 2021 20:56:48 +0200 Subject: [PATCH] Add new modal for changing visibility --- .../frontend/rooms/room-page.spec.js | 31 ++++- .../frontend/rooms/rooms-page.spec.js | 2 +- client/src/App.vue | 2 + .../components/modules/SnapshotCreated.vue | 4 +- .../src/components/rooms/ChangeVisibility.vue | 64 +++++++++ client/src/components/rooms/RoomActions.vue | 14 +- client/src/styles/_mixins.scss | 126 +---------------- client/src/styles/mixins/_typography.scss | 129 ++++++++++++++++++ 8 files changed, 238 insertions(+), 134 deletions(-) create mode 100644 client/src/components/rooms/ChangeVisibility.vue create mode 100644 client/src/styles/mixins/_typography.scss diff --git a/client/cypress/integration/frontend/rooms/room-page.spec.js b/client/cypress/integration/frontend/rooms/room-page.spec.js index 35920468..b296d6bb 100644 --- a/client/cypress/integration/frontend/rooms/room-page.spec.js +++ b/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 = { - MeQuery: getMinimalMe({}), - RoomEntriesQuery: { + const 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(); + }); }); diff --git a/client/cypress/integration/frontend/rooms/rooms-page.spec.js b/client/cypress/integration/frontend/rooms/rooms-page.spec.js index f96b0c6e..7fca57f5 100644 --- a/client/cypress/integration/frontend/rooms/rooms-page.spec.js +++ b/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 { diff --git a/client/src/App.vue b/client/src/App.vue index 1d53d296..cbb6e90a 100644 --- a/client/src/App.vue +++ b/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: { diff --git a/client/src/components/modules/SnapshotCreated.vue b/client/src/components/modules/SnapshotCreated.vue index 2a4c53de..c75d880a 100644 --- a/client/src/components/modules/SnapshotCreated.vue +++ b/client/src/components/modules/SnapshotCreated.vue @@ -68,9 +68,7 @@ .snapshot-created { &__heading { - @include heading-2; - margin-bottom: 0; - line-height: 1.5; + @include modal-heading; } &__content { diff --git a/client/src/components/rooms/ChangeVisibility.vue b/client/src/components/rooms/ChangeVisibility.vue new file mode 100644 index 00000000..63a0687b --- /dev/null +++ b/client/src/components/rooms/ChangeVisibility.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/client/src/components/rooms/RoomActions.vue b/client/src/components/rooms/RoomActions.vue index dc051a2b..d9591d68 100644 --- a/client/src/components/rooms/RoomActions.vue +++ b/client/src/components/rooms/RoomActions.vue @@ -4,6 +4,7 @@ data-cy="room-actions"> @@ -20,8 +21,9 @@
  • + @link-action="changeVisibility()"/>
  • { + console.log('yay'); + }) + .catch(() => { + console.log('nay'); + }); + } }, }; diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss index eca0992e..1c1b2480 100644 --- a/client/src/styles/_mixins.scss +++ b/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; -} diff --git a/client/src/styles/mixins/_typography.scss b/client/src/styles/mixins/_typography.scss new file mode 100644 index 00000000..82fb3d10 --- /dev/null +++ b/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; +}