fix #3589

Closes #3589

Merge request studip/studip!2479

resources/assets/stylesheets/scss/courseware/blockadder.scss

-.cw-tools-element-adder-tabs {
-    .cw-tabs-nav {
-        margin-top: 4px;
-        border: none;
-        border-bottom: solid thin var(--content-color-40);
-
-        button {
-            max-width: unset;
-            padding: 1em 1.5em 4px 1.5em;
-            margin: 0px 2em;
-        }
-    }
-    .cw-tabs-content {
-        border: none;
-        overflow-x: hidden;
-        overflow-y: auto;
-        scrollbar-width: thin;
-        scrollbar-color: var(--base-color) var(--dark-gray-color-5);
-
-        .input-group.files-search {
-            &.search {
-                border: thin solid var(--dark-gray-color-30);
-                margin-bottom: 0px;
-                input {
-                    border: none;
-                }
-            }
-
-            .input-group-append {
-                .button {
-                    border: none;
-                    border-left: thin solid var(--dark-gray-color-30);
-                    &.active {
-                        background-color: var(--base-color);
-                    }
-                }
-                .reset-search {
-                    border: none;
-                    background-color: var(--white);
-                }
-            }
-
-            .active-filter {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                border: solid thin var(--black);
-                background-color: var(--content-color-10);
-                margin: 3px;
-                padding: 2px 3px;
-
-                .removefilter {
-                    border: none;
-                    background-color: transparent;
-                }
-            }
-        }
-
-        .cw-block-search {
-            width: inherit;
-        }
-
-        .filterpanel {
-            margin-bottom: 5px;
-            padding: 2px;
-            border: thin solid var(--dark-gray-color-30);
-            border-top: none;
-            background-color: var(--white);
-
-            .button {
-                min-width: inherit;
-                margin: 4px 2px;
-
-                &.button-active {
-                    background-color: var(--base-color);
-                    color: var(--white);
-                }
-            }
-        }
-    }
-
-    .cw-collapsible {
-        .cw-collapsible-content {
-            display: none;
-            &.cw-collapsible-content-open {
-                display: block;
-            }
-        }
-    }
-}
-
 .cw-blockadder-item-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
@@ -144,56 +53,9 @@
     }
 }
 
-.cw-block-adder-area {
-    background-color: var(--white);
-    border: solid thin var(--content-color-40);
-    padding: 1em 0;
-    color: var(--base-color);
-    text-align: center;
-    width: 100%;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:hover {
-        border-color: var(--base-color);
-    }
-
-    &.cw-block-adder-active {
-        border: solid thin var(--base-color);
-        background-color: var(--base-color);
-        color: var(--white);
-    }
-
-    img {
-        vertical-align: text-bottom;
-    }
-}
-.cw-block-helper-buttons {
-    display: inline-block;
-    width: 100%;
-
-    .cw-block-helper-reset {
-        float: right;
-    }
-
-    .button.cw-block-helper-reset::before {
-        content: '';
-        @include background-icon(refresh);
-        background-repeat: no-repeat;
-        float: left;
-        height: 16px;
-        width: 16px;
-        margin: 1px 5px 0 -8px;
-    }
-}
-
-.cw-block-helper-results {
-    margin-top: 5px;
-}
-
 .cw-containeradder-item-wrapper {
     border: solid thin var(--content-color-40);
-    margin-bottom: 5px;
+    margin-bottom: 4px;
     .cw-sortable-handle {
         opacity: 0;
     }

resources/assets/stylesheets/scss/courseware/containers/accordion.scss

+@import '../layouts/collapsible.scss';
 .cw-container-accordion {
 
     .cw-block-wrapper-active {
@@ -20,4 +21,4 @@
             padding: 8px 0 0 0;
         }
     }
-}
+}
\ No newline at end of file

resources/vue/components/courseware/blocks/CoursewareEmbedBlock.vue

@@ -247,6 +247,6 @@ export default {
     },
 };
 </script>
-<style scoped lang="scss">
+<style lang="scss">
 @import '../../../../assets/stylesheets/scss/courseware/blocks/embed.scss';
 </style>

resources/vue/components/courseware/blocks/CoursewareTableOfContentsBlock.vue

@@ -28,7 +28,11 @@
                                     : child.attributes.title
                                 ">
                                 <courseware-tile tag="div" :color="child.attributes.payload.color"
-                                    :title="child.attributes.title" :imageUrl="getChildImageUrl(child)">
+                                    :title="child.attributes.title" :imageUrl="getChildImageUrl(child)"
+                                >
+                                    <template v-if="child.attributes.purpose === 'task'" #image-overlay>
+                                        {{ child.solverName }}
+                                    </template>
                                     <template #description>
                                         {{ child.attributes.payload.description }}
                                     </template>
@@ -121,7 +125,7 @@ export default {
             let children = [];
             this.childElements.forEach((element) => {
                 if (element.relationships.task.data) {
-                    let solverName = this.getSolverName(element.relationships.task.data.id);
+                    const solverName = this.getSolverName(element.relationships.task.data.id);
                     if (solverName) {
                         element.solverName = solverName;
                         children.push(element);

resources/vue/components/courseware/containers/CoursewareBlockAdderArea.vue

-<template>
-    <button
-        class="cw-block-adder-area"
-        :class="{ 'cw-block-adder-active': adderActive }"
-        :aria-pressed="adderActive"
-        @click="selectBlockAdder"
-    >
-        <studip-icon v-show="!adderActive" shape="add" />
-        <studip-icon v-show="adderActive" shape="add" role="info_alt"/>
-        <span v-show="!adderActive"><translate>Block zu diesem Abschnitt hinzufügen</translate></span>
-        <span v-show="adderActive"><translate>Abschnitt aktiv - Blöcke werden hier eingefügt</translate></span>
-    </button>
-</template>
-
-<script>
-import StudipIcon from '../../StudipIcon.vue';
-import { mapActions, mapGetters } from 'vuex';
-
-export default {
-  components: { StudipIcon },
-    name: 'courseware-block-adder-area',
-    props: {
-        container: Object,
-        section: Number,
-    },
-    data() {
-        return {
-            adderActive: false,
-        };
-    },
-    computed: {
-        ...mapGetters({
-            adderStorage: 'blockAdder',
-        }),
-        adderDisable() {
-            return Object.keys(this.adderStorage).length !== 0 && !this.adderActive;
-        },
-    },
-    methods: {
-        ...mapActions({
-            coursewareBlockAdder: 'coursewareBlockAdder',
-        }),
-        selectBlockAdder() {
-            if (this.adderActive) {
-                this.adderActive = false;
-                this.coursewareBlockAdder({});
-            } else {
-                this.adderActive = true;
-                this.coursewareBlockAdder({ container: this.container, section: this.section });
-            }
-        },
-    },
-    watch: {
-        adderStorage(newValue, oldValue) {
-            if (Object.keys(newValue).length === 0) {
-                this.adderActive = false;
-                this.$emit('updateContainerContent', oldValue);
-            } else {
-                if (newValue.container && newValue.container.id === this.container.id && newValue.section === this.section) {
-                    this.adderActive = true;
-                } else {
-                    this.adderActive = false;
-                }
-            }
-        },
-    },
-};
-</script>

resources/vue/components/courseware/containers/container-components.js

 import CoursewareDefaultBlock from '../blocks/CoursewareDefaultBlock.vue';
 import CoursewareDefaultContainer from './CoursewareDefaultContainer.vue';
-import CoursewareBlockAdderArea from './CoursewareBlockAdderArea.vue';
 // blocks
 import CoursewareAudioBlock from '../blocks/CoursewareAudioBlock.vue';
 import CoursewareBeforeAfterBlock from '../blocks/CoursewareBeforeAfterBlock.vue';
@@ -39,7 +38,6 @@ import StudipProgressIndicator from '../../StudipProgressIndicator.vue';
 const ContainerComponents = {
     CoursewareDefaultBlock,
     CoursewareDefaultContainer,
-    CoursewareBlockAdderArea,
     // blocks
     CoursewareAudioBlock,
     CoursewareBeforeAfterBlock,

resources/vue/components/courseware/plugin-components.js

-import CoursewareBlockAdderArea from './containers/CoursewareBlockAdderArea.vue';
 import CoursewareCollapsibleBox from './layouts/CoursewareCollapsibleBox.vue';
 import CoursewareCompanionBox from './layouts/CoursewareCompanionBox.vue';
 import CoursewareDefaultBlock from './blocks/CoursewareDefaultBlock.vue';
@@ -8,7 +7,6 @@ import CoursewareTabs from './layouts/CoursewareTabs.vue';
 import CoursewareTab from './layouts/CoursewareTab.vue';
 
 const CoursewarePluginComponents = {
-    CoursewareBlockAdderArea,
     CoursewareCollapsibleBox,
     CoursewareCompanionBox,
     CoursewareDefaultBlock,
@@ -18,4 +16,4 @@ const CoursewarePluginComponents = {
     CoursewareTab,
 }
 
-export default CoursewarePluginComponents;
+export default CoursewarePluginComponents;
\ No newline at end of file