Skip to content
Snippets Groups Projects
Commit bede53e8 authored by David Siegfried's avatar David Siegfried Committed by Jan-Hendrik Willms
Browse files

move button to footer, re #3465 

Closes #3465

Merge request studip/studip!2361
parent f4be2f07
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/vue/components/courseware/CoursewareAccordionContainer.vue
+ 39
− 18
View file @ bede53e8
......@@ -12,7 +12,7 @@
<template v-if="showEditMode && canEdit && !currentElementisLink">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
{{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
{{ $gettext('Drücken Sie die Leertaste, um neu anzuordnen.') }}
</span>
</template>
<courseware-collapsible-box
......@@ -78,22 +78,30 @@
</div>
</template>
</courseware-collapsible-box>
<studipDialog
v-if="showDeleteDialog"
:title="$gettext('Fach löschen')"
:question="$gettext('Möchten Sie dieses Fach wirklich löschen?')"
height="180"
@confirm="deleteCurrentSection"
@close="closeDeleteDialog"
></studipDialog>
</template>
<template v-slot:containerEditDialog>
<form class="default cw-container-dialog-edit-form" @submit.prevent="">
<fieldset v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)" :key="index">
<label>
<translate>Title</translate>
{{ $gettext('Title')}}
<input type="text" v-model="section.name" />
</label>
<label>
<translate>Icon</translate>
{{ $gettext('Icon')}}
<studip-select :options="icons" v-model="section.icon">
<template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
<span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
</template>
<template #no-options>
<translate>Es steht keine Auswahl zur Verfügung.</translate>
{{ $gettext('Es steht keine Auswahl zur Verfügung.')}}
</template>
<template #selected-option="option">
<studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
......@@ -107,11 +115,13 @@
class="cw-container-section-delete"
v-if="currentContainer.attributes.payload.sections.length > 1"
>
<button class="button trash" @click="deleteSection(index)"><translate>Fach löschen</translate></button>
<button class="button trash" @click.prevent="confirmDeleteSection(index)">{{ $gettext('Fach löschen')}}</button>
</label>
</fieldset>
</form>
<button class="button add" @click="addSection"><translate>Fach hinzufügen</translate></button>
</template>
<template v-slot:containerEditButtons>
<button class="button add" @click="addSection">{{ $gettext('Fach hinzufügen')}}</button>
</template>
</courseware-default-container>
</template>
......@@ -155,7 +165,9 @@ export default {
processing: false,
keyboardSelected: null,
sortInSlots: [],
assistiveLive: ''
assistiveLive: '',
showDeleteDialog: false,
currentSection: null,
};
},
computed: {
......@@ -225,26 +237,35 @@ export default {
addSection() {
this.currentContainer.attributes.payload.sections.push({ name: '', icon: '', blocks: [] });
},
deleteSection(index) {
confirmDeleteSection(index) {
this.currentSection = index;
this.showDeleteDialog = true;
},
closeDeleteDialog() {
this.currentSection = null;
this.showDeleteDialog = false;
},
deleteCurrentSection() {
if (this.currentContainer.attributes.payload.sections.length === 1) {
return;
}
if (this.currentContainer.attributes.payload.sections[index].blocks.length > 0) {
if (index === 0) {
if (this.currentContainer.attributes.payload.sections[this.currentSection].blocks.length > 0) {
if (this.currentSection === 0) {
this.currentContainer.attributes.payload.sections[
index + 1
].blocks = this.currentContainer.attributes.payload.sections[index + 1].blocks.concat(
this.currentContainer.attributes.payload.sections[index].blocks
this.currentSection + 1
].blocks = this.currentContainer.attributes.payload.sections[this.currentSection + 1].blocks.concat(
this.currentContainer.attributes.payload.sections[this.currentSection].blocks
);
} else {
this.currentContainer.attributes.payload.sections[
index - 1
].blocks = this.currentContainer.attributes.payload.sections[index - 1].blocks.concat(
this.currentContainer.attributes.payload.sections[index].blocks
this.currentSection - 1
].blocks = this.currentContainer.attributes.payload.sections[this.currentSection - 1].blocks.concat(
this.currentContainer.attributes.payload.sections[this.currentSection].blocks
);
}
}
this.currentContainer.attributes.payload.sections.splice(index, 1);
this.currentContainer.attributes.payload.sections.splice(this.currentSection, 1);
this.closeDeleteDialog();
},
async storeContainer() {
const timeout = setTimeout(() => this.processing = true, 800);
......
resources/vue/components/courseware/CoursewareDefaultContainer.vue
+ 9
− 5
View file @ bede53e8
......@@ -47,6 +47,10 @@
<template v-slot:dialogContent>
<slot name="containerEditDialog"></slot>
</template>
<template v-slot:dialogButtons>
<slot name="containerEditButtons"></slot>
</template>
</studip-dialog>
<studip-dialog
......@@ -66,18 +70,18 @@
<div class="cw-radioset-wrapper" role="group" aria-labelledby="container-type">
<p id="container-type">{{ $gettext('Typ') }}</p>
<div class="cw-radioset">
<div
<div
v-for="(container, index) in containerTypes"
:key="index"
class="cw-radioset-box"
class="cw-radioset-box"
:class="[container.type === changeType ? 'selected' : '']"
>
<input type="radio" :id="'type-' + container.type" :value="container.type" v-model="changeType" name="container-type"/>
<input type="radio" :id="'type-' + container.type" :value="container.type" v-model="changeType" name="container-type"/>
<label :for="'type-' + container.type" >
<div class="label-icon" :class="[container.type, container.type === changeType ? 'selected' : '']"></div>
<p>{{ container.title }}</p>
</label>
</div>
</div>
</div>
......@@ -372,7 +376,7 @@ export default {
'container-id': this.container.id,
'object-type': this.container.type,
'object-kind': this.container.attributes['container-type'],
}
};
......
resources/vue/components/courseware/CoursewareTabsContainer.vue
+ 39
− 18
View file @ bede53e8
......@@ -9,10 +9,18 @@
@closeEdit="initCurrentData"
>
<template v-slot:containerContent>
<studipDialog
v-if="showDeleteDialog"
:title="$gettext('Tab löschen')"
:question="$gettext('Möchten Sie dieses Tab wirklich löschen?')"
height="180"
@confirm="deleteCurrentSection"
@close="closeDeleteDialog"
></studipDialog>
<template v-if="showEditMode && canEdit && !currentElementisLink">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
{{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
{{ $gettext('Drücken Sie die Leertaste, um neu anzuordnen.') }}
</span>
</template>
<courseware-tabs>
......@@ -82,17 +90,17 @@
<form class="default cw-container-dialog-edit-form" @submit.prevent="">
<fieldset v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)" :key="index">
<label>
<translate>Title</translate>
{{ $gettext('Title') }}
<input type="text" v-model="section.name" />
</label>
<label>
<translate>Icon</translate>
{{ $gettext('Icon') }}
<studip-select :options="icons" v-model="section.icon">
<template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
<span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
</template>
<template #no-options>
<translate>Es steht keine Auswahl zur Verfügung.</translate>
{{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
</template>
<template #selected-option="option">
<studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
......@@ -106,11 +114,13 @@
class="cw-container-section-delete"
v-if="currentContainer.attributes.payload.sections.length > 1"
>
<button class="button trash" @click="deleteSection(index)"><translate>Tab löschen</translate></button>
<button class="button trash" @click="confirmDeleteSection(index)">{{ $gettext('Tab löschen') }}</button>
</label>
</fieldset>
</form>
<button class="button add" @click="addSection"><translate>Tab hinzufügen</translate></button>
</template>
<template v-slot:containerEditButtons>
<button class="button add" @click="addSection">{{ $gettext('Tab hinzufügen') }}</button>
</template>
</courseware-default-container>
</template>
......@@ -160,7 +170,9 @@ export default {
processing: false,
keyboardSelected: null,
sortInTab: 0,
assistiveLive: ''
assistiveLive: '',
showDeleteDialog: false,
currentSection: null,
};
},
computed: {
......@@ -229,26 +241,35 @@ export default {
addSection() {
this.currentContainer.attributes.payload.sections.push({ name: '', icon: '', blocks: [] });
},
deleteSection(index) {
confirmDeleteSection(index) {
this.currentSection = index;
this.showDeleteDialog = true;
},
closeDeleteDialog() {
this.currentSection = null;
this.showDeleteDialog = false;
},
deleteCurrentSection() {
if (this.currentContainer.attributes.payload.sections.length === 1) {
return;
}
if (this.currentContainer.attributes.payload.sections[index].blocks.length > 0) {
if (index === 0) {
if (this.currentContainer.attributes.payload.sections[this.currentSection].blocks.length > 0) {
if (this.currentSection === 0) {
this.currentContainer.attributes.payload.sections[
index + 1
].blocks = this.currentContainer.attributes.payload.sections[index + 1].blocks.concat(
this.currentContainer.attributes.payload.sections[index].blocks
this.currentSection + 1
].blocks = this.currentContainer.attributes.payload.sections[this.currentSection + 1].blocks.concat(
this.currentContainer.attributes.payload.sections[this.currentSection].blocks
);
} else {
this.currentContainer.attributes.payload.sections[
index - 1
].blocks = this.currentContainer.attributes.payload.sections[index - 1].blocks.concat(
this.currentContainer.attributes.payload.sections[index].blocks
this.currentSection - 1
].blocks = this.currentContainer.attributes.payload.sections[this.currentSection - 1].blocks.concat(
this.currentContainer.attributes.payload.sections[this.currentSection].blocks
);
}
}
this.currentContainer.attributes.payload.sections.splice(index, 1);
this.currentContainer.attributes.payload.sections.splice(this.currentSection, 1);
this.closeDeleteDialog();
},
async storeContainer() {
const timeout = setTimeout(() => this.processing = true, 800);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment