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

Add framer motion + add animation on elementsSidebar

Browse source
This commit is contained in:
Siklos 2022-08-01 19:08:40 +02:00
parent d155e345e8
commit 42d2d20fd0
3 changed files with 375 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import * as React from 'react';
import { motion } from 'framer-motion';
import { Properties } from '../Properties/Properties';
import { Container } from '../SVG/Elements/Container';
@ -48,21 +49,34 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
? 'bg-blue-500 hover:bg-blue-600'
: 'bg-slate-400 hover:bg-slate-600';
containerRows.push(
<button className={`elements-sidebar-row whitespace-pre text-left text-sm font-medium transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 1.2 }}
initial={{ opacity: 0, scale: 0 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.150
}}
className={
`w-full elements-sidebar-row whitespace-pre
text-left text-sm font-medium transition-all ${selectedClass}`
}
key={key}
onClick={() => this.props.selectContainer(container)}>
{ text }
</button>
</motion.button>
);
});
return (
<div className={`fixed flex flex-col bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<button className='close-button hover:bg-slate-600 justify-start' onClick={this.props.onClick}>
<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'>
Elements
</div>
<div className='overflow-auto text-slate-200 flex-grow divide-y divide-solid divide-slate-500'>
<div className='overflow-y-auto overflow-x-hidden text-slate-200 flex-grow divide-y divide-solid divide-slate-500'>
{ containerRows }
</div>
<Properties properties={this.props.SelectedContainer?.GetProperties()} onChange={this.props.onPropertyChange}></Properties>