From a5ab0e56bae72904e6b46d9098bda905f4a62bbc Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Wed, 27 Mar 2024 07:57:24 +0000
Subject: fix #3675

Closes #3675

Merge request studip/studip!2757
---
 .../stylesheets/scss/courseware/toolbar.scss       | 28 ++--------
 .../CoursewareStructuralElement.vue                |  8 +--
 .../courseware/toolbar/CoursewareToolbar.vue       | 65 ++++++++++++++--------
 .../vue/store/courseware/courseware.module.js      | 13 +++++
 4 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss
index bf52e79..fdabbf2 100644
--- a/resources/assets/stylesheets/scss/courseware/toolbar.scss
+++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss
@@ -1,10 +1,3 @@
-$toolbar-icons: (
-    toggle-out: arr_2right,
-    toggle-in: arr_2left,
-    add: add,
-    clipboard: clipboard
-);
-
 .cw-toolbar {
     z-index: 30;
     display: flex;
@@ -104,6 +97,10 @@ $toolbar-icons: (
 
         }
     }
+    .cw-toolbar-folded-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
     .cw-toolbar-button-wrapper {
         position: sticky;
         top: 0;
@@ -125,21 +122,8 @@ $toolbar-icons: (
         cursor: pointer;
         border-bottom: solid 2px transparent;
 
-        @each $type, $icon in $toolbar-icons {
-            &.cw-toolbar-button-#{$type} {
-                @include background-icon(#{$icon}, clickable, 24);
-            }
-        }
         &.cw-toolbar-button-toggle {
-            right: 0;
-            width: 42px;
-
-            &.cw-toolbar-button-toggle-out {
-                position: absolute;
-            }
-            &.cw-toolbar-button-toggle-in {
-                position: relative;
-            }
+            text-align: end;
         }
 
         &.active {
@@ -161,7 +145,7 @@ $toolbar-icons: (
                 width: 128px;
                 padding: 2px 16px 0 16px;
                 &.cw-toolbar-button-toggle {
-                    width: 42px;
+                    text-align: end;
                 }
             }
         }
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
index 6ad1ec3..b5e063b 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
@@ -143,7 +143,7 @@
                             <courseware-root-content v-if="showRootLayout" :structuralElement="currentElement" :canEdit="canEdit" />
 
                             <div
-                                v-if="canVisit && (!canEdit || !toolbarActive ) && !isLink && !hideRootContent"
+                                v-if="canVisit && (!canEdit || hideEditLayout ) && !isLink && !hideRootContent"
                                 class="cw-container-wrapper"
                                 :class="{
                                     'cw-container-wrapper-consume': consumeMode,
@@ -154,7 +154,7 @@
                                     :key="container.id"
                                     :is="containerComponent(container)"
                                     :container="container"
-                                    :canEdit="canEdit && toolbarActive"
+                                    :canEdit="canEdit && !hideEditLayout"
                                     :canAddElements="canAddElements"
                                     :isTeacher="userIsTeacher"
                                     class="cw-container-item"
@@ -185,7 +185,7 @@
                                     class="cw-container-item"
                                 />
                             </div>
-                            <div v-if="canVisit && canEdit && toolbarActive && !isLink && !hideRootContent" class="cw-container-wrapper cw-container-wrapper-edit">
+                            <div v-if="canVisit && canEdit && !hideEditLayout && !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">
@@ -841,7 +841,7 @@ export default {
             childrenById: 'courseware-structure/children',
 
             rootLayout: 'rootLayout',
-            toolbarActive: 'toolbarActive',
+            hideEditLayout: 'hideEditLayout',
             isFeedbackActivated: 'isFeedbackActivated',
             canCreateFeedbackElement: 'canCreateFeedbackElement',
             getFeedbackElementById: 'feedback-elements/byId',
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
index 7a49363..d31e963 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="cw-toolbar-wrapper">
         <div id="cw-toolbar" class="cw-toolbar" :style="toolbarStyle">
-            <div v-if="showTools" class="cw-toolbar-tools" :class="{ unfold: unfold, hd: isHd, wqhd: isWqhd}">
+            <div v-if="showTools" class="cw-toolbar-tools" :class="{ unfold: unfold, hd: isHd, wqhd: isWqhd }">
                 <div class="cw-toolbar-button-wrapper">
                     <button
                         class="cw-toolbar-button"
-                        :class="{active: activeTool === 'blockAdder'}"
+                        :class="{ active: activeTool === 'blockAdder' }"
                         :title="$gettext('Blöcke hinzufügen')"
                         @click="activateTool('blockAdder')"
                     >
@@ -13,7 +13,7 @@
                     </button>
                     <button
                         class="cw-toolbar-button"
-                        :class="{active: activeTool === 'containerAdder'}"
+                        :class="{ active: activeTool === 'containerAdder' }"
                         :title="$gettext('Abschnitte hinzufügen')"
                         @click="activateTool('containerAdder')"
                     >
@@ -21,28 +21,44 @@
                     </button>
                     <button
                         class="cw-toolbar-button"
-                        :class="{active: activeTool === 'clipboard'}"
+                        :class="{ active: activeTool === 'clipboard' }"
                         :title="$gettext('Block Merkliste')"
                         @click="activateTool('clipboard')"
                     >
                         {{ $gettext('Merkliste') }}
                     </button>
                     <button
-                        class="cw-toolbar-button cw-toolbar-button-toggle cw-toolbar-button-toggle-out"
+                        class="cw-toolbar-button cw-toolbar-button-toggle"
                         :title="$gettext('Werkzeugleiste einklappen')"
                         @click="toggleToolbarActive"
-                    ></button>
+                    >
+                        <studip-icon shape="arr_2right" :size="24" />
+                    </button>
                 </div>
                 <courseware-toolbar-blocks v-if="activeTool === 'blockAdder'" />
                 <courseware-toolbar-containers v-if="activeTool === 'containerAdder'" />
                 <courseware-toolbar-clipboard v-if="activeTool === 'clipboard'" />
             </div>
-            <button
-                v-else
-                class="cw-toolbar-button cw-toolbar-button-toggle cw-toolbar-button-toggle-in"
-                :title="$gettext('Werkzeugleiste ausklappen')"
-                @click="toggleToolbarActive"
-            ></button>
+            <div v-else class="cw-toolbar-folded-wrapper">
+                <button
+                    class="cw-toolbar-button"
+                    :title="$gettext('Werkzeugleiste ausklappen')"
+                    @click="toggleToolbarActive"
+                >
+                    <studip-icon shape="arr_2left" :size="24" />
+                </button>
+                <button
+                    class="cw-toolbar-button"
+                    :title="
+                        hideEditLayout
+                            ? $gettext('Bearbeitungselemente anzeigen')
+                            : $gettext('Bearbeitungselemente ausblenden')
+                    "
+                    @click="toggleHideEditLayout"
+                >
+                    <studip-icon :shape="hideEditLayout ? 'visibility-checked' : 'visibility-invisible'" :size="24" />
+                </button>
+            </div>
             <div class="cw-toolbar-spacer-right"></div>
         </div>
     </div>
@@ -61,7 +77,7 @@ export default {
     components: {
         CoursewareToolbarBlocks,
         CoursewareToolbarContainers,
-        CoursewareToolbarClipboard
+        CoursewareToolbarClipboard,
     },
     data() {
         return {
@@ -71,7 +87,7 @@ export default {
             activeTool: 'blockAdder',
 
             windowWidth: window.outerWidth,
-            windowInnerHeight: window.innerHeight
+            windowInnerHeight: window.innerHeight,
         };
     },
     computed: {
@@ -79,10 +95,15 @@ export default {
             relatedContainers: 'courseware-containers/related',
             structuralElementById: 'courseware-structural-elements/byId',
             toolbarActive: 'toolbarActive',
+            hideEditLayout: 'hideEditLayout',
         }),
         toolbarStyle() {
             const scrollTopStyles = window.getComputedStyle(document.getElementById('scroll-to-top'));
-            const scrollTopHeight = parseInt(scrollTopStyles['height'], 10) + parseInt(scrollTopStyles['padding-top'], 10) + parseInt(scrollTopStyles['padding-bottom'], 10) + parseInt(scrollTopStyles['margin-bottom'], 10);
+            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)
             );
@@ -95,8 +116,8 @@ export default {
         },
         containers() {
             return this.relatedContainers({
-                parent: this.structuralElementById({id: this.$route.params.id}), 
-                relationship: 'containers'    
+                parent: this.structuralElementById({ id: this.$route.params.id }),
+                relationship: 'containers',
             });
         },
         toolbarHeader() {
@@ -120,6 +141,7 @@ export default {
     methods: {
         ...mapActions({
             toggleToolbarActive: 'toggleToolbarActive',
+            toggleHideEditLayout: 'toggleHideEditLayout',
         }),
         activateTool(tool) {
             this.activeTool = tool;
@@ -135,18 +157,17 @@ export default {
             const ribbon = document.getElementById('cw-ribbon') ?? document.getElementById('contentbar');
             if (ribbon) {
                 const contentbarRect = ribbon.getBoundingClientRect();
-                if (ribbon.classList.contains("cw-ribbon-sticky")) {
+                if (ribbon.classList.contains('cw-ribbon-sticky')) {
                     this.toolbarTop = contentbarRect.bottom + 16;
                 } else {
                     this.toolbarTop = contentbarRect.bottom + 15;
                 }
             }
-            
         },
         onResize() {
             this.windowWidth = window.outerWidth;
             this.windowInnerHeight = window.innerHeight;
-        }
+        },
     },
     mounted() {
         this.updateToolbarTop();
@@ -156,9 +177,9 @@ export default {
         });
         this.resetAdderStorage();
     },
-    beforeDestroy() { 
+    beforeDestroy() {
         window.removeEventListener('scroll', this.updateToolbarTop);
-        window.removeEventListener('resize', this.onResize); 
+        window.removeEventListener('resize', this.onResize);
     },
 
     watch: {
diff --git a/resources/vue/store/courseware/courseware.module.js b/resources/vue/store/courseware/courseware.module.js
index 056802f..c44bba1 100644
--- a/resources/vue/store/courseware/courseware.module.js
+++ b/resources/vue/store/courseware/courseware.module.js
@@ -67,6 +67,7 @@ const getDefaultState = () => {
         progresses: null,
 
         toolbarActive: true,
+        hideEditLayout: false,
         feedbackSettings: null,
         processing: false,
     };
@@ -302,6 +303,9 @@ const getters = {
     toolbarActive(state) {
         return state.toolbarActive;
     },
+    hideEditLayout(state) {
+        return state.hideEditLayout;
+    },
     feedbackSettings(state) {
         return state.feedbackSettings;
     },
@@ -1544,8 +1548,14 @@ export const actions = {
     },
 
     toggleToolbarActive({ commit, rootGetters }) {
+        if (!rootGetters['toolbarActive']) {
+            commit('setHideEditLayout', false);
+        }
         commit('setToolbarActive', !rootGetters['toolbarActive']);
     },
+    toggleHideEditLayout({ commit, rootGetters}) {
+        commit('setHideEditLayout', !rootGetters['hideEditLayout']);
+    },
     setFeedbackSettings(context, feedbackSettings) {
         context.commit('setFeedbackSettings', feedbackSettings);
     },
@@ -1754,6 +1764,9 @@ export const mutations = {
     setToolbarActive(state, active) {
         state.toolbarActive = active;
     },
+    setHideEditLayout(state, hide) {
+        state.hideEditLayout = hide;
+    },
     setFeedbackSettings(state, feedbackSettings) {
         state.feedbackSettings = feedbackSettings;
     },
-- 
cgit v1.0