Improve dropdown menus, animation ⚡
This commit is contained in:
@ -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;
|
||||
|
42
frontend/components/DropdownMenu/DropdownMenuItem.js
Normal file
42
frontend/components/DropdownMenu/DropdownMenuItem.js
Normal 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;
|
@ -1,2 +1,3 @@
|
||||
// @flow
|
||||
export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
|
||||
export { default as DropdownMenu } from './DropdownMenu';
|
||||
export { default as DropdownMenuItem } from './DropdownMenuItem';
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
Reference in New Issue
Block a user