ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add new modal for changing visibility

This commit is contained in:
Ramon Wenger 2021-08-25 20:56:48 +02:00
parent 6b3f84a619
commit 6dd737a84f
8 changed files with 238 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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();
});
});

2
client/cypress/integration/frontend/rooms/rooms-page.spec.js
View File

@ -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 {

2
client/src/App.vue
View File

@ -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: {

4
client/src/components/modules/SnapshotCreated.vue
View File

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

64
client/src/components/rooms/ChangeVisibility.vue Normal file
View File

@ -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>

14
client/src/components/rooms/RoomActions.vue
View File

@ -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>

126
client/src/styles/_mixins.scss
View File

@ -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;
}

129
client/src/styles/mixins/_typography.scss Normal file
View File

@ -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;
}