Merge pull request #6211 from wellcomecollection/show-labels-in-viewer

show canvas labels if toggle is on
wellcomecollection · Mar 11, 2021 · b757afb · b757afb
2 parents 171d0e3 + a4b7493
commit b757afb
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/common/views/components/IIIFViewer/parts/IIIFCanvasThumbnail.tsx b/common/views/components/IIIFViewer/parts/IIIFCanvasThumbnail.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, useState } from 'react';
+import { FunctionComponent, useState, useContext } from 'react';
 import { IIIFCanvas } from '@weco/common/model/iiif';
 import { classNames, font } from '@weco/common/utils/classnames';
 import styled from 'styled-components';
@@ -8,6 +8,8 @@ import IIIFResponsiveImage from '@weco/common/views/components/IIIFResponsiveIma
 import LL from '@weco/common/views/components/styled/LL';
 import { getImageAuthService } from '@weco/common/utils/iiif';
 import Padlock from '@weco/common/views/components/styled/Padlock';
+import TogglesContext from '@weco/common/views/components/TogglesContext/TogglesContext';
+import Space from '@weco/common/views/components/styled/Space';
 
 type ViewerThumbProps = {
   isFocusable?: boolean;
@@ -106,6 +108,7 @@ const IIIFCanvasThumbnail: FunctionComponent<IIIFCanvasThumbnailProps> = ({
     thumbnailService.sizes
       .sort((a, b) => a.width - b.width)
       .find(dimensions => dimensions.width > 100);
+  const { showCanvasLabels } = useContext(TogglesContext);
   return (
     <IIIFViewerThumb
       onClick={clickHandler}
@@ -159,10 +162,29 @@ const IIIFCanvasThumbnail: FunctionComponent<IIIFCanvasThumbnailProps> = ({
           )}
         </ImageContainer>
         <div>
-          <IIIFViewerThumbNumber isActive={isActive}>
-            <span className="visually-hidden">image </span>
-            {thumbNumber}
-          </IIIFViewerThumbNumber>
+          {showCanvasLabels ? (
+            <>
+              {canvas.label.trim() !== '-' && (
+                <Space v={{ size: 's', properties: ['margin-bottom'] }}>
+                  <IIIFViewerThumbNumber isActive={isActive}>
+                    {canvas.label}
+                  </IIIFViewerThumbNumber>
+                </Space>
+              )}
+              <div>
+                <IIIFViewerThumbNumber isActive={isActive}>
+                  <span
+                    style={{ fontSize: '11px' }}
+                  >{`image ${thumbNumber}`}</span>
+                </IIIFViewerThumbNumber>
+              </div>
+            </>
+          ) : (
+            <IIIFViewerThumbNumber isActive={isActive}>
+              <span className="visually-hidden">image </span>
+              {thumbNumber}
+            </IIIFViewerThumbNumber>
+          )}
         </div>
       </IIIFViewerThumbInner>
     </IIIFViewerThumb>

diff --git a/toggles/webapp/toggles.ts b/toggles/webapp/toggles.ts
@@ -1,5 +1,12 @@
 export default {
   toggles: [
+    {
+      id: 'showCanvasLabels',
+      title: 'Show canvas labels on viewer thumbnails',
+      description:
+        'Shows the canvas label on the viewer thumbnails above the image number',
+      defaultValue: false,
+    },
     {
       id: 'openWithAdvisoryPrototype',
       title: 'Open with advisory',