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 { 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 { DialogContext } from "@/context/Dialog";
@ -31,15 +41,20 @@ function ViewMenu() {
</MenubarCheckboxItem>
<MenubarSeparator />
<MenubarCheckboxItem checked={settings.historyPanel} onCheckedChange={onCheckedChange("historyPanel")}>
History Panel
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}>
Color Picker
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.blockReplacer} onCheckedChange={onCheckedChange("blockReplacer")}>
Block Replacer
</MenubarCheckboxItem>
<MenubarSub>
<MenubarSubTrigger>Tabs</MenubarSubTrigger>
<MenubarSubContent>
<MenubarCheckboxItem checked={settings.historyPanel} onCheckedChange={onCheckedChange("historyPanel")}>
History
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}>
Color Picker
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.blockReplacer} onCheckedChange={onCheckedChange("blockReplacer")}>
Block Replacer
</MenubarCheckboxItem>
</MenubarSubContent>
</MenubarSub>
<MenubarCheckboxItem checked={settings.radiusChanger} onCheckedChange={onCheckedChange("radiusChanger")}>
Radius Changer
</MenubarCheckboxItem>

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

@ -12,17 +12,23 @@ import ColorPicker from "./ColorPicker";
import Replace from "./Replace";
import Radius from "./Radius";
import BlockSelector from "./BlockSelector";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
function ToolSettings() {
const { settings } = useContext(SettingsContext);
const [width, setWidth] = useState(288);
const [width, setWidth] = useState(300);
const [resizing, setResizing] = useState(false);
const divRef = useRef<HTMLDivElement>(null);
const [stageWidth, setStageWidth] = useState(0);
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 = () => {
setResizing(true);
document.body.style.cursor = "ew-resize";
@ -69,9 +75,13 @@ function ToolSettings() {
};
}, [divRef]);
useEffect(() => {
setActiveTab(settings.historyPanel ? "history" : settings.colorPicker ? "color-picker" : settings.blockReplacer ? "replace" : undefined);
}, [settings]);
return (
<>
{(settings.colorPicker || settings.blockReplacer || settings.radiusChanger || settings.blockSelector) && (
{(settings.historyPanel || settings.colorPicker || settings.blockReplacer || settings.radiusChanger || settings.blockSelector) && (
<div
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"
@ -83,24 +93,33 @@ function ToolSettings() {
<GripVerticalIcon />
</div>
{settings.historyPanel && (
{(settings.historyPanel || settings.colorPicker || settings.blockReplacer) && (
<>
{/* <span className="text-xs text-zinc-600">History</span> */}
<History />
<Separator />
</>
)}
<Tabs value={activeTab} onValueChange={setActiveTab} className="[&>*:first-child]:mt-0">
{enabledTabs > 1 && (
<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 />
</>
)}

4
src/context/Settings.tsx
View file

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