sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor redesign of Export Dialog (#604)

Browse Source
This commit is contained in:
Lipis 2020-01-29 02:25:47 +02:00 committed by GitHub
parent 97b11b0f53
commit ba4fc0f1b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/actions/actionExport.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { Action } from "./types"; import { Action } from "./types";
import { EditableText } from "../components/EditableText"; import { ProjectName } from "../components/ProjectName";
import { saveAsJSON, loadFromJSON } from "../scene"; import { saveAsJSON, loadFromJSON } from "../scene";
import { load, save } from "../components/icons"; import { load, save } from "../components/icons";
import { ToolButton } from "../components/ToolButton"; import { ToolButton } from "../components/ToolButton";
@ -11,7 +11,7 @@ export const actionChangeProjectName: Action = {
return { appState: { ...appState, name: value } }; return { appState: { ...appState, name: value } };
}, },
PanelComponent: ({ appState, updateData, t }) => ( PanelComponent: ({ appState, updateData, t }) => (
<EditableText <ProjectName
label={t("labels.fileTitle")} label={t("labels.fileTitle")}
value={appState.name || "Unnamed"} value={appState.name || "Unnamed"}
onChange={(name: string) => updateData(name)} onChange={(name: string) => updateData(name)}

2
src/components/ExportDialog.css
View File

@ -40,7 +40,7 @@
.ExportDialog__actions { .ExportDialog__actions {
display: flex; display: flex;
align-items: center; align-items: top;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }

64
src/components/ExportDialog.tsx
View File

@ -129,39 +129,41 @@ function ExportModal({
<h2 id="export-title">{t("buttons.export")}</h2> <h2 id="export-title">{t("buttons.export")}</h2>
<div className="ExportDialog__preview" ref={previewRef}></div> <div className="ExportDialog__preview" ref={previewRef}></div>
<div className="ExportDialog__actions"> <div className="ExportDialog__actions">
<Stack.Row gap={2}> <Stack.Col gap={1}>
<ToolButton <Stack.Row gap={2}>
type="button"
icon={downloadFile}
title={t("buttons.exportToPng")}
aria-label={t("buttons.exportToPng")}
onClick={() => onExportToPng(exportedElements, scale)}
ref={pngButton}
/>
<ToolButton
type="button"
icon={svgFile}
title={t("buttons.exportToSvg")}
aria-label={t("buttons.exportToSvg")}
onClick={() => onExportToSvg(exportedElements, scale)}
/>
{probablySupportsClipboard && (
<ToolButton <ToolButton
type="button" type="button"
icon={clipboard} icon={downloadFile}
title={t("buttons.copyToClipboard")} title={t("buttons.exportToPng")}
aria-label={t("buttons.copyToClipboard")} aria-label={t("buttons.exportToPng")}
onClick={() => onExportToClipboard(exportedElements, scale)} onClick={() => onExportToPng(exportedElements, scale)}
ref={pngButton}
/> />
)} <ToolButton
<ToolButton type="button"
type="button" icon={svgFile}
icon={link} title={t("buttons.exportToSvg")}
title={t("buttons.getShareableLink")} aria-label={t("buttons.exportToSvg")}
aria-label={t("buttons.getShareableLink")} onClick={() => onExportToSvg(exportedElements, scale)}
onClick={() => onExportToBackend(exportedElements)} />
/> {probablySupportsClipboard && (
</Stack.Row> <ToolButton
type="button"
icon={clipboard}
title={t("buttons.copyToClipboard")}
aria-label={t("buttons.copyToClipboard")}
onClick={() => onExportToClipboard(exportedElements, scale)}
/>
)}
<ToolButton
type="button"
icon={link}
title={t("buttons.getShareableLink")}
aria-label={t("buttons.getShareableLink")}
onClick={() => onExportToBackend(exportedElements)}
/>
</Stack.Row>
</Stack.Col>
{actionManager.renderAction( {actionManager.renderAction(
"changeProjectName", "changeProjectName",
@ -172,7 +174,7 @@ function ExportModal({
)} )}
<Stack.Col gap={1}> <Stack.Col gap={1}>
<div className="ExportDialog__scales"> <div className="ExportDialog__scales">
<Stack.Row gap={1} align="baseline"> <Stack.Row gap={2} align="baseline">
{scales.map(s => ( {scales.map(s => (
<ToolButton <ToolButton
key={s} key={s}

11
src/components/EditableText.css → src/components/ProjectName.css
View File

@ -1,18 +1,19 @@
.project-name { .ProjectName {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
border: none; border: none;
padding: 0.25rem; height: 2.5rem;
margin: -0.25rem; line-height: 2.5rem;
padding: 0 0.5rem;
white-space: nowrap; white-space: nowrap;
border-radius: var(--space-factor); border-radius: var(--space-factor);
} }
.project-name:hover { .ProjectName:hover {
background-color: #eee; background-color: #eee;
} }
.project-name:focus { .ProjectName:focus {
outline: none; outline: none;
box-shadow: 0 0 0 2px steelblue; box-shadow: 0 0 0 2px steelblue;
} }

6
src/components/EditableText.tsx → src/components/ProjectName.tsx
View File

@ -1,4 +1,4 @@
import "./EditableText.css"; import "./ProjectName.css";
import React, { Component } from "react"; import React, { Component } from "react";
import { selectNode, removeSelection } from "../utils"; import { selectNode, removeSelection } from "../utils";
@ -9,7 +9,7 @@ type Props = {
label: string; label: string;
}; };
export class EditableText extends Component<Props> { export class ProjectName extends Component<Props> {
private handleFocus = (e: React.FocusEvent<HTMLElement>) => { private handleFocus = (e: React.FocusEvent<HTMLElement>) => {
selectNode(e.currentTarget); selectNode(e.currentTarget);
}; };
@ -33,7 +33,7 @@ export class EditableText extends Component<Props> {
suppressContentEditableWarning suppressContentEditableWarning
contentEditable="true" contentEditable="true"
data-type="wysiwyg" data-type="wysiwyg"
className="project-name" className="ProjectName"
role="textbox" role="textbox"
aria-label={this.props.label} aria-label={this.props.label}
onBlur={this.handleBlur} onBlur={this.handleBlur}