Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Improve sidebar style

Browse source
This commit is contained in:
Siklos 2022-08-01 17:15:45 +02:00
parent d2492520b4
commit d155e345e8
2 changed files with 26 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Components/ElementsSidebar/ElementsSidebar.tsx
View file

@ -48,7 +48,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
? 'bg-blue-500 hover:bg-blue-600' ? 'bg-blue-500 hover:bg-blue-600'
: 'bg-slate-400 hover:bg-slate-600'; : 'bg-slate-400 hover:bg-slate-600';
containerRows.push( containerRows.push(
<button className={`elements-sidebar-row whitespace-pre text-left text-sm transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}> <button className={`elements-sidebar-row whitespace-pre text-left text-sm font-medium transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
{ text } { text }
</button> </button>
); );
@ -62,7 +62,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
<div className='bg-slate-500 sidebar-row'> <div className='bg-slate-500 sidebar-row'>
Elements Elements
</div> </div>
<div className='overflow-auto divide-y divide-solid divide-slate-500'> <div className='overflow-auto text-slate-200 flex-grow divide-y divide-solid divide-slate-500'>
{ containerRows } { containerRows }
</div> </div>
<Properties properties={this.props.SelectedContainer?.GetProperties()} onChange={this.props.onPropertyChange}></Properties> <Properties properties={this.props.SelectedContainer?.GetProperties()} onChange={this.props.onPropertyChange}></Properties>

30
src/Components/Properties/Properties.tsx
View file

@ -26,22 +26,40 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
} }
const groupInput: React.ReactNode[] = []; const groupInput: React.ReactNode[] = [];
Object.entries(this.props.properties).forEach((pair) => this.handleProperties(pair, groupInput)); Object
.entries(this.props.properties)
.forEach((pair) => this.handleProperties(pair, groupInput));
return ( return (
<div> <div className='p-3 bg-slate-500 h-3/5 overflow-y-auto'>
{ groupInput } { groupInput }
</div> </div>
); );
} }
public handleProperties = ([key, value]: [string, string | number], groupInput: React.ReactNode[]) => { public handleProperties = (
[key, value]: [string, string | number],
groupInput: React.ReactNode[]
) => {
const id = `property-${key}`; const id = `property-${key}`;
const type = typeof value === 'number' ? 'number' : 'text'; const type = typeof value === 'number' ? 'number' : 'text';
const isDisabled = key === 'id'; // hardcoded
groupInput.push( groupInput.push(
<div key={id}> <div key={id} className='mt-4'>
<label className='' htmlFor={id}>{key}</label> <label className='text-sm font-medium text-slate-200' htmlFor={id}>{key}</label>
<input className='text-black' type={type} id={id} value={value} onChange={(event) => this.props.onChange(key, event.target.value)} /> <input
className='text-base font-medium transition-all text-slate-200 mt-1 block w-full px-3 py-2
bg-slate-600 border-2 border-slate-600 rounded-lg shadow-sm placeholder-slate-400
focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
disabled:bg-slate-700 disabled:text-slate-400 disabled:border-slate-700 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-5002'
type={type}
id={id}
value={value}
onChange={(event) => this.props.onChange(key, event.target.value)}
disabled={isDisabled}
/>
</div> </div>
); );
}; };