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

@ -1,7 +1,13 @@
import React from "react";
import { KEYS } from "../keys";
import { register } from "./register";
import { ExcalidrawElement } from "../element/types";
import { duplicateElement } from "../element";
import { isSomeElementSelected } from "../scene";
import { ToolButton } from "../components/ToolButton";
import { clone } from "../components/icons";
import { t } from "../i18n";
import { getShortcutKey } from "../utils";
export const actionDuplicateSelection = register({
name: "duplicateSelection",
@ -28,4 +34,16 @@ export const actionDuplicateSelection = register({
},
contextItemLabel: "labels.duplicateSelection",
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === "d",
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
type="button"
icon={clone}
title={`${t("labels.duplicateSelection")} ${getShortcutKey(
"CtrlOrCmd+D",
)}`}
aria-label={t("labels.duplicateSelection")}
onClick={() => updateData(null)}
visible={isSomeElementSelected(elements, appState)}
/>
),
});