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

38
src/Components/UI/UI.tsx
View file

@ -7,6 +7,7 @@ import { ContainerModel } from '../../Interfaces/ContainerModel';
import { IHistoryState } from '../../App';
import { PhotographIcon, UploadIcon } from '@heroicons/react/outline';
import FloatingButton from '../FloatingButton/FloatingButton';
import { Bar } from '../Bar/Bar';
interface IUIProps {
current: IHistoryState
@ -58,7 +59,7 @@ export class UI extends React.PureComponent<IUIProps, IUIState> {
/**
* Toggle the elements
*/
public ToggleHistory(): void {
public ToggleTimeline(): void {
this.setState({
isHistoryOpen: !this.state.isHistoryOpen
});
@ -75,47 +76,34 @@ export class UI extends React.PureComponent<IUIProps, IUIState> {
return (
<>
<Bar
isSidebarOpen={this.state.isSidebarOpen}
isElementsSidebarOpen={this.state.isElementsSidebarOpen}
isHistoryOpen={this.state.isHistoryOpen}
ToggleElementsSidebar={() => this.ToggleElementsSidebar()}
ToggleSidebar={() => this.ToggleSidebar()}
ToggleTimeline={() => this.ToggleTimeline()}
/>
<Sidebar
componentOptions={this.props.AvailableContainers}
isOpen={this.state.isSidebarOpen}
onClick={() => this.ToggleSidebar()}
buttonOnClick={(type: string) => this.props.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; Components
</button>
<ElementsSidebar
MainContainer={this.props.current.MainContainer}
SelectedContainer={this.props.current.SelectedContainer}
isOpen={this.state.isElementsSidebarOpen}
isHistoryOpen={this.state.isHistoryOpen}
onClick={() => this.ToggleElementsSidebar()}
onPropertyChange={this.props.OnPropertyChange}
selectContainer={this.props.SelectContainer}
/>
<button
className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
onClick={() => this.ToggleElementsSidebar()}
>
&#9776; Elements
</button>
<History
history={this.props.history}
historyCurrentStep={this.props.historyCurrentStep}
isOpen={this.state.isHistoryOpen}
onClick={() => this.ToggleHistory()}
jumpTo={this.props.LoadState}
/>
<button
className='fixed z-10 top-4 right-72 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
onClick={() => this.ToggleHistory()}>
&#9776; History
</button>
<FloatingButton className={`fixed z-10 flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
<button
@ -123,14 +111,14 @@ export class UI extends React.PureComponent<IUIProps, IUIState> {
title='Export as JSON'
onClick={this.props.SaveEditorAsJSON}
>
<UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
<UploadIcon className="heroicon text-white" />
</button>
<button
className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
title='Export as SVG'
onClick={this.props.SaveEditorAsSVG}
>
<PhotographIcon className="h-full w-full text-white align-middle items-center justify-center" />
<PhotographIcon className="heroicon text-white" />
</button>
</FloatingButton>
</>