diff options
Diffstat (limited to 'resources/vue/components/courseware')
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); }, |