Skip to content
Snippets Groups Projects
Commit b54b4970 authored by Ron Lucke's avatar Ron Lucke
Browse files

fix #4033 

Closes #4033

Merge request studip/studip!2900
parent ef54bef7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 150 additions and 97 deletions
resources/assets/stylesheets/scss/courseware/blockadder.scss
+ 1
− 1
View file @ b54b4970
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
} }
.cw-element-inserter-wrapper { .cw-element-inserter-wrapper {
display: grid; 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-auto-rows: auto;
grid-gap: 4px; grid-gap: 4px;
margin-bottom: 8px; margin-bottom: 8px;
......
resources/assets/stylesheets/scss/courseware/toolbar.scss
+ 14
− 3
View file @ b54b4970
...@@ -14,8 +14,7 @@ ...@@ -14,8 +14,7 @@
min-height: 100%; min-height: 100%;
border: solid thin var(--content-color-40); border: solid thin var(--content-color-40);
background-color: var(--white); background-color: var(--white);
overflow-y: auto; overflow: hidden;
overflow-x: hidden;
position: relative; position: relative;
padding: 0 4px; padding: 0 4px;
top: 0; top: 0;
...@@ -33,6 +32,11 @@ ...@@ -33,6 +32,11 @@
right: 0; right: 0;
} }
.cw-toolbar-tool-content {
overflow-y: auto;
padding-right: 8px;
}
.cw-toolbar-blocks { .cw-toolbar-blocks {
.input-group.files-search { .input-group.files-search {
&.search { &.search {
...@@ -96,6 +100,12 @@ ...@@ -96,6 +100,12 @@
} }
} }
.cw-toolbar-clipboard {
.cw-collapsible {
margin-bottom: 4px;
}
}
} }
.cw-toolbar-folded-wrapper { .cw-toolbar-folded-wrapper {
display: flex; display: flex;
...@@ -124,6 +134,7 @@ ...@@ -124,6 +134,7 @@
&.cw-toolbar-button-toggle { &.cw-toolbar-button-toggle {
text-align: end; text-align: end;
flex-grow: 1;
} }
&.active { &.active {
...@@ -142,7 +153,7 @@ ...@@ -142,7 +153,7 @@
.cw-toolbar-tools.hd { .cw-toolbar-tools.hd {
.cw-toolbar-button-wrapper { .cw-toolbar-button-wrapper {
.cw-toolbar-button { .cw-toolbar-button {
width: 128px; min-width: 110px;
padding: 2px 16px 0 16px; padding: 2px 16px 0 16px;
&.cw-toolbar-button-toggle { &.cw-toolbar-button-toggle {
text-align: end; text-align: end;
......
resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
+ 30
− 14
View file @ b54b4970
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="cw-toolbar-wrapper"> <div class="cw-toolbar-wrapper">
<div id="cw-toolbar" class="cw-toolbar" :style="toolbarStyle"> <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"> <div id="cw-toolbar-nav" class="cw-toolbar-button-wrapper">
<button <button
class="cw-toolbar-button" class="cw-toolbar-button"
:class="{ active: activeTool === 'blockAdder' }" :class="{ active: activeTool === 'blockAdder' }"
...@@ -35,9 +35,19 @@ ...@@ -35,9 +35,19 @@
<studip-icon shape="arr_2right" :size="24" /> <studip-icon shape="arr_2right" :size="24" />
</button> </button>
</div> </div>
<courseware-toolbar-blocks v-if="activeTool === 'blockAdder'" /> <div class="cw-toolbar-tool-wrapper">
<courseware-toolbar-containers v-if="activeTool === 'containerAdder'" /> <CoursewareToolbarBlocks
<courseware-toolbar-clipboard v-if="activeTool === 'clipboard'" /> v-if="activeTool === 'blockAdder'"
:toolbarContentHeight="toolbarContentHeight"
/>
<CoursewareToolbarContainers
v-if="activeTool === 'containerAdder'"
/>
<CoursewareToolbarClipboard
v-if="activeTool === 'clipboard'"
:toolbarContentHeight="toolbarContentHeight"
/>
</div>
</div> </div>
<div v-else class="cw-toolbar-folded-wrapper"> <div v-else class="cw-toolbar-folded-wrapper">
<button <button
...@@ -97,20 +107,26 @@ export default { ...@@ -97,20 +107,26 @@ export default {
toolbarActive: 'toolbarActive', toolbarActive: 'toolbarActive',
hideEditLayout: 'hideEditLayout', hideEditLayout: 'hideEditLayout',
}), }),
toolbarStyle() { scrollTopStyles() {
const scrollTopStyles = window.getComputedStyle(document.getElementById('scroll-to-top')); return window.getComputedStyle(document.getElementById('scroll-to-top'));
},
toolbarHeight() {
const scrollTopHeight = const scrollTopHeight =
parseInt(scrollTopStyles['height'], 10) + parseInt(this.scrollTopStyles['height'], 10) +
parseInt(scrollTopStyles['padding-top'], 10) + parseInt(this.scrollTopStyles['padding-top'], 10) +
parseInt(scrollTopStyles['padding-bottom'], 10) + parseInt(this.scrollTopStyles['padding-bottom'], 10) +
parseInt(scrollTopStyles['margin-bottom'], 10); parseInt(this.scrollTopStyles['margin-bottom'], 10);
let height = parseInt( return parseInt(
Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight) Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight)
); );
},
toolbarContentHeight() {
return this.toolbarHeight - 55;
},
toolbarStyle() {
return { return {
height: height + 'px', height: this.toolbarHeight + 'px',
minHeight: height + 'px', minHeight: this.toolbarHeight + 'px',
top: this.toolbarTop + 'px', top: this.toolbarTop + 'px',
}; };
}, },
......
resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
+ 93
− 77
View file @ b54b4970
<template> <template>
<div class="cw-toolbar-blocks"> <div class="cw-toolbar-blocks">
<form @submit.prevent="loadSearch"> <div id="cw-toolbar-blocks-header" class="cw-toolbar-tool-header">
<div class="input-group files-search search cw-block-search"> <form @submit.prevent="loadSearch">
<input <div class="input-group files-search search cw-block-search">
ref="searchBox" <input
type="text" ref="searchBox"
v-model="searchInput" type="text"
@click.stop v-model="searchInput"
:label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')" @click.stop
/> :label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
<span class="input-group-append" @click.stop> />
<button <span class="input-group-append" @click.stop>
v-if="searchInput" <button
type="button" v-if="searchInput"
class="button reset-search" type="button"
id="reset-search" class="button reset-search"
:title="$gettext('Suche zurücksetzen')" id="reset-search"
@click="resetSearch" :title="$gettext('Suche zurücksetzen')"
> @click="resetSearch"
<studip-icon shape="decline" :size="20"></studip-icon> >
</button> <studip-icon shape="decline" :size="20"></studip-icon>
<button </button>
type="submit" <button
class="button" type="submit"
id="search-btn" class="button"
:title="$gettext('Suche starten')" id="search-btn"
@click="loadSearch" :title="$gettext('Suche starten')"
> @click="loadSearch"
<studip-icon shape="search" :size="20"></studip-icon> >
</button> <studip-icon shape="search" :size="20"></studip-icon>
</span> </button>
</div> </span>
</form> </div>
</form>
<div class="filterpanel"> <div class="filterpanel">
<span class="sr-only">{{ $gettext('Kategorien-Filter') }}</span> <span class="sr-only">{{ $gettext('Kategorien-Filter') }}</span>
<button <button
v-for="category in blockCategories" v-for="category in blockCategories"
:key="category.type" :key="category.type"
class="button" class="button"
:class="{ 'button-active': category.type === currentFilterCategory }" :class="{ 'button-active': category.type === currentFilterCategory }"
:aria-pressed="category.type === currentFilterCategory ? 'true' : 'false'" :aria-pressed="category.type === currentFilterCategory ? 'true' : 'false'"
@click="selectCategory(category.type)" @click="selectCategory(category.type)"
> >
{{ category.title }} {{ category.title }}
</button> </button>
</div>
</div> </div>
<div class="cw-toolbar-tool-content" :style="toolContentStyle">
<div v-if="filteredBlockTypes.length > 0" class="cw-blockadder-item-list"> <div v-if="filteredBlockTypes.length > 0" class="cw-blockadder-item-list">
<draggable <draggable
v-if="filteredBlockTypes.length > 0" v-if="filteredBlockTypes.length > 0"
class="cw-blockadder-item-list" class="cw-blockadder-item-list"
tag="div" tag="div"
role="listbox" role="listbox"
v-model="filteredBlockTypes" v-model="filteredBlockTypes"
handle=".cw-sortable-handle-blockadder" handle=".cw-sortable-handle-blockadder"
:group="{ name: 'blocks', pull: 'clone', put: 'false' }" :group="{ name: 'blocks', pull: 'clone', put: 'false' }"
:clone="cloneBlock" :clone="cloneBlock"
:sort="false" :sort="false"
:emptyInsertThreshold="20" :emptyInsertThreshold="20"
@start="dragBlockStart($event)" @start="dragBlockStart($event)"
@end="dropNewBlock($event)" @end="dropNewBlock($event)"
ref="sortables" ref="sortables"
sectionId="0" sectionId="0"
> >
<courseware-blockadder-item <courseware-blockadder-item
v-for="(block, index) in filteredBlockTypes" v-for="(block, index) in filteredBlockTypes"
:key="index" :key="index"
:title="block.title" :title="block.title"
:type="block.type" :type="block.type"
:data-blocktype="block.type" :data-blocktype="block.type"
:description="block.description" :description="block.description"
@blockAdded="$emit('blockAdded')" @blockAdded="$emit('blockAdded')"
/> />
</draggable> </draggable>
</div>
<courseware-companion-box
v-else
:msgCompanion="$gettext('Es wurden keine passenden Blöcke gefunden.')"
mood="pointing"
/>
</div> </div>
<courseware-companion-box
v-else
:msgCompanion="$gettext('Es wurden keine passenden Blöcke gefunden.')"
mood="pointing"
/>
</div> </div>
</template> </template>
...@@ -99,6 +102,12 @@ export default { ...@@ -99,6 +102,12 @@ export default {
CoursewareCompanionBox, CoursewareCompanionBox,
draggable, draggable,
}, },
props: {
toolbarContentHeight: {
type: Number,
required: true,
},
},
data() { data() {
return { return {
searchInput: '', searchInput: '',
...@@ -132,6 +141,13 @@ export default { ...@@ -132,6 +141,13 @@ export default {
{ title: this.$gettext('Biografie'), type: 'biography' }, { title: this.$gettext('Biografie'), type: 'biography' },
]; ];
}, },
toolContentStyle() {
const height = this.toolbarContentHeight - 115;
return {
height: height + 'px',
};
},
}, },
methods: { methods: {
...mapActions({ ...mapActions({
......
resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue
+ 12
− 2
View file @ b54b4970
<template> <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"> <courseware-collapsible-box :title="$gettext('Blöcke')" :open="clipboardBlocks.length > 0">
<template v-if="clipboardBlocks.length > 0"> <template v-if="clipboardBlocks.length > 0">
<div class="cw-element-inserter-wrapper"> <div class="cw-element-inserter-wrapper">
...@@ -101,7 +101,12 @@ export default { ...@@ -101,7 +101,12 @@ export default {
StudipDialog, StudipDialog,
draggable, draggable,
}, },
props: {
toolbarContentHeight: {
type: Number,
required: true,
},
},
data() { data() {
return { return {
showDeleteClipboardDialog: false, showDeleteClipboardDialog: false,
...@@ -143,6 +148,11 @@ export default { ...@@ -143,6 +148,11 @@ export default {
} }
return ''; return '';
}, },
toolContentStyle() {
return {
height: this.toolbarContentHeight + 'px',
};
},
}, },
methods: { methods: {
...mapActions({ ...mapActions({
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment