Skip to content

Commit 0efef33

Browse files
SoloDevAbuSoloDevAbu
authored
fix(ui): settings, toolbar, codepanel and other ui (#2530)
* fix(ui): settings, toolbar, codepanel and other ui * fix dev tab height
1 parent 1592875 commit 0efef33

File tree

7 files changed

+57
-39
lines changed

7 files changed

+57
-39
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const Opacity = observer(() => {
6767
<DropdownMenuTrigger asChild>
6868
<ToolbarButton
6969
isOpen={isOpen}
70-
className="mr-1 group h-8 flex items-center gap-1"
70+
className="group h-8 flex items-center gap-1"
7171
onClick={handleInputAreaClick}
7272
>
7373
<Input
@@ -79,7 +79,7 @@ export const Opacity = observer(() => {
7979
value={opacity}
8080
onChange={onInputChange}
8181
onClick={(e) => e.stopPropagation()}
82-
className="w-14 text-left data-[state=open]:text-white text-small focus:text-foreground-primary focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none !bg-transparent border-none group-hover:text-foreground-primary focus:ring-0 focus:outline-none text-muted-foreground !hide-spin-buttons no-focus-ring [appearance:textfield] group-hover:text-foreground-primary transition-colors duration-150 hover"
82+
className="px-1 w-8 text-left data-[state=open]:text-white text-small focus:text-foreground-primary focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none !bg-transparent border-none group-hover:text-foreground-primary focus:ring-0 focus:outline-none text-muted-foreground !hide-spin-buttons no-focus-ring [appearance:textfield] group-hover:text-foreground-primary transition-colors duration-150 hover"
8383
aria-label="Opacity percentage"
8484
/>
8585
<span

‎apps/web/client/src/app/project/[id]/_components/left-panel/help-dropdown/index.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
DropdownMenuSub,
99
DropdownMenuSubContent,
1010
DropdownMenuSubTrigger,
11-
DropdownMenuTrigger
11+
DropdownMenuTrigger,
1212
} from '@onlook/ui/dropdown-menu';
1313
import { Icons } from '@onlook/ui/icons';
1414
import { observer } from 'mobx-react-lite';
@@ -115,11 +115,15 @@ export const HelpDropdown = observer(() => {
115115
<Icons.Globe className="w-4 h-4 mr-2" />
116116
{t(transKeys.help.menu.contactUs.website)}
117117
</DropdownMenuItem>
118-
<DropdownMenuItem onClick={() => window.open(Links.DISCORD, '_blank')}>
118+
<DropdownMenuItem
119+
onClick={() => window.open(Links.DISCORD, '_blank')}
120+
>
119121
<Icons.DiscordLogo className="w-4 h-4 mr-2" />
120122
{t(transKeys.help.menu.contactUs.discord)}
121123
</DropdownMenuItem>
122-
<DropdownMenuItem onClick={() => window.open(Links.GITHUB, '_blank')}>
124+
<DropdownMenuItem
125+
onClick={() => window.open(Links.GITHUB, '_blank')}
126+
>
123127
<Icons.GitHubLogo className="w-4 h-4 mr-2" />
124128
{t(transKeys.help.menu.contactUs.github)}
125129
</DropdownMenuItem>
@@ -131,7 +135,9 @@ export const HelpDropdown = observer(() => {
131135
</DropdownMenuItem>
132136
</DropdownMenuSubContent>
133137
</DropdownMenuSub>
134-
<DropdownMenuItem onClick={() => window.open(Links.OPEN_ISSUE, '_blank')}>
138+
<DropdownMenuItem
139+
onClick={() => window.open(Links.OPEN_ISSUE, '_blank')}
140+
>
135141
<Icons.ExclamationTriangle className="w-4 h-4 mr-2" />
136142
{t(transKeys.help.menu.reportIssue)}
137143
</DropdownMenuItem>

‎apps/web/client/src/app/project/[id]/_components/right-panel/dev-tab/code-controls.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { useEditorEngine } from '@/components/store/editor';
22
import { Button } from '@onlook/ui/button';
33
import { Icons } from '@onlook/ui/icons';
44
import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
5+
import { cn } from '@onlook/ui/utils';
56
import { TooltipArrow } from '@radix-ui/react-tooltip';
67
import { observer } from 'mobx-react-lite';
78
import { useState } from 'react';
89
import { FileModal } from './file-modal';
910
import { FolderModal } from './folder-modal';
10-
import { cn } from '@onlook/ui/utils';
1111

1212
export const CodeControls = observer(() => {
1313
const editorEngine = useEditorEngine();
@@ -36,9 +36,8 @@ export const CodeControls = observer(() => {
3636
<Icons.FilePlus className="h-4 w-4" />
3737
</Button>
3838
</TooltipTrigger>
39-
<TooltipContent side="bottom" hideArrow>
39+
<TooltipContent side="bottom" hideArrow className='mt-1'>
4040
<p>New File</p>
41-
<TooltipArrow className="fill-foreground" />
4241
</TooltipContent>
4342
</Tooltip>
4443
<Tooltip>
@@ -52,9 +51,8 @@ export const CodeControls = observer(() => {
5251
<Icons.DirectoryPlus className="h-4 w-4" />
5352
</Button>
5453
</TooltipTrigger>
55-
<TooltipContent side="bottom" hideArrow>
54+
<TooltipContent side="bottom" hideArrow className='mt-1'>
5655
<p>New Folder</p>
57-
<TooltipArrow className="fill-foreground" />
5856
</TooltipContent>
5957
</Tooltip>
6058
<Tooltip>
@@ -66,8 +64,8 @@ export const CodeControls = observer(() => {
6664
disabled={!isDirty}
6765
className={cn(
6866
"p-2 w-fit h-fit cursor-pointer",
69-
isDirty
70-
? "text-teal-200 hover:text-teal-100 hover:bg-teal-500"
67+
isDirty
68+
? "text-teal-200 hover:text-teal-100 hover:bg-teal-500"
7169
: "hover:bg-background-onlook hover:text-teal-200"
7270
)}
7371
>
@@ -83,15 +81,15 @@ export const CodeControls = observer(() => {
8381
</TooltipContent>
8482
</Tooltip>
8583
</div>
86-
<FileModal
87-
open={fileModalOpen}
88-
onOpenChange={setFileModalOpen}
84+
<FileModal
85+
open={fileModalOpen}
86+
onOpenChange={setFileModalOpen}
8987
basePath={basePath}
9088
files={files}
9189
/>
92-
<FolderModal
93-
open={folderModalOpen}
94-
onOpenChange={setFolderModalOpen}
90+
<FolderModal
91+
open={folderModalOpen}
92+
onOpenChange={setFolderModalOpen}
9593
basePath={basePath}
9694
files={files}
9795
/>

‎apps/web/client/src/app/project/[id]/_components/right-panel/dev-tab/file-tree.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ function UnmemoizedFileTree({ onFileSelect, files, isLoading = false, onRefresh,
190190
width: filesWidth ?? 250,
191191
height: filesHeight ?? 300,
192192
}),
193-
[filesWidth, filesHeight],
193+
[filesWidth, filesHeight, editorEngine.state.rightPanelTab],
194194
);
195195

196196
const handleRefresh = async () => {

‎apps/web/client/src/app/project/[id]/_components/top-bar/project-breadcrumb.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export const ProjectBreadcrumb = observer(() => {
7878
},
7979
})
8080
if (project?.metadata) {
81-
updateProject({
81+
await updateProject({
8282
id: project.id,
8383
project: {
8484
...dbPreviewImg,
@@ -206,7 +206,9 @@ export const ProjectBreadcrumb = observer(() => {
206206
</div>
207207
</DropdownMenuItem>
208208
<DropdownMenuSeparator />
209-
<DropdownMenuItem onClick={() => stateManager.isSettingsModalOpen = true}>
209+
<DropdownMenuItem
210+
className='cursor-pointer'
211+
onClick={() => stateManager.isSettingsModalOpen = true}>
210212
<div className="flex row center items-center group">
211213
<Icons.Gear className="mr-2 group-hover:rotate-12 transition-transform" />
212214
{t(transKeys.help.menu.openSettings)}

‎apps/web/client/src/components/ui/settings-modal/with-project.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { cn } from '@onlook/ui/utils';
77
import { capitalizeFirstLetter } from '@onlook/utility';
88
import { AnimatePresence, motion } from 'framer-motion';
99
import { observer } from 'mobx-react-lite';
10-
import { useEffect, useMemo } from 'react';
10+
import { useEffect, useMemo, useRef, useState } from 'react';
1111
import DomainTab from './domain';
1212
import { SettingsTabValue, type SettingTab } from './helpers';
1313
import { PreferencesTab } from './preferences-tab';
@@ -18,6 +18,31 @@ import { PageTab } from './site/page';
1818
import type { PageNode } from '@onlook/models';
1919
import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
2020

21+
function TruncatedLabelWithTooltip({ label }: { label: string }) {
22+
const [isTruncated, setIsTruncated] = useState(false);
23+
const spanRef = useRef<HTMLSpanElement>(null);
24+
useEffect(() => {
25+
const el = spanRef.current;
26+
if (el) {
27+
setIsTruncated(el.scrollWidth > el.clientWidth);
28+
}
29+
}, [label]);
30+
return isTruncated ? (
31+
<Tooltip>
32+
<TooltipTrigger asChild>
33+
<span ref={spanRef} className="truncate">
34+
{label}
35+
</span>
36+
</TooltipTrigger>
37+
<TooltipContent side='right'>
38+
{label}
39+
</TooltipContent>
40+
</Tooltip>
41+
) : (
42+
<span ref={spanRef} className="truncate">{label}</span>
43+
);
44+
}
45+
2146
export const SettingsModalWithProjects = observer(() => {
2247
const editorEngine = useEditorEngine();
2348
const stateManager = useStateManager();
@@ -174,20 +199,7 @@ export const SettingsModalWithProjects = observer(() => {
174199
}
175200
>
176201
{tab.icon}
177-
<Tooltip>
178-
<TooltipTrigger asChild>
179-
<span className="truncate">
180-
{capitalizeFirstLetter(
181-
tab.label.toLowerCase(),
182-
)}
183-
</span>
184-
</TooltipTrigger>
185-
<TooltipContent>
186-
{capitalizeFirstLetter(
187-
tab.label.toLowerCase(),
188-
)}
189-
</TooltipContent>
190-
</Tooltip>
202+
<TruncatedLabelWithTooltip label={capitalizeFirstLetter(tab.label.toLowerCase())} />
191203
</Button>
192204
))}
193205
</div>

‎packages/ui/src/components/dropdown-menu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function DropdownMenuItem({
6060
data-inset={inset}
6161
data-variant={variant}
6262
className={cn(
63-
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
63+
"cursor-pointer focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
6464
className,
6565
)}
6666
{...props}
@@ -181,7 +181,7 @@ function DropdownMenuSubTrigger({
181181
data-slot="dropdown-menu-sub-trigger"
182182
data-inset={inset}
183183
className={cn(
184-
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
184+
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
185185
className,
186186
)}
187187
{...props}

0 commit comments

Comments
 (0)