diff options
4 files changed, 29 insertions, 1 deletions
diff --git a/lib/models/Courseware/BlockTypes/Gallery.json b/lib/models/Courseware/BlockTypes/Gallery.json index f301000..78e2747 100644 --- a/lib/models/Courseware/BlockTypes/Gallery.json +++ b/lib/models/Courseware/BlockTypes/Gallery.json @@ -19,6 +19,9 @@ }, "show_filenames": { "type": "string" + }, + "mouseover_filenames": { + "type": "string" } }, "required": [ diff --git a/lib/models/Courseware/BlockTypes/Gallery.php b/lib/models/Courseware/BlockTypes/Gallery.php index 9ebc9df..2ad19b9 100644 --- a/lib/models/Courseware/BlockTypes/Gallery.php +++ b/lib/models/Courseware/BlockTypes/Gallery.php @@ -94,6 +94,7 @@ class Gallery extends BlockType 'nav' => 'true', 'height' => '610', 'show_filenames' => 'true', + 'mouseover_filenames' => 'false', ]; } diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index 79476ba..536c5c8 100644 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -4070,6 +4070,14 @@ g a l l e r y b l o c k background-color: fade-out($black, 0.6); padding: 0.5em; } + + &.show-on-hover { + display: none; + } +} + +.cw-block-gallery-content:hover .show-on-hover { + display: block; } .cw-block-gallery-number-text { diff --git a/resources/vue/components/courseware/CoursewareGalleryBlock.vue b/resources/vue/components/courseware/CoursewareGalleryBlock.vue index 8b33147..f6d41ab 100644 --- a/resources/vue/components/courseware/CoursewareGalleryBlock.vue +++ b/resources/vue/components/courseware/CoursewareGalleryBlock.vue @@ -27,7 +27,8 @@ } " /> - <div v-if="currentShowFileNames === 'true'" class="cw-block-gallery-file-name"> + <div v-if="currentShowFileNames === 'true' && image?.attributes?.name" class="cw-block-gallery-file-name" + :class="{'show-on-hover': currentMouseoverFileNames === 'true'}"> <span>{{ image.attributes.name }}</span> </div> </div> @@ -72,6 +73,15 @@ <option value="false"><translate>Nein</translate></option> </select> </label> + <label v-if="currentShowFileNames === 'true'"> + {{ $gettext('Dateiname erscheint bei Mouseover') }} + <studip-tooltip-icon + :text="$gettext('Der Dateiname wird angezeigt, wenn Sie den Mauszeiger über den Inhalt bewegen.')"/> + <select v-model="currentMouseoverFileNames"> + <option value="true"><translate>Ja</translate></option> + <option value="false"><translate>Nein</translate></option> + </select> + </label> </form> </template> <template #info> @@ -106,6 +116,7 @@ export default { currentNav: '', currentHeight: '', currentShowFileNames: '', + currentMouseoverFileNames: '', currentAutoplayTimer: '', editModeFiles: [], slideIndex: 0, @@ -136,6 +147,9 @@ export default { showFileNames() { return this.block?.attributes?.payload?.show_filenames; }, + mouseoverFileNames() { + return this.block?.attributes?.payload?.mouseover_filenames ?? 'false'; + }, files() { if (!this.editMode) { return this.block?.attributes?.payload?.files; @@ -158,6 +172,7 @@ export default { this.currentNav = this.nav; this.currentHeight = this.height; this.currentShowFileNames = this.showFileNames; + this.currentMouseoverFileNames = this.mouseoverFileNames; }, startGallery() { this.slideIndex = 0; @@ -218,6 +233,7 @@ export default { attributes.payload.nav = this.currentNav; attributes.payload.height = this.currentHeight; attributes.payload.show_filenames = this.currentShowFileNames; + attributes.payload.mouseover_filenames = this.currentMouseoverFileNames; this.updateBlock({ attributes: attributes, |