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

Move draft bubble inline with menu icons

Browse Source
This commit is contained in:
Tom Moor
2019-01-06 16:25:05 -08:00
parent b9765fb59e
commit a68ad856a3
2 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,6 +42,8 @@ class MainSidebar extends React.Component<Props> {
const { user, team } = auth; const { user, team } = auth;
if (!user || !team) return null; if (!user || !team) return null;
const draftDocumentsCount = documents.drafts.length;
return ( return (
<Sidebar> <Sidebar>
<AccountMenu <AccountMenu
@ -72,15 +74,17 @@ class MainSidebar extends React.Component<Props> {
/> />
<SidebarLink <SidebarLink
to="/drafts" to="/drafts"
icon={<EditIcon />} icon={
draftDocumentsCount > 0 && draftDocumentsCount < 10 ? (
<Bubble count={draftDocumentsCount} />
) : (
<EditIcon />
)
}
label="Drafts"
active={ active={
documents.active ? !documents.active.publishedAt : undefined documents.active ? !documents.active.publishedAt : undefined
} }
label={
<React.Fragment>
Drafts <Bubble count={documents.drafts.length} />
</React.Fragment>
}
/> />
</Section> </Section>
<Section> <Section>

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

@ -2,32 +2,39 @@
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 !!count && <Wrapper>{count}</Wrapper>; return (
<Wrapper align="center" justify="center">
<Count>{count}</Count>
</Wrapper>
);
}; };
const Wrapper = styled.div` const Wrapper = styled(Flex)`
animation: ${fadeAndScaleIn} 200ms ease; width: 24px;
height: 24px;
`;
const Count = styled.div`
animation: ${fadeAndScaleIn} 200ms ease;
border-radius: 100%; border-radius: 100%;
color: ${props => props.theme.white}; color: ${props => props.theme.white};
background: ${props => props.theme.slateDark}; background: ${props => props.theme.slateDark};
display: inline-block; display: inline-block;
font-feature-settings: "tnum"; font-feature-settings: 'tnum';
font-weight: 500; font-weight: 600;
font-size: 10px; font-size: 9px;
min-width: 15px; line-height: 16px;
min-width: 16px;
min-height: 16px;
text-align: center;
padding: 0 4px; padding: 0 4px;
position: relative;
top: -2px;
left: 2px;
}
`; `;
export default Bubble; export default Bubble;