khalidadil/apparel-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix module issues, fix styling, add conditions to when the background removal and edit controls are shown

Browse Source
This commit is contained in:
khalid@traclabs.com
2026-04-23 08:48:11 -05:00
parent 4d19363d58
commit 628a6765f4
32 changed files with 11663 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/panels/LayersPanel.jsx
View File

@@ -1,31 +1,27 @@
import { memo } from 'react';
import '../../styles/LayersPanel.css';
export const LayersPanel = memo(function LayersPanel({ elements, selectedId, onSelect, onDelete }) {
const getIcon = (el) => el.type === 'image' ? (el.bgRemoved ? '🖼️' : '📷') : el.type === 'text' ? '📝' : '🎨';
const getName = (el) => el.type === 'image' ? (el.bgRemoved ? 'Image (BG ✓)' : 'Image') : el.type === 'text' ? (el.text?.substring(0, 20) || 'Text') : 'Sticker';
if (elements.length === 0) {
return <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--text-muted)', fontSize: '12px' }}>No elements yet. Add images, text, or stickers to your design.</div>;
return <div className="layers-empty">No elements yet. Add images, text, or stickers to your design.</div>;
}
return (
<div>
<h3 style={{ margin: '0 0 0.75rem 0', fontSize: '12px', fontWeight: '600', color: 'var(--text-secondary)', textTransform: 'uppercase' }}>Layers ({elements.length})</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
<h3 className="layers-title">Layers ({elements.length})</h3>
<div className="layers-list">
{elements.map((element) => (
<div key={element.id} onClick={() => onSelect(element.id)}
style={{
display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0.75rem',
background: selectedId === element.id ? 'var(--accent-bg)' : 'transparent',
border: `1px solid ${selectedId === element.id ? 'var(--accent)' : 'var(--border)'}`,
borderRadius: 'var(--radius-sm)', cursor: 'pointer',
}}>
<span style={{ fontSize: '14px' }}>{getIcon(element)}</span>
<span style={{ flex: 1, fontSize: '12px', color: selectedId === element.id ? 'var(--accent)' : 'var(--text-primary)', fontWeight: selectedId === element.id ? '600' : '400', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
className={`layers-item${selectedId === element.id ? ' selected' : ''}`}>
<span className="layers-item-icon">{getIcon(element)}</span>
<span className={`layers-item-name${selectedId === element.id ? ' selected' : ''}`}>
{getName(element)}
</span>
<button onClick={(e) => { e.stopPropagation(); onDelete(element.id); }}
style={{ width: '24px', height: '24px', border: 'none', borderRadius: 'var(--radius-sm)', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '14px', color: 'var(--text-muted)' }}>
className="layers-item-delete">
×
</button>
</div>