diff --git a/frontend/components/Collaborators/Collaborators.js b/frontend/components/Collaborators/Collaborators.js
index ae62fd1b4..8bb7c7882 100644
--- a/frontend/components/Collaborators/Collaborators.js
+++ b/frontend/components/Collaborators/Collaborators.js
@@ -25,15 +25,20 @@ const Collaborators = function({ document }: { document: Document }) {
return (
-
+
{collaborators.map(user => (
))}
-
+
);
};
+const StyledTooltip = styled(Tooltip)`
+ display: flex;
+ flex-direction: row-reverse;
+`;
+
const Avatars = styled(Flex)`
flex-direction: row-reverse;
height: 26px;
@@ -45,7 +50,7 @@ const Avatar = styled.img`
flex-shrink: 0;
border-radius: 50%;
border: 2px solid ${color.white};
- margin-right: -13px;
+ margin-right: -10px;
&:first-child {
margin-right: 0;
diff --git a/frontend/components/DocumentPreview/DocumentPreview.js b/frontend/components/DocumentPreview/DocumentPreview.js
index f82bb1424..ad8002954 100644
--- a/frontend/components/DocumentPreview/DocumentPreview.js
+++ b/frontend/components/DocumentPreview/DocumentPreview.js
@@ -15,13 +15,18 @@ type Props = {
innerRef?: Function,
};
-const StyledStar = styled(Icon).attrs({
+const StyledStar = styled(({ solid, ...props }) => ).attrs({
type: 'Star',
color: color.text,
})`
+ width: 16px;
+ height: 16px;
+ top: 1px;
margin-left: 4px;
opacity: ${props => (props.solid ? '1 !important' : 0)};
transition: opacity 100ms ease-in-out;
+
+ ${props => props.solid && 'polygon { fill: #000};'}
`;
const DocumentLink = styled(Link)`
diff --git a/frontend/components/DropdownMenu/DropdownMenu.js b/frontend/components/DropdownMenu/DropdownMenu.js
index 20ecf1ce8..89fa150c5 100644
--- a/frontend/components/DropdownMenu/DropdownMenu.js
+++ b/frontend/components/DropdownMenu/DropdownMenu.js
@@ -92,12 +92,15 @@ const MenuItem = styled.div`
cursor: pointer;
border-left: 2px solid transparent;
+ color: ${color.text};
+
span {
margin-top: 2px;
}
a {
text-decoration: none;
+ color: ${color.text};
width: 100%;
}
diff --git a/frontend/components/HelpText/HelpText.js b/frontend/components/HelpText/HelpText.js
index ac4b96673..dcb48df84 100644
--- a/frontend/components/HelpText/HelpText.js
+++ b/frontend/components/HelpText/HelpText.js
@@ -3,7 +3,6 @@ import styled from 'styled-components';
import { color } from 'styles/constants';
const HelpText = styled.p`
- user-select: none;
color: ${color.slateDark};
`;
diff --git a/frontend/components/LoadingPlaceholder/ListPlaceholder.js b/frontend/components/LoadingPlaceholder/ListPlaceholder.js
index bf26f0f52..7fba72172 100644
--- a/frontend/components/LoadingPlaceholder/ListPlaceholder.js
+++ b/frontend/components/LoadingPlaceholder/ListPlaceholder.js
@@ -1,11 +1,16 @@
// @flow
import React from 'react';
+import _ from 'lodash';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import styled from 'styled-components';
import Mask from './components/Mask';
import Flex from 'components/Flex';
-export default (props: Object) => {
+type Props = {
+ count?: number,
+};
+
+const ListPlaceHolder = ({ count }: Props) => {
return (
{
transitionEnter
transitionLeave
>
- -
-
-
-
- -
-
-
-
+ {_.times(count || 2, index => (
+ -
+
+
+
+ ))}
);
};
@@ -31,3 +34,5 @@ export default (props: Object) => {
const Item = styled(Flex)`
padding: 18px 0;
`;
+
+export default ListPlaceHolder;
diff --git a/frontend/scenes/Dashboard/Dashboard.js b/frontend/scenes/Dashboard/Dashboard.js
index f8adf4b03..9b363c3e8 100644
--- a/frontend/scenes/Dashboard/Dashboard.js
+++ b/frontend/scenes/Dashboard/Dashboard.js
@@ -1,9 +1,11 @@
// @flow
import React from 'react';
+import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
import DocumentsStore from 'stores/DocumentsStore';
+import Flex from 'components/Flex';
import DocumentList from 'components/DocumentList';
import PageTitle from 'components/PageTitle';
import CenteredContent from 'components/CenteredContent';
@@ -26,29 +28,33 @@ type Props = {
@observer class Dashboard extends React.Component {
props: Props;
+ @observable isLoaded = false;
componentDidMount() {
- this.props.documents.fetchRecentlyModified({ limit: 5 });
- this.props.documents.fetchRecentlyViewed({ limit: 5 });
+ this.loadContent();
}
- get showPlaceholder() {
- const { isLoaded, isFetching } = this.props.documents;
- return !isLoaded && isFetching;
- }
+ loadContent = async () => {
+ await Promise.all([
+ this.props.documents.fetchRecentlyModified({ limit: 5 }),
+ this.props.documents.fetchRecentlyViewed({ limit: 5 }),
+ ]);
+ this.isLoaded = true;
+ };
render() {
return (
Home
- Recently viewed
- {this.showPlaceholder && }
-
-
- Recently edited
-
- {this.showPlaceholder && }
+ {this.isLoaded
+ ?
+ Recently viewed
+
+ Recently edited
+
+
+ : }
);
}
diff --git a/frontend/stores/DocumentsStore.js b/frontend/stores/DocumentsStore.js
index 444a47bbf..7ccedcad5 100644
--- a/frontend/stores/DocumentsStore.js
+++ b/frontend/stores/DocumentsStore.js
@@ -88,7 +88,7 @@ class DocumentsStore extends BaseStore {
};
@action fetchRecentlyModified = async (options: ?Object): Promise<*> => {
- return this.fetchAll('list', options);
+ return await this.fetchAll('list', options);
};
@action fetchRecentlyViewed = async (options: ?Object): Promise<*> => {