Add duplicate button for mobile view (#1146)

* Add a icon for dulplication

* Add PanelComponent for duplication

* Add duplicate button for mobile

* Add styles for layout action buttons

* Add a translation for 'Actions'

* Show left action buttons only for desktop

* Add duplicate button at the bottom of mobile

It is provided depending on whether or not it is `multiElement` to maintain space between buttons.
This commit is contained in:
Sanghyeon Lee 2020-04-02 00:13:53 +09:00 committed by GitHub
parent e9f80d7c31
commit 86d0da5204
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 49 additions and 7 deletions

View file

@ -8,6 +8,7 @@ import { ToolButton } from "./ToolButton";
import { capitalizeString, getShortcutKey } from "../utils";
import { CURSOR_TYPE } from "../constants";
import Stack from "./Stack";
import useIsMobile from "../is-mobile";
export function SelectedShapeActions({
targetElements,
@ -18,6 +19,8 @@ export function SelectedShapeActions({
renderAction: ActionManager["renderAction"];
elementType: ExcalidrawElement["type"];
}) {
const isMobile = useIsMobile();
return (
<div className="panelColumn">
{renderAction("changeStrokeColor")}
@ -59,12 +62,15 @@ export function SelectedShapeActions({
{renderAction("bringForward")}
</div>
</fieldset>
<fieldset>
<legend>Layers Actions</legend>
<div className="buttonList">
{renderAction("deleteSelectedElements")}
</div>
</fieldset>
{!isMobile && (
<fieldset>
<legend>{t("labels.actions")}</legend>
<div className="buttonList">
{renderAction("duplicateSelection")}
{renderAction("deleteSelectedElements")}
</div>
</fieldset>
)}
</div>
);
}