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

Drag and Drop Import (#95)

Browse Source 
* Drag and drop files into collection first pass

* Allow import of sub documents
Fix up UI styles

* Import Loading indicator

* Drag onto document to import
This commit is contained in:
Tom Moor
2017-07-08 22:12:14 -07:00
committed by GitHub
parent b7e1ac8a36
commit 444c8afb2a
10 changed files with 283 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/components/Layout/Layout.js
View File

@ -7,11 +7,12 @@ import { observer, inject } from 'mobx-react';
import _ from 'lodash';
import keydown from 'react-keydown';
import Flex from 'components/Flex';
import { textColor } from 'styles/constants.scss';
import { color, layout } from 'styles/constants';
import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
import { LoadingIndicatorBar } from 'components/LoadingIndicator';
import Scrollable from 'components/Scrollable';
import Avatar from 'components/Avatar';
import SidebarCollection from './components/SidebarCollection';
import SidebarCollectionList from './components/SidebarCollectionList';
@ -115,8 +116,9 @@ type Props = {
? <SidebarCollection
document={ui.activeDocument}
collection={ui.activeCollection}
history={this.props.history}
/>
: <SidebarCollectionList />}
: <SidebarCollectionList history={this.props.history} />}
</LinkSection>
</Scrollable>
</Flex>
@ -141,19 +143,13 @@ const LogoLink = styled(Link)`
margin-top: 15px;
font-family: 'Atlas Grotesk';
font-weight: bold;
color: ${textColor};
color: ${color.text};
text-decoration: none;
font-size: 16px;
`;
const Avatar = styled.img`
width: 24px;
height: 24px;
border-radius: 50%;
`;
const MenuLink = styled(Link)`
color: ${textColor};
color: ${color.text};
`;
const Content = styled(Flex)`
@ -162,13 +158,13 @@ const Content = styled(Flex)`
top: 0;
bottom: 0;
right: 0;
left: ${props => (props.editMode ? 0 : '250px')};
left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
transition: left 200ms ease-in-out;
`;
const Sidebar = styled(Flex)`
width: 250px;
margin-left: ${props => (props.editMode ? '-250px' : 0)};
width: ${layout.sidebarWidth};
margin-left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
background: rgba(250, 251, 252, 0.71);
border-right: 1px solid #eceff3;
transition: margin-left 200ms ease-in-out;
@ -176,12 +172,12 @@ const Sidebar = styled(Flex)`
const Header = styled(Flex)`
flex-shrink: 0;
padding: 10px 20px;
padding: ${layout.padding};
`;
const LinkSection = styled(Flex)`
flex-direction: column;
padding: 10px 20px;
padding: 10px 0;
`;
export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout));