mirror of
https://github.com/excalidraw/excalidraw.git
synced 2024-11-10 11:35:52 +01:00
Add zindex to panel (#736)
* Add z-index options back to panel * Add formatting for z-index panel buttons * make z-index buttons all the same width * make z-index button spacing even * use svg icons & translations * add ui legend Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
wboucher
GitHub
parent
b09373acf7
commit
471ea4a747
@ -1,3 +1,4 @@
|
||||
import React from "react";
|
||||
import { Action } from "./types";
|
||||
import {
|
||||
moveOneLeft,
|
||||
@ -7,6 +8,98 @@ import {
|
||||
} from "../zindex";
|
||||
import { getSelectedIndices } from "../scene";
|
||||
import { KEYS } from "../keys";
|
||||
import { t } from "../i18n";
|
||||
|
||||
const ICONS = {
|
||||
bringForward: (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
|
||||
fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.9988945999999999"
|
||||
/>
|
||||
<path
|
||||
d="M22 9.556C22 8.696 21.303 8 20.444 8H16v8H8v4.444C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
|
||||
stroke="#000"
|
||||
stroke-width="1.9988945999999999"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
sendBackward: (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
|
||||
fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.9988945999999999"
|
||||
/>
|
||||
<path
|
||||
d="M22 9.556C22 8.696 21.303 8 20.444 8H9.556C8.696 8 8 8.697 8 9.556v10.888C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
|
||||
stroke="#000"
|
||||
stroke-width="1.9988945999999999"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
bringToFront: (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M13 21a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1h-3v5h-5v3zM11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h3V6h5V3z"
|
||||
stroke="#000"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
|
||||
fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="2.00001"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
sendToBack: (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
|
||||
fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="2.00001"
|
||||
/>
|
||||
<path
|
||||
d="M11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h8V3zM22 14a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h8v-8z"
|
||||
stroke="#000"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
export const actionSendBackward: Action = {
|
||||
name: "sendBackward",
|
||||
@ -20,6 +113,16 @@ export const actionSendBackward: Action = {
|
||||
keyPriority: 40,
|
||||
commitToHistory: () => true,
|
||||
keyTest: event => event[KEYS.META] && event.altKey && event.key === "B",
|
||||
PanelComponent: ({ updateData }) => (
|
||||
<button
|
||||
type="button"
|
||||
className="zIndexButton"
|
||||
onClick={e => updateData(null)}
|
||||
title={t("labels.sendBackward")}
|
||||
>
|
||||
{ICONS.sendBackward}
|
||||
</button>
|
||||
),
|
||||
};
|
||||
|
||||
export const actionBringForward: Action = {
|
||||
@ -34,6 +137,16 @@ export const actionBringForward: Action = {
|
||||
keyPriority: 40,
|
||||
commitToHistory: () => true,
|
||||
keyTest: event => event[KEYS.META] && event.altKey && event.key === "F",
|
||||
PanelComponent: ({ updateData }) => (
|
||||
<button
|
||||
type="button"
|
||||
className="zIndexButton"
|
||||
onClick={e => updateData(null)}
|
||||
title={t("labels.bringForward")}
|
||||
>
|
||||
{ICONS.bringForward}
|
||||
</button>
|
||||
),
|
||||
};
|
||||
|
||||
export const actionSendToBack: Action = {
|
||||
@ -47,6 +160,16 @@ export const actionSendToBack: Action = {
|
||||
contextItemLabel: "labels.sendToBack",
|
||||
commitToHistory: () => true,
|
||||
keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "B",
|
||||
PanelComponent: ({ updateData }) => (
|
||||
<button
|
||||
type="button"
|
||||
className="zIndexButton"
|
||||
onClick={e => updateData(null)}
|
||||
title={t("labels.sendToBack")}
|
||||
>
|
||||
{ICONS.sendToBack}
|
||||
</button>
|
||||
),
|
||||
};
|
||||
|
||||
export const actionBringToFront: Action = {
|
||||
@ -60,4 +183,14 @@ export const actionBringToFront: Action = {
|
||||
commitToHistory: () => true,
|
||||
contextItemLabel: "labels.bringToFront",
|
||||
keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "F",
|
||||
PanelComponent: ({ updateData }) => (
|
||||
<button
|
||||
type="button"
|
||||
className="zIndexButton"
|
||||
onClick={e => updateData(null)}
|
||||
title={t("labels.bringToFront")}
|
||||
>
|
||||
{ICONS.bringToFront}
|
||||
</button>
|
||||
),
|
||||
};
|
||||
|
||||
@ -275,6 +275,16 @@ const LayerUI = React.memo(
|
||||
|
||||
{actionManager.renderAction("changeOpacity")}
|
||||
|
||||
<fieldset>
|
||||
<legend>{t("labels.layers")}</legend>
|
||||
<div className="buttonList">
|
||||
{actionManager.renderAction("sendToBack")}
|
||||
{actionManager.renderAction("sendBackward")}
|
||||
{actionManager.renderAction("bringToFront")}
|
||||
{actionManager.renderAction("bringForward")}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{actionManager.renderAction("deleteSelectedElements")}
|
||||
</div>
|
||||
</Island>
|
||||
|
||||
@ -39,7 +39,8 @@
|
||||
"fileTitle": "File title",
|
||||
"colorPicker": "Color picker",
|
||||
"canvasBackground": "Canvas background",
|
||||
"drawingCanvas": "Drawing Canvas"
|
||||
"drawingCanvas": "Drawing Canvas",
|
||||
"layers": "Layers"
|
||||
},
|
||||
"buttons": {
|
||||
"clearReset": "Clear the canvas & reset background color",
|
||||
|
||||
@ -87,6 +87,7 @@ button,
|
||||
border-radius: 4px;
|
||||
margin: 0.125rem 0;
|
||||
padding: 0.25rem;
|
||||
white-space: nowrap;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@ -248,6 +249,11 @@ button,
|
||||
white-space: nowrap; /* added line */
|
||||
}
|
||||
|
||||
.zIndexButton {
|
||||
width: 26px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.scroll-back-to-content {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user