From ccf4a4d9ca4ff98f9d43d5f11087efdfd9b33a2a Mon Sep 17 00:00:00 2001
From: Michael Heppler <mheppler@hmdc.harvard.edu>
Date: Thu, 5 Dec 2019 15:30:42 -0500
Subject: [PATCH] Cleaned up preview tab on file pg [ref #6437]

---
 src/main/java/propertyFiles/Bundle.properties |   5 +-
 src/main/webapp/file.xhtml                    | 129 +++++++++---------
 src/main/webapp/resources/css/structure.css   |  29 +---
 3 files changed, 71 insertions(+), 92 deletions(-)

diff --git a/src/main/java/propertyFiles/Bundle.properties b/src/main/java/propertyFiles/Bundle.properties
index c89cff81d94..afd4d7aa5f1 100755
--- a/src/main/java/propertyFiles/Bundle.properties
+++ b/src/main/java/propertyFiles/Bundle.properties
@@ -1498,7 +1498,6 @@ file.rsyncUpload.rsyncUploadDisabledDueFileUploadedViaHttpAndPublished=Upload wi
 
 file.metaData.dataFile.dataTab.variables=Variables
 file.metaData.dataFile.dataTab.observations=Observations
-file.metaData.viewOnWorldMap=Explore on WorldMap
 file.addDescription=Add file description...
 file.tags=Tags
 file.editTags=Edit Tags
@@ -1652,7 +1651,7 @@ file.dataFilesTab.versions.viewDetails.btn=View Details
 file.dataFilesTab.versions.widget.viewMoreInfo=To view more information about the versions of this dataset, and to edit it if this is your dataset, please visit the <a href="/dataset.xhtml?persistentId={0}" title="{1}" target="_blank">full version of this dataset</a> at the {2}.
 file.dataFilesTab.versions.preloadmessage=(Loading versions...)
 file.previewTab.externalTools.header=Available Previews
-file.previewTab.button.label=Previews
+file.previewTab.button.label=Preview Tools
 file.previewTab.previews.not.available=Public previews are not available for this file.
 file.deleteDialog.tip=Are you sure you want to delete this dataset and all of its files? You cannot undelete this dataset.
 file.deleteDialog.header=Delete Dataset
@@ -1793,6 +1792,8 @@ file.DatasetVersion=Version
 
 file.previewTab.tool.open=Open
 file.previewTab.header=Preview
+file.previewTab.presentation=File Preview Tool
+file.previewTab.exploreBtn={0} on {1}
 file.metadataTab.fileMetadata.header=File Metadata
 file.metadataTab.fileMetadata.persistentid.label=Data File Persistent ID
 file.metadataTab.fileMetadata.downloadUrl.label=Download URL
diff --git a/src/main/webapp/file.xhtml b/src/main/webapp/file.xhtml
index 1ec175fe9ad..c54fa6b3db0 100644
--- a/src/main/webapp/file.xhtml
+++ b/src/main/webapp/file.xhtml
@@ -363,81 +363,88 @@
                                     <ui:param name="fileDownloadService" value="#{DatasetPage.fileDownloadService}"/>
                                 </ui:include>
                             </p:tab>
-
-
-                            <p:tab id="previewTab" title="#{bundle['file.previewTab.header']}" rendered="#{FilePage.publiclyDownloadable and (FilePage.toolsWithPreviews.size() > 0) and fileDownloadHelper.canDownloadFile(FilePage.fileMetadata)
-                                                            and FilePage.fileMetadata.datasetVersion.isPublished()}">
-                                <!-- Add external tools as an inner tab with buttons to full tool-->
+                            <p:tab id="previewTab" title="#{bundle['file.previewTab.header']}" 
+                                   rendered="#{FilePage.publiclyDownloadable and (FilePage.toolsWithPreviews.size() > 0) and fileDownloadHelper.canDownloadFile(FilePage.fileMetadata) and FilePage.fileMetadata.datasetVersion.isPublished()}">
+                                <div class="btn-toolbar margin-bottom" role="toolbar" aria-label="#{bundle['file.previewTab.button.label']}">
                                     <!-- Preview Button Group -->
-                                    <div>
-                                        <div class="btn-group" jsf:rendered="#{FilePage.toolsWithPreviews.size() > 1 and fileDownloadHelper.canDownloadFile(FilePage.fileMetadata)}">
-                                            <button type="button" id="selectTool" class="btn btn-default btn-access dropdown-toggle" data-toggle="dropdown">
-                                                <span class="glyphicon glyphicon-eye-open"/> #{bundle['file.previewTab.button.label']} <span class="caret"></span>
-                                            </button>
-                                            <ul class="dropdown-menu pull-right text-left" role="menu">
-                                                <ui:repeat value="#{FilePage.toolsWithPreviews}" var="tool" >
-
-                                                    <li>
-                                                        <h:commandLink  action="#{FilePage.setSelectedTool(tool)}"  >
-                                                            <h:outputText  value="#{tool.displayName}" />
-                                                        </h:commandLink>
-                                                    </li>
-
-                                                </ui:repeat>
-                                            </ul>
-                                        </div>
-                                        <!-- END: Preview Button Group -->
+                                    <div class="btn-group" jsf:rendered="#{FilePage.toolsWithPreviews.size() > 1 and fileDownloadHelper.canDownloadFile(FilePage.fileMetadata)}">
+                                        <button type="button" id="selectTool" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                                            <span class="glyphicon glyphicon-eye-open"/> #{bundle['file.previewTab.button.label']} <span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu" role="menu">
+                                            <ui:repeat value="#{FilePage.toolsWithPreviews}" var="tool">
+                                                <li>
+                                                    <h:commandLink action="#{FilePage.setSelectedTool(tool)}">
+                                                        <h:outputText value="#{tool.displayName}"/>
+                                                    </h:commandLink>
+                                                </li>
+                                            </ui:repeat>
+                                        </ul>
                                     </div>
-                                <div>
-                                    <ui:fragment rendered="#{FilePage.toolsWithPreviews.size() > 0 and fileDownloadHelper.canDownloadFile(FilePage.fileMetadata)}" id="previewPresentation">
-                                        <ui:fragment rendered="#{!FilePage.selectedTool.worldMapTool}">
-                                        <h:commandButton rendered="#{!downloadPopupRequired}" value="#{bundle['file.previewTab.tool.open']} #{FilePage.selectedTool.displayName}" 
+                                    <!-- END: Preview Button Group -->
+                                    <div class="btn-group" jsf:rendered="#{FilePage.toolsWithPreviews.size() > 0 and fileDownloadHelper.canDownloadFile(FilePage.fileMetadata)}">
+                                        <!-- Modular/Configured Explore Tool -->
+                                        <h:commandLink rendered="#{!FilePage.selectedTool.worldMapTool and !downloadPopupRequired}" 
                                                          type="submit"
-                                                         styleClass="#{(FilePage.fileMetadata.dataFile.ingestInProgress) ? 'disabled' : ''}"
+                                                         styleClass="btn btn-default #{(FilePage.fileMetadata.dataFile.ingestInProgress) ? 'disabled' : ''}"
                                                          disabled="#{(FilePage.fileMetadata.dataFile.ingestInProgress or lockedFromDownload) ? 'disabled' : ''}"
-                                                         action="#{FilePage.fileDownloadService.explore(FilePage.guestbookResponse, FilePage.fileMetadata, FilePage.selectedTool )}">
-                                        </h:commandButton>
-                                        <p:commandButton rendered="#{downloadPopupRequired}" value="#{bundle['file.previewTab.tool.open']} #{FilePage.selectedTool.displayName}"
+                                                         action="#{FilePage.fileDownloadService.explore(FilePage.guestbookResponse, FilePage.fileMetadata, FilePage.selectedTool)}">
+                                            <span class="glyphicon glyphicon-equalizer"></span> 
+                                            <h:outputFormat value="#{bundle['file.previewTab.exploreBtn']}">
+                                                <f:param value="#{bundle.explore}"/>
+                                                <f:param value="#{FilePage.selectedTool.displayName}"/>
+                                            </h:outputFormat>
+                                        </h:commandLink>
+                                        <p:commandLink rendered="#{!FilePage.selectedTool.worldMapTool and downloadPopupRequired}"
                                                          action="#{FilePage.guestbookResponseService.modifyDatafileAndFormat(FilePage.guestbookResponse, FilePage.fileMetadata, 'externalTool', FilePage.selectedTool)}"
+                                                         styleClass="btn btn-default"
                                                          disabled="#{(FilePage.fileMetadata.dataFile.ingestInProgress or lockedFromDownload) ? 'disabled' : ''}"
                                                          type="submit"
                                                          process="@this"
                                                          update="@widgetVar(downloadPopup)"
                                                          oncomplete="PF('downloadPopup').show();handleResizeDialog('downloadPopup');">
-                                        </p:commandButton>
-                                        </ui:fragment>
-                                        
-                                        <!--WorldMap Explore-->
-                                        <ui:fragment rendered="#{FilePage.selectedTool.worldMapTool}">
-
-                                            <h:commandLink rendered="#{!downloadPopupRequired}" 
-                                                           styleClass="btn btn-default btn-xs #{(FilePage.fileMetadata.dataFile.ingestInProgress  or lockedFromDownload) ? 'disabled' : ''}"
-                                                           disabled="#{(FilePage.fileMetadata.dataFile.ingestInProgress  or lockedFromDownload) ? 'disabled' : ''}"
-
-                                                           action="#{FilePage.fileDownloadService.startWorldMapDownloadLink(FilePage.guestbookResponse, FilePage.fileMetadata )}" target="_blank" >
-                  #{bundle['file.previewTab.tool.open']} #{bundle['file.mapData.worldMap']}
-                                            </h:commandLink>
-                                            <p:commandButton rendered="#{downloadPopupRequired}"
-                                                             styleClass="#{(FilePage.fileMetadata.dataFile.ingestInProgress  or lockedFromDownload) ? 'disabled' : ''}"
-                                                             disabled="#{FilePage.fileMetadata.dataFile.ingestInProgress  or lockedFromDownload}"
-                                                             process="@this"
-                                                             action="#{FilePage.guestbookResponseService.modifyDatafileAndFormat(FilePage.guestbookResponse, FilePage.fileMetadata, 'worldMap' )}"
-                                                             update="@widgetVar(downloadPopup)"
-                                                             oncomplete="PF('downloadPopup').show();handleResizeDialog('downloadPopup');">
-                   #{bundle['file.previewTab.tool.open']} #{bundle['file.mapData.worldMap']}
-                                            </p:commandButton>
-                                        </ui:fragment>
-
-                                        <iframe role="presentation" title="External File Preview Tool" height="500" width="100%" src="#{FilePage.preview(FilePage.selectedTool)}"></iframe> 
-                                    </ui:fragment>
+                                            <span class="glyphicon glyphicon-equalizer"></span> 
+                                            <h:outputFormat value="#{bundle['file.previewTab.exploreBtn']}">
+                                                <f:param value="#{bundle.explore}"/>
+                                                <f:param value="#{FilePage.selectedTool.displayName}"/>
+                                            </h:outputFormat>
+                                        </p:commandLink>
+                                        <!-- Modular/Configured Explore Tool -->
+                                        <!-- WorldMap Explore -->
+                                        <h:commandLink rendered="#{FilePage.selectedTool.worldMapTool and !downloadPopupRequired}" 
+                                                       styleClass="btn btn-default #{(FilePage.fileMetadata.dataFile.ingestInProgress  or lockedFromDownload) ? 'disabled' : ''}"
+                                                       disabled="#{(FilePage.fileMetadata.dataFile.ingestInProgress  or lockedFromDownload) ? 'disabled' : ''}"
+                                                       action="#{FilePage.fileDownloadService.startWorldMapDownloadLink(FilePage.guestbookResponse, FilePage.fileMetadata )}" target="_blank" rel="noopener">
+                                            <span class="glyphicon glyphicon-equalizer"></span> 
+                                            <h:outputFormat value="#{bundle['file.previewTab.exploreBtn']}">
+                                                <f:param value="#{bundle.explore}"/>
+                                                <f:param value="#{bundle['file.mapData.worldMap']}"/>
+                                            </h:outputFormat>
+                                        </h:commandLink>
+                                        <p:commandLink rendered="#{FilePage.selectedTool.worldMapTool and downloadPopupRequired}"
+                                                         styleClass="btn btn-default #{(FilePage.fileMetadata.dataFile.ingestInProgress  or lockedFromDownload) ? 'disabled' : ''}"
+                                                         disabled="#{FilePage.fileMetadata.dataFile.ingestInProgress  or lockedFromDownload}"
+                                                         process="@this"
+                                                         action="#{FilePage.guestbookResponseService.modifyDatafileAndFormat(FilePage.guestbookResponse, FilePage.fileMetadata, 'worldMap')}"
+                                                         update="@widgetVar(downloadPopup)"
+                                                         oncomplete="PF('downloadPopup').show();handleResizeDialog('downloadPopup');">
+                                            <span class="glyphicon glyphicon-equalizer"></span> 
+                                            <h:outputFormat value="#{bundle['file.previewTab.exploreBtn']}">
+                                                <f:param value="#{bundle.explore}"/>
+                                                <f:param value="#{bundle['file.mapData.worldMap']}"/>
+                                            </h:outputFormat>
+                                        </p:commandLink>
+                                        <!-- END WorldMap Explore -->
+                                    </div>
+                                </div>
+                                <!-- FRAME -->
+                                <div id="previewPresentation" class="embed-responsive embed-responsive-16by9" jsf:rendered="#{FilePage.toolsWithPreviews.size() > 0 and fileDownloadHelper.canDownloadFile(FilePage.fileMetadata)}">
+                                    <iframe role="presentation" title="#{bundle['file.previewTab.presentation']}" src="#{FilePage.preview(FilePage.selectedTool)}"></iframe>
                                 </div>
                             </p:tab>
-                            
-                            
                             <p:tab id="metadataMapTab" class="padding-none" title="#{bundle['file.dataFilesTab.metadata.header']}"
                                    rendered="#{(!FilePage.fileMetadata.datasetVersion.deaccessioned or 
                                                               (FilePage.fileMetadata.datasetVersion.deaccessioned and FilePage.canUpdateDataset()))}">
-                                
                                 <!-- Metadata -->
                                 <div class="button-block tab-header margin-bottom text-right">
                                     <!-- Add + Edit Metadata Button -->
@@ -456,7 +463,6 @@
                                             <span class="glyphicon glyphicon-pencil"/> #{bundle['dataset.editBtn']}
                                         </button>
                                     </div>
-
                                     <!-- Export Button -->
                                     <div class="btn-group" jsf:rendered="#{FilePage.fileMetadata.datasetVersion.dataset.released}">
                                         <button class="btn btn-default btn-export dropdown-toggle" type="button" data-toggle="dropdown">
@@ -472,7 +478,6 @@
                                         </ul>
                                     </div>
                                 </div>
-                                
                                 <div class="panel panel-default">
                                     <div data-toggle="collapse" data-target="#panelCollapseFMD" class="panel-heading text-info">
                                         #{bundle['file.metadataTab.fileMetadata.header']} &#160;<span class="glyphicon glyphicon-chevron-up"/>
diff --git a/src/main/webapp/resources/css/structure.css b/src/main/webapp/resources/css/structure.css
index 819681c5c7b..77768421e4b 100644
--- a/src/main/webapp/resources/css/structure.css
+++ b/src/main/webapp/resources/css/structure.css
@@ -714,12 +714,10 @@ div.popover.fade.top.in {max-width: none;}
 div.popover.fade.top.in div.popover-content {text-align:center; vertical-align: middle; display:table-cell; width:428px; height:418px;}
 a.popoverHTML {display:inline-block;}
 
-/*div[id$="filesTable"] .ui-datatable-tablewrapper thead {display:none;}*/
-/*div[id$="versionsTable"] .ui-datatable-tablewrapper thead {display:none;}*/
+
 div[id$="versionsTable"] th.col-select-width * {display:none;}
 
 div[id$="filesTable"].ui-datatable.ui-widget div.ui-datatable-tablewrapper {overflow:visible;}
-
 div[id$="filesTable"].ui-datatable.ui-widget {margin-bottom:20px;}
 div[id$="filesTable"].ui-datatable.ui-widget table {table-layout: fixed;}
 div[id$="filesTable"].ui-datatable.ui-widget table th,
@@ -727,57 +725,33 @@ div[id$="filesTable"].ui-datatable.ui-widget table td {box-sizing: content-box;}
 div[id$="filesTable"] div.ui-datatable-header.ui-widget-header {padding:0; background:none; border:0;}
 div[id$="filesHeaderCount"] {padding:6px 12px;}
 div[id$="filesHeaderCount"] span.highlightBold {display:block; padding:0; line-height:1.65;}
-
-
-
-
 div[id$="filesTable"] .col-file-metadata {padding-left:0; padding-right:0; border-left:0; border-right:0; text-align:left; font-weight:normal;}
-
-
-
-/*div[id$="filesTable"] .col-file-thumb {border-right:0;}*/
-
 div[id$="filesTable"] .col-file-flexbox {display:flex; width:100%;}
-
 div[id$="filesTable"] .col-file-thumb {padding:4px 10px; width:84px;}
-
-
 div[id$="filesTable"] .col-file-thumb div.thumbnail-block {position:relative;width:64px;height:64px;margin:0 auto;}
 div[id$="filesTable"] .col-file-thumb div.thumbnail-block span.file-thumbnail-icon {font-size:62px;line-height:1.05;}
 div[id$="filesTable"] .col-file-thumb div.thumbnail-block span.file-thumbnail-preview-img {display:block;}
 div[id$="filesTable"] .col-file-thumb div.thumbnail-block div.file-icon-restricted-block {display:block;position:absolute;bottom:-4px;right:-1px;}
-
-
-
 div[id$="filesTable"] .file-metadata-block {-webkit-flex: 1 100%;
 	-moz-flex: 1 100%;
 	-ms-flex: 1 100%; flex: 1 100%;}
-
-
 div[id$="filesTable"] div.file-tags-block {padding-bottom:2px;}
 div[id$="filesTable"] div.file-tags-block a.ui-commandlink {font-size:12px;}
 div[id$="filesTable"] div.file-tags-block span.label {display:inline-block;}
 div[id$="filesTable"] div.file-tags-block span.label, div[id$="filesTable"] div.file-tags-block a.ui-commandlink {margin-right:.5em;}
 div[id$="filesTable"] div.file-tags-block span.label:last-of-type {margin-right:0;}
-
-
 div[id$="filesTable"] td.col-file-action {padding-left:0; border-left:0;}
 div[id$="filesTable"] td.col-file-access {width:50%;}
-
-
 div[id$="filesTable"] div.ui-datatable-header.ui-widget-header {padding:0 10px;}
 div[id$="filesHeaderBlock"] {margin-bottom:10px;}
 div[id$="cloudStorageBlock"] {margin-bottom:12px;}
 div[id$="cloudStorageBlock"] div.form-group.col-xs-12 {border-bottom:1px solid #ddd;margin:0;padding:0 0 12px 0;}
-
 div[id$="filesTable"] thead[id$="filesTable_head"] th.ui-state-default {border:0; box-shadow:none; border-radius:0; background-image:none; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;}
 div[id$="filesTable"] thead[id$="filesTable_head"] th.ui-state-default:first-of-type {border-left:1px solid #e6e6e6; border-top-left-radius:4px;}
 div[id$="filesTable"] thead[id$="filesTable_head"] th.ui-state-default:last-of-type {border-right: 1px solid #e6e6e6; border-top-right-radius: 4px;}
 div[id$="filesTable"] thead[id$="filesTable_head"] tr {background-color: #f5f5f5; background-image: -moz-linear-gradient(center top , #ffffff, #e6e6e6); background-repeat: repeat-x;}
-
 div[id$="filesTable"] thead[id$="filesTable_head"] th.ui-selection-column {/*width:40px !important;*/ padding:4px 10px;}
 div[id$="filesTable"] thead[id$="filesTable_head"] th.ui-selection-column .ui-chkbox-box.ui-widget {margin-top:0 !important;}
-
 #file-replace-original-block div[id$="filesTable"].col-sm-10 {border:1px solid #ddd;padding:0;}
 #file-replace-original-block div[id$="filesTable"] .col-file-thumb {width:74px !important;padding:4px 10px;}
 #file-replace-original-block div[id$="filesTable"] .col-file-metadata {padding:4px 10px;}
@@ -886,7 +860,6 @@ thead.ui-datatable-scrollable-theadclone {display:none}
         font-size: 17.5em;
     }
 }
-
 #fileImageTitle span.glyphicon-lock, #fileImageTitle span.icon-unlock {font-size:1.5em;}
 #fileImageTitle #file-title-block span.file-title-label {font-size:1.5em;font-weight:bold;margin-right:.5em;}
 #fileImageTitle #file-title-block span.label {margin-right:.5em;vertical-align: text-top;}