update page layouttic-cw-without-sidebar

5 files changed, 48 insertions, 60 deletions

diff --git a/resources/vue/components/courseware/IndexApp.vue b/resources/vue/components/courseware/IndexApp.vue
index 53238b4..7cf17ec 100644
--- a/resources/vue/components/courseware/IndexApp.vue
+++ b/resources/vue/components/courseware/IndexApp.vue
@@ -2,6 +2,7 @@
     <div>
         <div v-if="structureLoadingState === 'done'">
             <courseware-search-results v-show="showSearchResults" />
+            <CoursewareToolbar v-if="canEditSelected && canVisit" />
             <courseware-structural-element
                 v-show="!showSearchResults"
                 :canVisit="canVisit"
@@ -9,12 +10,7 @@
                 :ordered-structural-elements="orderedStructuralElements"
                 @select="selectStructuralElement"
             ></courseware-structural-element>
-            <MountingPortal mountTo="#courseware-action-widget" name="sidebar-actions">
-                <courseware-action-widget v-if="!showSearchResults && canEditSelected" :structural-element="selected"></courseware-action-widget>
-            </MountingPortal>
-            <MountingPortal mountTo="#courseware-search-widget" name="sidebar-search">
-                <courseware-search-widget v-if="selected !== null"></courseware-search-widget>
-            </MountingPortal>
+            <CoursewareEditBar v-if="canEditSelected && canVisit"/>
         </div>
         <studip-progress-indicator
             v-if="structureLoadingState === 'loading'"
@@ -35,8 +31,8 @@ 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 CoursewareActionWidget from './widgets/CoursewareActionWidget.vue';
-import CoursewareSearchWidget from './widgets/CoursewareSearchWidget.vue';
+import CoursewareToolbar from './toolbar/CoursewareToolbar.vue';
+import CoursewareEditBar from './structural-element/CoursewareEditBar.vue';
 
 import StudipProgressIndicator from '../StudipProgressIndicator.vue';
 
@@ -46,11 +42,11 @@ export default {
     components: {
         CoursewareStructuralElement,
         CoursewareSearchResults,
-        CoursewareActionWidget,
         CoursewareCompanionBox,
         StudipProgressIndicator,
-        CoursewareSearchWidget,
         CoursewareCompanionOverlay,
+        CoursewareToolbar,
+        CoursewareEditBar
     },
     data: () => ({
         canVisit: null,
diff --git a/resources/vue/components/courseware/structural-element/CoursewareEditBar.vue b/resources/vue/components/courseware/structural-element/CoursewareEditBar.vue
new file mode 100644
index 0000000..0d0d834
--- /dev/null
+++ b/resources/vue/components/courseware/structural-element/CoursewareEditBar.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="cw-editbar-wrapper">
+        <div class="cw-editbar"></div>
+        <div class="cw-editbar-content"></div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'CoursewareEditBar',
+}
+</script>
\ No newline at end of file
diff --git a/resources/vue/components/courseware/structural-element/CoursewareRibbon.vue b/resources/vue/components/courseware/structural-element/CoursewareRibbon.vue
index f7cfff0..2180f42 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareRibbon.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareRibbon.vue
@@ -1,6 +1,5 @@
 <template>
     <div :class="{ 'cw-ribbon-wrapper-consume': consumeMode }" :id="isContentBar ? 'contentbar' : null" >
-        <div v-show="stickyRibbon" class="cw-ribbon-sticky-top"></div>
         <header :id="isContentBar ? 'cw-ribbon' : null" class="cw-ribbon" :class="{ 'cw-ribbon-sticky': stickyRibbon, 'cw-ribbon-consume': consumeMode }">
             <div class="cw-ribbon-wrapper-left">
                 <nav class="cw-ribbon-nav" :class="buttonsClass">
@@ -88,9 +87,10 @@ export default {
         },
         toolbarHeight() {
             if (this.stickyRibbon) {
-                return parseInt(window.innerHeight * 0.75);
+                return parseInt(window.innerHeight - 130);
             } else {
-                return parseInt(Math.min(window.innerHeight * 0.75, window.innerHeight - 197));
+                return parseInt(window.innerHeight - 230);
+                // parseInt(Math.min(window.innerHeight * 0.75, window.innerHeight - 197));
             }
         }
     },
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
index 26e2627..69a12a7 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
@@ -236,7 +236,7 @@
                                 <studip-progress-indicator v-if="processing" :description="$gettext('Vorgang wird bearbeitet...')" />
                             </div>
                         </div>
-                        <courseware-toolbar v-if="canVisit && canEdit && !isLink" />
+                        <!-- <courseware-toolbar v-if="canVisit && canEdit && !isLink" /> -->
                     </div>
                     <courseware-call-to-action-box
                         v-if="commentable"
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
index dc70348..58ec121 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="cw-toolbar-wrapper">
-        <div id="cw-toolbar" class="cw-toolbar" :style="toolbarStyle">
+        <div id="cw-toolbar" class="cw-toolbar" :class="{ 'cw-toolbar-sticky': stickyToolbar}" :style="stickyStyle">
             <div v-if="showTools" class="cw-toolbar-tools" :class="{ unfold: unfold, hd: isHd, wqhd: isWqhd }">
                 <div id="cw-toolbar-nav" class="cw-toolbar-button-wrapper">
                     <button
@@ -32,7 +32,7 @@
                         :title="$gettext('Werkzeugleiste einklappen')"
                         @click="toggleToolbarActive"
                     >
-                        <studip-icon shape="arr_2right" :size="24" />
+                        <studip-icon shape="arr_2left" :size="24" />
                     </button>
                 </div>
                 <div class="cw-toolbar-tool-wrapper">
@@ -49,13 +49,13 @@
                     />
                 </div>
             </div>
-            <div v-else class="cw-toolbar-folded-wrapper">
+            <div class="cw-toolbar-folded-wrapper" :style="foldedToolbarStyle">
                 <button
                     class="cw-toolbar-button"
                     :title="$gettext('Werkzeugleiste ausklappen')"
                     @click="toggleToolbarActive"
                 >
-                    <studip-icon shape="arr_2left" :size="24" />
+                    <studip-icon shape="arr_2right" :size="24" />
                 </button>
                 <button
                     class="cw-toolbar-button"
@@ -69,7 +69,6 @@
                     <studip-icon :shape="hideEditLayout ? 'visibility-checked' : 'visibility-invisible'" :size="24" />
                 </button>
             </div>
-            <div class="cw-toolbar-spacer-right"></div>
         </div>
     </div>
 </template>
@@ -93,9 +92,8 @@ export default {
         return {
             unfold: true,
             showTools: true,
-            toolbarTop: 0,
             activeTool: 'blockAdder',
-
+            stickyToolbar: false,
             windowWidth: window.outerWidth,
             windowInnerHeight: window.innerHeight,
         };
@@ -106,30 +104,11 @@ export default {
             structuralElementById: 'courseware-structural-elements/byId',
             toolbarActive: 'toolbarActive',
             hideEditLayout: 'hideEditLayout',
+            consumeMode: 'consumeMode',
         }),
         scrollTopStyles() {
             return window.getComputedStyle(document.getElementById('scroll-to-top'));
         },
-        toolbarHeight() {
-            const scrollTopHeight =
-                parseInt(this.scrollTopStyles['height'], 10) +
-                parseInt(this.scrollTopStyles['padding-top'], 10) +
-                parseInt(this.scrollTopStyles['padding-bottom'], 10) +
-                parseInt(this.scrollTopStyles['margin-bottom'], 10);
-            return parseInt(
-                Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight)
-            );
-        },
-        toolbarContentHeight() {
-            return this.toolbarHeight - 55;
-        },
-        toolbarStyle() {
-            return {
-                height: this.toolbarHeight + 'px',
-                minHeight: this.toolbarHeight + 'px',
-                top: this.toolbarTop + 'px',
-            };
-        },
         containers() {
             return this.relatedContainers({
                 parent: this.structuralElementById({ id: this.$route.params.id }),
@@ -153,6 +132,19 @@ export default {
         isWqhd() {
             return this.windowWidth >= 2560;
         },
+
+        foldedToolbarStyle() {
+            const top = this.stickyToolbar ? 150 : 302;
+            return { height: (this.windowInnerHeight - top) + 'px' };
+        },
+
+        toolbarContentHeight() {
+            const top = this.stickyToolbar ? 210 : 360;
+            return this.windowInnerHeight - top;
+        },
+        stickyStyle() {
+            return this.stickyToolbar ? { top: '116px'} : {};
+        }
     },
     methods: {
         ...mapActions({
@@ -162,22 +154,11 @@ export default {
         activateTool(tool) {
             this.activeTool = tool;
         },
-        updateToolbarTop() {
-            const responsiveContentbar = document.getElementById('responsive-contentbar');
-            if (responsiveContentbar) {
-                const contentbarRect = responsiveContentbar.getBoundingClientRect();
-                this.toolbarTop = contentbarRect.bottom + 25;
-                return;
-            }
-
-            const ribbon = document.getElementById('cw-ribbon') ?? document.getElementById('contentbar');
-            if (ribbon) {
-                const contentbarRect = ribbon.getBoundingClientRect();
-                if (ribbon.classList.contains('cw-ribbon-sticky')) {
-                    this.toolbarTop = contentbarRect.bottom + 16;
-                } else {
-                    this.toolbarTop = contentbarRect.bottom + 15;
-                }
+        handleScroll() {
+            if (this.windowWidth > 767) {
+                this.stickyToolbar = window.scrollY > 128 && !this.consumeMode;
+            } else {
+                this.stickyToolbar = window.scrollY > 75 && !this.consumeMode;
             }
         },
         onResize() {
@@ -186,15 +167,13 @@ export default {
         },
     },
     mounted() {
-        this.updateToolbarTop();
+        window.addEventListener('scroll', this.handleScroll);
         this.$nextTick(() => {
-            window.addEventListener('scroll', this.updateToolbarTop);
             window.addEventListener('resize', this.onResize);
         });
         this.resetAdderStorage();
     },
     beforeDestroy() {
-        window.removeEventListener('scroll', this.updateToolbarTop);
         window.removeEventListener('resize', this.onResize);
     },