coop-cloud-chaos-patchs/outline
coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move Fade to its own component

Browse Source 
Fixed todolist strikethrough styling with nested lists
This commit is contained in:
Tom Moor 2017-11-10 17:56:09 -08:00
parent ab13f51d5d
commit f34b32b2a3
7 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/Editor/components/TodoItem.js
View File

@ -40,8 +40,11 @@ export default class TodoItem extends Component {
const ListItem = styled.li`
padding-left: 1.4em;
position: relative;
text-decoration: ${props => (props.checked ? 'line-through' : 'none')};
color: ${props => (props.checked ? color.slateDark : 'inherit')};
> p > span {
color: ${props => (props.checked ? color.slateDark : 'inherit')};
text-decoration: ${props => (props.checked ? 'line-through' : 'none')};
}
`;
const Input = styled.input`

9
app/components/Fade/Fade.js Normal file
View File

@ -0,0 +1,9 @@
// @flow
import styled from 'styled-components';
import { fadeIn } from 'shared/styles/animations';
const Fade = styled.span`
animation: ${fadeIn} ${props => props.timing || '250ms'} ease-in-out;
`;
export default Fade;

3
app/components/Fade/index.js Normal file
View File

@ -0,0 +1,3 @@
// @flow
import Fade from './Fade';
export default Fade;

7
app/components/LoadingListPlaceholder/LoadingListPlaceholder.js
View File

@ -1,9 +1,10 @@
// @flow
import React from 'react';
import styled from 'styled-components';
import { fadeIn, pulsate } from 'shared/styles/animations';
import { pulsate } from 'shared/styles/animations';
import { color } from 'shared/styles/constants';
import Flex from 'shared/components/Flex';
import Fade from 'components/Fade';
import { randomInteger } from 'shared/random';
@ -27,10 +28,6 @@ export default (props: Object) => {
);
};
const Fade = styled.span`
animation: ${fadeIn} 150ms ease-in-out;
`;
const Item = styled(Flex)`
padding: 18px 0;
`;

6
app/components/LoadingPlaceholder/ListPlaceholder.js
View File

@ -2,8 +2,8 @@
import React from 'react';
import _ from 'lodash';
import styled from 'styled-components';
import { fadeIn } from 'shared/styles/animations';
import Mask from './components/Mask';
import Fade from 'components/Fade';
import Flex from 'shared/components/Flex';
type Props = {
@ -23,10 +23,6 @@ const ListPlaceHolder = ({ count }: Props) => {
);
};
const Fade = styled.span`
animation: ${fadeIn} 150ms ease-in-out;
`;
const Item = styled(Flex)`
padding: 18px 0;
`;

7
app/components/LoadingPlaceholder/LoadingPlaceholder.js
View File

@ -1,8 +1,7 @@
// @flow
import React from 'react';
import styled from 'styled-components';
import { fadeIn } from 'shared/styles/animations';
import Mask from './components/Mask';
import Fade from 'components/Fade';
import Flex from 'shared/components/Flex';
export default function LoadingPlaceholder(props: Object) {
@ -17,7 +16,3 @@ export default function LoadingPlaceholder(props: Object) {
</Fade>
);
}
const Fade = styled.span`
animation: ${fadeIn} 150ms ease-in-out;
`;

11
app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js
View File

@ -1,9 +1,10 @@
// @flow
import React from 'react';
import styled from 'styled-components';
import { fadeIn, pulsate } from 'shared/styles/animations';
import { pulsate } from 'shared/styles/animations';
import { color } from 'shared/styles/constants';
import Flex from 'shared/components/Flex';
import Fade from 'components/Fade';
import { randomInteger } from 'shared/random';
@ -12,7 +13,7 @@ const randomValues = Array.from(
() => `${randomInteger(85, 100)}%`
);
export default (props: Object) => {
const LoadingPlaceholder = (props: Object) => {
return (
<Fade>
<Flex column auto {...props}>
@ -25,13 +26,11 @@ export default (props: Object) => {
);
};
const Fade = styled.span`
animation: ${fadeIn} 150ms ease-in-out;
`;
const Mask = styled(Flex)`
height: ${props => (props.header ? 28 : 18)}px;
margin-bottom: ${props => (props.header ? 32 : 14)}px;
background-color: ${color.smoke};
animation: ${pulsate} 1.3s infinite;
`;
export default LoadingPlaceholder;