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): space optimization — name+description side-by-side (2-col), tighter card/section padding, compact header

Browse Source
This commit is contained in:
simoleo89
2026-06-06 13:35:53 +02:00
parent 746c10b4a9
commit f4eef9d1a4
1 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/furni-editor/views/FurniEditorEditView.tsx
+23 -25
View File
@@ -38,13 +38,13 @@ const Section: FC<SectionProps> = ({ title, children, defaultOpen = true }) =>
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden"> <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
<button <button
type="button" type="button"
className="w-full flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-slate-50 transition-colors" className="w-full flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-slate-50 transition-colors"
onClick={ () => setOpen(p => !p) } onClick={ () => setOpen(p => !p) }
> >
<Text className="text-[12px] font-semibold text-slate-700">{ title }</Text> <Text className="text-[12px] font-semibold text-slate-700">{ title }</Text>
<span className="text-[11px] text-slate-400 transition-transform duration-200" style={ { transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' } }>▾</span> <span className="text-[11px] text-slate-400 transition-transform duration-200" style={ { transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' } }>▾</span>
</button> </button>
{ open && <div className="px-3 pb-3 pt-0.5">{ children }</div> } { open && <div className="px-3 pb-2.5 pt-0.5">{ children }</div> }
</div> </div>
); );
}; };
@@ -220,16 +220,16 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
const readonlyClass = 'w-full px-3 py-1.5 text-sm font-mono rounded-lg border border-slate-200 bg-slate-50 text-slate-500 select-all'; const readonlyClass = 'w-full px-3 py-1.5 text-sm font-mono rounded-lg border border-slate-200 bg-slate-50 text-slate-500 select-all';
return ( return (
<Column gap={ 2 } className="h-full overflow-auto bg-[#f6f7f9] p-3"> <Column gap={ 1 } className="h-full overflow-auto bg-[#f6f7f9] p-2">
{ /* Header */ } { /* Header */ }
<Flex alignItems="center" gap={ 3 } className="px-1"> <Flex alignItems="center" gap={ 2 } className="px-1">
<div className="shrink-0 w-16 h-16 rounded-xl bg-white border border-slate-200 shadow-sm flex items-center justify-center overflow-hidden"> <div className="shrink-0 w-14 h-14 rounded-xl bg-white border border-slate-200 shadow-sm flex items-center justify-center overflow-hidden">
<LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-[1.8]" /> <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-[1.6]" />
</div> </div>
<Flex column gap={ 0 } className="min-w-0 flex-1"> <Flex column gap={ 0 } className="min-w-0 flex-1">
<Text bold className="truncate text-slate-800 text-[16px] leading-tight">{ furniName || form.publicName || form.itemName }</Text> <Text bold className="truncate text-slate-800 text-[15px] leading-tight">{ furniName || form.publicName || form.itemName }</Text>
<Text className="truncate text-slate-400 text-[11px] font-mono">{ form.itemName }</Text> <Text className="truncate text-slate-400 text-[11px] font-mono">{ form.itemName }</Text>
<Flex alignItems="center" gap={ 1 } className="mt-1.5 flex-wrap"> <Flex alignItems="center" gap={ 1 } className="mt-1 flex-wrap">
<span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">ID { item.id }</span> <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">ID { item.id }</span>
<span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">Sprite { item.spriteId }</span> <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">Sprite { item.spriteId }</span>
<span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">{ item.usageCount } in use</span> <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">{ item.usageCount } in use</span>
@@ -240,29 +240,27 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
</Flex> </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-xl border border-slate-200 shadow-sm p-3"> <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-2.5">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-1.5">
<Text className="text-[12px] font-semibold text-slate-700">Display name &amp; description</Text> <Text className="text-[12px] font-semibold text-slate-700">Display name &amp; description</Text>
<span className="text-[9px] font-semibold text-primary bg-primary/10 rounded-md px-1.5 py-0.5">LIVE</span> <span className="text-[9px] font-semibold text-primary bg-primary/10 rounded-md px-1.5 py-0.5">LIVE</span>
{ (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) && { (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
<span className="ml-auto text-[10px] text-amber-600 font-medium">Unsaved</span> } <span className="ml-auto text-[10px] text-amber-600 font-medium">Unsaved</span> }
</div> </div>
<div> <div className="grid grid-cols-2 gap-2">
<Column gap={ 1 }> <div>
<div> <label className={ labelClass }>Display Name (furnidata)</label>
<label className={ labelClass }>Display Name (furnidata)</label> <input className={ inputClass() } value={ furniName } onChange={ e => setFurniName(e.target.value) } maxLength={ 256 } />
<input className={ inputClass() } value={ furniName } onChange={ e => setFurniName(e.target.value) } maxLength={ 256 } /> </div>
</div> <div>
<div> <label className={ labelClass }>Description</label>
<label className={ labelClass }>Description</label> <input className={ inputClass() } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } />
<textarea className={ inputClass() } rows={ 2 } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } /> </div>
</div>
<Flex gap={ 1 }>
<Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
<Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
</Flex>
</Column>
</div> </div>
<Flex gap={ 1 } className="mt-1.5">
<Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
<Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
</Flex>
</div> </div>
<Section title="Basic Info"> <Section title="Basic Info">