trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: tabs in sidebar

Browse source
This commit is contained in:
trafficlunar 2025-02-08 14:22:56 +00:00
parent d3c25422d4
commit a5ddc3f781
3 changed files with 64 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/menubar/ViewMenu.tsx
View file

@ -1,5 +1,15 @@
import { useContext } from "react"; import { useContext } from "react";
import { MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@/components/ui/menubar"; import {
MenubarCheckboxItem,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
} from "@/components/ui/menubar";
import { CanvasContext } from "@/context/Canvas"; import { CanvasContext } from "@/context/Canvas";
import { DialogContext } from "@/context/Dialog"; import { DialogContext } from "@/context/Dialog";
@ -31,15 +41,20 @@ function ViewMenu() {
</MenubarCheckboxItem> </MenubarCheckboxItem>
<MenubarSeparator /> <MenubarSeparator />
<MenubarCheckboxItem checked={settings.historyPanel} onCheckedChange={onCheckedChange("historyPanel")}> <MenubarSub>
History Panel <MenubarSubTrigger>Tabs</MenubarSubTrigger>
</MenubarCheckboxItem> <MenubarSubContent>
<MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}> <MenubarCheckboxItem checked={settings.historyPanel} onCheckedChange={onCheckedChange("historyPanel")}>
Color Picker History
</MenubarCheckboxItem> </MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.blockReplacer} onCheckedChange={onCheckedChange("blockReplacer")}> <MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}>
Block Replacer Color Picker
</MenubarCheckboxItem> </MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.blockReplacer} onCheckedChange={onCheckedChange("blockReplacer")}>
Block Replacer
</MenubarCheckboxItem>
</MenubarSubContent>
</MenubarSub>
<MenubarCheckboxItem checked={settings.radiusChanger} onCheckedChange={onCheckedChange("radiusChanger")}> <MenubarCheckboxItem checked={settings.radiusChanger} onCheckedChange={onCheckedChange("radiusChanger")}>
Radius Changer Radius Changer
</MenubarCheckboxItem> </MenubarCheckboxItem>

55
src/components/tool-settings/index.tsx
View file

@ -12,17 +12,23 @@ import ColorPicker from "./ColorPicker";
import Replace from "./Replace"; import Replace from "./Replace";
import Radius from "./Radius"; import Radius from "./Radius";
import BlockSelector from "./BlockSelector"; import BlockSelector from "./BlockSelector";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
function ToolSettings() { function ToolSettings() {
const { settings } = useContext(SettingsContext); const { settings } = useContext(SettingsContext);
const [width, setWidth] = useState(288); const [width, setWidth] = useState(300);
const [resizing, setResizing] = useState(false); const [resizing, setResizing] = useState(false);
const divRef = useRef<HTMLDivElement>(null); const divRef = useRef<HTMLDivElement>(null);
const [stageWidth, setStageWidth] = useState(0); const [stageWidth, setStageWidth] = useState(0);
const [searchInput, setSearchInput] = useState(""); const [searchInput, setSearchInput] = useState("");
const enabledTabs = [settings.historyPanel, settings.colorPicker, settings.blockReplacer].filter(Boolean).length;
const defaultTab = settings.historyPanel ? "history" : settings.colorPicker ? "color-picker" : settings.blockReplacer ? "replace" : undefined;
const [activeTab, setActiveTab] = useState(defaultTab);
const onMouseDown = () => { const onMouseDown = () => {
setResizing(true); setResizing(true);
document.body.style.cursor = "ew-resize"; document.body.style.cursor = "ew-resize";
@ -69,9 +75,13 @@ function ToolSettings() {
}; };
}, [divRef]); }, [divRef]);
useEffect(() => {
setActiveTab(settings.historyPanel ? "history" : settings.colorPicker ? "color-picker" : settings.blockReplacer ? "replace" : undefined);
}, [settings]);
return ( return (
<> <>
{(settings.colorPicker || settings.blockReplacer || settings.radiusChanger || settings.blockSelector) && ( {(settings.historyPanel || settings.colorPicker || settings.blockReplacer || settings.radiusChanger || settings.blockSelector) && (
<div <div
style={{ width: `${width}px` }} style={{ width: `${width}px` }}
className="w-72 border-l border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-2 pb-0 flex flex-col h-full gap-2 relative" className="w-72 border-l border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-2 pb-0 flex flex-col h-full gap-2 relative"
@ -83,24 +93,33 @@ function ToolSettings() {
<GripVerticalIcon /> <GripVerticalIcon />
</div> </div>
{settings.historyPanel && ( {(settings.historyPanel || settings.colorPicker || settings.blockReplacer) && (
<> <>
{/* <span className="text-xs text-zinc-600">History</span> */} <Tabs value={activeTab} onValueChange={setActiveTab} className="[&>*:first-child]:mt-0">
<History /> {enabledTabs > 1 && (
<Separator /> <TabsList className={`grid w-full grid-cols-${enabledTabs} h-8 *:p-0.5`}>
</> {settings.historyPanel && <TabsTrigger value="history">History</TabsTrigger>}
)} {settings.colorPicker && <TabsTrigger value="color-picker">Color</TabsTrigger>}
{settings.blockReplacer && <TabsTrigger value="replace">Replace</TabsTrigger>}
</TabsList>
)}
{settings.historyPanel && (
<TabsContent value="history">
<History />
</TabsContent>
)}
{settings.colorPicker && (
<TabsContent value="color-picker">
<ColorPicker />
</TabsContent>
)}
{settings.blockReplacer && (
<TabsContent value="replace">
<Replace />
</TabsContent>
)}
</Tabs>
{settings.colorPicker && (
<>
<ColorPicker />
<Separator />
</>
)}
{settings.blockReplacer && (
<>
<Replace />
<Separator /> <Separator />
</> </>
)} )}

4
src/context/Settings.tsx
View file

@ -13,8 +13,8 @@ const defaultSettings: Settings = {
grid: true, grid: true,
canvasBorder: false, canvasBorder: false,
historyPanel: true, historyPanel: true,
colorPicker: false, colorPicker: true,
blockReplacer: false, blockReplacer: true,
radiusChanger: true, radiusChanger: true,
blockSelector: true, blockSelector: true,
}; };