diff options
Diffstat (limited to 'resources/vue/components/courseware/toolbar/CoursewareToolbar.vue')
| -rw-r--r-- | resources/vue/components/courseware/toolbar/CoursewareToolbar.vue | 48 |
1 files changed, 32 insertions, 16 deletions
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue index d31e963..dc70348 100644 --- a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue +++ b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue @@ -2,7 +2,7 @@ <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 class="cw-toolbar-button-wrapper"> + <div id="cw-toolbar-nav" class="cw-toolbar-button-wrapper"> <button class="cw-toolbar-button" :class="{ active: activeTool === 'blockAdder' }" @@ -35,9 +35,19 @@ <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 class="cw-toolbar-tool-wrapper"> + <CoursewareToolbarBlocks + v-if="activeTool === 'blockAdder'" + :toolbarContentHeight="toolbarContentHeight" + /> + <CoursewareToolbarContainers + v-if="activeTool === 'containerAdder'" + /> + <CoursewareToolbarClipboard + v-if="activeTool === 'clipboard'" + :toolbarContentHeight="toolbarContentHeight" + /> + </div> </div> <div v-else class="cw-toolbar-folded-wrapper"> <button @@ -97,20 +107,26 @@ export default { toolbarActive: 'toolbarActive', hideEditLayout: 'hideEditLayout', }), - toolbarStyle() { - const scrollTopStyles = window.getComputedStyle(document.getElementById('scroll-to-top')); + scrollTopStyles() { + return window.getComputedStyle(document.getElementById('scroll-to-top')); + }, + toolbarHeight() { const scrollTopHeight = - parseInt(scrollTopStyles['height'], 10) + - parseInt(scrollTopStyles['padding-top'], 10) + - parseInt(scrollTopStyles['padding-bottom'], 10) + - parseInt(scrollTopStyles['margin-bottom'], 10); - let height = parseInt( + 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: height + 'px', - minHeight: height + 'px', + height: this.toolbarHeight + 'px', + minHeight: this.toolbarHeight + 'px', top: this.toolbarTop + 'px', }; }, @@ -183,8 +199,8 @@ export default { }, watch: { - containers(oldValue, newValue) { - if (oldValue && newValue && oldValue.length !== newValue.length) { + containers(newValue, oldValue) { + if (newValue) { this.resetAdderStorage(); } }, |