From 7bbf7a9ffa03c201fc4e706289ee131b69bfb577 Mon Sep 17 00:00:00 2001
From: Farbod Zamani <zamani@elan-ev.de>
Date: Fri, 16 Dec 2022 09:32:37 +0000
Subject: [PATCH] CW: GalleryBlock mouseover filename new feature
Closes #1742
Merge request studip/studip!1165
---
lib/models/Courseware/BlockTypes/Gallery.json | 3 +++
lib/models/Courseware/BlockTypes/Gallery.php | 1 +
.../assets/stylesheets/scss/courseware.scss | 8 ++++++++
.../courseware/CoursewareGalleryBlock.vue | 18 +++++++++++++++++-
4 files changed, 29 insertions(+), 1 deletion(-)
diff --git a/lib/models/Courseware/BlockTypes/Gallery.json b/lib/models/Courseware/BlockTypes/Gallery.json
index f301000f7ee..78e27476365 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 9ebc9df064a..2ad19b970c7 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 79476bae70e..536c5c85108 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 8b331473674..f6d41ab74e0 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,
--
GitLab