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: TIC #3260

Merge request studip/studip!2378
---
 app/controllers/courseware_controller.php          |  1 -
 resources/vue/components/courseware/IndexApp.vue   |  5 --
 .../blocks/CoursewareBeforeAfterBlock.vue          |  8 +--
 .../courseware/blocks/CoursewareDefaultBlock.vue   |  2 +-
 .../containers/CoursewareAccordionContainer.vue    |  7 +--
 .../containers/CoursewareDefaultContainer.vue      |  4 +-
 .../containers/CoursewareListContainer.vue         |  7 +--
 .../containers/CoursewareTabsContainer.vue         |  7 +--
 .../CoursewareEmptyElementBox.vue                  | 33 +++-------
 .../structural-element/CoursewareRibbonToolbar.vue |  8 ---
 .../CoursewareStructuralElement.vue                | 16 +++--
 .../structural-element/CoursewareTree.vue          |  7 +--
 .../structural-element/CoursewareTreeItem.vue      | 22 +++----
 .../structural-element/CoursewareWelcomeScreen.vue |  3 -
 .../courseware/toolbar/CoursewareToolbar.vue       | 25 ++++----
 .../courseware/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 eaec609..faf7393 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 2ac86c2..53238b4 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 65df25c..20d820a 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 2fabdda..6bac6ff 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 c45f03a..75db30c 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 ad60b14..64b74e7 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 7f23210..7ffa413 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 391cc82..fd7450c 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 062fa57..abbe87f 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 992c3a1..2e44204 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 4f70f48..143a03a 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 68947e3..08019dd 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 418d443..540e76b 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 5081368..e968f7c 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 300a4e2..0a56b5c 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 6f9d787..0000000
--- 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 db13cf1..2f4dc60 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;
     }
 };
 
-- 
cgit v1.0