From cd8432b9d743c900819b157e08f3d6b88b45e934 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Wed, 6 Oct 2021 12:31:43 +0000
Subject: [PATCH] Biest #156

---
 .../assets/stylesheets/scss/courseware.scss   | 11 +++-------
 .../courseware/CoursewareBlockAdderArea.vue   | 20 +++++++++++++------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index b986a700d7a..fec810e5d04 100755
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -1451,9 +1451,6 @@ b l o c k a d d e r
 }
 
 .cw-block-adder-area {
-    @include background-icon(add, clickable);
-    background-repeat: no-repeat;
-    background-position: calc(50% - 5em) calc(50% - 1px);
     border: solid thin $content-color-40;
     padding: 1em 0;
     color: $base-color;
@@ -1465,13 +1462,11 @@ b l o c k a d d e r
     &.cw-block-adder-active {
         border: solid thin $base-color;
         background-color: $base-color;
-        @include background-icon(add, info-alt);
         color: $white;
     }
-    &.cw-block-adder-disabled {
-        @include background-icon(add, inactive);
-        color: $dark-gray-color-80;
-        cursor: default;
+
+    img {
+        vertical-align: text-bottom;
     }
 }
 .cw-block-helper-buttons {
diff --git a/resources/vue/components/courseware/CoursewareBlockAdderArea.vue b/resources/vue/components/courseware/CoursewareBlockAdderArea.vue
index 156048f8cd1..f3d770f7e51 100755
--- a/resources/vue/components/courseware/CoursewareBlockAdderArea.vue
+++ b/resources/vue/components/courseware/CoursewareBlockAdderArea.vue
@@ -1,15 +1,20 @@
 <template>
     <div
         class="cw-block-adder-area"
-        :class="{ 'cw-block-adder-active': adderActive, 'cw-block-adder-disabled': adderDisable }"
+        :class="{ 'cw-block-adder-active': adderActive }"
         @click="selectBlockAdder"
     >
-        <translate>Block hinzufügen</translate>
+        <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>
     </div>
 </template>
 
 <script>
+import StudipIcon from '../StudipIcon.vue';
 export default {
+  components: { StudipIcon },
     name: 'courseware-block-adder-area',
     props: {
         container: Object,
@@ -30,9 +35,6 @@ export default {
     },
     methods: {
         selectBlockAdder() {
-            if (this.adderDisable) {
-                return false;
-            }
             if (this.adderActive) {
                 this.adderActive = false;
                 this.$store.dispatch('coursewareBlockAdder', {});
@@ -47,7 +49,13 @@ export default {
         adderStorage(newValue, oldValue) {
             if (Object.keys(newValue).length === 0) {
                 this.adderActive = false;
-                this.$emit('updateContainerContent', oldValue)
+                this.$emit('updateContainerContent', oldValue);
+            } else {
+                if (newValue.container.id === this.container.id && newValue.section === this.section) {
+                    this.adderActive = true;
+                } else {
+                    this.adderActive = false;
+                }
             }
         },
     },
-- 
GitLab