Skip to content

Commit 3c70f5e

Browse files
thugheythughey
authored
Tys toolbar v4 (#1786)
* Bucket and background * Fixed border icon * Updated components * Updated bucket, border, image styling * Lots updated * Display component * Input components - radio added * Layout & position panel styling * New layout components and styling * Updated display types * Position fixed * Spacing section added * Update editor bar right side * Typography panel base * Typography values * Updated unit dropdown * Color input * Added color input - updated styles * Panel buttons styled * Update index.tsx * Fixed errors * Update input-icon.tsx * Update input-dropdown.tsx * Update input-range.tsx * fix icons kebab case
1 parent 0224afb commit 3c70f5e

File tree

23 files changed

+1302
-296
lines changed

23 files changed

+1302
-296
lines changed

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

Lines changed: 17 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
DropdownMenuItem,
99
DropdownMenuTrigger,
1010
} from "@onlook/ui-v4/dropdown-menu";
11-
import { StateDropdown } from "./state-dropdown";
11+
import { StateDropdown } from "./dropdowns/state-dropdown";
1212
import { InputDropdown } from "./inputs/input-dropdown";
1313
import { InputIcon } from "./inputs/input-icon";
1414
import { InputRange } from "./inputs/input-range";
@@ -18,6 +18,11 @@ import { Padding } from "./dropdowns/padding";
1818
import { Margin } from "./dropdowns/margin";
1919
import { Radius } from "./dropdowns/radius";
2020
import { useState } from "react";
21+
import { ImageBackground } from "./dropdowns/img-background";
22+
import { ColorBackground } from "./dropdowns/color-background";
23+
import { Border } from "./dropdowns/border";
24+
import { Display } from "./dropdowns/display";
25+
import { ViewButtons } from "./panels/panel-bar/bar";
2126

2227
export const DivSelected = () => {
2328
const [activeTab, setActiveTab] = useState('individual');
@@ -28,89 +33,7 @@ export const DivSelected = () => {
2833

2934
<div className="h-6 w-[1px] bg-border" />
3035

31-
<DropdownMenu>
32-
<DropdownMenuTrigger asChild>
33-
<Button
34-
variant="ghost"
35-
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"
36-
>
37-
<Icons.Layout className="h-4 w-4 min-h-4 min-w-4" />
38-
<span className="text-sm">Flex</span>
39-
</Button>
40-
</DropdownMenuTrigger>
41-
<DropdownMenuContent align="start" className="min-w-[120px] mt-2 p-1 rounded-lg">
42-
<div className="p-2 space-y-2">
43-
<div className="space-y-1">
44-
<span className="text-sm text-muted-foreground">Type</span>
45-
<div className="flex gap-1">
46-
<button className="flex-1 text-sm px-3 py-1 rounded-md text-muted-foreground hover:bg-background-tertiary/10">--</button>
47-
<button className="flex-1 text-sm px-3 py-1 rounded-md bg-background-tertiary/20 text-white">Flex</button>
48-
<button className="flex-1 text-sm px-3 py-1 rounded-md text-muted-foreground hover:bg-background-tertiary/10">Grid</button>
49-
</div>
50-
</div>
51-
52-
<div className="space-y-1">
53-
<span className="text-sm text-muted-foreground">Direction</span>
54-
<div className="flex gap-1">
55-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md text-muted-foreground hover:bg-background-tertiary/10">
56-
<Icons.ArrowDown className="h-4 w-4" />
57-
</button>
58-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md bg-background-tertiary/20 text-white">
59-
<Icons.ArrowRight className="h-4 w-4" />
60-
</button>
61-
</div>
62-
</div>
63-
64-
<div className="space-y-1">
65-
<span className="text-sm text-muted-foreground">Vertical</span>
66-
<div className="flex gap-1">
67-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md text-muted-foreground hover:bg-background-tertiary/10">
68-
<Icons.AlignTop className="h-4 w-4" />
69-
</button>
70-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md bg-background-tertiary/20 text-white">
71-
<Icons.AlignCenterVertically className="h-4 w-4" />
72-
</button>
73-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md text-muted-foreground hover:bg-background-tertiary/10">
74-
<Icons.AlignBottom className="h-4 w-4" />
75-
</button>
76-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md text-muted-foreground hover:bg-background-tertiary/10">
77-
<Icons.SpaceBetweenVertically className="h-4 w-4" />
78-
</button>
79-
</div>
80-
</div>
81-
82-
<div className="space-y-1">
83-
<span className="text-sm text-muted-foreground">Horizontal</span>
84-
<div className="flex gap-1">
85-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md text-muted-foreground hover:bg-background-tertiary/10">
86-
<Icons.AlignLeft className="h-4 w-4" />
87-
</button>
88-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md bg-background-tertiary/20 text-white">
89-
<Icons.AlignCenterHorizontally className="h-4 w-4" />
90-
</button>
91-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md text-muted-foreground hover:bg-background-tertiary/10">
92-
<Icons.AlignRight className="h-4 w-4" />
93-
</button>
94-
<button className="flex-1 flex items-center justify-center text-sm p-1.5 rounded-md text-muted-foreground hover:bg-background-tertiary/10">
95-
<Icons.SpaceBetweenHorizontally className="h-4 w-4" />
96-
</button>
97-
</div>
98-
</div>
99-
100-
<div className="space-y-1">
101-
<span className="text-sm text-muted-foreground">Gap</span>
102-
<div className="flex items-center bg-background-tertiary/50 rounded-md px-3 py-1.5">
103-
<input
104-
type="text"
105-
value="12"
106-
className="w-full bg-transparent text-sm text-white focus:outline-none"
107-
/>
108-
<span className="text-sm text-muted-foreground">PX</span>
109-
</div>
110-
</div>
111-
</div>
112-
</DropdownMenuContent>
113-
</DropdownMenu>
36+
<Display />
11437

11538
<div className="h-6 w-[1px] bg-border" />
11639

@@ -134,71 +57,17 @@ export const DivSelected = () => {
13457

13558
<div className="h-6 w-[1px] bg-border" />
13659

137-
<DropdownMenu>
138-
<DropdownMenuTrigger asChild>
139-
<Button
140-
variant="ghost"
141-
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 px-3"
142-
>
143-
<Icons.BorderEdit className="h-4 w-4 min-h-4 min-w-4" />
144-
<span className="text-sm">1px</span>
145-
</Button>
146-
</DropdownMenuTrigger>
147-
<DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">
148-
<div className="flex items-center gap-2 mb-3">
149-
<button
150-
onClick={() => setActiveTab('all')}
151-
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
152-
activeTab === 'all'
153-
? 'text-white bg-background-tertiary/20'
154-
: 'text-muted-foreground hover:bg-background-tertiary/10'
155-
}`}
156-
>
157-
All sides
158-
</button>
159-
<button
160-
onClick={() => setActiveTab('individual')}
161-
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
162-
activeTab === 'individual'
163-
? 'text-white bg-background-tertiary/20'
164-
: 'text-muted-foreground hover:bg-background-tertiary/10'
165-
}`}
166-
>
167-
Individual
168-
</button>
169-
</div>
170-
{activeTab === 'all' ? (
171-
<InputRange value={12} onChange={(value) => console.log(value)} />
172-
) : (
173-
<div className="grid grid-cols-2 gap-2">
174-
<InputIcon icon="LeftSide" value={12} />
175-
<InputIcon icon="TopSide" value={18} />
176-
<InputIcon icon="RightSide" value={12} />
177-
<InputIcon icon="BottomSide" value={18} />
178-
</div>
179-
)}
180-
<div className="mt-3">
181-
<div className="flex items-center w-full">
182-
<div className="flex-1 flex mr-[1px] items-center bg-background-tertiary/50 rounded-md px-3 py-1.5">
183-
<input
184-
type="text"
185-
value="#080808"
186-
className="w-full bg-transparent text-sm text-white focus:outline-none"
187-
/>
188-
</div>
189-
<div className="min-w-[70px] max-w-[70px] flex items-center bg-background-tertiary/50 rounded-md px-3 py-1.5">
190-
<input
191-
type="text"
192-
value="100"
193-
className="w-full bg-transparent text-sm text-white focus:outline-none text-right"
194-
/>
195-
<span className="text-sm text-muted-foreground ml-1">%</span>
196-
</div>
197-
</div>
198-
</div>
199-
</DropdownMenuContent>
200-
</DropdownMenu>
60+
<Border />
20161

62+
<div className="h-6 w-[1px] bg-border" />
63+
64+
<ColorBackground />
65+
66+
<div className="h-6 w-[1px] bg-border" />
67+
68+
<ImageBackground />
69+
70+
<ViewButtons />
20271
</div>
20372
);
20473
};

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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+
import { InputColor } from "../inputs/input-color";
14+
15+
export const Border = () => {
16+
const [activeTab, setActiveTab] = useState('individual');
17+
18+
return (
19+
<DropdownMenu>
20+
<DropdownMenuTrigger asChild>
21+
<Button
22+
variant="ghost"
23+
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"
24+
>
25+
<Icons.BorderEdit className="h-4 w-4 min-h-4 min-w-4" />
26+
<span className="text-sm">1px</span>
27+
</Button>
28+
</DropdownMenuTrigger>
29+
<DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">
30+
<div className="flex items-center gap-2 mb-3">
31+
<button
32+
onClick={() => setActiveTab('all')}
33+
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
34+
activeTab === 'all'
35+
? 'text-white bg-background-tertiary/20'
36+
: 'text-muted-foreground hover:bg-background-tertiary/10'
37+
}`}
38+
>
39+
All sides
40+
</button>
41+
<button
42+
onClick={() => setActiveTab('individual')}
43+
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
44+
activeTab === 'individual'
45+
? 'text-white bg-background-tertiary/20'
46+
: 'text-muted-foreground hover:bg-background-tertiary/10'
47+
}`}
48+
>
49+
Individual
50+
</button>
51+
</div>
52+
{activeTab === 'all' ? (
53+
<InputRange value={12} onChange={(value) => console.log(value)} />
54+
) : (
55+
<div className="grid grid-cols-2 gap-2">
56+
<InputIcon icon="LeftSide" value={12} />
57+
<InputIcon icon="TopSide" value={18} />
58+
<InputIcon icon="RightSide" value={12} />
59+
<InputIcon icon="BottomSide" value={18} />
60+
</div>
61+
)}
62+
<div className="mt-3">
63+
<InputColor
64+
color="#080808"
65+
opacity={100}
66+
onColorChange={(color) => console.log('Color changed:', color)}
67+
onOpacityChange={(opacity) => console.log('Opacity changed:', opacity)}
68+
/>
69+
</div>
70+
</DropdownMenuContent>
71+
</DropdownMenu>
72+
);
73+
};

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
11+
export const ColorBackground = () => {
12+
return (
13+
<Button
14+
variant="ghost"
15+
size="icon"
16+
className="flex items-center justify-center px-5 flex-col gap-0.5 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:bg-background-tertiary/20 active:text-white active:border active:border-border"
17+
>
18+
<Icons.PaintBucket className="h-4 w-4" />
19+
<div className="h-[2.5px] w-5.5 bg-current rounded-full" />
20+
</Button>
21+
);
22+
};

0 commit comments

Comments
 (0)