Improve the project folder use view and add configuration below, add …

…configuration of displaying media view instead of preview in preview tooltip
markusweigelt · Dec 7, 2023 · f3f86dd · f3f86dd
1 parent 3dccdb1
commit f3f86dd
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 102 deletions.
diff --git a/Kitodo-DataManagement/src/main/java/org/kitodo/data/database/beans/Project.java b/Kitodo-DataManagement/src/main/java/org/kitodo/data/database/beans/Project.java
@@ -133,6 +133,12 @@ public class Project extends BaseIndexedBean implements Comparable<Project> {
     @Column(name = "preview_tooltip")
     private Boolean previewTooltip = false;
 
+    /**
+     * Field to define the status if the media view should be displayed preview tooltip.
+     */
+    @Column(name = "preview_tooltip_media_view")
+    private Boolean previewTooltipMediaView = false;
+
     /**
      * Folder with media to use for the audio preview.
      */
@@ -535,10 +541,29 @@ public boolean isPreviewTooltip() {
         return previewTooltip;
     }
 
+    /**
+     * Set the status if the media view should be displayed preview tooltip.
+     *
+     * @param previewTooltipMediaView True if is active
+     */
+    public void setPreviewTooltipMediaView(boolean previewTooltipMediaView) {
+        this.previewTooltipMediaView = previewTooltipMediaView;
+    }
+
+    /**
+     * Get the status if the media view should be displayed preview tooltip.
+     *
+     * @return True if is active
+     */
+    public boolean isPreviewTooltipMediaView() {
+        return previewTooltipMediaView;
+    }
+
     /**
      * Set the status of the preview tooltip.
      *
-     * @param previewTooltip True if is active
+     * @param previewTooltip
+     *         True if is active
      */
     public void setPreviewTooltip(boolean previewTooltip) {
         this.previewTooltip = previewTooltip;

diff --git a/Kitodo-DataManagement/src/main/resources/db/V2_127__Add_preview_tooltip_to_project.sql b/Kitodo-DataManagement/src/main/resources/db/V2_127__Add_preview_tooltip_to_project.sql
@@ -12,3 +12,7 @@
 --
 -- Migration: Add column for state of preview tooltip to project table.
 ALTER TABLE project ADD preview_tooltip TINYINT(1) NOT NULL DEFAULT 0;
+
+--
+-- Migration: Add column for state if the media view should be displayed preview tooltip to project table.
+ALTER TABLE project ADD preview_tooltip_media_view TINYINT(1) NOT NULL DEFAULT 0;
diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/ProjectForm.java b/Kitodo/src/main/java/org/kitodo/production/forms/ProjectForm.java
@@ -753,6 +753,24 @@ public void setPreviewTooltip(boolean previewTooltip) {
         project.setPreviewTooltip(previewTooltip);
     }
 
+    /**
+     * Get the status if the media view should be displayed preview tooltip.
+     *
+     * @return True if is active
+     */
+    public boolean isPreviewTooltipMediaView() {
+        return project.isPreviewTooltipMediaView();
+    }
+
+    /**
+     * Set the status if the media view should be displayed preview tooltip.
+     *
+     * @param previewTooltipMediaView True if is active
+     */
+    public void setPreviewTooltipMediaView(boolean previewTooltipMediaView) {
+        project.setPreviewTooltipMediaView(previewTooltipMediaView);
+    }
+
     /**
      * Returns the folder to use for audio preview.
      *

diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java
@@ -243,6 +243,13 @@ public boolean isPreviewTooltip() {
         return dataEditor.getProcess().getProject().isPreviewTooltip();
     }
 
+    /**
+     * Check if the media view for preview tooltip is activated in project.
+     */
+    public boolean isPreviewTooltipMediaView() {
+        return dataEditor.getProcess().getProject().isPreviewTooltipMediaView();
+    }
+
     private boolean dragStripeIndexMatches(String dragId) {
         Matcher dragStripeImageMatcher = DRAG_STRIPE_IMAGE.matcher(dragId);
         Matcher dragUnstructuredMediaMatcher = DRAG_UNSTRUCTURED_MEDIA.matcher(dragId);

diff --git a/Kitodo/src/main/resources/messages/messages_de.properties b/Kitodo/src/main/resources/messages/messages_de.properties
@@ -476,7 +476,6 @@ folderUse.generatorSource.disabled=Generieren von Inhalten deaktiviert
 folderUse.mediaView=F\u00FCr die Medienansicht verwenden
 folderUse.mediaView.disabled=Medienansicht deaktiviert
 folderUse.preview=Als Vorschau verwenden
-folderUse.previewTooltip=Tooltip anstelle des Overlays in der Vorschau anzeigen
 folderUse.preview.disabled=Vorschau deaktiviert
 folderUse.videoPreview=Als Vorschau f\u00fcr Videos verwenden
 folderUse.videoPreview.disabled=Vorschau f\u00fcr Videos deaktiviert
@@ -1127,6 +1126,9 @@ title=Titel
 titleRecordLink=Titelsatzverkn\u00FCpfung
 to=bis
 tooltip=Nr. {0}
+tooltip.headline=Tooltip
+tooltip.enable=Tooltip anstelle des Overlays in der Vorschau anzeigen
+tooltip.mediaView=Zeige die Medienansicht anstelle der Vorschau
 hits=Treffer
 tsl=TSL
 typ=Typ

diff --git a/Kitodo/src/main/resources/messages/messages_en.properties b/Kitodo/src/main/resources/messages/messages_en.properties
@@ -477,7 +477,6 @@ folderUse.generatorSource.disabled=Content generation disabled
 folderUse.mediaView=Use for the media view
 folderUse.mediaView.disabled=Media view disabled
 folderUse.preview=Use as preview
-folderUse.previewTooltip=Show a tooltip instead of the overlay in preview
 folderUse.preview.disabled=Preview disabled
 folderUse.videoPreview=Use as preview for videos
 folderUse.videoPreview.disabled=Preview for videos disabled
@@ -1128,6 +1127,9 @@ title=Title
 titleRecordLink=Title record link
 to=to
 tooltip=No. {0}
+tooltip.headline=Tooltip
+tooltip.enable=Show tooltip instead of the overlay in preview
+tooltip.mediaView=Show media view in tooltip instead of preview
 hits=Hits
 tsl=TSL
 typ=Type

diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
@@ -3878,15 +3878,6 @@ footer {
     padding: .75em 1.5em;
 }
 
-.la-folder-use {
-    padding-left: 16px;
-}
-
-.so-folder-use {
-    margin: 0 15px 1.3em 15px;
-    width: calc(100% - 64px);
-}
-
 .import-table-section-title,
 .ui-panelgrid-cell > .import-table-section-title {
     font-weight: bold;

diff --git a/...c/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list-overlay.xhtml b/...c/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list-overlay.xhtml
@@ -12,14 +12,15 @@
 -->
 
 <ui:composition
-        xmlns:a="http://xmlns.jcp.org/jsf/passthrough"
         xmlns:p="http://primefaces.org/ui"
         xmlns:f="http://xmlns.jcp.org/jsf/core"
         xmlns:h="http://xmlns.jcp.org/jsf/html"
         xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
 
     <ui:param name="isPreviewTooltip"
-              value="#{mediaProvider.hasPreviewVariant(media) and fn:startsWith(media.previewMimeType, 'image') and DataEditorForm.galleryPanel.isPreviewTooltip()}"/>
+              value="#{DataEditorForm.galleryPanel.isPreviewTooltip() and (
+                        not DataEditorForm.galleryPanel.isPreviewTooltipMediaView() and mediaProvider.hasPreviewVariant(media) and fn:startsWith(media.previewMimeType, 'image') ) or (
+                        DataEditorForm.galleryPanel.isPreviewTooltipMediaView() and mediaProvider.hasMediaViewVariant(media) and fn:startsWith(media.mediaViewMimeType, 'image') ) }"/>
 
     <ui:fragment rendered="#{not isPreviewTooltip}">
         <p:outputPanel class="thumbnail-overlay">
@@ -43,15 +44,26 @@
         </p:outputPanel>
 
         <p:tooltip for="mediaListImageTooltipTrigger" styleClass="mediaListImageTooltip">
-            <p:graphicImage value="#{mediaProvider.previewData}"
-                            a:loading="lazy">
+            <p:graphicImage rendered="#{DataEditorForm.galleryPanel.isPreviewTooltipMediaView()}"
+                            value="#{mediaProvider.mediaView}">
                 <f:param name="mediaId"
                          value="#{media.id}"/>
                 <f:param name="process"
                          value="#{DataEditorForm.process.id}"/>
                 <f:param name="sessionId"
                          value="#{DataEditorForm.galleryPanel.cachingUUID}"/>
             </p:graphicImage>
+
+            <p:graphicImage rendered="#{not DataEditorForm.galleryPanel.isPreviewTooltipMediaView()}"
+                            value="#{mediaProvider.previewData}">
+                <f:param name="mediaId"
+                         value="#{media.id}"/>
+                <f:param name="process"
+                         value="#{DataEditorForm.process.id}"/>
+                <f:param name="sessionId"
+                         value="#{DataEditorForm.galleryPanel.cachingUUID}"/>
+            </p:graphicImage>
+
             <p:outputPanel>
                 <h:outputText>
                     #{msgs.image} #{media.shortId}, #{msgs.page} #{media.orderlabel}

diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/projectEdit/projectEditMets.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/projectEdit/projectEditMets.xhtml
@@ -161,94 +161,118 @@
 
     <p:separator/>
 
-    <!-- folder use -->
-    <div class="horizontal-separator">
-        <h:outputText value="#{msgs.folderUse}"/>
-    </div>
+    <div class="horizontal-separator"></div>
 
-    <!-- folder for preview -->
-    <p:outputLabel for="preview" value="#{msgs['folderUse.preview']}" styleClass="la-folder-use"/>
-    <p:selectOneMenu id="preview" value="#{ProjectForm.preview}" styleClass="so-folder-use"
-                     disabled="#{ProjectForm.locked}">
-        <f:selectItem itemLabel="#{msgs['folderUse.preview.disabled']}" itemValue="#{null}" noSelectionOption="true"/>
-        <f:selectItems value="#{ProjectForm.selectableFolders}"/>
-        <p:ajax event="change" oncomplete="toggleSave()"/>
-    </p:selectOneMenu>
-
-    <p:outputLabel for="previewTooltip" value="#{msgs['folderUse.previewTooltip']}" styleClass="la-folder-use"/>
-    <p:selectBooleanCheckbox id="previewTooltip" styleClass="switch input so-folder-use"
-                             value="#{ProjectForm.previewTooltip}" disabled="#{ProjectForm.locked}">
-        <p:ajax event="change" oncomplete="toggleSave()"/>
-    </p:selectBooleanCheckbox>
-
-    <!-- folder for media view -->
-    <p:outputLabel for="mediaView" value="#{msgs['folderUse.mediaView']}" styleClass="la-folder-use"/>
-    <p:selectOneMenu id="mediaView" value="#{ProjectForm.mediaView}" styleClass="so-folder-use"
-                     disabled="#{ProjectForm.locked}">
-        <f:selectItem itemLabel="#{msgs['folderUse.mediaView.disabled']}" itemValue="#{null}" noSelectionOption="true"/>
-        <f:selectItems value="#{ProjectForm.selectableFolders}"/>
-        <p:ajax event="change" oncomplete="toggleSave()"/>
-    </p:selectOneMenu>
-
-    <!-- folder for audio preview -->
-    <p:outputLabel for="audioPreview" value="#{msgs['folderUse.audioPreview']}" styleClass="la-folder-use"
-                   rendered="#{ProjectForm.hasAudioFolder()}"/>
-    <p:selectOneMenu id="audioPreview" value="#{ProjectForm.audioPreview}" styleClass="so-folder-use"
-                     disabled="#{ProjectForm.locked}" rendered="#{ProjectForm.hasAudioFolder()}">
-        <f:selectItem itemLabel="#{msgs['folderUse.audioPreview.disabled']}" itemValue="#{null}"
-                      noSelectionOption="true"/>
-        <f:selectItems value="#{ProjectForm.selectableFolders}"/>
-        <p:ajax event="change" oncomplete="toggleSave()"/>
-    </p:selectOneMenu>
-
-    <!-- folder for audio media view -->
-    <p:outputLabel for="audioMediaView" value="#{msgs['folderUse.audioMediaView']}" styleClass="la-folder-use"
-                   rendered="#{ProjectForm.hasAudioFolder()}"/>
-    <p:selectOneMenu id="audioMediaView" value="#{ProjectForm.audioMediaView}" styleClass="so-folder-use"
-                     disabled="#{ProjectForm.locked}" rendered="#{ProjectForm.hasAudioFolder()}">
-        <f:selectItem itemLabel="#{msgs['folderUse.audioMediaView.disabled']}" itemValue="#{null}"
-                      noSelectionOption="true"/>
-        <f:selectItems value="#{ProjectForm.selectableFolders}"/>
-        <p:ajax event="change" oncomplete="toggleSave()"/>
-    </p:selectOneMenu>
-
-    <p:outputLabel for="audioMediaViewWaveform" value="#{msgs['folderUse.audioMediaViewWaveform']}"
-                   rendered="#{ProjectForm.hasAudioFolder()}" styleClass="la-folder-use" />
-    <p:selectBooleanCheckbox id="audioMediaViewWaveform" styleClass="switch input so-folder-use"
-                             value="#{ProjectForm.audioMediaViewWaveform}" disabled="#{ProjectForm.locked}"
-                             rendered="#{ProjectForm.hasAudioFolder()}">
-        <p:ajax event="change" oncomplete="toggleSave()"/>
-    </p:selectBooleanCheckbox>
+    <p:panelGrid columns="1" layout="grid">
+        <p:row>
+            <h4><h:outputText value="#{msgs.folderUse}"/></h4>
+        </p:row>
+        <p:row>
+            <!-- folder for preview -->
+            <p:outputLabel for="preview" value="#{msgs['folderUse.preview']}"/>
+            <p:selectOneMenu id="preview" value="#{ProjectForm.preview}"
+                             disabled="#{ProjectForm.locked}">
+                <f:selectItem itemLabel="#{msgs['folderUse.preview.disabled']}" itemValue="#{null}"
+                              noSelectionOption="true"/>
+                <f:selectItems value="#{ProjectForm.selectableFolders}"/>
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectOneMenu>
+        </p:row>
+        <p:row>
+            <!-- folder for media view -->
+            <p:outputLabel for="mediaView" value="#{msgs['folderUse.mediaView']}"/>
+            <p:selectOneMenu id="mediaView" value="#{ProjectForm.mediaView}"
+                             disabled="#{ProjectForm.locked}">
+                <f:selectItem itemLabel="#{msgs['folderUse.mediaView.disabled']}" itemValue="#{null}"
+                              noSelectionOption="true"/>
+                <f:selectItems value="#{ProjectForm.selectableFolders}"/>
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectOneMenu>
+        </p:row>
+        <p:row rendered="#{ProjectForm.hasAudioFolder()}">
+            <!-- folder for audio preview -->
+            <p:outputLabel for="audioPreview" value="#{msgs['folderUse.audioPreview']}"/>
+            <p:selectOneMenu id="audioPreview" value="#{ProjectForm.audioPreview}"
+                             disabled="#{ProjectForm.locked}">
+                <f:selectItem itemLabel="#{msgs['folderUse.audioPreview.disabled']}" itemValue="#{null}"
+                              noSelectionOption="true"/>
+                <f:selectItems value="#{ProjectForm.selectableFolders}"/>
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectOneMenu>
+        </p:row>
+        <p:row rendered="#{ProjectForm.hasAudioFolder()}">
+            <!-- folder for audio media view -->
+            <p:outputLabel for="audioMediaView" value="#{msgs['folderUse.audioMediaView']}"/>
+            <p:selectOneMenu id="audioMediaView" value="#{ProjectForm.audioMediaView}"
+                             disabled="#{ProjectForm.locked}">
+                <f:selectItem itemLabel="#{msgs['folderUse.audioMediaView.disabled']}" itemValue="#{null}"
+                              noSelectionOption="true"/>
+                <f:selectItems value="#{ProjectForm.selectableFolders}"/>
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectOneMenu>
+        </p:row>
+        <p:row rendered="#{ProjectForm.hasAudioFolder()}">
+            <p:outputLabel for="audioMediaViewWaveform" value="#{msgs['folderUse.audioMediaViewWaveform']}"/>
+            <p:selectBooleanCheckbox id="audioMediaViewWaveform" styleClass="switch input"
+                                     value="#{ProjectForm.audioMediaViewWaveform}" disabled="#{ProjectForm.locked}">
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectBooleanCheckbox>
+        </p:row>
+        <p:row rendered="#{ProjectForm.hasVideoFolder()}">
+            <!-- folder for video preview -->
+            <p:outputLabel for="videoPreview" value="#{msgs['folderUse.videoPreview']}"/>
+            <p:selectOneMenu id="videoPreview" value="#{ProjectForm.videoPreview}"
+                             disabled="#{ProjectForm.locked}">
+                <f:selectItem itemLabel="#{msgs['folderUse.videoPreview.disabled']}" itemValue="#{null}"
+                              noSelectionOption="true"/>
+                <f:selectItems value="#{ProjectForm.selectableFolders}"/>
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectOneMenu>
+        </p:row>
+        <p:row rendered="#{ProjectForm.hasVideoFolder()}">
+            <!-- folder for video media view -->
+            <p:outputLabel for="videoMediaView" value="#{msgs['folderUse.videoMediaView']}"/>
+            <p:selectOneMenu id="videoMediaView" value="#{ProjectForm.videoMediaView}"
+                             disabled="#{ProjectForm.locked}">
+                <f:selectItem itemLabel="#{msgs['folderUse.videoMediaView.disabled']}" itemValue="#{null}"
+                              noSelectionOption="true"/>
+                <f:selectItems value="#{ProjectForm.selectableFolders}"/>
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectOneMenu>
+        </p:row>
+        <p:row>
+            <!-- source folder for content generation -->
+            <p:outputLabel for="generatorSource" value="#{msgs['folderUse.generatorSource']}"/>
+            <p:selectOneMenu id="generatorSource" value="#{ProjectForm.generatorSource}"
+                             disabled="#{ProjectForm.locked}">
+                <f:selectItem itemLabel="#{msgs['folderUse.generatorSource.disabled']}" itemValue="#{null}"
+                              noSelectionOption="true"/>
+                <f:selectItems value="#{ProjectForm.selectableFolders}"/>
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectOneMenu>
+        </p:row>
+    </p:panelGrid>
 
-    <!-- folder for video preview -->
-    <p:outputLabel for="videoPreview" value="#{msgs['folderUse.videoPreview']}" styleClass="la-folder-use"
-                   rendered="#{ProjectForm.hasVideoFolder()}"/>
-    <p:selectOneMenu id="videoPreview" value="#{ProjectForm.videoPreview}" styleClass="so-folder-use"
-                     disabled="#{ProjectForm.locked}" rendered="#{ProjectForm.hasVideoFolder()}">
-        <f:selectItem itemLabel="#{msgs['folderUse.videoPreview.disabled']}" itemValue="#{null}"
-                      noSelectionOption="true"/>
-        <f:selectItems value="#{ProjectForm.selectableFolders}"/>
-        <p:ajax event="change" oncomplete="toggleSave()"/>
-    </p:selectOneMenu>
+    <div class="horizontal-separator"></div>
 
-    <!-- folder for video media view -->
-    <p:outputLabel for="videoMediaView" value="#{msgs['folderUse.videoMediaView']}" styleClass="la-folder-use"
-                   rendered="#{ProjectForm.hasVideoFolder()}"/>
-    <p:selectOneMenu id="videoMediaView" value="#{ProjectForm.videoMediaView}" styleClass="so-folder-use"
-                     disabled="#{ProjectForm.locked}" rendered="#{ProjectForm.hasVideoFolder()}">
-        <f:selectItem itemLabel="#{msgs['folderUse.videoMediaView.disabled']}" itemValue="#{null}"
-                      noSelectionOption="true"/>
-        <f:selectItems value="#{ProjectForm.selectableFolders}"/>
-        <p:ajax event="change" oncomplete="toggleSave()"/>
-    </p:selectOneMenu>
+    <p:panelGrid columns="1" layout="grid">
+        <p:row>
+            <h4>#{msgs['tooltip.headline']}</h4>
+        </p:row>
+        <p:row>
+            <p:outputLabel for="previewTooltip" value="#{msgs['tooltip.enable']}"/>
+            <p:selectBooleanCheckbox id="previewTooltip" styleClass="switch input"
+                                     value="#{ProjectForm.previewTooltip}" disabled="#{ProjectForm.locked}">
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectBooleanCheckbox>
+        </p:row>
+        <p:row>
+            <p:outputLabel for="previewTooltipMediaView" value="#{msgs['tooltip.mediaView']}"/>
+            <p:selectBooleanCheckbox id="previewTooltipMediaView" styleClass="switch input"
+                                     value="#{ProjectForm.previewTooltipMediaView}" disabled="#{ProjectForm.locked}">
+                <p:ajax event="change" oncomplete="toggleSave()"/>
+            </p:selectBooleanCheckbox>
+        </p:row>
+    </p:panelGrid>
 
-    <!-- source folder for content generation -->
-    <p:outputLabel for="generatorSource" value="#{msgs['folderUse.generatorSource']}" styleClass="la-folder-use"/>
-    <p:selectOneMenu id="generatorSource" value="#{ProjectForm.generatorSource}" styleClass="so-folder-use"
-                     disabled="#{ProjectForm.locked}">
-        <f:selectItem itemLabel="#{msgs['folderUse.generatorSource.disabled']}" itemValue="#{null}"
-                      noSelectionOption="true"/>
-        <f:selectItems value="#{ProjectForm.selectableFolders}"/>
-        <p:ajax event="change" oncomplete="toggleSave()"/>
-    </p:selectOneMenu>
 </ui:composition>