Improve dropdown menus, animation

This commit is contained in:
Tom Moor
2017-09-09 16:55:02 -07:00
parent dcbad23cb1
commit c919e51ce6
6 changed files with 87 additions and 77 deletions

View File

@ -5,19 +5,7 @@ import { observer } from 'mobx-react';
import styled from 'styled-components';
import Flex from 'components/Flex';
import { color } from 'styles/constants';
type MenuItemProps = {
onClick?: Function,
children?: React.Element<any>,
};
const DropdownMenuItem = ({ onClick, children }: MenuItemProps) => {
return (
<MenuItem onClick={onClick}>
{children}
</MenuItem>
);
};
import { fadeAndScaleIn } from 'styles/animations';
type DropdownMenuProps = {
label: React.Element<any>,
@ -73,37 +61,18 @@ const MenuContainer = styled.div`
`;
const Menu = styled.div`
animation: ${fadeAndScaleIn} 250ms ease;
transform-origin: 75% 0;
position: absolute;
right: 0;
z-index: 1000;
border: 1px solid #eee;
background-color: #fff;
border: ${color.slateLight};
background: ${color.white};
border-radius: 2px;
min-width: 160px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08);
`;
const MenuItem = styled.div`
margin: 0;
padding: 5px 10px;
height: 32px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
border-left: 2px solid transparent;
span {
margin-top: 2px;
}
a {
text-decoration: none;
width: 100%;
}
&:hover {
border-left: 2px solid ${color.primary};
}
`;
export { DropdownMenu, DropdownMenuItem };
export default DropdownMenu;

View File

@ -0,0 +1,42 @@
// @flow
import React from 'react';
import styled from 'styled-components';
import { color } from 'styles/constants';
const DropdownMenuItem = ({
onClick,
children,
}: {
onClick?: Function,
children?: React.Element<any>,
}) => {
return (
<MenuItem onClick={onClick}>
{children}
</MenuItem>
);
};
const MenuItem = styled.div`
margin: 0;
padding: 5px 10px;
height: 32px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-size: 15px;
a {
text-decoration: none;
width: 100%;
}
&:hover {
color: ${color.white};
background: ${color.primary};
}
`;
export default DropdownMenuItem;

View File

@ -1,2 +1,3 @@
// @flow
export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
export { default as DropdownMenu } from './DropdownMenu';
export { default as DropdownMenuItem } from './DropdownMenuItem';

View File

@ -79,6 +79,16 @@ class Document extends BaseModel {
return !this.isEmpty && !this.isSaving;
}
@computed get allowDelete(): boolean {
const collection = this.collection;
return (
collection &&
collection.type === 'atlas' &&
collection.documents &&
collection.documents.length > 1
);
}
/* Actions */
@action star = async () => {
@ -182,6 +192,14 @@ class Document extends BaseModel {
return;
};
download() {
const a = window.document.createElement('a');
a.textContent = 'download';
a.download = `${this.title}.md`;
a.href = `data:text/markdown;charset=UTF-8,${encodeURIComponent(this.text)}`;
a.click();
}
updateData(data: Object = {}, dirty: boolean = false) {
if (data.text) {
const { title, emoji } = parseTitle(data.text);

View File

@ -204,8 +204,7 @@ type Props = {
/>
<Meta align="center" justify="flex-end" readOnly={!isEditing}>
<Flex align="center">
{document &&
!isNew &&
{!isNew &&
!isEditing &&
<Collaborators document={document} />}
<HeaderAction>

View File

@ -1,6 +1,5 @@
// @flow
import React, { Component } from 'react';
import invariant from 'invariant';
import get from 'lodash/get';
import { withRouter } from 'react-router-dom';
import { observer } from 'mobx-react';
@ -21,7 +20,6 @@ type Props = {
};
onCreateChild = () => {
invariant(this.props.document, 'Document is not available');
this.props.history.push(`${this.props.document.url}/new`);
};
@ -41,42 +39,25 @@ type Props = {
};
onExport = () => {
const doc = this.props.document;
if (doc) {
const a = document.createElement('a');
a.textContent = 'download';
a.download = `${doc.title}.md`;
a.href = `data:text/markdown;charset=UTF-8,${encodeURIComponent(doc.text)}`;
a.click();
}
this.props.document.download();
};
render() {
const document = get(this.props, 'document');
if (document) {
const collection = document.collection;
const allowDelete =
collection &&
collection.type === 'atlas' &&
collection.documents &&
collection.documents.length > 1;
const collection = this.props.document.collection;
const allowDelete = this.props.document.allowDelete;
return (
<DropdownMenu label={<Icon type="MoreHorizontal" />}>
<DropdownMenu label={<Icon type="MoreHorizontal" />} top right>
{collection &&
<div>
<DropdownMenuItem onClick={this.onCreateDocument}>
New document
</DropdownMenuItem>
</div>}
</DropdownMenuItem>}
<DropdownMenuItem onClick={this.onExport}>Export</DropdownMenuItem>
{allowDelete &&
<DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
</DropdownMenu>
);
}
return null;
}
}
export default withRouter(Menu);