diff options
Diffstat (limited to 'apps/web/src/components/editor/panels/assets/views')
6 files changed, 44 insertions, 82 deletions
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> } |