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

8
src/Components/Sidebar/Sidebar.tsx
View file

@ -19,11 +19,11 @@ export default class Sidebar extends React.Component<ISidebarProps> {
const isOpenClasses = this.props.isOpen ? 'left-0' : '-left-64'; const isOpenClasses = this.props.isOpen ? 'left-0' : '-left-64';
return ( return (
<div className={`fixed bg-blue-500 dark:bg-blue-500 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}> <div className={`fixed bg-blue-500 dark:bg-blue-500 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<div className='w-full h-auto p-4 flex justify-end' onClick={this.props.onClick}> <button className='close-button hover:bg-blue-600 justify-end' onClick={this.props.onClick}>
<button className='text-lg'>&times;</button> Close &times;
</div> </button>
<div className='bg-blue-400 sidebar-row'> <div className='bg-blue-400 sidebar-row'>
Composants Components
</div> </div>
{listElements} {listElements}
</div> </div>

6
src/index.css
View file

@ -6,4 +6,10 @@
.sidebar-row { .sidebar-row {
@apply p-6 w-full @apply p-6 w-full
} }
.elements-sidebar-row {
@apply pl-6 pr-6 pt-2 pb-2 w-full
}
.close-button {
@apply transition-all w-full h-auto p-4 flex
}
} }