Merge pull request #3916 from fstoe/3247

feat: added setting to disable thumbnail labels

__tests__/fixtures/config/export.example.json

@@ -179,7 +179,8 @@
     "thumbnailNavigation": {
       "defaultPosition": "far-bottom",
       "height": 150,
-      "width": 100
+      "width": 100,
+      "showThumbnailLabels": true
     },
     "workspace": {
       "type": "mosaic"

__tests__/src/components/ThumbnailCanvasGrouping.test.js

@@ -18,6 +18,7 @@ function createWrapper(props) {
         top: 0,
         width: 100,
       }}
+      showThumbnailLabels
       {...props}
     />,
   );

src/components/ThumbnailCanvasGrouping.js

@@ -39,7 +39,7 @@ export class ThumbnailCanvasGrouping extends PureComponent {
   /** */
   render() {
     const {
-      index, style, data, currentCanvasId,
+      index, style, data, currentCanvasId, showThumbnailLabels,
     } = this.props;
     const {
       canvasGroupings, position, height,
@@ -87,7 +87,7 @@ export class ThumbnailCanvasGrouping extends PureComponent {
             <IIIFThumbnail
               key={canvas.id}
               resource={canvas}
-              labelled
+              labelled={showThumbnailLabels}
               maxHeight={(position === 'far-right') ? style.height - (1.5 * SPACING) : height - (1.5 * SPACING)}
               variant="inside"
             />
@@ -103,5 +103,6 @@ ThumbnailCanvasGrouping.propTypes = {
   data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   index: PropTypes.number.isRequired,
   setCanvas: PropTypes.func.isRequired,
+  showThumbnailLabels: PropTypes.bool.isRequired,
   style: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };

src/config/settings.js

@@ -515,15 +515,16 @@ export default {
     defaultPosition: 'off', // Which position for the thumbnail navigation to be be displayed. Other possible values are "far-bottom" or "far-right"
     displaySettings: true, // Display the settings for this in WindowTopMenu
     height: 130, // height of entire ThumbnailNavigation area when position is "far-bottom"
+    showThumbnailLabels: true, // Configure if thumbnail labels should be displayed
     width: 100, // width of one canvas (doubled for book view) in ThumbnailNavigation area when position is "far-right"
   },
   workspace: {
-    draggingEnabled: true,
     allowNewWindows: true,
-    id: uuid(),
-    isWorkspaceAddVisible: false, // Catalog/Workspace add window feature visible by default
+    draggingEnabled: true,
     exposeModeOn: false, // unused?
     height: 5000, // height of the elastic mode's virtual canvas
+    id: uuid(),
+    isWorkspaceAddVisible: false, // Catalog/Workspace add window feature visible by default
     showZoomControls: true, // Configure if zoom controls should be displayed by default
     type: 'mosaic', // Which workspace type to load by default. Other possible values are "elastic". If "mosaic" or "elastic" are not selected no worksapce type will be used.
     viewportPosition: { // center coordinates for the elastic mode workspace

src/containers/ThumbnailCanvasGrouping.js

@@ -2,7 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
-import { getCurrentCanvas } from '../state/selectors';
+import { getCurrentCanvas, getConfig } from '../state/selectors';
 import { ThumbnailCanvasGrouping } from '../components/ThumbnailCanvasGrouping';
 
 /**
@@ -21,6 +21,7 @@ const mapDispatchToProps = (dispatch, { data }) => ({
  */
 const mapStateToProps = (state, { data }) => ({
   currentCanvasId: (getCurrentCanvas(state, { windowId: data.windowId }) || {}).id,
+  showThumbnailLabels: getConfig(state).thumbnailNavigation.showThumbnailLabels,
 });
 
 const enhance = compose(