diff options
Diffstat (limited to 'apps/web/src/components/editor/panels/assets')
9 files changed, 58 insertions, 103 deletions
diff --git a/apps/web/src/components/editor/panels/assets/draggable-item.tsx b/apps/web/src/components/editor/panels/assets/draggable-item.tsx index 10cb1f8c..517fdc92 100644 --- a/apps/web/src/components/editor/panels/assets/draggable-item.tsx +++ b/apps/web/src/components/editor/panels/assets/draggable-item.tsx @@ -110,7 +110,7 @@ export function DraggableItem({ <AspectRatio ratio={aspectRatio} className={cn( - "bg-panel-accent relative overflow-hidden", + "bg-accent relative overflow-hidden", isRounded && "rounded-sm", isDraggable && "[&::-webkit-drag-ghost]:opacity-0", )} @@ -215,7 +215,7 @@ function PlusButton({ <Button size="icon" className={cn( - "bg-background hover:bg-panel text-foreground absolute right-2 bottom-2 size-5", + "bg-background hover:bg-background text-foreground absolute right-2 bottom-2 size-5", className, )} onClick={(e) => { diff --git a/apps/web/src/components/editor/panels/assets/index.tsx b/apps/web/src/components/editor/panels/assets/index.tsx index 9161cb1d..e7bd3d4f 100644 --- a/apps/web/src/components/editor/panels/assets/index.tsx +++ b/apps/web/src/components/editor/panels/assets/index.tsx @@ -43,7 +43,7 @@ export function AssetsPanel() { }; return ( - <div className="bg-panel flex h-full"> + <div className="panel bg-background flex h-full rounded-sm border overflow-hidden"> <TabBar /> <Separator orientation="vertical" /> <div className="flex-1 overflow-hidden">{viewMap[activeTab]}</div> diff --git a/apps/web/src/components/editor/panels/assets/tabbar.tsx b/apps/web/src/components/editor/panels/assets/tabbar.tsx index 2c950fdc..31842306 100644 --- a/apps/web/src/components/editor/panels/assets/tabbar.tsx +++ b/apps/web/src/components/editor/panels/assets/tabbar.tsx @@ -6,6 +6,7 @@ import { TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; +import { Button } from "@/components/ui/button"; import { cn } from "@/utils/ui"; import { TAB_KEYS, @@ -15,9 +16,9 @@ import { export function TabBar() { const { activeTab, setActiveTab } = useAssetsPanelStore(); - const scrollRef = useRef<HTMLDivElement>(null); const [showTopFade, setShowTopFade] = useState(false); const [showBottomFade, setShowBottomFade] = useState(false); + const scrollRef = useRef<HTMLDivElement>(null); const checkScrollPosition = useCallback(() => { const element = scrollRef.current; @@ -48,32 +49,24 @@ export function TabBar() { <div className="relative flex"> <div ref={scrollRef} - className="scrollbar-hidden relative flex size-full flex-col items-center justify-start gap-5 overflow-y-auto px-4 py-4" + className="scrollbar-hidden relative flex size-full p-2 flex-col items-center justify-start gap-1.5 overflow-y-auto" > {TAB_KEYS.map((tabKey) => { const tab = tabs[tabKey]; return ( <Tooltip key={tabKey} delayDuration={10}> <TooltipTrigger asChild> - <button - type="button" + <Button + variant={activeTab === tabKey ? "secondary" : "text"} aria-label={tab.label} className={cn( - "flex cursor-pointer flex-col items-center gap-0.5 [&>svg]:size-4.5! opacity-100 hover:opacity-75", - activeTab === tabKey - ? "text-primary !opacity-100" - : "text-muted-foreground", + "flex-col !p-1.5 !rounded-sm !h-auto [&_svg]:size-4.5", + activeTab !== tabKey && "border border-transparent text-muted-foreground", )} onClick={() => setActiveTab(tabKey)} - onKeyDown={(event) => { - if (event.key === "Enter" || event.key === " ") { - event.preventDefault(); - setActiveTab(tabKey); - } - }} > - <tab.icon className=" " /> - </button> + <tab.icon /> + </Button> </TooltipTrigger> <TooltipContent side="right" @@ -108,8 +101,8 @@ function FadeOverlay({ className={cn( "pointer-events-none absolute right-0 left-0 h-6", direction === "top" && show - ? "from-panel top-0 bg-gradient-to-b to-transparent" - : "from-panel bottom-0 bg-gradient-to-t to-transparent", + ? "from-background top-0 bg-gradient-to-b to-transparent" + : "from-background bottom-0 bg-gradient-to-t to-transparent", )} /> ); diff --git a/apps/web/src/components/editor/panels/assets/views/captions.tsx b/apps/web/src/components/editor/panels/assets/views/captions.tsx index d93baeff..daebf2c6 100644 --- a/apps/web/src/components/editor/panels/assets/views/captions.tsx +++ b/apps/web/src/components/editor/panels/assets/views/captions.tsx @@ -1,5 +1,4 @@ import { Button } from "@/components/ui/button"; -import { PropertyGroup } from "@/components/editor/panels/properties/property-item"; import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view"; import { Select, @@ -21,6 +20,7 @@ import { transcriptionService } from "@/services/transcription/service"; import { decodeAudioToFloat32 } from "@/lib/media/audio"; import { buildCaptionChunks } from "@/lib/transcription/caption"; import { Spinner } from "@/components/ui/spinner"; +import { Label } from "@/components/ui/label"; export function Captions() { const [selectedLanguage, setSelectedLanguage] = @@ -112,12 +112,13 @@ export function Captions() { ref={containerRef} className="flex h-full flex-col justify-between" > - <PropertyGroup title="Language"> + <div className="flex flex-col gap-3"> + <Label>Language</Label> <Select value={selectedLanguage} onValueChange={(value) => handleLanguageChange({ value })} > - <SelectTrigger className="bg-panel-accent h-8 w-full text-xs"> + <SelectTrigger> <SelectValue placeholder="Select a language" /> </SelectTrigger> <SelectContent> @@ -129,7 +130,7 @@ export function Captions() { ))} </SelectContent> </Select> - </PropertyGroup> + </div> <div className="flex flex-col gap-4"> {error && ( diff --git a/apps/web/src/components/editor/panels/assets/views/media.tsx b/apps/web/src/components/editor/panels/assets/views/media.tsx index 76ae0064..59395fd8 100644 --- a/apps/web/src/components/editor/panels/assets/views/media.tsx +++ b/apps/web/src/components/editor/panels/assets/views/media.tsx @@ -202,7 +202,7 @@ export function MediaView() { className={`relative flex h-full flex-col gap-1 ${isDragOver ? "bg-accent/30" : ""}`} {...dragProps} > - <div className="bg-panel py-2 px-4 flex items-center justify-between border-b"> + <div className="bg-background h-12 px-4 pr-2 flex items-center justify-between border-b"> <span className="text-muted-foreground text-sm">Assets</span> <div className="flex items-center gap-0"> <TooltipProvider> @@ -320,10 +320,10 @@ export function MediaView() { onClick={openFilePicker} disabled={isProcessing} size="sm" - className="items-center justify-center gap-1.5 ml-1.5" + className="items-center justify-center gap-1.5 ml-1.5 hover:bg-accent px-3" > <HugeiconsIcon icon={CloudUploadIcon} /> - Upload + Import </Button> </div> </div> diff --git a/apps/web/src/components/editor/panels/assets/views/settings.tsx b/apps/web/src/components/editor/panels/assets/views/settings.tsx index b8c54510..26afe566 100644 --- a/apps/web/src/components/editor/panels/assets/views/settings.tsx +++ b/apps/web/src/components/editor/panels/assets/views/settings.tsx @@ -21,7 +21,6 @@ import { colors } from "@/data/colors/solid"; import { syntaxUIGradients } from "@/data/colors/syntax-ui"; import { useEditor } from "@/hooks/use-editor"; import { useEditorStore } from "@/stores/editor-store"; -import type { TProject } from "@/types/project"; import { dimensionToAspectRatio } from "@/utils/geometry"; import { cn } from "@/utils/ui"; import { @@ -30,8 +29,7 @@ import { PropertyItemLabel, PropertyItemValue, } from "@/components/editor/panels/properties/property-item"; -import { HugeiconsIcon } from "@hugeicons/react"; -import { DropperIcon } from "@hugeicons/core-free-icons"; +import { ColorPicker } from "@/components/ui/color-picker"; export function SettingsView() { return <ProjectSettingsTabs />; @@ -56,24 +54,9 @@ function ProjectSettingsTabs() { label: "Background", content: ( <div className="flex h-full flex-col justify-between"> - <div className="flex-1 p-5"> + <div className="flex-1"> <BackgroundView /> </div> - {/* <div className="bg-panel/85 sticky -bottom-0 flex flex-col backdrop-blur-lg"> - <Separator /> - <Button className="text-muted-foreground hover:text-foreground/85 h-auto w-fit !bg-transparent p-5 py-4 text-xs shadow-none"> - Custom background - <PlusIcon /> - </Button> - </div> */} - - {/* another ui */} - {/* <div className="flex flex-col justify-center items-center pb-5 sticky bottom-0"> - <Button className="w-fit h-auto gap-1.5 px-3.5 py-1.5 bg-foreground hover:bg-foreground/85 text-background rounded-full"> - <span className="text-sm">Custom</span> - <PlusIcon className="" /> - </Button> - </div> */} </div> ), }, @@ -83,15 +66,6 @@ function ProjectSettingsTabs() { ); } -function getCurrentCanvasSize({ activeProject }: { activeProject: TProject }) { - const { canvasSize } = activeProject.settings; - - return { - width: canvasSize.width, - height: canvasSize.height, - }; -} - function ProjectInfoView() { const editor = useEditor(); const activeProject = editor.project.getActive(); @@ -117,7 +91,7 @@ function ProjectInfoView() { return -1; }; - const currentCanvasSize = getCurrentCanvasSize({ activeProject }); + const currentCanvasSize = activeProject.settings.canvasSize; const currentAspectRatio = dimensionToAspectRatio(currentCanvasSize); const originalCanvasSize = activeProject.settings.originalCanvasSize ?? null; const presetIndex = findPresetIndexByAspectRatio({ @@ -162,7 +136,7 @@ function ProjectInfoView() { value={selectedPresetValue} onValueChange={(value) => handleAspectRatioChange({ value })} > - <SelectTrigger className="bg-panel-accent"> + <SelectTrigger> <SelectValue placeholder="Select an aspect ratio" /> </SelectTrigger> <SelectContent> @@ -190,7 +164,7 @@ function ProjectInfoView() { value={activeProject.settings.fps.toString()} onValueChange={handleFpsChange} > - <SelectTrigger className="bg-panel-accent"> + <SelectTrigger> <SelectValue placeholder="Select a frame rate" /> </SelectTrigger> <SelectContent> @@ -219,7 +193,7 @@ const BlurPreview = memo( }) => ( <button className={cn( - "border-foreground/15 hover:border-primary relative aspect-square w-full cursor-pointer overflow-hidden rounded-sm border", + "border-foreground/15 hover:border-primary relative aspect-square size-20 cursor-pointer overflow-hidden rounded-sm border", isSelected && "border-primary border-2", )} onClick={onSelect} @@ -265,7 +239,7 @@ const BackgroundPreviews = memo( <button key={`${index}-${bg}`} className={cn( - "border-foreground/15 hover:border-primary aspect-square w-full cursor-pointer rounded-sm border", + "border-foreground/15 hover:border-primary aspect-square size-20 cursor-pointer rounded-sm border", isColorBackground && bg === currentBackgroundColor && "border-primary border-2", @@ -347,48 +321,35 @@ function BackgroundView() { [blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect], ); + const backgroundSections = [ + { title: "Colors", backgrounds: colors, useBackgroundColor: true }, + { title: "Pattern craft", backgrounds: patternCraftGradients }, + { title: "Syntax UI", backgrounds: syntaxUIGradients }, + ]; + return ( - <div className="flex h-full flex-col gap-4"> - <PropertyGroup title="Blur" defaultExpanded={false}> - <div className="grid w-full grid-cols-4 gap-2">{blurPreviews}</div> + <div className="flex h-full flex-col"> + <PropertyGroup title="Blur" hasBorderTop={false} defaultExpanded={false}> + <div className="flex flex-wrap gap-2">{blurPreviews}</div> </PropertyGroup> - <PropertyGroup title="Colors" defaultExpanded={false}> - <div className="grid w-full grid-cols-4 gap-2"> - <div className="border-foreground/15 hover:border-primary flex aspect-square w-full cursor-pointer items-center justify-center rounded-sm border"> - <HugeiconsIcon icon={DropperIcon} className="size-4" /> + {backgroundSections.map((section) => ( + <PropertyGroup + key={section.title} + title={section.title} + defaultExpanded={false} + > + <div className="flex flex-wrap gap-2"> + <BackgroundPreviews + backgrounds={section.backgrounds} + currentBackgroundColor={currentBackgroundColor} + isColorBackground={isColorBackground} + handleColorSelect={({ bg }) => handleColorSelect({ color: bg })} + useBackgroundColor={section.useBackgroundColor} + /> </div> - <BackgroundPreviews - backgrounds={colors} - currentBackgroundColor={currentBackgroundColor} - isColorBackground={isColorBackground} - handleColorSelect={({ bg }) => handleColorSelect({ color: bg })} - useBackgroundColor={true} - /> - </div> - </PropertyGroup> - - <PropertyGroup title="Pattern craft" defaultExpanded={false}> - <div className="grid w-full grid-cols-4 gap-2"> - <BackgroundPreviews - backgrounds={patternCraftGradients} - currentBackgroundColor={currentBackgroundColor} - isColorBackground={isColorBackground} - handleColorSelect={({ bg }) => handleColorSelect({ color: bg })} - /> - </div> - </PropertyGroup> - - <PropertyGroup title="Syntax UI" defaultExpanded={false}> - <div className="grid w-full grid-cols-4 gap-2"> - <BackgroundPreviews - backgrounds={syntaxUIGradients} - currentBackgroundColor={currentBackgroundColor} - isColorBackground={isColorBackground} - handleColorSelect={({ bg }) => handleColorSelect({ color: bg })} - /> - </div> - </PropertyGroup> + </PropertyGroup> + ))} </div> ); } diff --git a/apps/web/src/components/editor/panels/assets/views/sounds.tsx b/apps/web/src/components/editor/panels/assets/views/sounds.tsx index 84a5d0bf..30c70a83 100644 --- a/apps/web/src/components/editor/panels/assets/views/sounds.tsx +++ b/apps/web/src/components/editor/panels/assets/views/sounds.tsx @@ -235,7 +235,7 @@ function SoundEffectsView() { <div className="flex items-center gap-3"> <Input placeholder="Search sound effects" - className="bg-panel-accent w-full" + className="bg-accent w-full" containerClassName="w-full" value={searchQuery} onChange={({ currentTarget }) => @@ -406,7 +406,7 @@ function SavedSoundsView() { if (savedSounds.length === 0) { return ( - <div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4"> + <div className="bg-background flex h-full flex-col items-center justify-center gap-3 p-4"> <HugeiconsIcon icon={FavouriteIcon} className="text-muted-foreground size-10" diff --git a/apps/web/src/components/editor/panels/assets/views/stickers.tsx b/apps/web/src/components/editor/panels/assets/views/stickers.tsx index 6b48e775..68ba91d2 100644 --- a/apps/web/src/components/editor/panels/assets/views/stickers.tsx +++ b/apps/web/src/components/editor/panels/assets/views/stickers.tsx @@ -149,7 +149,7 @@ function CollectionGrid({ function EmptyView({ message }: { message: string }) { return ( - <div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4"> + <div className="bg-background flex h-full flex-col items-center justify-center gap-3 p-4"> <HugeiconsIcon icon={HappyIcon} className="text-muted-foreground size-10" diff --git a/apps/web/src/components/editor/panels/assets/views/text.tsx b/apps/web/src/components/editor/panels/assets/views/text.tsx index 6ccf5d98..6360c363 100644 --- a/apps/web/src/components/editor/panels/assets/views/text.tsx +++ b/apps/web/src/components/editor/panels/assets/views/text.tsx @@ -27,7 +27,7 @@ export function TextView() { <DraggableItem name="Default text" preview={ - <div className="bg-panel-accent flex size-full items-center justify-center rounded"> + <div className="bg-accent flex size-full items-center justify-center rounded"> <span className="text-xs select-none">Default text</span> </div> } |