Courseware - Bearbeiten von Block Favoriten vereinfachen

Closes #2022

Merge request studip/studip!1468

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,19 +1867,33 @@ b l o c k a d d e r
     }
 }
 
+.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;
+
+    .cw-blockadder-item-wrapper {
+        display: flex;
+        border: solid thin var(--content-color-40);
+        max-width: 254px;
+
+        &:hover {
+            border-color: var(--base-color);
+        }
+
         .cw-blockadder-item {
-    margin-bottom: 4px;
-    padding: 1em 1em 1em 6em;
+            padding: 64px 10px 4px 10px;
             @include background-icon(unit-test, clickable, 48);
-    background-position: 12px center;
+            background-position: 10px 10px;
             background-repeat: no-repeat;
-    border: solid thin $content-color-40;
             cursor: pointer;
 
-    &:hover {
-        border-color: $base-color;
-    }
-
             @each $item, $icon in $blockadder-items {
                 &.cw-blockadder-item-#{$item} {
                     @include background-icon($icon, clickable, 48);
@@ -1884,9 +1901,25 @@ b l o c k a d d e r
             }
         
             .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;
@@ -1935,26 +1968,12 @@ 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-element-adder-favs {
-
-        .cw-block-fav-item {
-            @include background-icon(star-empty, clickable, 48);
-            background-position: center;
+.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;
-            height: 5em;
-            width: 5em;
-            padding: 1em;
-            margin: 0 0 4px 4px;
     border: solid thin $content-color-40;
     cursor: pointer;
 
@@ -1962,10 +1981,14 @@ b l o c k a d d e r
         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;
     }
 }
 

resources/vue/components/courseware/CoursewareBlockHelper.vue

 <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"

resources/vue/components/courseware/CoursewareBlockadderItem.vue

 <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>
+        <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>

resources/vue/components/courseware/CoursewareContainerAdderItem.vue

 <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>

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
+                    v-else
                     :msgCompanion="$gettext('Es wurden keine passenden Blöcke gefunden.')"
                     mood="pointing"
                 />
-                </div>
             </courseware-tab>
             <courseware-tab :name="$gettext('Abschnitte')" :selected="showContaineradder" :index="1" :style="{ maxHeight: maxHeight + 'px' }">
                 <courseware-collapsible-box