From 5c6a2dec78839b659f494c7fe2f73c0d563e8a2c Mon Sep 17 00:00:00 2001 From: islxyqwe Date: Wed, 2 Aug 2023 11:08:13 +0800 Subject: [PATCH] fix: change logo --- .../src/assets/kanaries-logo.svg | 1 - .../graphic-walker/src/assets/kanaries.png | Bin 0 -> 4908 bytes .../src/components/timeoutImg.tsx | 29 ++++++++++++ .../src/components/toolbar/components.tsx | 1 + .../src/visualSettings/index.tsx | 43 ++++++++---------- 5 files changed, 50 insertions(+), 24 deletions(-) delete mode 100644 packages/graphic-walker/src/assets/kanaries-logo.svg create mode 100644 packages/graphic-walker/src/assets/kanaries.png create mode 100644 packages/graphic-walker/src/components/timeoutImg.tsx diff --git a/packages/graphic-walker/src/assets/kanaries-logo.svg b/packages/graphic-walker/src/assets/kanaries-logo.svg deleted file mode 100644 index fbff3c6f..00000000 --- a/packages/graphic-walker/src/assets/kanaries-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/graphic-walker/src/assets/kanaries.png b/packages/graphic-walker/src/assets/kanaries.png new file mode 100644 index 0000000000000000000000000000000000000000..477bc98f2987579546a3bba3ca4db36afc958466 GIT binary patch literal 4908 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 AnE(I) literal 0 HcmV?d00001 diff --git a/packages/graphic-walker/src/components/timeoutImg.tsx b/packages/graphic-walker/src/components/timeoutImg.tsx new file mode 100644 index 00000000..7901c6f9 --- /dev/null +++ b/packages/graphic-walker/src/components/timeoutImg.tsx @@ -0,0 +1,29 @@ +import React, { useRef, useState, useEffect } from 'react'; + +export const ImageWithFallback = ( + props: React.ImgHTMLAttributes & { fallbackSrc: string; timeout: number } +) => { + const { src, fallbackSrc, timeout, ...rest } = props; + const [failed, setFailed] = useState(false); + const imgLoadedOnInitSrc = useRef(false); + + useEffect(() => { + const timer = setTimeout(() => { + if (!imgLoadedOnInitSrc.current) setFailed(true); + }, timeout); + return () => clearTimeout(timer); + }, []); + + return ( + { + setFailed(true); + }} + onLoad={() => { + imgLoadedOnInitSrc.current = true; + }} + /> + ); +}; diff --git a/packages/graphic-walker/src/components/toolbar/components.tsx b/packages/graphic-walker/src/components/toolbar/components.tsx index 4ae33c3f..d3cb583f 100644 --- a/packages/graphic-walker/src/components/toolbar/components.tsx +++ b/packages/graphic-walker/src/components/toolbar/components.tsx @@ -74,6 +74,7 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean; dark: bo outline: none; width: ${({ split }) => split ? 'calc(var(--height) + 10px)' : 'var(--height)'}; height: var(--height); + align-items: center; overflow: hidden; color: ${({ dark }) => dark ? 'var(--dark-mode-color)' : 'var(--color)'}; position: relative; diff --git a/packages/graphic-walker/src/visualSettings/index.tsx b/packages/graphic-walker/src/visualSettings/index.tsx index affbf54c..6cbe5bab 100644 --- a/packages/graphic-walker/src/visualSettings/index.tsx +++ b/packages/graphic-walker/src/visualSettings/index.tsx @@ -33,7 +33,8 @@ import Toolbar, { ToolbarItemProps } from '../components/toolbar'; import { ButtonWithShortcut } from './menubar'; import { useCurrentMediaTheme } from '../utils/media'; import throttle from '../utils/throttle'; -import KanariesLogo from '../assets/kanaries-logo.svg'; +import KanariesLogo from '../assets/kanaries.png'; +import { ImageWithFallback } from '../components/timeoutImg'; const Invisible = styled.div` clip: rect(1px, 1px, 1px, 1px); @@ -101,30 +102,8 @@ const VisualSettings: React.FC = ({ const dark = useCurrentMediaTheme(darkModePreference) === 'dark'; - console.log('kanaries logo', KanariesLogo); - const items = useMemo(() => { const builtInItems = [ - { - key: 'kanaries', - label: 'kanaries', - icon: () => ( - // Kanaries brand info is not allowed to be removed or changed unless you are granted with special permission. - - { - // @ts-ignore - e.target.src = KanariesLogo; - }} - /> - - ), - }, - '-', { key: 'undo', label: 'undo (Ctrl + Z)', @@ -512,6 +491,24 @@ const VisualSettings: React.FC = ({ commonStore.setShowCodeExportPanel(true); }, }, + '-', + { + key: 'kanaries', + label: 'kanaries', + icon: () => ( + // Kanaries brand info is not allowed to be removed or changed unless you are granted with special permission. + + + ), + }, ] as ToolbarItemProps[]; const items = builtInItems.filter((item) => typeof item === 'string' || !exclude.includes(item.key));