From 874bd358f5ecc2e148a6ad36bcf155fe738c107a Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Wed, 10 Jan 2024 14:04:02 +0000
Subject: [PATCH] TIC #3260
Merge request studip/studip!2378
---
app/controllers/courseware_controller.php | 1 -
.../vue/components/courseware/IndexApp.vue | 5 --
.../blocks/CoursewareBeforeAfterBlock.vue | 8 +--
.../blocks/CoursewareDefaultBlock.vue | 2 +-
.../CoursewareAccordionContainer.vue | 7 +-
.../containers/CoursewareDefaultContainer.vue | 4 +-
.../containers/CoursewareListContainer.vue | 7 +-
.../containers/CoursewareTabsContainer.vue | 7 +-
.../CoursewareEmptyElementBox.vue | 33 +++------
.../CoursewareRibbonToolbar.vue | 8 ---
.../CoursewareStructuralElement.vue | 16 ++---
.../structural-element/CoursewareTree.vue | 7 +-
.../structural-element/CoursewareTreeItem.vue | 22 +++---
.../CoursewareWelcomeScreen.vue | 3 -
.../courseware/toolbar/CoursewareToolbar.vue | 25 ++++---
.../widgets/CoursewareViewWidget.vue | 71 -------------------
.../vue/store/courseware/courseware.module.js | 15 +++-
17 files changed, 62 insertions(+), 179 deletions(-)
delete mode 100644 resources/vue/components/courseware/widgets/CoursewareViewWidget.vue
diff --git a/app/controllers/courseware_controller.php b/app/controllers/courseware_controller.php
index eaec6093df4..faf7393f399 100644
--- a/app/controllers/courseware_controller.php
+++ b/app/controllers/courseware_controller.php
@@ -81,6 +81,5 @@ abstract class CoursewareController extends AuthenticatedController
$sidebar->addWidget(new VueWidget('courseware-action-widget'));
SkipLinks::addIndex(_('Aktionen'), 'courseware-action-widget', 21);
$sidebar->addWidget(new VueWidget('courseware-search-widget'));
- $sidebar->addWidget(new VueWidget('courseware-view-widget'));
}
}
diff --git a/resources/vue/components/courseware/IndexApp.vue b/resources/vue/components/courseware/IndexApp.vue
index 2ac86c2278d..53238b43db7 100644
--- a/resources/vue/components/courseware/IndexApp.vue
+++ b/resources/vue/components/courseware/IndexApp.vue
@@ -15,9 +15,6 @@
<MountingPortal mountTo="#courseware-search-widget" name="sidebar-search">
<courseware-search-widget v-if="selected !== null"></courseware-search-widget>
</MountingPortal>
- <MountingPortal mountTo="#courseware-view-widget" name="sidebar-views">
- <courseware-view-widget v-if="!showSearchResults" :structural-element="selected" :canVisit="canVisit"></courseware-view-widget>
- </MountingPortal>
</div>
<studip-progress-indicator
v-if="structureLoadingState === 'loading'"
@@ -38,7 +35,6 @@ import CoursewareStructuralElement from './structural-element/CoursewareStructur
import CoursewareSearchResults from './structural-element/CoursewareSearchResults.vue';
import CoursewareCompanionBox from './layouts/CoursewareCompanionBox.vue';
import CoursewareCompanionOverlay from './layouts/CoursewareCompanionOverlay.vue';
-import CoursewareViewWidget from './widgets/CoursewareViewWidget.vue';
import CoursewareActionWidget from './widgets/CoursewareActionWidget.vue';
import CoursewareSearchWidget from './widgets/CoursewareSearchWidget.vue';
@@ -50,7 +46,6 @@ export default {
components: {
CoursewareStructuralElement,
CoursewareSearchResults,
- CoursewareViewWidget,
CoursewareActionWidget,
CoursewareCompanionBox,
StudipProgressIndicator,
diff --git a/resources/vue/components/courseware/blocks/CoursewareBeforeAfterBlock.vue b/resources/vue/components/courseware/blocks/CoursewareBeforeAfterBlock.vue
index 65df25c4bcb..20d820aa626 100644
--- a/resources/vue/components/courseware/blocks/CoursewareBeforeAfterBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareBeforeAfterBlock.vue
@@ -12,7 +12,7 @@
<template #content>
<TwentyTwenty v-if="!isEmpty" :before="currentBeforeUrl" :after="currentAfterUrl" />
<courseware-companion-box
- v-if="isEmpty && editMode"
+ v-if="isEmpty && canEdit"
:msgCompanion="$gettext('Bitte wählen Sie ein Vorher- und ein Nachher-Bild aus.')"
mood="pointing"
/>
@@ -69,7 +69,7 @@ import BlockComponents from './block-components.js';
import blockMixin from '@/vue/mixins/courseware/block.js';
import TwentyTwenty from 'vue-twentytwenty';
import 'vue-twentytwenty/dist/vue-twentytwenty.css';
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions } from 'vuex';
export default {
name: 'courseware-before-after-block',
@@ -99,7 +99,6 @@ export default {
computed: {
...mapGetters({
fileRefById: 'file-refs/byId',
- viewMode: 'viewMode',
}),
beforeSource() {
return this.block?.attributes?.payload?.before_source;
@@ -140,9 +139,6 @@ export default {
isEmpty() {
return this.currentBeforeUrl === '' || this.currentAfterUrl === '';
},
- editMode() {
- return this.viewMode === 'edit';
- },
},
mounted() {
if (this.block.id) {
diff --git a/resources/vue/components/courseware/blocks/CoursewareDefaultBlock.vue b/resources/vue/components/courseware/blocks/CoursewareDefaultBlock.vue
index 2fabdda16f5..6bac6ff6e66 100644
--- a/resources/vue/components/courseware/blocks/CoursewareDefaultBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareDefaultBlock.vue
@@ -155,7 +155,7 @@ export default {
currentElementisLink: 'currentElementisLink',
}),
showEditMode() {
- let show = (this.viewMode === 'edit' || this.blockedByThisUser) && !this.currentElementisLink;
+ let show = this.canEdit && !this.currentElementisLink;
if (!show) {
this.displayFeature(false);
}
diff --git a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue b/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
index c45f03af110..75db30cdb01 100644
--- a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
@@ -10,7 +10,7 @@
@closeEdit="initCurrentData"
>
<template v-slot:containerContent>
- <template v-if="showEditMode && canEdit && !currentElementisLink">
+ <template v-if="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.') }}
@@ -23,7 +23,7 @@
:icon="section.icon"
:open="index === 0 || sortInSlots.includes(index)"
>
- <ul v-if="!showEditMode || currentElementisLink" class="cw-container-accordion-block-list">
+ <ul v-if="!canEdit || currentElementisLink" class="cw-container-accordion-block-list">
<li v-for="block in section.blocks" :key="block.id" class="cw-block-item">
<component
:is="component(block)"
@@ -181,9 +181,6 @@ export default {
viewMode: 'viewMode',
currentElementisLink: 'currentElementisLink'
}),
- showEditMode() {
- return this.viewMode === 'edit';
- },
blocks() {
if (!this.container || this.container.newContainer) {
return [];
diff --git a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
index ad60b1453fc..64b74e70b99 100644
--- a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
@@ -4,7 +4,7 @@
:class="['cw-container-colspan-' + colSpan, showEditMode && canEdit ? 'cw-container-active' : '', containerClass]"
>
<div class="cw-container-content">
- <header v-if="showEditMode && canEdit" class="cw-container-header" :class="{ 'cw-container-header-open': isOpen }">
+ <header v-if="showEditMode" class="cw-container-header" :class="{ 'cw-container-header-open': isOpen }">
<a href="#" class="cw-container-header-toggle" :aria-expanded="isOpen" @click.prevent="isOpen = !isOpen">
<studip-icon :shape="isOpen ? 'arr_1down' : 'arr_1right'" />
<span>{{ container.attributes.title }} ({{container.attributes.width}})</span>
@@ -182,7 +182,7 @@ export default {
containerTypes: 'containerTypes',
}),
showEditMode() {
- return this.viewMode === 'edit' && !this.currentElementisLink;
+ return this.canEdit && !this.currentElementisLink;
},
colSpan() {
return this.container.attributes.payload.colspan ? this.container.attributes.payload.colspan : 'full';
diff --git a/resources/vue/components/courseware/containers/CoursewareListContainer.vue b/resources/vue/components/courseware/containers/CoursewareListContainer.vue
index 7f23210676a..7ffa413cb38 100644
--- a/resources/vue/components/courseware/containers/CoursewareListContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareListContainer.vue
@@ -7,7 +7,7 @@
@storeContainer="storeContainer"
>
<template v-slot:containerContent>
- <ul v-if="!showEditMode || currentElementisLink" class="cw-container-list-block-list">
+ <ul v-if="!canEdit || currentElementisLink" class="cw-container-list-block-list">
<li v-for="block in blocks" :key="block.id" class="cw-block-item">
<component :is="component(block)" :block="block" :canEdit="canEdit" :isTeacher="isTeacher" />
</li>
@@ -24,7 +24,7 @@
:msgCompanion="$gettext('Dieser Abschnitt enthält keine Blöcke.')">
</courseware-companion-box>
<draggable
- v-if="showEditMode && canEdit"
+ v-if="canEdit"
class="cw-container-list-block-list cw-container-list-sort-mode"
tag="ol"
role="listbox"
@@ -124,9 +124,6 @@ export default {
blockedByAnotherUser() {
return this.blocked && this.userId !== this.blockerId;
},
- showEditMode() {
- return this.viewMode === 'edit';
- },
blocks() {
if (!this.container || this.container.newContainer) {
return [];
diff --git a/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue b/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
index 391cc820e91..fd7450c7797 100644
--- a/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
@@ -18,7 +18,7 @@
@confirm="deleteCurrentSection"
@close="closeDeleteDialog"
></studipDialog>
- <template v-if="showEditMode && canEdit && !currentElementisLink">
+ <template v-if="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.') }}
@@ -33,7 +33,7 @@
:icon="section.icon"
:selected="sortInTab === index"
>
- <ul v-if="!showEditMode || currentElementisLink" class="cw-container-tabs-block-list">
+ <ul v-if="!canEdit || currentElementisLink" class="cw-container-tabs-block-list">
<li v-for="block in section.blocks" :key="block.id" class="cw-block-item">
<component
:is="component(block)"
@@ -185,9 +185,6 @@ export default {
viewMode: 'viewMode',
currentElementisLink: 'currentElementisLink'
}),
- showEditMode() {
- return this.viewMode === 'edit';
- },
blocks() {
if (!this.container || this.container.newContainer) {
return [];
diff --git a/resources/vue/components/courseware/structural-element/CoursewareEmptyElementBox.vue b/resources/vue/components/courseware/structural-element/CoursewareEmptyElementBox.vue
index 062fa572bcd..abbe87f7054 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareEmptyElementBox.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareEmptyElementBox.vue
@@ -2,8 +2,9 @@
<div class="cw-welcome-screen">
<courseware-companion-box :msgCompanion="this.$gettext('Es wurden bisher noch keine Inhalte eingepflegt.')">
<template v-slot:companionActions>
- <button v-if="canEdit && noContainers" class="button" @click="addContainer"><translate>Einen Abschnitt hinzufügen</translate></button>
- <button v-if="canEdit && !noContainers && !editMode" class="button" @click="switchToEditView"><translate>Seite bearbeiten</translate></button>
+ <button v-if="canEdit && noContainers" class="button" @click="addContainer">
+ {{ $gettext('Einen Abschnitt hinzufügen') }}
+ </button>
</template>
</courseware-companion-box>
</div>
@@ -20,39 +21,21 @@ export default {
},
props: {
canEdit: Boolean,
- noContainers: Boolean
- },
- data() {
- return{}
- },
- computed: {
- ...mapGetters({
- viewMode: 'viewMode'
- }),
- editMode() {
- return this.viewMode === 'edit';
- }
+ noContainers: Boolean,
},
methods: {
...mapActions({
- coursewareViewMode: 'coursewareViewMode',
coursewareConsumeMode: 'coursewareConsumeMode',
coursewareContainerAdder: 'coursewareContainerAdder',
coursewareSelectedToolbarItem: 'coursewareSelectedToolbarItem',
- coursewareShowToolbar: 'coursewareShowToolbar'
+ coursewareShowToolbar: 'coursewareShowToolbar',
}),
addContainer() {
- this.coursewareViewMode('edit');
this.coursewareConsumeMode(false);
this.coursewareContainerAdder(true);
this.coursewareSelectedToolbarItem('blockadder');
this.coursewareShowToolbar(true);
},
- switchToEditView() {
- this.coursewareViewMode('edit');
- this.coursewareConsumeMode(false);
- }
- }
-
-}
-</script>
\ No newline at end of file
+ },
+};
+</script>
diff --git a/resources/vue/components/courseware/structural-element/CoursewareRibbonToolbar.vue b/resources/vue/components/courseware/structural-element/CoursewareRibbonToolbar.vue
index 992c3a1f8b3..2e44204b2c8 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareRibbonToolbar.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareRibbonToolbar.vue
@@ -85,9 +85,6 @@ export default {
selectedToolbarItem: 'selectedToolbarItem',
currentElementisLink: 'currentElementisLink',
}),
- showEditMode() {
- return this.viewMode === 'edit';
- },
isTeacher() {
return this.userIsTeacher;
},
@@ -129,11 +126,6 @@ export default {
this.selectTool('blockadder');
}
},
- showEditMode(newValue) {
- if (!newValue) {
- this.selectTool('contents');
- }
- },
toolsActive(newValue) {
const focusElement = this.$refs.tabs.getTabButtonByAlias(this.selectedToolbarItem);
if (newValue && focusElement) {
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
index 4f70f4894fe..143a03ae258 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
@@ -128,7 +128,7 @@
<courseware-root-content v-if="showRootLayout" :structuralElement="currentElement" :canEdit="canEdit" />
<div
- v-if="canVisit && !editView && !isLink && !hideRootContent"
+ v-if="canVisit && (!canEdit || !toolbarActive ) && !isLink && !hideRootContent"
class="cw-container-wrapper"
:class="{
'cw-container-wrapper-consume': consumeMode,
@@ -139,7 +139,7 @@
:key="container.id"
:is="containerComponent(container)"
:container="container"
- :canEdit="canEdit"
+ :canEdit="canEdit && toolbarActive"
:canAddElements="canAddElements"
:isTeacher="userIsTeacher"
class="cw-container-item"
@@ -153,7 +153,7 @@
'cw-container-wrapper-consume': consumeMode,
}"
>
- <div v-if="editView" class="cw-companion-box-wrapper">
+ <div v-if="canEdit" class="cw-companion-box-wrapper">
<courseware-companion-box
:msgCompanion="$gettextInterpolate($gettext('Dieser Inhalt ist aus den persönlichen Lernmaterialien von %{ ownerName } verlinkt und kann nur dort bearbeitet werden.'), { ownerName: ownerName })"
mood="pointing"
@@ -170,7 +170,7 @@
class="cw-container-item"
/>
</div>
- <div v-if="canVisit && canEdit && editView && !isLink && !hideRootContent" class="cw-container-wrapper cw-container-wrapper-edit">
+ <div v-if="canVisit && canEdit && toolbarActive && !isLink && !hideRootContent" class="cw-container-wrapper cw-container-wrapper-edit">
<template v-if="!processing">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
@@ -216,7 +216,7 @@
<studip-progress-indicator v-if="processing" :description="$gettext('Vorgang wird bearbeitet...')" />
</div>
</div>
- <courseware-toolbar v-if="canVisit && canEdit && editView && !isLink" />
+ <courseware-toolbar v-if="canVisit && canEdit && !isLink" />
</div>
<courseware-call-to-action-box
v-if="commentable"
@@ -784,7 +784,8 @@ export default {
showRootElement: 'showRootElement',
childrenById: 'courseware-structure/children',
- rootLayout: 'rootLayout'
+ rootLayout: 'rootLayout',
+ toolbarActive: 'toolbarActive'
}),
currentId() {
@@ -1135,9 +1136,6 @@ export default {
blockingUserName() {
return this.blockingUser ? this.blockingUser.attributes['formatted-name'] : '';
},
- editView() {
- return this.viewMode === 'edit';
- },
pdfExportURL() {
if (this.context.type === 'users') {
return STUDIP.URLHelper.getURL(
diff --git a/resources/vue/components/courseware/structural-element/CoursewareTree.vue b/resources/vue/components/courseware/structural-element/CoursewareTree.vue
index 68947e3998e..08019dd26d7 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareTree.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareTree.vue
@@ -1,6 +1,6 @@
<template>
<div class="cw-tree" ref="tree">
- <template v-if="editMode">
+ <template>
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
{{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
@@ -18,7 +18,7 @@
@moveItemNextLevel="moveItemNextLevel"
@childrenUpdated="updateNestedChildren"
></courseware-tree-item>
- <courseware-tree-item-adder v-if="editMode && canEditRoot" :parentId="rootElement.id"/>
+ <courseware-tree-item-adder v-if="canEditRoot" :parentId="rootElement.id"/>
</ol>
<studip-progress-indicator
v-else
@@ -84,9 +84,6 @@ export default {
canEditRoot() {
return this.rootElement.attributes['can-edit'];
},
- editMode() {
- return this.viewMode === 'edit';
- },
},
methods: {
...mapActions({
diff --git a/resources/vue/components/courseware/structural-element/CoursewareTreeItem.vue b/resources/vue/components/courseware/structural-element/CoursewareTreeItem.vue
index 418d443e88a..540e76b3529 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareTreeItem.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareTreeItem.vue
@@ -1,11 +1,8 @@
<template>
- <li v-if="showItem"
- :draggable="editMode ? true : null"
- :aria-selected="editMode ? keyboardSelected : null"
- >
+ <li v-if="showItem" :draggable="canEdit ? true : null" :aria-selected="canEdit ? keyboardSelected : null">
<div class="cw-tree-item-wrapper" v-if="showRootElement || depth > 0">
<span
- v-if="editMode && depth > 0 && canEdit"
+ v-if="canEdit && depth > 0 && canEdit"
class="cw-sortable-handle"
:tabindex="0"
aria-describedby="operation"
@@ -15,7 +12,7 @@
>
</span>
<courseware-tree-item-updater
- v-if="editMode && editingItem"
+ v-if="canEdit && editingItem"
:structuralElement="element"
@close="editingItem = false"
@childrenUpdated="$emit('childrenUpdated')"
@@ -26,12 +23,12 @@
class="cw-tree-item-link"
:class="{
'cw-tree-item-link-current': isCurrent,
- 'cw-tree-item-link-edit': editMode,
+ 'cw-tree-item-link-edit': canEdit,
'cw-tree-item-link-selected': keyboardSelected,
}"
>
{{ element.attributes?.title || '–' }}
- <button v-if="editMode && canEdit" class="cw-tree-item-edit-button" @click.prevent="editingItem = true">
+ <button v-if="canEdit" class="cw-tree-item-edit-button" @click.prevent="editingItem = true">
<studip-icon shape="edit" />
</button>
@@ -69,7 +66,7 @@
</router-link>
</div>
<ol
- v-if="hasChildren && !editMode"
+ v-if="hasChildren && !canEdit"
:class="{
'cw-tree-chapter-list': isRoot,
'cw-tree-subchapter-list': isFirstLevel,
@@ -85,7 +82,7 @@
/>
</ol>
<draggable
- v-if="editMode"
+ v-if="canEdit"
:class="{ 'cw-tree-chapter-list-empty': nestedChildren.length === 0 }"
tag="ol"
:component-data="draggableData"
@@ -117,7 +114,7 @@
/>
</draggable>
<ol
- v-if="editMode && canEdit && isFirstLevel"
+ v-if="canEdit && isFirstLevel"
class="cw-tree-adder-list"
>
<courseware-tree-item-adder :parentId="element.id" />
@@ -307,9 +304,6 @@ export default {
return true;
},
- editMode() {
- return this.viewMode === 'edit';
- },
dragOptions() {
return {
animation: 0,
diff --git a/resources/vue/components/courseware/structural-element/CoursewareWelcomeScreen.vue b/resources/vue/components/courseware/structural-element/CoursewareWelcomeScreen.vue
index 50813689fa3..e968f7c4f53 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareWelcomeScreen.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareWelcomeScreen.vue
@@ -41,7 +41,6 @@ export default {
unlockObject: 'unlockObject',
coursewareConsumeMode: 'coursewareConsumeMode',
- coursewareViewMode: 'coursewareViewMode',
coursewareContainerAdder: 'coursewareContainerAdder',
coursewareShowToolbar: 'coursewareShowToolbar'
@@ -49,7 +48,6 @@ export default {
addContainer() {
this.coursewareConsumeMode(false);
this.coursewareShowToolbar(true);
- this.coursewareViewMode('edit');
this.$nextTick(() => {
this.coursewareContainerAdder(true);
});
@@ -69,7 +67,6 @@ export default {
section: 0,
blockType: 'text',
});
- this.coursewareViewMode('edit');
this.coursewareConsumeMode(false);
this.companionSuccess({
info: this.$gettext('Das Elemente für Ihren ersten Inhalt wurde angelegt.'),
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
index 300a4e24748..0a56b5c902a 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
@@ -30,7 +30,7 @@
<button
class="cw-toolbar-button cw-toolbar-button-toggle cw-toolbar-button-toggle-out"
:title="$gettext('Werkzeugleiste einklappen')"
- @click="toggleToolbar"
+ @click="toggleToolbarActive"
></button>
</div>
<courseware-toolbar-blocks v-if="activeTool === 'blockAdder'" />
@@ -41,7 +41,7 @@
v-else
class="cw-toolbar-button cw-toolbar-button-toggle cw-toolbar-button-toggle-in"
:title="$gettext('Werkzeugleiste ausklappen')"
- @click="toggleToolbar"
+ @click="toggleToolbarActive"
></button>
<div class="cw-toolbar-spacer-right"></div>
</div>
@@ -65,7 +65,6 @@ export default {
},
data() {
return {
- toolsActive: true,
unfold: true,
showTools: true,
toolbarTop: 0,
@@ -79,13 +78,13 @@ export default {
...mapGetters({
relatedContainers: 'courseware-containers/related',
structuralElementById: 'courseware-structural-elements/byId',
+ toolbarActive: 'toolbarActive',
}),
toolbarStyle() {
- const footerHeight = document.getElementById('main-footer').getBoundingClientRect().height;
const scrollTopStyles = window.getComputedStyle(document.getElementById('scroll-to-top'));
- const scrollTopHeight = parseInt(scrollTopStyles['height']) + parseInt(scrollTopStyles['padding-top']) + parseInt(scrollTopStyles['padding-bottom']);
+ const scrollTopHeight = parseInt(scrollTopStyles['height'], 10) + parseInt(scrollTopStyles['padding-top'], 10) + parseInt(scrollTopStyles['padding-bottom'], 10) + parseInt(scrollTopStyles['margin-bottom'], 10);
let height = parseInt(
- Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight - footerHeight)
+ Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight)
);
return {
@@ -119,17 +118,17 @@ export default {
},
},
methods: {
- toggleToolbar() {
- this.toolsActive = !this.toolsActive;
- },
+ ...mapActions({
+ toggleToolbarActive: 'toggleToolbarActive',
+ }),
activateTool(tool) {
this.activeTool = tool;
},
updateToolbarTop() {
const responsiveContentbar = document.getElementById('responsive-contentbar');
if (responsiveContentbar) {
- const contentbarRect = this.responsiveContentbar.getBoundingClientRect();
- this.toolbarTop = contentbarRect.bottom + 35;
+ const contentbarRect = responsiveContentbar.getBoundingClientRect();
+ this.toolbarTop = contentbarRect.bottom + 25;
return;
}
@@ -168,7 +167,7 @@ export default {
this.resetAdderStorage();
}
},
- toolsActive(newState, oldState) {
+ toolbarActive(newState, oldState) {
let view = this;
if (newState) {
this.showTools = true;
@@ -178,7 +177,7 @@ export default {
} else {
this.unfold = false;
setTimeout(() => {
- if (!view.toolsActive) {
+ if (!view.toolbarActive) {
view.showTools = false;
}
}, 600);
diff --git a/resources/vue/components/courseware/widgets/CoursewareViewWidget.vue b/resources/vue/components/courseware/widgets/CoursewareViewWidget.vue
deleted file mode 100644
index 6f9d787f6bc..00000000000
--- a/resources/vue/components/courseware/widgets/CoursewareViewWidget.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
- <sidebar-widget :title="$gettext('Ansichten')" v-if="structuralElement">
- <template #content>
- <ul class="widget-list widget-links sidebar-views cw-view-widget">
- <li :class="{ active: readView }">
- <button @click="setReadView">
- <translate>Lesen</translate>
- </button>
- </li>
- <li
- v-if="canEdit"
- :class="{ active: editView }"
- >
- <button @click="setEditView">
- <translate>Bearbeiten</translate>
- </button>
- </li>
- </ul>
- </template>
- </sidebar-widget>
-</template>
-
-<script>
-import SidebarWidget from '../../SidebarWidget.vue';
-import { mapActions, mapGetters } from 'vuex';
-
-export default {
- name: 'courseware-view-widget',
- props: ['structuralElement', 'canVisit'],
- components: {
- SidebarWidget
- },
- computed: {
- ...mapGetters({
- viewMode: 'viewMode',
- context: 'context',
- rootLayout: 'rootLayout'
- }),
- readView() {
- return this.viewMode === 'read';
- },
- editView() {
- return this.viewMode === 'edit';
- },
- canEdit() {
- if (!this.structuralElement) {
- return false;
- }
- return this.structuralElement.attributes['can-edit'];
- },
- isRoot() {
- return this.structuralElement.relationships.parent.data === null;
- }
- },
- methods: {
- ...mapActions({
- coursewareViewMode: 'coursewareViewMode',
- coursewareBlockAdder: 'coursewareBlockAdder',
- setToolbarItem: 'coursewareSelectedToolbarItem',
- }),
- setReadView() {
- this.coursewareViewMode('read');
- this.setToolbarItem('contents');
- this.coursewareBlockAdder({});
- },
- setEditView() {
- this.coursewareViewMode('edit');
- },
- },
-};
-</script>
diff --git a/resources/vue/store/courseware/courseware.module.js b/resources/vue/store/courseware/courseware.module.js
index db13cf16de8..2f4dc606418 100644
--- a/resources/vue/store/courseware/courseware.module.js
+++ b/resources/vue/store/courseware/courseware.module.js
@@ -62,7 +62,9 @@ const getDefaultState = () => {
searchResults: [],
assistiveLiveContents: '',
- progresses: null
+ progresses: null,
+
+ toolbarActive: true,
};
};
@@ -275,6 +277,10 @@ const getters = {
},
oerEnableSuggestions(state, getters, rootState, rootGetters) {
return getters.oerCampusEnabled && rootGetters['studip-properties/byId']({ id: 'oer-enable-suggestions'}).attributes?.value;
+ },
+
+ toolbarActive(state) {
+ return state.toolbarActive;
}
};
@@ -1492,6 +1498,10 @@ export const actions = {
async deleteUserClipboards({ dispatch, rootGetters }, { uid, type }) {
await state.httpClient.delete(`users/${uid}/courseware-clipboards/${type}`);
dispatch('loadUserClipboards', uid);
+ },
+
+ toggleToolbarActive({ commit, rootGetters }) {
+ commit('setToolbarActive', !rootGetters['toolbarActive']);
}
};
@@ -1687,6 +1697,9 @@ export const mutations = {
},
setProgresses(state, data) {
state.progresses = data;
+ },
+ setToolbarActive(state, active) {
+ state.toolbarActive = active;
}
};
--
GitLab