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

Improve style for sidebar elements

Browse source
This commit is contained in:
Siklos 2022-08-01 12:30:59 +02:00
parent 5121259e83
commit 43fb019e05
3 changed files with 17 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -40,13 +40,13 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
this.iterateChilds((container: Container) => {
const depth: number = Container.getDepth(container);
const key = container.props.id.toString();
const text = '\t\t'.repeat(depth) + key;
const text = '|\t'.repeat(depth) + key;
const selectedClass: string = this.props.SelectedContainer !== null &&
this.props.SelectedContainer.props.id === container.props.id
? 'bg-blue-500 hover:bg-blue-600'
: 'bg-slate-400 hover:bg-slate-600';
containerRows.push(
<button className={`sidebar-row whitespace-pre text-left transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
<button className={`elements-sidebar-row whitespace-pre text-left text-sm transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
{ text }
</button>
);
@ -54,13 +54,13 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
return (
<div className={`fixed bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<div className='w-full h-auto p-4 flex justify-start' onClick={this.props.onClick}>
<button className='text-lg'>&times;</button>
</div>
<button className='close-button hover:bg-slate-600 justify-start' onClick={this.props.onClick}>
&times; Close
</button>
<div className='bg-slate-500 sidebar-row'>
Liste des éléments
Elements
</div>
<div className='overflow-auto divide-y divide-solid'>
<div className='overflow-auto divide-y divide-solid divide-slate-500'>
{ containerRows }
</div>
</div>