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 ? : }
{ layer.index !== 0 && (
- { moveToTop(resource.id); }}>
-
+ { moveToBackground(resource.id); }}>
+
)}
@@ -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}
/>
))
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",