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

feat: separate draft count and icon in sidebar

Browse Source
This commit is contained in:
Tom Moor
2019-08-05 23:17:41 -07:00
parent 7f10fe728f
commit c18e4cd43e
2 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/Sidebar/Main.js
View File

@ -1,6 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
import { import {
ArchiveIcon, ArchiveIcon,
HomeIcon, HomeIcon,
@ -98,14 +99,14 @@ class MainSidebar extends React.Component<Props> {
/> />
<SidebarLink <SidebarLink
to="/drafts" to="/drafts"
icon={ icon={<EditIcon />}
draftDocumentsCount > 0 && draftDocumentsCount < 10 ? ( label={
<Drafts align="center">
Drafts{draftDocumentsCount > 0 && (
<Bubble count={draftDocumentsCount} /> <Bubble count={draftDocumentsCount} />
) : ( )}
<EditIcon /> </Drafts>
)
} }
label="Drafts"
active={ active={
documents.active ? !documents.active.publishedAt : undefined documents.active ? !documents.active.publishedAt : undefined
} }
@ -146,4 +147,8 @@ class MainSidebar extends React.Component<Props> {
} }
} }
const Drafts = styled(Flex)`
height: 24px;
`;
export default inject('documents', 'auth', 'ui')(MainSidebar); export default inject('documents', 'auth', 'ui')(MainSidebar);

13
app/components/Sidebar/components/Bubble.js
View File

@ -2,25 +2,15 @@
import * as React from 'react'; import * as React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { fadeAndScaleIn } from 'shared/styles/animations'; import { fadeAndScaleIn } from 'shared/styles/animations';
import Flex from 'shared/components/Flex';
type Props = { type Props = {
count: number, count: number,
}; };
const Bubble = ({ count }: Props) => { const Bubble = ({ count }: Props) => {
return ( return <Count>{count}</Count>;
<Wrapper align="center" justify="center">
<Count>{count}</Count>
</Wrapper>
);
}; };
const Wrapper = styled(Flex)`
width: 24px;
height: 24px;
`;
const Count = styled.div` const Count = styled.div`
animation: ${fadeAndScaleIn} 200ms ease; animation: ${fadeAndScaleIn} 200ms ease;
border-radius: 100%; border-radius: 100%;
@ -35,6 +25,7 @@ const Count = styled.div`
min-height: 16px; min-height: 16px;
text-align: center; text-align: center;
padding: 0 4px; padding: 0 4px;
margin-left: 8px;
`; `;
export default Bubble; export default Bubble;