duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(furni-editor): graphical reskin — teal hero header w/ big preview + dynamic name + chips, soft card sections, LIVE pulse on display-name card, page bg

Browse Source
This commit is contained in:
simoleo89
2026-06-06 13:26:15 +02:00
parent 02f549827c
commit 2d93fc9220
1 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/furni-editor/views/FurniEditorEditView.tsx
+26 -23
View File
@@ -35,16 +35,16 @@ const Section: FC<SectionProps> = ({ title, children, defaultOpen = true }) =>
const [ open, setOpen ] = useState(defaultOpen); const [ open, setOpen ] = useState(defaultOpen);
return ( return (
<div className="bg-white rounded border border-[#ccc]"> <div className="bg-white rounded-lg border border-[#d9ddd5] shadow-sm overflow-hidden">
<button <button
type="button" type="button"
className="w-full flex items-center justify-between px-2 py-1.5 cursor-pointer hover:bg-[#f5f5f5] transition-colors" className="w-full flex items-center justify-between px-2.5 py-2 cursor-pointer hover:bg-[#f5f7f3] transition-colors"
onClick={ () => setOpen(p => !p) } onClick={ () => setOpen(p => !p) }
> >
<Text small bold variant="primary">{ title }</Text> <Text small bold variant="primary" className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-primary" />{ title }</Text>
<span className="text-[10px] text-[#999]">{ open ? '▼' : '▶' }</span> <span className="text-[10px] text-[#aab2a3] transition-transform duration-200" style={ { transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' } }>▼</span>
</button> </button>
{ open && <div className="px-2 pb-2">{ children }</div> } { open && <div className="px-2.5 pb-2.5 pt-0.5">{ children }</div> }
</div> </div>
); );
}; };
@@ -220,28 +220,31 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
const readonlyClass = 'w-full px-2 py-1 text-sm font-mono rounded-sm border border-[#ddd] bg-[#f2f2eb] text-[#555] select-all'; const readonlyClass = 'w-full px-2 py-1 text-sm font-mono rounded-sm border border-[#ddd] bg-[#f2f2eb] text-[#555] select-all';
return ( return (
<Column gap={ 1 } className="h-full overflow-auto"> <Column gap={ 2 } className="h-full overflow-auto bg-gradient-to-b from-[#eef1ec] to-[#e2e6df] p-2">
{ /* Header */ } { /* Hero header */ }
<Flex gap={ 2 } alignItems="center" className="mb-1"> <div className="relative overflow-hidden rounded-lg border border-[#15506b] shadow-md bg-gradient-to-br from-primary to-[#0f4a63]">
<Button variant="secondary" onClick={ handleBack }>Back</Button> <Flex alignItems="center" gap={ 2 } className="p-2.5">
<div className="bg-[#e9ecef] rounded border border-[#ccc] flex items-center justify-center w-[48px] h-[48px]"> <div className="shrink-0 w-[68px] h-[68px] rounded-md bg-[#eef1ec] border border-white/40 shadow-inner flex items-center justify-center overflow-hidden">
<LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-150" /> <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-[2]" />
</div> </div>
<Flex column gap={ 0 }> <Flex column gap={ 0 } className="min-w-0 flex-1">
<Flex alignItems="center" gap={ 1 }> <Text bold className="truncate text-white text-[15px] leading-tight drop-shadow-sm">{ furniName || form.publicName || form.itemName }</Text>
<Text bold className="text-[12px] font-mono text-[#555]">ID: { item.id }</Text> <Text className="truncate text-white/70 text-[10px] font-mono">{ form.itemName }</Text>
<span className="text-[#999]">|</span> <Flex alignItems="center" gap={ 1 } className="mt-1 flex-wrap">
<Text bold className="text-[12px] font-mono text-[#555]">Sprite: { item.spriteId }</Text> <span className="text-[9px] font-bold text-white/90 bg-white/15 rounded px-1.5 py-0.5">ID { item.id }</span>
<span className="text-[9px] font-bold text-white/90 bg-white/15 rounded px-1.5 py-0.5">SPRITE { item.spriteId }</span>
<span className="text-[9px] font-bold text-white/90 bg-white/15 rounded px-1.5 py-0.5">{ item.usageCount } IN USE</span>
{ isDirty && <span className="text-[9px] font-bold text-[#15506b] bg-amber-300 rounded px-1.5 py-0.5">UNSAVED</span> }
</Flex>
</Flex> </Flex>
<Text small variant="gray">({ item.usageCount } in use)</Text> <Button variant="secondary" onClick={ handleBack } className="self-start shrink-0">Back</Button>
</Flex> </Flex>
{ isDirty && <span className="text-[10px] text-orange-500 font-bold ml-auto">Unsaved changes</span> } </div>
</Flex>
{ /* Primary edit surface: furnidata display name + description (server-authoritative, live) */ } { /* Primary edit surface: furnidata display name + description (server-authoritative, live) */ }
<div className="bg-white rounded border border-primary/40 shadow-sm"> <div className="bg-white rounded-lg border-2 border-primary/50 shadow-md overflow-hidden">
<div className="flex items-center justify-between px-2 py-1.5 border-b border-[#eee]"> <div className="flex items-center justify-between px-2.5 py-2 bg-gradient-to-r from-primary/10 to-transparent border-b border-primary/20">
<Text small bold variant="primary">Display Name &amp; Description</Text> <Text small bold variant="primary" className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />Display Name &amp; Description<span className="text-[8px] font-bold text-white bg-primary rounded px-1 py-0.5 ml-1">LIVE</span></Text>
{ (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) && { (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
<span className="text-[10px] text-orange-500 font-bold">Unsaved</span> } <span className="text-[10px] text-orange-500 font-bold">Unsaved</span> }
</div> </div>