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

Implement main bar + Change colors
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse source
This commit is contained in:
Siklos 2022-08-08 11:23:15 +02:00
parent dae2f20e76
commit a42ac77d33
12 changed files with 138 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/Components/ElementsSidebar/ElementsSidebar.test.tsx
View file

@ -1,4 +1,4 @@
import { describe, test, expect, vi } from 'vitest';
import { describe, expect, vi } from 'vitest';
import * as React from 'react';
import { fireEvent, render, screen } from '../../utils/test-utils';
import { ElementsSidebar } from './ElementsSidebar';
@ -11,7 +11,6 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={null}
onClick={() => {}}
onPropertyChange={() => {}}
selectContainer={() => {}}
/>);
@ -39,7 +38,6 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={null}
onClick={() => {}}
onPropertyChange={() => {}}
selectContainer={() => {}}
/>);
@ -69,7 +67,6 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={MainContainer}
onClick={() => {}}
onPropertyChange={() => {}}
selectContainer={() => {}}
/>);
@ -154,7 +151,6 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={MainContainer}
onClick={() => {}}
onPropertyChange={() => {}}
selectContainer={() => {}}
/>);
@ -207,7 +203,6 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={SelectedContainer}
onClick={() => {}}
onPropertyChange={() => {}}
selectContainer={selectContainer}
/>);
@ -229,7 +224,6 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={SelectedContainer}
onClick={() => {}}
onPropertyChange={() => {}}
selectContainer={selectContainer}
/>);

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

@ -9,7 +9,6 @@ interface IElementsSidebarProps {
isOpen: boolean
isHistoryOpen: boolean
SelectedContainer: IContainerModel | null
onClick: () => void
onPropertyChange: (key: string, value: string) => void
selectContainer: (container: IContainerModel) => void
}
@ -42,8 +41,8 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
const selectedClass: string = this.props.SelectedContainer !== undefined &&
this.props.SelectedContainer !== null &&
this.props.SelectedContainer.properties.id === container.properties.id
? 'bg-blue-500 hover:bg-blue-600'
: 'bg-slate-400 hover:bg-slate-600';
? 'border-l-4 border-blue-500 bg-slate-400/60 hover:bg-slate-400'
: 'bg-slate-300/60 hover:bg-slate-300';
containerRows.push(
<motion.button
whileHover={{ scale: 1.05 }}
@ -65,14 +64,11 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
});
return (
<div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<button className='close-button bg-slate-400 hover:bg-slate-600 justify-start' onClick={this.props.onClick}>
&times; Close
</button>
<div className='bg-slate-500 sidebar-row'>
<div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<div className='bg-slate-100 font-bold sidebar-title'>
Elements
</div>
<div className='overflow-y-auto overflow-x-hidden text-slate-200 flex-grow divide-y divide-solid divide-slate-500'>
<div className='overflow-y-auto overflow-x-hidden text-gray-800 flex-grow'>
{ containerRows }
</div>
<Properties properties={this.props.SelectedContainer?.properties} onChange={this.props.onPropertyChange}></Properties>