Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-19 21:11:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make the drag preview always use the tech frame (#87)

Browse Source 
Overrides the frameless block frame if generating a drag preview. Also
fixes a type issue with BlockFrame_Tech
This commit is contained in:
Evan Simkowitz 2024-06-27 15:26:40 -07:00 committed by GitHub
parent c9cf88eb5e
commit f1c8d63ab2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 67 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
frontend/app/block/block.tsx
View File

@ -210,55 +210,63 @@ interface BlockFrameProps {
dragHandleRef?: React.RefObject<HTMLDivElement>; dragHandleRef?: React.RefObject<HTMLDivElement>;
} }
const BlockFrame_Tech = React.memo( const BlockFrame_Tech_Component = ({
({ blockId, onClose, onClick, preview, blockRef, dragHandleRef, children }: BlockFrameProps) => { blockId,
const [blockData] = WOS.useWaveObjectValue<Block>(WOS.makeORef("block", blockId)); onClose,
const settingsConfig = jotai.useAtomValue(atoms.settingsConfigAtom); onClick,
const isFocusedAtom = useBlockAtom<boolean>(blockId, "isFocused", () => { preview,
return jotai.atom((get) => { blockRef,
const winData = get(atoms.waveWindow); dragHandleRef,
return winData.activeblockid === blockId; children,
}); }: BlockFrameProps) => {
const [blockData] = WOS.useWaveObjectValue<Block>(WOS.makeORef("block", blockId));
const settingsConfig = jotai.useAtomValue(atoms.settingsConfigAtom);
const isFocusedAtom = useBlockAtom<boolean>(blockId, "isFocused", () => {
return jotai.atom((get) => {
const winData = get(atoms.waveWindow);
return winData.activeblockid === blockId;
}); });
let isFocused = jotai.useAtomValue(isFocusedAtom); });
const blockIcon = useBlockIcon(blockId); let isFocused = jotai.useAtomValue(isFocusedAtom);
if (preview) { const blockIcon = useBlockIcon(blockId);
isFocused = true; if (preview) {
} isFocused = true;
let style: React.CSSProperties = {};
if (!isFocused && blockData?.meta?.["frame:bordercolor"]) {
style.borderColor = blockData.meta["frame:bordercolor"];
}
if (isFocused && blockData?.meta?.["frame:bordercolor:focused"]) {
style.borderColor = blockData.meta["frame:bordercolor:focused"];
}
return (
<div
className={clsx(
"block",
"block-frame-tech",
isFocused ? "block-focused" : null,
preview ? "block-preview" : null
)}
onClick={onClick}
ref={blockRef}
style={style}
>
<div
className="block-frame-tech-header"
ref={dragHandleRef}
onContextMenu={(e) => handleHeaderContextMenu(e, blockData, onClose)}
>
{getBlockHeaderText(blockIcon, blockData, settingsConfig)}
</div>
<div className={clsx("block-frame-tech-close")} onClick={onClose}>
<i className="fa fa-solid fa-xmark fa-fw" />
</div>
{preview ? <div className="block-frame-preview" /> : children}
</div>
);
} }
); let style: React.CSSProperties = {};
if (!isFocused && blockData?.meta?.["frame:bordercolor"]) {
style.borderColor = blockData.meta["frame:bordercolor"];
}
if (isFocused && blockData?.meta?.["frame:bordercolor:focused"]) {
style.borderColor = blockData.meta["frame:bordercolor:focused"];
}
return (
<div
className={clsx(
"block",
"block-frame-tech",
isFocused ? "block-focused" : null,
preview ? "block-preview" : null
)}
onClick={onClick}
ref={blockRef}
style={style}
>
<div
className="block-frame-tech-header"
ref={dragHandleRef}
onContextMenu={(e) => handleHeaderContextMenu(e, blockData, onClose)}
>
{getBlockHeaderText(blockIcon, blockData, settingsConfig)}
</div>
<div className={clsx("block-frame-tech-close")} onClick={onClose}>
<i className="fa fa-solid fa-xmark fa-fw" />
</div>
{preview ? <div className="block-frame-preview" /> : children}
</div>
);
};
const BlockFrame_Tech = React.memo(BlockFrame_Tech_Component) as typeof BlockFrame_Tech_Component;
const BlockFrame_Frameless = ({ const BlockFrame_Frameless = ({
blockId, blockId,
@ -343,15 +351,18 @@ const BlockFrame = React.memo((props: BlockFrameProps) => {
return null; return null;
} }
let FrameElem = BlockFrame_Tech; let FrameElem = BlockFrame_Tech;
// if 0 or 1 blocks, use frameless, otherwise use tech // Preview should always render as the full tech frame
const numBlocks = tabData?.blockids?.length ?? 0; if (!props.preview) {
if (numBlocks <= 1) { // if 0 or 1 blocks, use frameless, otherwise use tech
FrameElem = BlockFrame_Frameless; const numBlocks = tabData?.blockids?.length ?? 0;
} if (numBlocks <= 1) {
if (blockData?.meta?.["frame"] === "tech") { FrameElem = BlockFrame_Frameless;
FrameElem = BlockFrame_Tech; }
} else if (blockData?.meta?.["frame"] === "frameless") { if (blockData?.meta?.["frame"] === "tech") {
FrameElem = BlockFrame_Frameless; FrameElem = BlockFrame_Tech;
} else if (blockData?.meta?.["frame"] === "frameless") {
FrameElem = BlockFrame_Frameless;
}
} }
return <FrameElem {...props} />; return <FrameElem {...props} />;
}); });