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

Modify action buttons visibility for desktop (#1156)

Browse Source
This commit is contained in:
Sanghyeon Lee 2020-04-02 16:52:24 +09:00 committed by GitHub
parent ffec3af635
commit 634410ad48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Actions.tsx
View File

@ -1,7 +1,8 @@
import React from "react"; import React from "react";
import { AppState } from "../types";
import { ExcalidrawElement } from "../element/types"; import { ExcalidrawElement } from "../element/types";
import { ActionManager } from "../actions/manager"; import { ActionManager } from "../actions/manager";
import { hasBackground, hasStroke, hasText } from "../scene"; import { hasBackground, hasStroke, hasText, getTargetElement } from "../scene";
import { t } from "../i18n"; import { t } from "../i18n";
import { SHAPES } from "../shapes"; import { SHAPES } from "../shapes";
import { ToolButton } from "./ToolButton"; import { ToolButton } from "./ToolButton";
@ -11,14 +12,18 @@ import Stack from "./Stack";
import useIsMobile from "../is-mobile"; import useIsMobile from "../is-mobile";
export function SelectedShapeActions({ export function SelectedShapeActions({
targetElements, appState,
elements,
renderAction, renderAction,
elementType, elementType,
}: { }: {
targetElements: readonly ExcalidrawElement[]; appState: AppState;
elements: readonly ExcalidrawElement[];
renderAction: ActionManager["renderAction"]; renderAction: ActionManager["renderAction"];
elementType: ExcalidrawElement["type"]; elementType: ExcalidrawElement["type"];
}) { }) {
const targetElements = getTargetElement(elements, appState);
const isEditing = Boolean(appState.editingElement);
const isMobile = useIsMobile(); const isMobile = useIsMobile();
return ( return (
@ -62,7 +67,7 @@ export function SelectedShapeActions({
{renderAction("bringForward")} {renderAction("bringForward")}
</div> </div>
</fieldset> </fieldset>
{!isMobile && ( {!isMobile && !isEditing && targetElements.length > 0 && (
<fieldset> <fieldset>
<legend>{t("labels.actions")}</legend> <legend>{t("labels.actions")}</legend>
<div className="buttonList"> <div className="buttonList">

5
src/components/LayerUI.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { showSelectedShapeActions } from "../element"; import { showSelectedShapeActions } from "../element";
import { calculateScrollCenter, getTargetElement } from "../scene"; import { calculateScrollCenter } from "../scene";
import { exportCanvas } from "../data"; import { exportCanvas } from "../data";
import { AppState } from "../types"; import { AppState } from "../types";
@ -137,7 +137,8 @@ export const LayerUI = React.memo(
> >
<Island padding={4}> <Island padding={4}>
<SelectedShapeActions <SelectedShapeActions
targetElements={getTargetElement(elements, appState)} appState={appState}
elements={elements}
renderAction={actionManager.renderAction} renderAction={actionManager.renderAction}
elementType={appState.elementType} elementType={appState.elementType}
/> />

5
src/components/MobileMenu.tsx
View File

@ -9,7 +9,7 @@ import { ExcalidrawElement } from "../element/types";
import { FixedSideContainer } from "./FixedSideContainer"; import { FixedSideContainer } from "./FixedSideContainer";
import { Island } from "./Island"; import { Island } from "./Island";
import { HintViewer } from "./HintViewer"; import { HintViewer } from "./HintViewer";
import { calculateScrollCenter, getTargetElement } from "../scene"; import { calculateScrollCenter } from "../scene";
import { SelectedShapeActions, ShapesSwitcher } from "./Actions"; import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
import { Section } from "./Section"; import { Section } from "./Section";
import { RoomDialog } from "./RoomDialog"; import { RoomDialog } from "./RoomDialog";
@ -110,7 +110,8 @@ export function MobileMenu({
showSelectedShapeActions(appState, elements) ? ( showSelectedShapeActions(appState, elements) ? (
<Section className="App-mobile-menu" heading="selectedShapeActions"> <Section className="App-mobile-menu" heading="selectedShapeActions">
<SelectedShapeActions <SelectedShapeActions
targetElements={getTargetElement(elements, appState)} appState={appState}
elements={elements}
renderAction={actionManager.renderAction} renderAction={actionManager.renderAction}
elementType={appState.elementType} elementType={appState.elementType}
/> />