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 @@
}
.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;
......
resources/assets/stylesheets/scss/courseware/toolbar.scss
+ 14
− 3
View file @ b54b4970
......@@ -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;
......
resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
+ 30
− 14
View file @ b54b4970
......@@ -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',
};
},
......
resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
+ 93
− 77
View file @ b54b4970
<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({
......
resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue
+ 12
− 2
View file @ b54b4970
<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({
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment