From c2bd376346ef547658a83d6cd96ded6c13de7da8 Mon Sep 17 00:00:00 2001 From: dwelle Date: Fri, 5 Feb 2021 14:59:34 +0100 Subject: [PATCH 1/8] custom --- .gitignore | 1 - package.json | 6 +++ src/actions/actionNavigate.tsx | 11 +++-- src/components/App.tsx | 46 ++++++++++++------- src/components/Avatar.scss | 8 +++- src/components/Avatar.tsx | 4 +- .../BackgroundPickerAndDarkModeToggle.tsx | 9 ---- src/components/CollabButton.tsx | 6 +-- src/components/ExportDialog.tsx | 3 -- src/components/LayerUI.scss | 30 ------------ src/components/LayerUI.tsx | 37 ++------------- src/components/MobileMenu.tsx | 13 ++++++ src/components/UserList.scss | 2 +- src/components/icons.tsx | 4 ++ src/css/styles.scss | 25 ++++++++++ src/excalidraw-app/index.tsx | 1 + src/locales/en.json | 1 + src/packages/excalidraw/.gitignore | 2 +- src/packages/excalidraw/index.tsx | 18 +++++++- src/packages/excalidraw/package.json | 1 + src/packages/utils.ts | 12 +++++ src/renderer/renderScene.ts | 13 ++++-- src/types.ts | 9 +++- src/utils.ts | 2 +- 24 files changed, 151 insertions(+), 113 deletions(-) diff --git a/.gitignore b/.gitignore index f21ef9c009cc..48a17db0dfd3 100644 --- a/.gitignore +++ b/.gitignore @@ -11,7 +11,6 @@ *.log *.tgz build -dist firebase logs node_modules diff --git a/package.json b/package.json index 2bfb2abdf38d..20110e4b4131 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,8 @@ { + "main": "src/packages/excalidraw/dist/excalidraw.min.js", + "files": [ + "src/packages/excalidraw/dist/*" + ], "browserslist": { "production": [ ">0.2%", @@ -83,6 +87,8 @@ "private": true, "scripts": { "build-node": "node ./scripts/build-node.js", + "build:package": "cd src/packages/excalidraw && npm run build", + "build:package:deploy": "npm run build:package && git add . && git commit -m release --no-edit --no-verify && git push -f && git rev-parse --short HEAD", "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build", "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build", "build:version": "node ./scripts/build-version.js", diff --git a/src/actions/actionNavigate.tsx b/src/actions/actionNavigate.tsx index 2da47779521a..c9197b8ea259 100644 --- a/src/actions/actionNavigate.tsx +++ b/src/actions/actionNavigate.tsx @@ -42,16 +42,21 @@ export const actionGoToCollaborator = register({ return null; } - const { background, stroke } = getClientColors(clientId, appState); + const { background, stroke } = getClientColors( + clientId || clientId, + appState, + ); + const picture = collaborator.picture; + const shortName = getClientInitials(collaborator.username); return ( updateData(collaborator.pointer)} > - {shortName} + {picture ? {shortName} : shortName} ); }, diff --git a/src/components/App.tsx b/src/components/App.tsx index b670ca1a2fa0..a93d44097720 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -461,6 +461,7 @@ class App extends React.Component { showExitZenModeBtn={ typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled } + onHomeButtonClick={this.props.onHomeButtonClick} />
{this.state.showStats && ( @@ -691,6 +692,13 @@ class App extends React.Component { }; } + if (initialData?.scrollX != null) { + scene.appState.scrollX = initialData.scrollX; + } + if (initialData?.scrollY != null) { + scene.appState.scrollY = initialData.scrollY; + } + this.resetHistory(); this.syncActionResult({ ...scene, @@ -1263,26 +1271,30 @@ class App extends React.Component { this.setState({ toastMessage: null }); }; - public updateScene = withBatchedUpdates((sceneData: SceneData) => { - if (sceneData.commitToHistory) { - history.resumeRecording(); - } + public updateScene = withBatchedUpdates( + (sceneData: { + elements?: SceneData["elements"]; + appState?: Pick; + collaborators?: SceneData["collaborators"]; + commitToHistory?: SceneData["commitToHistory"]; + }) => { + if (sceneData.commitToHistory) { + history.resumeRecording(); + } - // currently we only support syncing background color - if (sceneData.appState?.viewBackgroundColor) { - this.setState({ - viewBackgroundColor: sceneData.appState.viewBackgroundColor, - }); - } + if (sceneData.appState) { + this.setState(sceneData.appState); + } - if (sceneData.elements) { - this.scene.replaceAllElements(sceneData.elements); - } + if (sceneData.elements) { + this.scene.replaceAllElements(sceneData.elements); + } - if (sceneData.collaborators) { - this.setState({ collaborators: sceneData.collaborators }); - } - }); + if (sceneData.collaborators) { + this.setState({ collaborators: sceneData.collaborators }); + } + }, + ); private onSceneUpdated = () => { this.setState({}); diff --git a/src/components/Avatar.scss b/src/components/Avatar.scss index d077d916bf77..e9e542c14409 100644 --- a/src/components/Avatar.scss +++ b/src/components/Avatar.scss @@ -4,7 +4,7 @@ .Avatar { width: 2.5rem; height: 2.5rem; - border-radius: 1.25rem; + border-radius: 50%; display: flex; justify-content: center; align-items: center; @@ -12,5 +12,11 @@ cursor: pointer; font-size: 0.8rem; font-weight: 500; + overflow: hidden; + + img { + width: 100%; + height: 100%; + } } } diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 2b85137077c5..5b143321b2a3 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -3,7 +3,7 @@ import "./Avatar.scss"; import React from "react"; type AvatarProps = { - children: string; + children: JSX.Element | string; onClick: (e: React.MouseEvent) => void; color: string; border: string; @@ -12,7 +12,7 @@ type AvatarProps = { export const Avatar = ({ children, color, border, onClick }: AvatarProps) => (
{children} diff --git a/src/components/BackgroundPickerAndDarkModeToggle.tsx b/src/components/BackgroundPickerAndDarkModeToggle.tsx index f2eba1315a5d..e502b6560183 100644 --- a/src/components/BackgroundPickerAndDarkModeToggle.tsx +++ b/src/components/BackgroundPickerAndDarkModeToggle.tsx @@ -1,7 +1,6 @@ import React from "react"; import { ActionManager } from "../actions/manager"; import { AppState } from "../types"; -import { DarkModeToggle } from "./DarkModeToggle"; export const BackgroundPickerAndDarkModeToggle = ({ appState, @@ -14,13 +13,5 @@ export const BackgroundPickerAndDarkModeToggle = ({ }) => (
{actionManager.renderAction("changeViewBackgroundColor")} -
- { - setAppState({ appearance }); - }} - /> -
); diff --git a/src/components/CollabButton.tsx b/src/components/CollabButton.tsx index f1412f7231e9..ba579655c76a 100644 --- a/src/components/CollabButton.tsx +++ b/src/components/CollabButton.tsx @@ -28,11 +28,7 @@ const CollabButton = ({ title={t("labels.liveCollaboration")} aria-label={t("labels.liveCollaboration")} showAriaLabel={useIsMobile()} - > - {collaboratorCount > 0 && ( -
{collaboratorCount}
- )} - + /> ); }; diff --git a/src/components/ExportDialog.tsx b/src/components/ExportDialog.tsx index cc4219a51696..bc1135b45a4a 100644 --- a/src/components/ExportDialog.tsx +++ b/src/components/ExportDialog.tsx @@ -169,9 +169,6 @@ const ExportModal = ({ /> )} -
- {actionManager.renderAction("changeProjectName")} -
{scales.map((s) => { const [width, height] = getExportSize( diff --git a/src/components/LayerUI.scss b/src/components/LayerUI.scss index 60fba5acb0fd..389ce4f207fb 100644 --- a/src/components/LayerUI.scss +++ b/src/components/LayerUI.scss @@ -40,36 +40,6 @@ .layer-ui__wrapper { z-index: var(--zIndex-layerUI); - .encrypted-icon { - position: relative; - margin-inline-start: 15px; - display: flex; - justify-content: center; - align-items: center; - border-radius: var(--space-factor); - color: $oc-green-9; - - svg { - width: 1.2rem; - height: 1.2rem; - } - } - - &__github-corner { - top: 0; - - :root[dir="ltr"] & { - right: 0; - } - - :root[dir="rtl"] & { - left: 0; - } - - position: absolute; - width: 40px; - } - &__footer { position: absolute; z-index: 100; diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 103b0ef846c4..e97ea7673d1e 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -25,9 +25,8 @@ import CollabButton from "./CollabButton"; import { ErrorDialog } from "./ErrorDialog"; import { ExportCB, ExportDialog } from "./ExportDialog"; import { FixedSideContainer } from "./FixedSideContainer"; -import { GitHubCorner } from "./GitHubCorner"; import { HintViewer } from "./HintViewer"; -import { exportFile, load, shield, trash } from "./icons"; +import { exportFile, load, trash } from "./icons"; import { Island } from "./Island"; import "./LayerUI.scss"; import { LibraryUnit } from "./LibraryUnit"; @@ -63,6 +62,7 @@ interface LayerUIProps { ) => void; renderCustomFooter?: (isMobile: boolean) => JSX.Element; viewModeEnabled: boolean; + onHomeButtonClick?: () => void; } const useOnClickOutside = ( @@ -319,24 +319,10 @@ const LayerUI = ({ onExportToBackend, renderCustomFooter, viewModeEnabled, + onHomeButtonClick, }: LayerUIProps) => { const isMobile = useIsMobile(); - const renderEncryptedIcon = () => ( - - - {shield} - - - ); - const renderExportDialog = () => { const createExporter = (type: ExportType): ExportCB => async ( exportedElements, @@ -572,27 +558,12 @@ const LayerUI = ({ zoom={appState.zoom} /> - {renderEncryptedIcon()}
); }; - const renderGitHubCorner = () => { - return ( - - ); - }; const renderFooter = () => (