Icons haben falsche Größen und Positionen

Closes #5997

Merge request studip/studip!4589

13 files changed, 91 insertions, 57 deletions

diff --git a/resources/assets/stylesheets/mixins/studip.scss b/resources/assets/stylesheets/mixins/studip.scss
index 87b26a3..e0339e8 100644
--- a/resources/assets/stylesheets/mixins/studip.scss
+++ b/resources/assets/stylesheets/mixins/studip.scss
@@ -121,6 +121,7 @@
             display: inline-block;
             height: icon-size($size);
             width: icon-size($size);
+            min-width: icon-size($size);
             background-color: currentColor;
             mask: url("#{$svg}") no-repeat center / contain;
             vertical-align: $align;
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/audio.scss b/resources/assets/stylesheets/scss/courseware/blocks/audio.scss
index 5b7dd64..3974de9 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/audio.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/audio.scss
@@ -55,6 +55,7 @@
                 padding: 0 8px;
                 background-color: transparent;
                 border: none;
+                color: var(--color--highlight);
             }
         }
 
@@ -143,6 +144,12 @@
                         cursor: pointer;
                         border: none;
                         background: transparent;
+                        color: var(--color--highlight);
+
+                        &:disabled {
+                            color: var(--color--font-inactive);
+                            cursor: default;
+                        }
                     }
                 }
             }
@@ -170,8 +177,8 @@
                     display: block;
                     padding: 1em 0;
                     margin: 0;
-                    img {
-                        vertical-align: middle;
+                    .studip-icon {
+                        vertical-align: top;
                     }
                 }
             }
@@ -201,5 +208,6 @@
         width: 16px;
         padding: 0 8px;
         cursor: pointer;
+        color: var(--color--highlight);
     }
 }
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
index 8935c02..468462d 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
@@ -25,7 +25,7 @@
         font-weight: 700;
         line-height: 2em;
         font-size: 1.1em;
-        margin-right: 0.25em;
+        margin: 0 0.25em 0 0.5em;
 
         &.cw-default-block-invisible-info,
         &.cw-default-block-blocker-warning {
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss
index c0c532d..5312ac5 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss
@@ -92,6 +92,7 @@
         .card__face--back {
             background-color: var(--color--global-background);
             &::after {
+                color: var(--color--highlight);
                 position: absolute;
                 right: 25px;
                 bottom: 25px;
@@ -100,20 +101,25 @@
     }
 
     .cw-dialogcards-navbutton {
-        background-color: var(--color--highlight);
-        color: var(--color--highlight-contrast);
+        background-color: var(--color--highlight-contrast);
+        color: var(--color--highlight);
         width: 35px;
         height: 35px;
         border-radius: var(--border-radius-default);
-        border: none;
+        border: solid thin var(--color--highlight);
         display: block;
         z-index: 4;
         margin: auto 2px;
         padding: 0;
         cursor: pointer;
 
+        &:hover {
+            background-color: var(--color--highlight);
+            color: var(--color--highlight-contrast);
+        }
+
         &.cw-dialogcards-prev {
-            @include icon(before, arr_1left, $size: 24px, $align: middle, $padding: -2px);
+            @include icon(before, arr_1left, $size: 24px, $align: middle, $padding: 2px);
         }
 
         &.cw-dialogcards-next {
@@ -124,6 +130,7 @@
         &.cw-dialogcards-next-disabled {
             color: var(--color--button-inactive-background-contrast);
             background-color: var(--color--button-inactive-background);
+            border: none;
             cursor: not-allowed;
         }
     }
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/document.scss b/resources/assets/stylesheets/scss/courseware/blocks/document.scss
index ff6e916..abf3ebb 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/document.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/document.scss
@@ -22,6 +22,7 @@
             height: 100%;
             margin: 0 2px 0 0;
             padding: 4px;
+            color: var(--color--highlight);
 
             &.active {
                 background-color: var(--color--highlight);
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss b/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss
index 0781b87..3fa793a 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss
@@ -27,7 +27,7 @@
     cursor: pointer;
     position: absolute;
     background-color: fade-out($color--global-background, 0.6);
-    color: var(--color--font-primary);
+    color: var(--color--highlight);
     top: 50%;
     height: 36px;
     width: 36px;
diff --git a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
index 4860b9e..e605567 100644
--- a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
+++ b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
@@ -32,6 +32,7 @@
             font-weight: 700;
             line-height: 2em;
             font-size: 16px;
+            margin: 0 0.25em 0 0.5em;
 
             &.cw-default-container-blocker-warning {
                 font-weight: 400;
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
index 15ffaed..27e1aa0 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
@@ -4,8 +4,12 @@
     border: solid thin var(--color--content-box-border);
     margin-bottom: -1px;
 
+    a:hover {
+        text-decoration: none;
+    }
+
     .cw-collapsible-title {
-        @include icon(before, arr_1right, $align: middle, $padding: 4px);
+        @include icon(before, arr_1right, $align: top, $padding: 4px);
         background-color: var(--color--content-box-header);
         padding: 0.5em;
         margin: 0;
@@ -14,7 +18,7 @@
         cursor: pointer;
 
         &.cw-collapsible-open {
-            @include icon(before, arr_1down, $align: middle, $padding: 4px);
+            @include icon(before, arr_1down, $align: top, $padding: 4px);
 
             .cw-container-list-sort-mode {
                 margin-top: 8px;
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
index cff1e4e..dc12922 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
@@ -116,7 +116,7 @@
         .cw-tree-item-edit-button {
             opacity: 0;
             padding: 0 4px;
-            vertical-align: text-bottom;
+            vertical-align: middle;
             border: none;
             background-color: transparent;
             cursor: pointer;
@@ -127,6 +127,13 @@
             }
         }
 
+        .cw-tree-item-info {
+           display:inline-flex;
+           position: absolute;
+           right: 8px;
+           gap: 2px; 
+        }
+
         &:hover {
             background-color: var(--color--sidebar-hover);
             color: var(--color--content-link-hover);
@@ -156,7 +163,6 @@
                 width: var(--icon-size-inline);
                 height: var(--icon-size-inline);
                 vertical-align: top;
-                float: right;
                 @include icon(after, #{$icon}, $size: $icon-size-inline);
             }
 
@@ -172,8 +178,6 @@
 
     .cw-tree-item-sequential {
         display: inline-block;
-        position: absolute;
-        right: 8px;
 
         &.cw-tree-item-sequential-complete {
             width: var(--icon-size-inline);
diff --git a/resources/assets/stylesheets/scss/dialog.scss b/resources/assets/stylesheets/scss/dialog.scss
index efac89a..13df760 100644
--- a/resources/assets/stylesheets/scss/dialog.scss
+++ b/resources/assets/stylesheets/scss/dialog.scss
@@ -163,7 +163,7 @@
         box-sizing: border-box;
         padding: 15px;
         max-height: 60vh;
-        @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 8px);
+        @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 16px);
         &::before {
             color: var(--color--attention);
         }
@@ -393,7 +393,7 @@ v u e  d i a l o g
             }
         }
         .studip-dialog-content {
-            @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 8px);
+            @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 16px);
             &::before {
                 color: var(--color--warning);
             }
@@ -408,7 +408,7 @@ v u e  d i a l o g
             }
         }
         .studip-dialog-content {
-            @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 8px);
+            @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 16px);
             &::before {
                 color: var(--color--attention);
             }
diff --git a/resources/vue/components/courseware/blocks/CoursewareAudioBlock.vue b/resources/vue/components/courseware/blocks/CoursewareAudioBlock.vue
index b516806..fc7b013 100644
--- a/resources/vue/components/courseware/blocks/CoursewareAudioBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareAudioBlock.vue
@@ -63,10 +63,9 @@
                                     <hr v-else />
                                 </div>
                                 <div class="cw-audio-buttons">
-                                    <button :title="$gettext('Zurück')" :disabled="!hasPlaylist" @click="prevAudio">
+                                    <button :title="$gettext('Zurück')" :disabled="!hasPlaylist || !hasPrevious" @click="prevAudio">
                                         <studip-icon
                                             shape="arr_eol-left"
-                                            :role="hasPlaylist ? 'clickable' : 'inactive'"
                                             :size="24"
                                         />
                                     </button>
@@ -78,17 +77,15 @@
                                     >
                                         <studip-icon
                                             shape="play"
-                                            :role="emptyAudio ? 'inactive' : 'clickable'"
                                             :size="48"
                                         />
                                     </button>
                                     <button v-else :title="$gettext('Pause')" @click="pauseAudio">
                                         <studip-icon shape="pause" :size="48" />
                                     </button>
-                                    <button :title="$gettext('Weiter')" :disabled="!hasPlaylist" @click="nextAudio">
+                                    <button :title="$gettext('Weiter')" :disabled="!hasPlaylist || !hasNext" @click="nextAudio">
                                         <studip-icon
                                             shape="arr_eol-right"
-                                            :role="hasPlaylist ? 'clickable' : 'inactive'"
                                             :size="24"
                                         />
                                     </button>
@@ -564,7 +561,13 @@ export default {
 
         isOpusSupported() {
             return MediaRecorder.isTypeSupported('audio/webm;codecs=opus');
-},
+        },
+        hasNext() {
+            return this.currentPlaylistItem < this.files.length - 1
+        },
+        hasPrevious() {
+            return this.currentPlaylistItem !== 0;
+        },
     },
     async mounted() {
         this.initCurrentData();
@@ -754,10 +757,8 @@ export default {
         },
         prevAudio() {
             this.stopAudio();
-            if (this.currentPlaylistItem !== 0) {
+            if (this.hasPrevious) {
                 this.currentPlaylistItem = this.currentPlaylistItem - 1;
-            } else {
-                this.currentPlaylistItem = this.files.length - 1;
             }
             this.$nextTick(() => {
                 this.playAudio();
@@ -765,7 +766,7 @@ export default {
         },
         nextAudio() {
             this.stopAudio();
-            if (this.currentPlaylistItem < this.files.length - 1) {
+            if (this.hasNext) {
                 this.currentPlaylistItem = this.currentPlaylistItem + 1;
                 this.$nextTick(() => {
                     this.playAudio();
diff --git a/resources/vue/components/courseware/structural-element/CoursewareTreeItem.vue b/resources/vue/components/courseware/structural-element/CoursewareTreeItem.vue
index 8a27a2f..9ef0b13 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareTreeItem.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareTreeItem.vue
@@ -28,37 +28,40 @@
                 }"
             >
                 {{ element.attributes?.title || '–' }}
+                <span v-if="task">| {{ solverName ?? $gettext("anonym") }}</span>
                 <button v-if="canEdit" class="cw-tree-item-edit-button" @click.prevent="editingItem = true">
                     <studip-icon shape="edit" />
                 </button>
-
-                <span v-if="task">| {{ solverName ?? $gettext("anonym") }}</span>
-                <span
-                    v-if="hasReleaseOrWithdrawDate"
-                    class="cw-tree-item-flag-date"
-                    :title="visibleStartEndDate"
-                ></span>
-                <span
-                    v-if="hasWriteApproval"
-                    class="cw-tree-item-flag-write"
-                    :title="canWriteFlagTitle"
-                ></span>
-                <span v-if="hasNoReadApproval" class="cw-tree-item-flag-cant-read" :title="cantReadFlagTitle"></span>
-                <template v-if="!(userIsTeacher || userIsReviewer)  && inCourse">
-                    <span
-                        v-if="complete"
-                        class="cw-tree-item-sequential cw-tree-item-sequential-complete"
-                        :title="$gettext('Diese Seite wurde von Ihnen vollständig bearbeitet')"
-                    >
-                    </span>
-                    <span
-                        v-else
-                        class="cw-tree-item-sequential cw-tree-item-sequential-percentage"
-                        :title="$gettext('Fortschritt: %{progress}%', { progress: itemProgress })"
-                    >
-                        {{ itemProgress }} %
-                    </span>
-                </template>
+                <div class="cw-tree-item-info">
+                    <template v-if="permissionScope === 'structural_element'">
+                        <span
+                            v-if="hasReleaseOrWithdrawDate"
+                            class="cw-tree-item-flag-date"
+                            :title="visibleStartEndDate"
+                        ></span>
+                        <span
+                            v-if="hasWriteApproval"
+                            class="cw-tree-item-flag-write"
+                            :title="canWriteFlagTitle"
+                        ></span>
+                        <span v-if="hasNoReadApproval" class="cw-tree-item-flag-cant-read" :title="cantReadFlagTitle"></span>
+                    </template>
+                    <template v-if="!(userIsTeacher || userIsReviewer)  && inCourse">
+                        <span
+                            v-if="complete"
+                            class="cw-tree-item-sequential cw-tree-item-sequential-complete"
+                            :title="$gettext('Diese Seite wurde von Ihnen vollständig bearbeitet')"
+                        >
+                        </span>
+                        <span
+                            v-else
+                            class="cw-tree-item-sequential cw-tree-item-sequential-percentage"
+                            :title="$gettext('Fortschritt: %{progress}%', { progress: itemProgress })"
+                        >
+                            {{ itemProgress }} %
+                        </span>
+                    </template>
+                </div>
             </router-link>
         </div>
         <ol
@@ -187,6 +190,7 @@ export default {
             showRootElement: 'showRootElement',
             relatedCourseMemberships: 'course-memberships/related',
             relatedCourseStatusGroups: 'status-groups/related',
+            currentUnit: 'currentUnit',
         }),
         autorMembersCount() {
             // course-memberships are loaded in parent!
@@ -237,6 +241,9 @@ export default {
         isCurrent() {
             return this.element.id === this.currentElement?.id;
         },
+        permissionScope() {
+            return this.currentUnit?.attributes['permission-scope'];
+        },
         hasReleaseOrWithdrawDate() {
             return this.element.attributes?.visible === 'period';
         },
diff --git a/resources/vue/components/courseware/unit/CoursewareUnitItem.vue b/resources/vue/components/courseware/unit/CoursewareUnitItem.vue
index 0f368f1..761eb76 100644
--- a/resources/vue/components/courseware/unit/CoursewareUnitItem.vue
+++ b/resources/vue/components/courseware/unit/CoursewareUnitItem.vue
@@ -318,7 +318,7 @@ export default {
             if (!this.hasPermissionSettings) {
                 return false;
             }
-            let info = { icon: '', text: '', title: '' };
+            let info = { icon: 'courseware', text: '', title: '' };
             if (!this.userIsTeacher) {
                 if (this.unit.attributes.visible === 'period') {
                     info.icon = 'date';
@@ -423,7 +423,7 @@ export default {
                 return false;
             }
 
-            let info = { icon: '', text: '', title: '' };
+            let info = { icon: 'courseware', text: '', title: '' };
 
             if (!this.userIsTeacher) {
                 if (this.unit.attributes['can-edit-content']) {