From b54b49704eb31bbe0fe4ffe05466538a4174d4dc Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Mon, 6 May 2024 08:38:40 +0000
Subject: fix #4033

Closes #4033

Merge request studip/studip!2900
---
 .../stylesheets/scss/courseware/blockadder.scss    |   2 +-
 .../stylesheets/scss/courseware/toolbar.scss       |  17 ++-
 .../courseware/toolbar/CoursewareToolbar.vue       |  44 ++++--
 .../courseware/toolbar/CoursewareToolbarBlocks.vue | 170 +++++++++++----------
 .../toolbar/CoursewareToolbarClipboard.vue         |  14 +-
 5 files changed, 150 insertions(+), 97 deletions(-)

diff --git a/resources/assets/stylesheets/scss/courseware/blockadder.scss b/resources/assets/stylesheets/scss/courseware/blockadder.scss
index 93325dd..b3f4834 100644
--- a/resources/assets/stylesheets/scss/courseware/blockadder.scss
+++ b/resources/assets/stylesheets/scss/courseware/blockadder.scss
@@ -136,7 +136,7 @@
 }
 .cw-element-inserter-wrapper {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 4px;
     margin-bottom: 8px;
diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss
index fdabbf2..0670486 100644
--- a/resources/assets/stylesheets/scss/courseware/toolbar.scss
+++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss
@@ -14,8 +14,7 @@
         min-height: 100%;
         border: solid thin var(--content-color-40);
         background-color: var(--white);
-        overflow-y: auto;
-        overflow-x: hidden;
+        overflow: hidden;
         position: relative;
         padding: 0 4px;
         top: 0;
@@ -33,6 +32,11 @@
             right: 0;
         }
 
+        .cw-toolbar-tool-content {
+            overflow-y: auto;
+            padding-right: 8px;
+        }
+
         .cw-toolbar-blocks {
             .input-group.files-search {
                 &.search {
@@ -96,6 +100,12 @@
             }
 
         }
+
+        .cw-toolbar-clipboard {
+            .cw-collapsible {
+                margin-bottom: 4px;
+            }
+        }
     }
     .cw-toolbar-folded-wrapper {
         display: flex;
@@ -124,6 +134,7 @@
 
         &.cw-toolbar-button-toggle {
             text-align: end;
+            flex-grow: 1;
         }
 
         &.active {
@@ -142,7 +153,7 @@
     .cw-toolbar-tools.hd {
         .cw-toolbar-button-wrapper {
             .cw-toolbar-button {
-                width: 128px;
+                min-width: 110px;
                 padding: 2px 16px 0 16px;
                 &.cw-toolbar-button-toggle {
                     text-align: end;
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
index 8f82eac..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',
             };
         },
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
index 2795e62..ceda0f0 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
@@ -1,85 +1,88 @@
 <template>
     <div class="cw-toolbar-blocks">
-        <form @submit.prevent="loadSearch">
-            <div class="input-group files-search search cw-block-search">
-                <input
-                    ref="searchBox"
-                    type="text"
-                    v-model="searchInput"
-                    @click.stop
-                    :label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
-                />
-                <span class="input-group-append" @click.stop>
-                    <button
-                        v-if="searchInput"
-                        type="button"
-                        class="button reset-search"
-                        id="reset-search"
-                        :title="$gettext('Suche zurücksetzen')"
-                        @click="resetSearch"
-                    >
-                        <studip-icon shape="decline" :size="20"></studip-icon>
-                    </button>
-                    <button
-                        type="submit"
-                        class="button"
-                        id="search-btn"
-                        :title="$gettext('Suche starten')"
-                        @click="loadSearch"
-                    >
-                        <studip-icon shape="search" :size="20"></studip-icon>
-                    </button>
-                </span>
-            </div>
-        </form>
+        <div id="cw-toolbar-blocks-header" class="cw-toolbar-tool-header">
+            <form @submit.prevent="loadSearch">
+                <div class="input-group files-search search cw-block-search">
+                    <input
+                        ref="searchBox"
+                        type="text"
+                        v-model="searchInput"
+                        @click.stop
+                        :label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
+                    />
+                    <span class="input-group-append" @click.stop>
+                        <button
+                            v-if="searchInput"
+                            type="button"
+                            class="button reset-search"
+                            id="reset-search"
+                            :title="$gettext('Suche zurücksetzen')"
+                            @click="resetSearch"
+                        >
+                            <studip-icon shape="decline" :size="20"></studip-icon>
+                        </button>
+                        <button
+                            type="submit"
+                            class="button"
+                            id="search-btn"
+                            :title="$gettext('Suche starten')"
+                            @click="loadSearch"
+                        >
+                            <studip-icon shape="search" :size="20"></studip-icon>
+                        </button>
+                    </span>
+                </div>
+            </form>
 
-        <div class="filterpanel">
-            <span class="sr-only">{{ $gettext('Kategorien-Filter') }}</span>
-            <button
-                v-for="category in blockCategories"
-                :key="category.type"
-                class="button"
-                :class="{ 'button-active': category.type === currentFilterCategory }"
-                :aria-pressed="category.type === currentFilterCategory ? 'true' : 'false'"
-                @click="selectCategory(category.type)"
-            >
-                {{ category.title }}
-            </button>
+            <div class="filterpanel">
+                <span class="sr-only">{{ $gettext('Kategorien-Filter') }}</span>
+                <button
+                    v-for="category in blockCategories"
+                    :key="category.type"
+                    class="button"
+                    :class="{ 'button-active': category.type === currentFilterCategory }"
+                    :aria-pressed="category.type === currentFilterCategory ? 'true' : 'false'"
+                    @click="selectCategory(category.type)"
+                >
+                    {{ category.title }}
+                </button>
+            </div>
         </div>
-
-        <div v-if="filteredBlockTypes.length > 0" class="cw-blockadder-item-list">
-            <draggable
-                v-if="filteredBlockTypes.length > 0"
-                class="cw-blockadder-item-list"
-                tag="div"
-                role="listbox"
-                v-model="filteredBlockTypes"
-                handle=".cw-sortable-handle-blockadder"
-                :group="{ name: 'blocks', pull: 'clone', put: 'false' }"
-                :clone="cloneBlock"
-                :sort="false"
-                :emptyInsertThreshold="20"
-                @start="dragBlockStart($event)"
-                @end="dropNewBlock($event)"
-                ref="sortables"
-                sectionId="0"
-            >
-                <courseware-blockadder-item
-                    v-for="(block, index) in filteredBlockTypes"
-                    :key="index"
-                    :title="block.title"
-                    :type="block.type"
-                    :data-blocktype="block.type"
-                    :description="block.description"
-                    @blockAdded="$emit('blockAdded')"
-                />
-            </draggable>
+        <div class="cw-toolbar-tool-content" :style="toolContentStyle">
+            <div v-if="filteredBlockTypes.length > 0" class="cw-blockadder-item-list">
+                <draggable
+                    v-if="filteredBlockTypes.length > 0"
+                    class="cw-blockadder-item-list"
+                    tag="div"
+                    role="listbox"
+                    v-model="filteredBlockTypes"
+                    handle=".cw-sortable-handle-blockadder"
+                    :group="{ name: 'blocks', pull: 'clone', put: 'false' }"
+                    :clone="cloneBlock"
+                    :sort="false"
+                    :emptyInsertThreshold="20"
+                    @start="dragBlockStart($event)"
+                    @end="dropNewBlock($event)"
+                    ref="sortables"
+                    sectionId="0"
+                >
+                    <courseware-blockadder-item
+                        v-for="(block, index) in filteredBlockTypes"
+                        :key="index"
+                        :title="block.title"
+                        :type="block.type"
+                        :data-blocktype="block.type"
+                        :description="block.description"
+                        @blockAdded="$emit('blockAdded')"
+                    />
+                </draggable>
+            </div>
+            <courseware-companion-box
+                v-else
+                :msgCompanion="$gettext('Es wurden keine passenden Blöcke gefunden.')"
+                mood="pointing"
+            />
         </div>
-        <courseware-companion-box
-            v-else
-            :msgCompanion="$gettext('Es wurden keine passenden Blöcke gefunden.')"
-            mood="pointing"
-        />
     </div>
 </template>
 
@@ -99,6 +102,12 @@ export default {
         CoursewareCompanionBox,
         draggable,
     },
+    props: {
+        toolbarContentHeight: {
+            type: Number,
+            required: true,
+        },
+    },
     data() {
         return {
             searchInput: '',
@@ -132,6 +141,13 @@ export default {
                 { title: this.$gettext('Biografie'), type: 'biography' },
             ];
         },
+        toolContentStyle() {
+            const height = this.toolbarContentHeight - 115;
+
+            return {
+                height: height + 'px',
+            };
+        },
     },
     methods: {
         ...mapActions({
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue
index 98cd573..c6f1e92 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="cw-toolbar-clipboard">
+    <div class="cw-toolbar-clipboard cw-toolbar-tool-content" :style="toolContentStyle">
         <courseware-collapsible-box :title="$gettext('Blöcke')" :open="clipboardBlocks.length > 0">
             <template v-if="clipboardBlocks.length > 0">
                 <div class="cw-element-inserter-wrapper">
@@ -101,7 +101,12 @@ export default {
         StudipDialog,
         draggable,
     },
-
+    props: {
+        toolbarContentHeight: {
+            type: Number,
+            required: true,
+        },
+    },
     data() {
         return {
             showDeleteClipboardDialog: false,
@@ -143,6 +148,11 @@ export default {
             }
             return '';
         },
+        toolContentStyle() {
+            return {
+                height: this.toolbarContentHeight + 'px',
+            };
+        },
     },
     methods: {
         ...mapActions({
-- 
cgit v1.0