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

Compare commits

base: Siklos:106c403125e77d8f064010bd7a680c2c2420e682
Branches Tags
Siklos:master
Siklos:dev
Siklos:tauri
Siklos:docs
Siklos:dev.tests
...
compare: Siklos:b2a020730cef080ec45c458f8377c58cd583b5e7
Branches Tags
Siklos:master
Siklos:dev
Siklos:tauri
Siklos:docs
Siklos:dev.tests

2 commits
106c403125 ... b2a020730c

Author SHA1 Message Date
Siklos
b2a020730c ElementsSidebar: Fix hover color 2022-08-01 11:45:41 +02:00
Siklos
e5012256de Rename SVGSidebar to ElementsSidebar 2022-08-01 11:45:02 +02:00
2 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/App.tsx
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import './App.scss'; import './App.scss';
import Sidebar from './Components/Sidebar/Sidebar'; import Sidebar from './Components/Sidebar/Sidebar';
import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar'; import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar';
import { AvailableContainer } from './Interfaces/AvailableContainer'; import { AvailableContainer } from './Interfaces/AvailableContainer';
import { Configuration } from './Interfaces/Configuration'; import { Configuration } from './Interfaces/Configuration';
import { Container } from './Components/SVG/Elements/Container'; import { Container } from './Components/SVG/Elements/Container';
@ -133,7 +133,7 @@ class App extends React.Component<IAppProps> {
buttonOnClick={(type: string) => this.AddContainer(type)} buttonOnClick={(type: string) => this.AddContainer(type)}
/> />
<button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button> <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
<SVGSidebar <ElementsSidebar
MainContainer={this.state.MainContainer} MainContainer={this.state.MainContainer}
SelectedContainer={this.state.SelectedContainer} SelectedContainer={this.state.SelectedContainer}
isOpen={this.state.isSVGSidebarOpen} isOpen={this.state.isSVGSidebarOpen}

6
src/Components/SVGSidebar/SVGSidebar.tsx → src/Components/ElementsSidebar/ElementsSidebar.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { Container } from '../SVG/Elements/Container'; import { Container } from '../SVG/Elements/Container';
interface ISVGSidebarProps { interface IElementsSidebarProps {
MainContainer: Container | null, MainContainer: Container | null,
isOpen: boolean, isOpen: boolean,
SelectedContainer: Container | null, SelectedContainer: Container | null,
@ -9,7 +9,7 @@ interface ISVGSidebarProps {
selectContainer: (container: Container) => void selectContainer: (container: Container) => void
} }
export class SVGSidebar extends React.Component<ISVGSidebarProps> { export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode { public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode {
// TODO: fix this by using dfs or sort // TODO: fix this by using dfs or sort
const root = this.props.MainContainer; const root = this.props.MainContainer;
@ -49,7 +49,7 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
const text = '\t\t'.repeat(depth) + key; const text = '\t\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-slate-500' ? '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={`sidebar-row whitespace-pre text-left transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>