From 2761828a7f32518969f95769f6d758eb673635b7 Mon Sep 17 00:00:00 2001
From: Lutz Helm <helm@ub.uni-leipzig.de>
Date: Mon, 16 Dec 2024 15:44:56 +0100
Subject: [PATCH] Replace "move to top" with "move to background"

---
 __tests__/src/components/CanvasLayers.test.js |  4 ++--
 src/components/CanvasLayers.js                | 14 +++++++-------
 src/locales/de/translation.json               |  1 +
 src/locales/en/translation.json               |  1 +
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/__tests__/src/components/CanvasLayers.test.js b/__tests__/src/components/CanvasLayers.test.js
index 32b66c42b9..2f50c0dfad 100644
--- a/__tests__/src/components/CanvasLayers.test.js
+++ b/__tests__/src/components/CanvasLayers.test.js
@@ -47,7 +47,7 @@ describe('CanvasLayers', () => {
     expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('2');
 
     expect(screen.getAllByRole('button', { name: 'layer_hide' }).length).toEqual(2);
-    expect(screen.getAllByRole('button', { name: 'layer_moveToTop' }).length).toEqual(2);
+    expect(screen.getAllByRole('button', { name: 'layer_moveToBackground' }).length).toEqual(2);
     expect(screen.getAllByRole('spinbutton', { name: 'layer_opacity' }).length).toEqual(2);
   });
 
@@ -104,7 +104,7 @@ describe('CanvasLayers', () => {
     });
 
     it('has a button for moving a layer to the top', async () => {
-      await user.click(screen.getAllByLabelText('layer_moveToTop')[1]);
+      await user.click(screen.getAllByLabelText('layer_moveToBackground')[1]);
 
       expect(updateLayers).toHaveBeenCalledWith('abc', 'https://prtd.app/hamilton/canvas/p1.json', {
         'https://prtd.app/image/iiif/2/hamilton%2fHL_524_1r_00_PSC/full/862,1024/0/default.jpg': {
diff --git a/src/components/CanvasLayers.js b/src/components/CanvasLayers.js
index cc954730d8..086ffe28eb 100644
--- a/src/components/CanvasLayers.js
+++ b/src/components/CanvasLayers.js
@@ -8,7 +8,7 @@ import ListItem from '@mui/material/ListItem';
 import Slider from '@mui/material/Slider';
 import Tooltip from '@mui/material/Tooltip';
 import DragHandleIcon from '@mui/icons-material/DragHandleSharp';
-import MoveToTopIcon from '@mui/icons-material/VerticalAlignTopSharp';
+import MoveDownSharp from '@mui/icons-material/MoveDownSharp';
 import VisibilityIcon from '@mui/icons-material/VisibilitySharp';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOffSharp';
 import OpacityIcon from '@mui/icons-material/OpacitySharp';
@@ -50,7 +50,7 @@ function getUseableLabel(resource, index) {
 
 /** @private */
 function Layer({
-  resource, layerMetadata = {}, index, t, handleOpacityChange, setLayerVisibility, moveToTop,
+  resource, layerMetadata = {}, index, t, handleOpacityChange, setLayerVisibility, moveToBackground,
 }) {
   const { width, height } = { height: undefined, width: 50 };
 
@@ -82,8 +82,8 @@ function Layer({
               { layer.visibility ? <VisibilityIcon /> : <VisibilityOffIcon /> }
             </MiradorMenuButton>
             { layer.index !== 0 && (
-              <MiradorMenuButton aria-label={t('layer_moveToTop')} size="small" onClick={() => { moveToTop(resource.id); }}>
-                <MoveToTopIcon />
+              <MiradorMenuButton aria-label={t('layer_moveToBackground')} size="small" onClick={() => { moveToBackground(resource.id); }}>
+                <MoveDownSharp />
               </MiradorMenuButton>
             )}
           </div>
@@ -139,7 +139,7 @@ Layer.propTypes = {
     opacity: PropTypes.number,
     visibility: PropTypes.bool,
   })), // eslint-disable-line react/forbid-prop-types
-  moveToTop: PropTypes.func.isRequired,
+  moveToBackground: PropTypes.func.isRequired,
   resource: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   setLayerVisibility: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
@@ -241,7 +241,7 @@ export function CanvasLayers({
   }, [canvasId, updateLayers, windowId]);
 
   /** */
-  const moveToTop = useCallback((layerId) => {
+  const moveToBackground = useCallback((layerId) => {
     const sortedLayers = reorder(layers.map(l => l.id), layers.findIndex(l => l.id === layerId), 0);
 
     const payload = layers.reduce((acc, layer) => {
@@ -286,7 +286,7 @@ export function CanvasLayers({
                       t={t}
                       handleOpacityChange={handleOpacityChange}
                       setLayerVisibility={setLayerVisibility}
-                      moveToTop={moveToTop}
+                      moveToBackground={moveToBackground}
                     />
                   </DraggableLayer>
                 ))
diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
index ad23350c7c..5e45f32ef0 100644
--- a/src/locales/de/translation.json
+++ b/src/locales/de/translation.json
@@ -72,6 +72,7 @@
     "layer_hide": "Ebene verbergen",
     "layer_move": "Ebene verschieben",
     "layer_moveToTop": "Ebene ganz nach vorn bringen",
+    "layer_moveToBackground": "Ebene in der Hintergrund verschieben",
     "layer_opacity": "Ebenendeckkraft",
     "layer_show": "Ebene anzeigen",
     "layers": "Ebenen",
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 8b2bc085f7..9f4fa2e9eb 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -72,6 +72,7 @@
     "layer_hide": "Hide layer",
     "layer_move": "Move layer",
     "layer_moveToTop": "Move layer to top",
+    "layer_moveToBackground": "Move layer to background",
     "layer_opacity": "Layer opacity",
     "layer_show": "Show layer",
     "layers": "Layers",