stepus53/ustk-todolist
1
0
Fork 0
mirror of https://github.com/usatiuk/ustk-todolist.git synced 2025-10-28 23:57:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix list creating/editing

Browse Source
This commit is contained in:
Stepan Usatiuk
2018-08-25 19:25:04 +03:00
parent 74a5a66fa7
commit e7adbcc38d
3 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
react/src/components/lists/ListActions.js
View File

@@ -87,7 +87,7 @@ export default function ListActions({
config={config.stiff} config={config.stiff}
keys={actions.map(action => action({}).key)} keys={actions.map(action => action({}).key)}
from={{ opacity: 0, height: 0, margin: 0, padding: 0 }} from={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
enter={{ opacity: 1, height: 30 }} enter={{ opacity: 1, height: 30, margin: 0, padding: 0 }}
leave={{ opacity: 0, height: 0, margin: 0, padding: 0 }} leave={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
> >
{actions} {actions}

3
react/src/components/lists/Selector.css
View File

@@ -5,6 +5,8 @@
align-self: center; align-self: center;
background-color: #fbfbfb; background-color: #fbfbfb;
flex-grow: 1; flex-grow: 1;
margin-top: 1rem;
margin-bottom: 1rem;
} }
#listselector input { #listselector input {
@@ -17,7 +19,6 @@
background-color: #fbfbfb; background-color: #fbfbfb;
border-bottom: 1px solid #888888; border-bottom: 1px solid #888888;
width: 80%; width: 80%;
margin: 1rem 0;
} }
#listselector button { #listselector button {

15
react/src/components/lists/Selector.js
View File

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Select, MenuItem } from '@material-ui/core'; import { Select, MenuItem } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import CheckIcon from '@material-ui/icons/Check'; import CheckIcon from '@material-ui/icons/Check';
import { animated, Transition } from 'react-spring'; import { Transition, config } from 'react-spring';
import './Selector.css'; import './Selector.css';
@@ -31,6 +31,7 @@ export default function Selector({
<div id="listselector" className="list--input"> <div id="listselector" className="list--input">
<Transition <Transition
native native
config={config.stiff}
from={{ paddingBottom: 18 }} from={{ paddingBottom: 18 }}
enter={{ paddingBottom: 0 }} enter={{ paddingBottom: 0 }}
leave={{ paddingBottom: 18 }} leave={{ paddingBottom: 18 }}
@@ -51,12 +52,13 @@ export default function Selector({
/> />
)} )}
</Transition> </Transition>
<animated.button <button
style={button} style={button}
type="submit"
onClick={() => input.value.trim() && addList(input.value)} onClick={() => input.value.trim() && addList(input.value)}
> >
<AddIcon style={icon} /> <AddIcon style={icon} />
</animated.button> </button>
</div> </div>
); );
} }
@@ -65,7 +67,7 @@ export default function Selector({
return ( return (
<div id="listselector" className="list--input"> <div id="listselector" className="list--input">
<Transition <Transition
native config={config.stiff}
from={{ paddingBottom: 18 }} from={{ paddingBottom: 18 }}
enter={{ paddingBottom: 0 }} enter={{ paddingBottom: 0 }}
leave={{ paddingBottom: 18 }} leave={{ paddingBottom: 18 }}
@@ -87,12 +89,13 @@ export default function Selector({
/> />
)} )}
</Transition> </Transition>
<animated.button <button
style={button} style={button}
type="submit"
onClick={() => input.value.trim() && editList(input.value)} onClick={() => input.value.trim() && editList(input.value)}
> >
<CheckIcon style={icon} /> <CheckIcon style={icon} />
</animated.button> </button>
</div> </div>
); );
} }