Replace "move to top" with "move to background"

ProjectMirador · Dec 16, 2024 · 2761828 · 2761828
1 parent 80435b1
commit 2761828
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",