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

Neaten

Browse Source
This commit is contained in:
Tom Moor
2017-09-03 23:03:49 -07:00
parent 281c464d38
commit c2c7f48d85
3 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/components/DropdownMenu/DropdownMenu.js
View File

@ -22,6 +22,7 @@ const DropdownMenuItem = ({ onClick, children }: MenuItemProps) => {
type DropdownMenuProps = { type DropdownMenuProps = {
label: React.Element<any>, label: React.Element<any>,
children?: React.Element<any>, children?: React.Element<any>,
style?: Object,
}; };
@observer class DropdownMenu extends React.Component { @observer class DropdownMenu extends React.Component {
@ -42,7 +43,7 @@ type DropdownMenuProps = {
</Label> </Label>
{this.menuOpen && {this.menuOpen &&
<Menu> <Menu style={this.props.style}>
{this.props.children} {this.props.children}
</Menu>} </Menu>}
</MenuContainer> </MenuContainer>
@ -65,9 +66,7 @@ const Label = styled(Flex).attrs({
})` })`
cursor: pointer; cursor: pointer;
z-index: 1000; z-index: 1000;
min-height: 43px; min-height: 43px;
margin: 0 5px;
`; `;
const MenuContainer = styled.div` const MenuContainer = styled.div`

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

@ -131,29 +131,33 @@ type Props = {
user && user &&
team && team &&
<Sidebar column editMode={ui.editMode}> <Sidebar column editMode={ui.editMode}>
<HeaderBlock user={user} team={team}> <DropdownMenu
<DropdownMenu label={<Avatar src={user.avatarUrl} />}> style={{ marginRight: 10, marginTop: -10 }}
<DropdownMenuItem onClick={this.handleOpenSettings}> label={
Settings <HeaderBlock user={user} team={team}>
</DropdownMenuItem> <Avatar src={user.avatarUrl} />
<DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}> </HeaderBlock>
Keyboard shortcuts }
</DropdownMenuItem> >
<MenuLink to="/developers"> <DropdownMenuItem onClick={this.handleOpenSettings}>
<DropdownMenuItem>API</DropdownMenuItem> Settings
</MenuLink> </DropdownMenuItem>
<DropdownMenuItem onClick={this.handleLogout}> <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
Logout Keyboard shortcuts
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenu> <MenuLink to="/developers">
</HeaderBlock> <DropdownMenuItem>API</DropdownMenuItem>
</MenuLink>
<DropdownMenuItem onClick={this.handleLogout}>
Logout
</DropdownMenuItem>
</DropdownMenu>
<Flex column> <Flex column>
<Scrollable> <Scrollable>
<LinkSection>
<SidebarLink to="/search">Search</SidebarLink>
</LinkSection>
<LinkSection> <LinkSection>
<SidebarLink to="/dashboard">Home</SidebarLink> <SidebarLink to="/dashboard">Home</SidebarLink>
<SidebarLink to="/search">Search</SidebarLink>
<SidebarLink to="/starred">Starred</SidebarLink> <SidebarLink to="/starred">Starred</SidebarLink>
</LinkSection> </LinkSection>
<LinkSection> <LinkSection>
@ -225,7 +229,7 @@ type Props = {
const CollectionAction = styled.a` const CollectionAction = styled.a`
position: absolute; position: absolute;
top: 8px; top: -2px;
right: ${layout.hpadding}; right: ${layout.hpadding};
svg { svg {
@ -264,14 +268,13 @@ const MenuLink = styled(Link)`
const Sidebar = styled(Flex)` const Sidebar = styled(Flex)`
width: ${layout.sidebarWidth}; width: ${layout.sidebarWidth};
margin-left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)}; margin-left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
background: rgba(250, 251, 252, 0.71); background: ${color.smoke};
border-right: 1px solid #eceff3;
transition: margin-left 200ms ease-in-out; transition: margin-left 200ms ease-in-out;
`; `;
const LinkSection = styled(Flex)` const LinkSection = styled(Flex)`
flex-direction: column; flex-direction: column;
padding: 10px 0; margin: 24px 0;
position: relative; position: relative;
`; `;

29
frontend/components/Layout/components/HeaderBlock.js
View File

@ -14,18 +14,21 @@ type Props = {
function HeaderBlock({ user, team, children }: Props) { function HeaderBlock({ user, team, children }: Props) {
return ( return (
<Header justify="space-between"> <Header justify="space-between" align="center">
<Flex align="center"> <Flex align="center" column>
<LogoLink to="/">{team.name}</LogoLink> <LogoLink to="/">{team.name}</LogoLink>
<p>{user.username}</p> <Name>{user.name}</Name>
</Flex> </Flex>
{children} {children}
</Header> </Header>
); );
} }
const Name = styled.div`
font-size: 13px;
`;
const LogoLink = styled(Link)` const LogoLink = styled(Link)`
margin-top: 15px;
font-family: 'Atlas Grotesk'; font-family: 'Atlas Grotesk';
font-weight: bold; font-weight: bold;
color: ${color.text}; color: ${color.text};
@ -36,7 +39,23 @@ const LogoLink = styled(Link)`
const Header = styled(Flex)` const Header = styled(Flex)`
flex-shrink: 0; flex-shrink: 0;
padding: ${layout.padding}; padding: ${layout.padding};
padding-bottom: 10px; position: relative;
cursor: pointer;
width: 100%;
&:hover {
background: rgba(0,0,0,.05);
}
&::after {
content: "";
left: ${layout.hpadding};
right: ${layout.hpadding};
background: rgba(0,0,0,.075);
height: 1px;
position: absolute;
bottom: 0;
}
`; `;
export default HeaderBlock; export default HeaderBlock;