yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upgrade prettier

Browse Source
This commit is contained in:
Tom Moor
2017-11-10 14:14:30 -08:00
parent c737b613e4
commit ab13f51d5d
79 changed files with 780 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Editor/components/Toolbar/BlockToolbar.js
View File

@@ -170,7 +170,7 @@ const Bar = styled(Flex)`
&:before,
&:after {
content: "";
content: '';
position: absolute;
left: -100%;
width: 100%;

31
app/components/Editor/components/Toolbar/Toolbar.js
View File

@@ -99,7 +99,9 @@ export default class Toolbar extends Component {
const left =
rect.left + window.scrollX - this.menu.offsetWidth / 2 + rect.width / 2;
data.top = `${Math.round(rect.top + window.scrollY - this.menu.offsetHeight)}px`;
data.top = `${Math.round(
rect.top + window.scrollY - this.menu.offsetHeight
)}px`;
data.left = `${Math.round(Math.max(padding, left))}px`;
this.setState(data);
}
@@ -120,17 +122,15 @@ export default class Toolbar extends Component {
return (
<Portal>
<Menu active={this.state.active} innerRef={this.setRef} style={style}>
{link &&
<LinkToolbar
{...this.props}
link={link}
onBlur={this.handleBlur}
/>}
{!link &&
{link && (
<LinkToolbar {...this.props} link={link} onBlur={this.handleBlur} />
)}
{!link && (
<FormattingToolbar
onCreateLink={this.handleFocus}
{...this.props}
/>}
/>
)}
</Menu>
</Portal>
);
@@ -144,16 +144,19 @@ const Menu = styled.div`
top: -10000px;
left: -10000px;
opacity: 0;
background-color: #2F3336;
background-color: #2f3336;
border-radius: 4px;
transform: scale(.95);
transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: scale(0.95);
transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
line-height: 0;
height: 40px;
min-width: 260px;
${({ active }) => active && `
${({ active }) =>
active &&
`
transform: translateY(-6px) scale(1);
opacity: 1;
`}
`};
`;

4
app/components/Editor/components/Toolbar/components/DocumentResult.js
View File

@@ -14,7 +14,9 @@ type Props = {
function DocumentResult({ document, ...rest }: Props) {
return (
<ListItem {...rest} href="">
<i><NextIcon light /></i>
<i>
<NextIcon light />
</i>
{document.title}
</ListItem>
);

19
app/components/Editor/components/Toolbar/components/FormattingToolbar.js
View File

@@ -42,7 +42,10 @@ class FormattingToolbar extends Component {
ev.preventDefault();
let { state } = this.props;
state = state.transform().toggleMark(type).apply();
state = state
.transform()
.toggleMark(type)
.apply();
this.props.onChange(state);
};
@@ -50,7 +53,10 @@ class FormattingToolbar extends Component {
ev.preventDefault();
let { state } = this.props;
state = state.transform().setBlock(type).apply();
state = state
.transform()
.setBlock(type)
.apply();
this.props.onChange(state);
};
@@ -59,7 +65,10 @@ class FormattingToolbar extends Component {
ev.stopPropagation();
let { state } = this.props;
const data = { href: '' };
state = state.transform().wrapInline({ type: 'link', data }).apply();
state = state
.transform()
.wrapInline({ type: 'link', data })
.apply();
this.props.onChange(state);
this.props.onCreateLink();
};
@@ -109,8 +118,8 @@ class FormattingToolbar extends Component {
const Separator = styled.div`
height: 100%;
width: 1px;
background: #FFF;
opacity: .2;
background: #fff;
opacity: 0.2;
display: inline-block;
margin-left: 10px;
`;

20
app/components/Editor/components/Toolbar/components/LinkToolbar.js
View File

@@ -39,7 +39,8 @@ class LinkToolbar extends Component {
this.isEditing = !!this.props.link.data.get('href');
}
@action search = async () => {
@action
search = async () => {
this.isFetching = true;
if (this.searchTerm) {
@@ -144,15 +145,16 @@ class LinkToolbar extends Component {
onChange={this.onChange}
autoFocus
/>
{this.isEditing &&
{this.isEditing && (
<ToolbarButton onMouseDown={this.openLink}>
<OpenIcon light />
</ToolbarButton>}
</ToolbarButton>
)}
<ToolbarButton onMouseDown={this.removeLink}>
{this.isEditing ? <TrashIcon light /> : <CloseIcon light />}
</ToolbarButton>
</LinkEditor>
{hasResults &&
{hasResults && (
<SearchResults>
<ArrowKeyNavigation
mode={ArrowKeyNavigation.mode.VERTICAL}
@@ -165,7 +167,8 @@ class LinkToolbar extends Component {
return (
<DocumentResult
innerRef={ref =>
index === 0 && this.setFirstDocumentRef(ref)}
index === 0 && this.setFirstDocumentRef(ref)
}
document={document}
key={document.id}
onClick={ev => this.selectDocument(ev, document)}
@@ -173,14 +176,15 @@ class LinkToolbar extends Component {
);
})}
</ArrowKeyNavigation>
</SearchResults>}
</SearchResults>
)}
</span>
);
}
}
const SearchResults = styled.div`
background: #2F3336;
background: #2f3336;
position: absolute;
top: 100%;
width: 100%;
@@ -199,7 +203,7 @@ const LinkEditor = styled(Flex)`
const Input = styled.input`
font-size: 15px;
background: rgba(255,255,255,.1);
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
padding: 4px 8px;
border: 0;

4
app/components/Editor/components/Toolbar/components/ToolbarButton.js
View File

@@ -12,7 +12,7 @@ export default styled.button`
background: none;
transition: opacity 100ms ease-in-out;
padding: 0;
opacity: .7;
opacity: 0.7;
&:first-child {
margin-left: 0;
@@ -22,5 +22,5 @@ export default styled.button`
opacity: 1;
}
${({ active }) => active && 'opacity: 1;'}
${({ active }) => active && 'opacity: 1;'};
`;