Skip to content

Commit 90dc415

Browse files
KiteniteKitenite
authored
Refactor text-selected editor bar (#1905)
1 parent ab15c9a commit 90dc415

File tree

18 files changed

+855
-861
lines changed

18 files changed

+855
-861
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Icons } from "@onlook/ui/icons";
1111
import { Color } from "@onlook/utility";
1212
import { useEffect, useState } from "react";
1313
import { useBoxControl } from "../hooks/use-box-control";
14-
import { HoverOnlyTooltip } from "../HoverOnlyTooltip";
14+
import { HoverOnlyTooltip } from "../hover-tooltip";
1515
import { InputColor } from "../inputs/input-color";
1616
import { InputRange } from "../inputs/input-range";
1717
import { SpacingInputs } from "../inputs/spacing-inputs";

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import { useEditorEngine } from '@/components/store/editor';
44
import { Button } from '@onlook/ui/button';
55
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@onlook/ui/dropdown-menu';
66
import { Icons } from '@onlook/ui/icons';
7-
import { Tooltip, TooltipContent, TooltipTrigger } from "@onlook/ui/tooltip";
87
import { useEffect, useState } from 'react';
8+
import { HoverOnlyTooltip } from '../../hover-tooltip';
99
import { HorizontalAlignInput, VerticalAlignInput } from './align';
1010
import { DirectionInput } from './direction';
1111
import { GapInput } from './gap';
1212
import { TypeInput } from './type';
13-
import { HoverOnlyTooltip } from '../../HoverOnlyTooltip';
1413

1514
export interface CssValue {
1615
value: string;
@@ -39,15 +38,15 @@ export const Display = () => {
3938
<HoverOnlyTooltip content="Display" side="bottom" className="mt-1" hideArrow>
4039
<DropdownMenuTrigger asChild>
4140
<Button
42-
variant="ghost"
43-
size="toolbar"
44-
className="flex items-center gap-1 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 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
45-
>
46-
<Icons.Layout className="h-4 w-4 min-h-4 min-w-4" />
47-
{(layoutType === 'flex' || layoutType === 'grid') && (
48-
<span className="text-small">{layoutTypeOptions[layoutType]?.label ?? layoutType}</span>
49-
)}
50-
</Button>
41+
variant="ghost"
42+
size="toolbar"
43+
className="flex items-center gap-1 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 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
44+
>
45+
<Icons.Layout className="h-4 w-4 min-h-4 min-w-4" />
46+
{(layoutType === 'flex' || layoutType === 'grid') && (
47+
<span className="text-small">{layoutTypeOptions[layoutType]?.label ?? layoutType}</span>
48+
)}
49+
</Button>
5150
</DropdownMenuTrigger>
5251
</HoverOnlyTooltip>
5352
<DropdownMenuContent align="start" className="min-w-[200px] mt-2 p-1.5 rounded-lg">

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@onlook/
55
import { Icons } from '@onlook/ui/icons';
66
import { LayoutMode } from '@onlook/utility';
77
import { useDimensionControl } from '../hooks/use-dimension-control';
8+
import { HoverOnlyTooltip } from '../hover-tooltip';
89
import { InputDropdown } from '../inputs/input-dropdown';
9-
import { HoverOnlyTooltip } from '../HoverOnlyTooltip';
1010

1111
export const Height = () => {
1212
const { dimensionState, handleDimensionChange, handleUnitChange, handleLayoutChange } =
@@ -17,22 +17,22 @@ export const Height = () => {
1717
<HoverOnlyTooltip content="Height" side="bottom" className="mt-1" hideArrow>
1818
<DropdownMenuTrigger asChild>
1919
<Button
20-
variant="ghost"
21-
size="toolbar"
22-
className="text-muted-foreground border-border/0 hover:bg-background-tertiary/20 hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:border-border flex cursor-pointer items-center gap-1 border hover:border hover:text-white focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none active:border-0 data-[state=open]:border data-[state=open]:text-white"
23-
>
24-
<Icons.Height className="h-4 min-h-4 w-4 min-w-4" />
25-
{(dimensionState.height.unit === 'px'
26-
? dimensionState.height.num !== undefined
27-
: (dimensionState.height.value && dimensionState.height.value !== "auto")
28-
) && (
20+
variant="ghost"
21+
size="toolbar"
22+
className="text-muted-foreground border-border/0 hover:bg-background-tertiary/20 hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:border-border flex cursor-pointer items-center gap-1 border hover:border hover:text-white focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none active:border-0 data-[state=open]:border data-[state=open]:text-white"
23+
>
24+
<Icons.Height className="h-4 min-h-4 w-4 min-w-4" />
25+
{(dimensionState.height.unit === 'px'
26+
? dimensionState.height.num !== undefined
27+
: (dimensionState.height.value && dimensionState.height.value !== "auto")
28+
) && (
2929
<span className="text-small">
3030
{dimensionState.height.unit === 'px'
3131
? Math.round(dimensionState.height.num ?? 0)
3232
: dimensionState.height.value}
3333
</span>
3434
)}
35-
</Button>
35+
</Button>
3636
</DropdownMenuTrigger>
3737
</HoverOnlyTooltip>
3838
<DropdownMenuContent

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import {
77
DropdownMenuTrigger,
88
} from "@onlook/ui/dropdown-menu";
99
import { Icons } from "@onlook/ui/icons";
10-
import { HoverOnlyTooltip } from "../HoverOnlyTooltip";
1110
import { useState } from "react";
1211
import { useBoxControl } from "../hooks/use-box-control";
12+
import { HoverOnlyTooltip } from "../hover-tooltip";
1313
import { InputRange } from "../inputs/input-range";
1414
import { SpacingInputs } from "../inputs/spacing-inputs";
1515

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useEditorEngine } from "@/components/store/editor";
44
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@onlook/ui/dropdown-menu";
55
import { Input } from "@onlook/ui/input";
66
import { useEffect, useRef, useState } from "react";
7-
import { HoverOnlyTooltip } from "../HoverOnlyTooltip";
7+
import { HoverOnlyTooltip } from "../hover-tooltip";
88

99
const OPACITY_PRESETS = [100, 80, 75, 50, 25, 10, 0];
1010

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

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ import {
77
DropdownMenuTrigger,
88
} from "@onlook/ui/dropdown-menu";
99
import { Icons } from "@onlook/ui/icons";
10-
import { Tooltip, TooltipContent, TooltipTrigger } from "@onlook/ui/tooltip";
1110
import { useState } from "react";
1211
import { useBoxControl } from "../hooks/use-box-control";
12+
import { HoverOnlyTooltip } from "../hover-tooltip";
1313
import { InputRange } from "../inputs/input-range";
1414
import { SpacingInputs } from "../inputs/spacing-inputs";
15-
import { HoverOnlyTooltip } from "../HoverOnlyTooltip";
1615

1716
export const Padding = () => {
1817
const [activeTab, setActiveTab] = useState('all');
@@ -23,36 +22,36 @@ export const Padding = () => {
2322
<HoverOnlyTooltip content="Padding" side="bottom" className="mt-1" hideArrow>
2423
<DropdownMenuTrigger asChild>
2524
<Button
26-
variant="ghost"
27-
size="toolbar"
28-
className="text-muted-foreground border-border/0 hover:bg-background-tertiary/20 hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:border-border gap-1 flex cursor-pointer items-center border hover:border hover:text-white focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none active:border-0 data-[state=open]:border data-[state=open]:text-white"
29-
>
30-
<Icons.Padding className="h-4 min-h-4 w-4 min-w-4" />
31-
{boxState.padding.unit === 'px' && typeof boxState.padding.num === 'number' && boxState.padding.num !== 0 ? (
32-
<span className="text-small">{boxState.padding.num}</span>
33-
) : null}
34-
{boxState.padding.unit !== 'px' && boxState.padding.value ? (
35-
<span className="text-small">{boxState.padding.value}</span>
36-
) : null}
37-
</Button>
25+
variant="ghost"
26+
size="toolbar"
27+
className="text-muted-foreground border-border/0 hover:bg-background-tertiary/20 hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:border-border gap-1 flex cursor-pointer items-center border hover:border hover:text-white focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none active:border-0 data-[state=open]:border data-[state=open]:text-white"
28+
>
29+
<Icons.Padding className="h-4 min-h-4 w-4 min-w-4" />
30+
{boxState.padding.unit === 'px' && typeof boxState.padding.num === 'number' && boxState.padding.num !== 0 ? (
31+
<span className="text-small">{boxState.padding.num}</span>
32+
) : null}
33+
{boxState.padding.unit !== 'px' && boxState.padding.value ? (
34+
<span className="text-small">{boxState.padding.value}</span>
35+
) : null}
36+
</Button>
3837
</DropdownMenuTrigger>
3938
</HoverOnlyTooltip>
4039
<DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">
4140
<div className="flex items-center gap-2 mb-3">
4241
<button
4342
onClick={() => setActiveTab('all')}
4443
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${activeTab === 'all'
45-
? 'text-white bg-background-tertiary/20'
46-
: 'text-muted-foreground hover:bg-background-tertiary/10'
44+
? 'text-white bg-background-tertiary/20'
45+
: 'text-muted-foreground hover:bg-background-tertiary/10'
4746
}`}
4847
>
4948
All sides
5049
</button>
5150
<button
5251
onClick={() => setActiveTab('individual')}
5352
className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${activeTab === 'individual'
54-
? 'text-white bg-background-tertiary/20'
55-
: 'text-muted-foreground hover:bg-background-tertiary/10'
53+
? 'text-white bg-background-tertiary/20'
54+
: 'text-muted-foreground hover:bg-background-tertiary/10'
5655
}`}
5756
>
5857
Individual

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
import { Icons } from "@onlook/ui/icons";
1010
import { useState } from "react";
1111
import { useBoxControl } from "../hooks/use-box-control";
12-
import { HoverOnlyTooltip } from "../HoverOnlyTooltip";
12+
import { HoverOnlyTooltip } from "../hover-tooltip";
1313
import { InputRange } from "../inputs/input-range";
1414
import { SpacingInputs } from "../inputs/spacing-inputs";
1515

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@onlook/
55
import { Icons } from '@onlook/ui/icons';
66
import { LayoutMode } from '@onlook/utility';
77
import { useDimensionControl } from '../hooks/use-dimension-control';
8-
import { HoverOnlyTooltip } from '../HoverOnlyTooltip';
8+
import { HoverOnlyTooltip } from '../hover-tooltip';
99
import { InputDropdown } from '../inputs/input-dropdown';
1010

1111
export const Width = () => {

‎apps/web/client/src/app/project/[id]/_components/editor-bar/HoverOnlyTooltip.tsx renamed to ‎apps/web/client/src/app/project/[id]/_components/editor-bar/hover-tooltip.tsx

File renamed without changes.

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

Lines changed: 0 additions & 48 deletions
This file was deleted.

0 commit comments

Comments
 (0)