Courseware - Bearbeiten von Block Favoriten vereinfachen

Closes #2022

Merge request studip/studip!1468

5 files changed, 118 insertions, 62 deletions

diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 827c308..ce2a209 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -78,15 +78,18 @@ $blockadder-items: (
     timeline: date-cycle,
     typewriter: block-typewriter,
     video: video2,
-    accordion: block-accordion,
-    list: view-list,
-    tabs: block-tabs,
     biography-achievements: medal,
     biography-career: ranking,
     biography-personal-information: own-license,
     biography-goals: radar
 );
 
+$containeradder-items: (
+    accordion: block-accordion,
+    list: view-list,
+    tabs: block-tabs,
+);
+
 $achievement-types: (
     certificate: file-text,
     accreditation: vcard,
@@ -1864,30 +1867,60 @@ b l o c k a d d e r
     }
 }
 
-.cw-blockadder-item {
-    margin-bottom: 4px;
-    padding: 1em 1em 1em 6em;
-    @include background-icon(unit-test, clickable, 48);
-    background-position: 12px center;
-    background-repeat: no-repeat;
-    border: solid thin $content-color-40;
-    cursor: pointer;
+.cw-element-adder-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.cw-blockadder-item-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-auto-rows: auto;
+    grid-gap: 4px;
 
-    &:hover {
-        border-color: $base-color;
-    }
+    .cw-blockadder-item-wrapper {
+        display: flex;
+        border: solid thin var(--content-color-40);
+        max-width: 254px;
 
-    @each $item, $icon in $blockadder-items {
-        &.cw-blockadder-item-#{$item} {
-            @include background-icon($icon, clickable, 48);
+        &:hover {
+            border-color: var(--base-color);
         }
-    }
 
-    .cw-blockadder-item-title {
-        font-weight: 600;
+        .cw-blockadder-item {
+            padding: 64px 10px 4px 10px;
+            @include background-icon(unit-test, clickable, 48);
+            background-position: 10px 10px;
+            background-repeat: no-repeat;
+            cursor: pointer;
+
+            @each $item, $icon in $blockadder-items {
+                &.cw-blockadder-item-#{$item} {
+                    @include background-icon($icon, clickable, 48);
+                }
+            }
+        
+            .cw-blockadder-item-title {
+                display: inline-block;
+                font-weight: 600;
+                margin-bottom: 2px;
+            }
+            .cw-blockadder-item-description {
+                display: inline-block;
+                margin: 0 0 4px;
+            }
+        }
+        .cw-blockadder-item-fav {
+            height: 32px;
+            padding: 8px;
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+        }
     }
 }
 
+
 .cw-block-adder-area {
     background-color: $white;
     border: solid thin $content-color-40;
@@ -1935,38 +1968,28 @@ b l o c k a d d e r
     margin-top: 5px;
 }
 
-.cw-element-adder-favs-wrapper {
-    display: flex;
-    .cw-element-adder-all-blocks {
-        &.fav-edit-active {
-            .cw-blockadder-item {
-                height: 5em;
-            }
-        }
+.cw-containeradder-item {
+    margin-bottom: 4px;
+    padding: 1em 1em 1em 6em;
+    @include background-icon(unit-test, clickable, 48);
+    background-position: 12px center;
+    background-repeat: no-repeat;
+    border: solid thin $content-color-40;
+    cursor: pointer;
 
+    &:hover {
+        border-color: $base-color;
     }
-    .cw-element-adder-favs {
-
-        .cw-block-fav-item {
-            @include background-icon(star-empty, clickable, 48);
-            background-position: center;
-            background-repeat: no-repeat;
-            height: 5em;
-            width: 5em;
-            padding: 1em;
-            margin: 0 0 4px 4px;
-            border: solid thin $content-color-40;
-            cursor: pointer;
 
-            &:hover {
-                border-color: $base-color;
-            }
-
-            &.cw-block-fav-item-active {
-                @include background-icon(star, clickable, 48);
-            }
+    @each $item, $icon in $containeradder-items {
+        &.cw-containeradder-item-#{$item} {
+            @include background-icon($icon, clickable, 48);
         }
     }
+
+    .cw-containeradder-item-title {
+        font-weight: 600;
+    }
 }
 
 
diff --git a/resources/vue/components/courseware/CoursewareBlockHelper.vue b/resources/vue/components/courseware/CoursewareBlockHelper.vue
index 2d7acbc..1a709f8 100644
--- a/resources/vue/components/courseware/CoursewareBlockHelper.vue
+++ b/resources/vue/components/courseware/CoursewareBlockHelper.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="block-helper">
         <courseware-companion-box :msgCompanion="currentQuestion.text" :mood="companionMood"/>
-        <div v-if="showBlocks" class="cw-block-helper-results">
+        <div v-if="showBlocks" class="cw-block-helper-results cw-element-adder-wrapper ">
             <courseware-blockadder-item
                 v-for="(block, index) in selectedBlockTypes"
                 :key="index"
diff --git a/resources/vue/components/courseware/CoursewareBlockadderItem.vue b/resources/vue/components/courseware/CoursewareBlockadderItem.vue
index 93c31f4..5e4b850 100644
--- a/resources/vue/components/courseware/CoursewareBlockadderItem.vue
+++ b/resources/vue/components/courseware/CoursewareBlockadderItem.vue
@@ -1,14 +1,22 @@
 <template>
-    <a href="#" @click.prevent="addBlock">
-        <div class="cw-blockadder-item" :class="['cw-blockadder-item-' + type]">
+    <div class="cw-blockadder-item-wrapper">
+        <a href="#" @click.prevent="addBlock" class="cw-blockadder-item" :class="['cw-blockadder-item-' + type]">
             <header class="cw-blockadder-item-title">
                 {{ title }}
             </header>
             <p class="cw-blockadder-item-description">
                 {{ description }}
             </p>
-        </div>
-    </a>
+        </a>
+        <button
+            class="cw-blockadder-item-fav"
+            :title="favButtonTitle"
+            @click="toggleFavItem()"
+        >
+            <studip-icon :shape="blockTypeIsFav ? 'star' : 'star-empty'" :size="20" />
+        </button>
+    </div>
+    
 </template>
 
 <script>
@@ -32,7 +40,24 @@ export default {
             blockAdder: 'blockAdder',
             blockById: 'courseware-blocks/byId',
             lastCreatedBlock: 'courseware-blocks/lastCreated',
+            favoriteBlockTypes: 'favoriteBlockTypes',
         }),
+        blockTypeIsFav() {
+            return this.favoriteBlockTypes.some((type) => type.type === this.type);
+        },
+        favButtonTitle() {
+            if (this.blockTypeIsFav) {
+                return this.$gettextInterpolate(
+                    this.$gettext('%{ blockName } Block aus den Favoriten entfernen'),
+                    { blockName: this.title }
+                );
+            }
+
+            return this.$gettextInterpolate(
+                    this.$gettext('%{ blockName } Block zu Favoriten hinzufügen'),
+                    { blockName: this.title }
+                );   
+        }
     },
     methods: {
         ...mapActions({
@@ -44,6 +69,8 @@ export default {
             unlockObject: 'unlockObject',
             loadBlock: 'courseware-blocks/loadById',
             updateContainer: 'updateContainer',
+            removeFavoriteBlockType: 'removeFavoriteBlockType',
+            addFavoriteBlockType: 'addFavoriteBlockType',
         }),
         async addBlock() {
             if (Object.keys(this.blockAdder).length !== 0) {
@@ -76,6 +103,13 @@ export default {
                 });
             }
         },
+        toggleFavItem() {
+            if (this.blockTypeIsFav) {
+                this.removeFavoriteBlockType(this.type);
+            } else {
+                this.addFavoriteBlockType(this.type);
+            }
+        },
     },
 };
 </script>
diff --git a/resources/vue/components/courseware/CoursewareContainerAdderItem.vue b/resources/vue/components/courseware/CoursewareContainerAdderItem.vue
index 5cc82cd..78cc4ed 100644
--- a/resources/vue/components/courseware/CoursewareContainerAdderItem.vue
+++ b/resources/vue/components/courseware/CoursewareContainerAdderItem.vue
@@ -1,10 +1,10 @@
 <template>
     <a href="#" @click.prevent="addContainer">
-        <div class="cw-blockadder-item" :class="['cw-blockadder-item-' + type]">
-            <header class="cw-blockadder-item-title">
+        <div class="cw-containeradder-item" :class="['cw-containeradder-item-' + type]">
+            <header class="cw-containeradder-item-title">
                 {{ title }}
             </header>
-            <p class="cw-blockadder-item-description">
+            <p class="cw-containeradder-item-description">
                 {{ description }}
             </p>
         </div>
diff --git a/resources/vue/components/courseware/CoursewareToolsBlockadder.vue b/resources/vue/components/courseware/CoursewareToolsBlockadder.vue
index 5f6ffd4..efdeb4e 100644
--- a/resources/vue/components/courseware/CoursewareToolsBlockadder.vue
+++ b/resources/vue/components/courseware/CoursewareToolsBlockadder.vue
@@ -48,7 +48,7 @@
                     </button>
                 </div>
 
-                <div v-if="filteredBlockTypes.length > 0">
+                <div v-if="filteredBlockTypes.length > 0" class="cw-blockadder-item-list">
                     <courseware-blockadder-item
                         v-for="(block, index) in filteredBlockTypes"
                         :key="index"
@@ -58,12 +58,11 @@
                         @blockAdded="$emit('blockAdded')"
                     />
                 </div>
-                <div v-else>
-                    <courseware-companion-box
-                        :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"
+                />
             </courseware-tab>
             <courseware-tab :name="$gettext('Abschnitte')" :selected="showContaineradder" :index="1" :style="{ maxHeight: maxHeight + 'px' }">
                 <courseware-collapsible-box