Skip to content

Commit 248314e

Browse files
thugheythughey
authored
Tys toolbar v3 - halfway mark (onlook-dev#1764)
* Padding base * Margin dropdown & corner base * Corner dropdown and icons * New dropdowns * Border dropdown * Updated input with unit * Range slider base * Range input component * Update input-range.tsx * Input range update * Removed chevrons and updated padding * Removed text chevrons and updated padding * Removed state chevron * Dropdowns organized * Updated image bar * Update img-selected.tsx * Fix responsive sizing
1 parent 9c755c2 commit 248314e

File tree

16 files changed

+910
-263
lines changed

16 files changed

+910
-263
lines changed

‎apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx

Lines changed: 148 additions & 106 deletions
Large diffs are not rendered by default.

‎apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/height.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
"use client";
2+
3+
import { Button } from "@onlook/ui-v4/button";
4+
import { Icons } from "@onlook/ui-v4/icons";
5+
import {
6+
DropdownMenu,
7+
DropdownMenuContent,
8+
DropdownMenuTrigger,
9+
} from "@onlook/ui-v4/dropdown-menu";
10+
import { InputDropdown } from "../inputs/input-dropdown";
11+
12+
export const Height = () => {
13+
return (
14+
<DropdownMenu>
15+
<DropdownMenuTrigger asChild>
16+
<Button
17+
variant="ghost"
18+
className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
19+
>
20+
<Icons.Height className="h-4 w-4 min-h-4 min-w-4" />
21+
<span className="text-sm">Hug</span>
22+
</Button>
23+
</DropdownMenuTrigger>
24+
<DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg space-y-3">
25+
<div className="space-y-1.5">
26+
<div className="flex items-center justify-between">
27+
<span className="text-sm text-muted-white">Height</span>
28+
<InputDropdown
29+
value="250"
30+
dropdownValue="Hug"
31+
dropdownOptions={["Hug", "Fixed"]}
32+
/>
33+
</div>
34+
<div className="flex items-center justify-between">
35+
<span className="text-sm text-muted-foreground">Min</span>
36+
<InputDropdown
37+
value="--"
38+
dropdownValue="Fixed"
39+
dropdownOptions={["Fixed"]}
40+
/>
41+
</div>
42+
<div className="flex items-center justify-between">
43+
<span className="text-sm text-muted-foreground">Max</span>
44+
<InputDropdown
45+
value="--"
46+
dropdownValue="Fixed"
47+
dropdownOptions={["Fixed"]}
48+
/>
49+
</div>
50+
</div>
51+
</DropdownMenuContent>
52+
</DropdownMenu>
53+
);
54+
};

‎apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/margin.tsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
"use client";
2+
3+
import { Button } from "@onlook/ui-v4/button";
4+
import { Icons } from "@onlook/ui-v4/icons";
5+
import {
6+
DropdownMenu,
7+
DropdownMenuContent,
8+
DropdownMenuTrigger,
9+
} from "@onlook/ui-v4/dropdown-menu";
10+
import { InputRange } from "../inputs/input-range";
11+
import { InputIcon } from "../inputs/input-icon";
12+
import { useState } from "react";
13+
14+
export const Margin = () => {
15+
const [activeTab, setActiveTab] = useState('individual');
16+
17+
return (
18+
<DropdownMenu>
19+
<DropdownMenuTrigger asChild>
20+
<Button
21+
variant="ghost"
22+
className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
23+
>
24+
<Icons.Margin className="h-4 w-4 min-h-4 min-w-4" />
25+
<span className="text-sm">24px</span>
26+
</Button>
27+
</DropdownMenuTrigger>
28+
<DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">
29+
<div className="flex items-center gap-2 mb-3">
30+
<button
31+
onClick={() => setActiveTab('all')}
32+
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
33+
activeTab === 'all'
34+
? 'text-white bg-background-tertiary/20'
35+
: 'text-muted-foreground hover:bg-background-tertiary/10'
36+
}`}
37+
>
38+
All sides
39+
</button>
40+
<button
41+
onClick={() => setActiveTab('individual')}
42+
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
43+
activeTab === 'individual'
44+
? 'text-white bg-background-tertiary/20'
45+
: 'text-muted-foreground hover:bg-background-tertiary/10'
46+
}`}
47+
>
48+
Individual
49+
</button>
50+
</div>
51+
{activeTab === 'all' ? (
52+
<InputRange value={12} onChange={(value) => console.log(value)} />
53+
) : (
54+
<div className="grid grid-cols-2 gap-2">
55+
<InputIcon icon="LeftSide" value={12} />
56+
<InputIcon icon="TopSide" value={18} />
57+
<InputIcon icon="RightSide" value={12} />
58+
<InputIcon icon="BottomSide" value={18} />
59+
</div>
60+
)}
61+
</DropdownMenuContent>
62+
</DropdownMenu>
63+
);
64+
};

‎apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/padding.tsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
"use client";
2+
3+
import { Button } from "@onlook/ui-v4/button";
4+
import { Icons } from "@onlook/ui-v4/icons";
5+
import {
6+
DropdownMenu,
7+
DropdownMenuContent,
8+
DropdownMenuTrigger,
9+
} from "@onlook/ui-v4/dropdown-menu";
10+
import { InputRange } from "../inputs/input-range";
11+
import { InputIcon } from "../inputs/input-icon";
12+
import { useState } from "react";
13+
14+
export const Padding = () => {
15+
const [activeTab, setActiveTab] = useState('individual');
16+
17+
return (
18+
<DropdownMenu>
19+
<DropdownMenuTrigger asChild>
20+
<Button
21+
variant="ghost"
22+
className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
23+
>
24+
<Icons.Padding className="h-4 w-4 min-h-4 min-w-4" />
25+
<span className="text-sm">Mixed</span>
26+
</Button>
27+
</DropdownMenuTrigger>
28+
<DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">
29+
<div className="flex items-center gap-2 mb-3">
30+
<button
31+
onClick={() => setActiveTab('all')}
32+
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
33+
activeTab === 'all'
34+
? 'text-white bg-background-tertiary/20'
35+
: 'text-muted-foreground hover:bg-background-tertiary/10'
36+
}`}
37+
>
38+
All sides
39+
</button>
40+
<button
41+
onClick={() => setActiveTab('individual')}
42+
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
43+
activeTab === 'individual'
44+
? 'text-white bg-background-tertiary/20'
45+
: 'text-muted-foreground hover:bg-background-tertiary/10'
46+
}`}
47+
>
48+
Individual
49+
</button>
50+
</div>
51+
{activeTab === 'all' ? (
52+
<InputRange value={12} onChange={(value) => console.log(value)} />
53+
) : (
54+
<div className="grid grid-cols-2 gap-2">
55+
<InputIcon icon="LeftSide" value={12} />
56+
<InputIcon icon="TopSide" value={18} />
57+
<InputIcon icon="RightSide" value={12} />
58+
<InputIcon icon="BottomSide" value={18} />
59+
</div>
60+
)}
61+
</DropdownMenuContent>
62+
</DropdownMenu>
63+
);
64+
};

‎apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/radius.tsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
"use client";
2+
3+
import { Button } from "@onlook/ui-v4/button";
4+
import { Icons } from "@onlook/ui-v4/icons";
5+
import {
6+
DropdownMenu,
7+
DropdownMenuContent,
8+
DropdownMenuTrigger,
9+
} from "@onlook/ui-v4/dropdown-menu";
10+
import { InputRange } from "../inputs/input-range";
11+
import { InputIcon } from "../inputs/input-icon";
12+
import { useState } from "react";
13+
14+
export const Radius = () => {
15+
const [activeTab, setActiveTab] = useState('individual');
16+
17+
return (
18+
<DropdownMenu>
19+
<DropdownMenuTrigger asChild>
20+
<Button
21+
variant="ghost"
22+
className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
23+
>
24+
<Icons.CornerRadius className="h-4 w-4 min-h-4 min-w-4" />
25+
<span className="text-sm">8px</span>
26+
</Button>
27+
</DropdownMenuTrigger>
28+
<DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">
29+
<div className="flex items-center gap-2 mb-3">
30+
<button
31+
onClick={() => setActiveTab('all')}
32+
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors ${
33+
activeTab === 'all'
34+
? 'text-white bg-background-tertiary/20'
35+
: 'text-muted-foreground hover:bg-background-tertiary/10'
36+
}`}
37+
>
38+
All sides
39+
</button>
40+
<button
41+
onClick={() => setActiveTab('individual')}
42+
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors ${
43+
activeTab === 'individual'
44+
? 'text-white bg-background-tertiary/20'
45+
: 'text-muted-foreground hover:bg-background-tertiary/10'
46+
}`}
47+
>
48+
Individual
49+
</button>
50+
</div>
51+
{activeTab === 'all' ? (
52+
<InputRange value={12} icon="CornerRadius" onChange={(value) => console.log(value)} />
53+
) : (
54+
<div className="grid grid-cols-2 gap-2">
55+
<InputIcon icon="CornerRadius" value={12} />
56+
<InputIcon icon="CornerTopRight" value={18} />
57+
<InputIcon icon="CornerBottomLeft" value={12} />
58+
<InputIcon icon="CornerBottomRight" value={18} />
59+
</div>
60+
)}
61+
</DropdownMenuContent>
62+
</DropdownMenu>
63+
);
64+
};

‎apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/width.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
"use client";
2+
3+
import { Button } from "@onlook/ui-v4/button";
4+
import { Icons } from "@onlook/ui-v4/icons";
5+
import {
6+
DropdownMenu,
7+
DropdownMenuContent,
8+
DropdownMenuTrigger,
9+
} from "@onlook/ui-v4/dropdown-menu";
10+
import { InputDropdown } from "../inputs/input-dropdown";
11+
12+
export const Width = () => {
13+
return (
14+
<DropdownMenu>
15+
<DropdownMenuTrigger asChild>
16+
<Button
17+
variant="ghost"
18+
className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
19+
>
20+
<Icons.Width className="h-4 w-4 min-h-4 min-w-4" />
21+
<span className="text-sm">280</span>
22+
</Button>
23+
</DropdownMenuTrigger>
24+
<DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg space-y-3">
25+
<div className="space-y-1.5">
26+
<div className="flex items-center justify-between">
27+
<span className="text-sm text-muted-white">Width</span>
28+
<InputDropdown
29+
value="250"
30+
dropdownValue="Hug"
31+
dropdownOptions={["Hug", "Fixed"]}
32+
/>
33+
</div>
34+
<div className="flex items-center justify-between">
35+
<span className="text-sm text-muted-foreground">Min</span>
36+
<InputDropdown
37+
value="--"
38+
dropdownValue="Fixed"
39+
dropdownOptions={["Fixed"]}
40+
/>
41+
</div>
42+
<div className="flex items-center justify-between">
43+
<span className="text-sm text-muted-foreground">Max</span>
44+
<InputDropdown
45+
value="--"
46+
dropdownValue="Fixed"
47+
dropdownOptions={["Fixed"]}
48+
/>
49+
</div>
50+
</div>
51+
</DropdownMenuContent>
52+
</DropdownMenu>
53+
);
54+
};

0 commit comments

Comments
 (0)