diff --git a/src/actions/actionExport.tsx b/src/actions/actionExport.tsx index af540cd4..6d3841b3 100644 --- a/src/actions/actionExport.tsx +++ b/src/actions/actionExport.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Action } from "./types"; -import { EditableText } from "../components/EditableText"; +import { ProjectName } from "../components/ProjectName"; import { saveAsJSON, loadFromJSON } from "../scene"; import { load, save } from "../components/icons"; import { ToolButton } from "../components/ToolButton"; @@ -11,7 +11,7 @@ export const actionChangeProjectName: Action = { return { appState: { ...appState, name: value } }; }, PanelComponent: ({ appState, updateData, t }) => ( - updateData(name)} diff --git a/src/components/ExportDialog.css b/src/components/ExportDialog.css index 547298fa..db1ee57a 100644 --- a/src/components/ExportDialog.css +++ b/src/components/ExportDialog.css @@ -40,7 +40,7 @@ .ExportDialog__actions { display: flex; - align-items: center; + align-items: top; justify-content: space-between; flex-wrap: wrap; } diff --git a/src/components/ExportDialog.tsx b/src/components/ExportDialog.tsx index 72258d45..d4a7a409 100644 --- a/src/components/ExportDialog.tsx +++ b/src/components/ExportDialog.tsx @@ -129,39 +129,41 @@ function ExportModal({

{t("buttons.export")}

- - onExportToPng(exportedElements, scale)} - ref={pngButton} - /> - onExportToSvg(exportedElements, scale)} - /> - {probablySupportsClipboard && ( + + onExportToClipboard(exportedElements, scale)} + icon={downloadFile} + title={t("buttons.exportToPng")} + aria-label={t("buttons.exportToPng")} + onClick={() => onExportToPng(exportedElements, scale)} + ref={pngButton} /> - )} - onExportToBackend(exportedElements)} - /> - + onExportToSvg(exportedElements, scale)} + /> + {probablySupportsClipboard && ( + onExportToClipboard(exportedElements, scale)} + /> + )} + onExportToBackend(exportedElements)} + /> + + {actionManager.renderAction( "changeProjectName", @@ -172,7 +174,7 @@ function ExportModal({ )}
- + {scales.map(s => ( { +export class ProjectName extends Component { private handleFocus = (e: React.FocusEvent) => { selectNode(e.currentTarget); }; @@ -33,7 +33,7 @@ export class EditableText extends Component { suppressContentEditableWarning contentEditable="true" data-type="wysiwyg" - className="project-name" + className="ProjectName" role="textbox" aria-label={this.props.label} onBlur={this.handleBlur}