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

Button for shortcuts (#1253)

Browse Source
This commit is contained in:
Mohit kumar Bajoria 2020-04-07 16:12:10 +05:30 committed by GitHub
parent 22160f50d3
commit e4c154f43e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 70 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/actions/actionMenu.tsx
View File

@ -6,6 +6,7 @@ import { showSelectedShapeActions } from "../element";
import { register } from "./register";
import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
import { KEYS } from "../keys";
import { HelpIcon } from "../components/HelpIcon";
export const actionToggleCanvasMenu = register({
name: "toggleCanvasMenu",
@ -63,3 +64,20 @@ export const actionFullScreen = register({
},
keyTest: (event) => event.keyCode === KEYS.F_KEY_CODE,
});
export const actionShortcuts = register({
name: "toggleShortcuts",
perform: (_elements, appState) => {
return {
appState: {
...appState,
showShortcutsDialog: true,
},
commitToHistory: false,
};
},
PanelComponent: ({ updateData }) => (
<HelpIcon title={t("buttons.showShortcuts")} onClick={updateData} />
),
keyTest: (event) => event.key === KEYS.QUESTION_MARK,
});

1
src/actions/index.ts
View File

@ -40,4 +40,5 @@ export {
actionToggleCanvasMenu,
actionToggleEditMenu,
actionFullScreen,
actionShortcuts,
} from "./actionMenu";

3
src/actions/types.ts
View File

@ -49,7 +49,8 @@ export type ActionName =
| "zoomOut"
| "resetZoom"
| "changeFontFamily"
| "toggleFullScreen";
| "toggleFullScreen"
| "toggleShortcuts";
export interface Action {
name: ActionName;

31
src/components/HelpIcon.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from "react";
import { getShortcutKey } from "../utils";
type HelpIconProps = {
title?: string;
name?: string;
id?: string;
onClick?(): void;
};
const ICON = (
<svg
width="30"
height="22"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" />
</svg>
);
export function HelpIcon(props: HelpIconProps) {
return (
<label
title={`${props.title} ${getShortcutKey("?")}`}
className="help-icon"
>
<div onClick={props.onClick}>{ICON}</div>
</label>
);
}

1
src/components/LayerUI.tsx
View File

@ -202,6 +202,7 @@ export const LayerUI = React.memo(
languages={languages}
floating
/>
{actionManager.renderAction("toggleShortcuts")}
{appState.scrolledOutside && (
<button
className="scroll-back-to-content"

3
src/locales/en.json
View File

@ -71,7 +71,8 @@
"redo": "Redo",
"roomDialog": "Start live collaboration",
"createNewRoom": "Create new room",
"toggleFullScreen": "Toggle full screen"
"toggleFullScreen": "Toggle full screen",
"showShortcuts": "Show shortcuts"
},
"alerts": {
"clearReset": "This will clear the whole canvas. Are you sure?",

17
src/styles.scss
View File

@ -372,10 +372,10 @@ button,
.dropdown-select__language.dropdown-select--floating {
bottom: 10px;
:root[dir="ltr"] & {
right: 10px;
right: 44px;
}
:root[dir="rtl"] & {
left: 10px;
left: 44px;
}
}
@ -410,6 +410,19 @@ button,
padding: 10px 20px;
}
.help-icon {
position: fixed;
cursor: pointer;
fill: #868e96;
bottom: 14px;
:root[dir="ltr"] & {
right: 14px;
}
:root[dir="rtl"] & {
left: 14px;
}
}
@media #{$media-query} {
aside {
display: none;