Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add alternate project finder to left navbar

Browse Source
This commit is contained in:
Jordan Knott 2021-01-05 19:47:52 -06:00
parent dc50ef3566
commit 533b9511c9
3 changed files with 95 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/shared/components/TopNavbar/Styles.ts
View File

@ -41,12 +41,51 @@ export const BreadcrumpSeparator = styled.span`
font-size: 18px;
margin: 0px 10px;
`;
export const ProjectInfo = styled.div`
display: flex;
flex-direction: column;
flex: 1;
`;
export const ProjectSwitchInner = styled.div`
border-radius: 12px;
height: 48px;
width: 48px;
box-shadow: inset 0 -2px rgba(0, 0, 0, 0.05);
align-items: center;
background: #cbd4db;
display: flex;
flex: 0 0 auto;
flex-direction: column;
justify-content: center;
background-color: ${props => props.theme.colors.primary};
`;
export const ProjectSwitch = styled.div`
align-self: center;
position: relative;
margin-right: 16px;
cursor: pointer;
&::after {
border-radius: 12px;
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
&:hover::after {
background-color: rgba(0, 0, 0, 0.05);
}
`;
export const ProjectActions = styled.div`
flex: 1;
align-items: flex-start;
display: flex;
flex-direction: column;
min-width: 1px;
`;

12
frontend/src/shared/components/TopNavbar/index.tsx
View File

@ -7,6 +7,7 @@ import { RoleCode } from 'shared/generated/graphql';
import NOOP from 'shared/utils/noop';
import { useHistory } from 'react-router';
import {
ProjectInfo,
NavbarLink,
TaskcafeLogo,
TaskcafeTitle,
@ -14,6 +15,7 @@ import {
LogoContainer,
NavSeparator,
IconContainerWrapper,
ProjectSwitch,
ProjectNameWrapper,
ProjectNameSpan,
ProjectNameTextarea,
@ -33,6 +35,7 @@ import {
ProfileNameSecondary,
ProjectMember,
ProjectMembers,
ProjectSwitchInner,
} from './Styles';
type IconContainerProps = {
@ -220,10 +223,17 @@ const NavBar: React.FC<NavBarProps> = ({
};
const history = useHistory();
const { showPopup } = usePopup();
const $finder = useRef<HTMLDivElement>(null);
return (
<NavbarWrapper>
<NavbarHeader>
<ProjectActions>
<ProjectSwitch ref={$finder} onClick={e => onOpenProjectFinder($finder)}>
<ProjectSwitchInner>
<TaskcafeLogo innerColor="#9f46e4" outerColor="#000" width={32} height={32} />
</ProjectSwitchInner>
</ProjectSwitch>
<ProjectInfo>
<ProjectMeta>
{name && (
<ProjectHeading
@ -254,9 +264,9 @@ const NavBar: React.FC<NavBarProps> = ({
})}
</ProjectTabs>
)}
</ProjectInfo>
</ProjectActions>
<LogoContainer to="/">
<TaskcafeLogo width={32} height={32} />
<TaskcafeTitle>Taskcafé</TaskcafeTitle>
</LogoContainer>
<GlobalActions>

21
frontend/src/shared/icons/Taskcafe.tsx
View File

@ -1,18 +1,29 @@
import React from 'react';
import Icon, { IconProps } from './Icon';
const Taskcafe: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
type TaskcafeProps = {
innerColor?: string;
outerColor?: string;
} & IconProps;
const Taskcafe: React.FC<TaskcafeProps> = ({
innerColor = '#262c49',
outerColor = '#7367f0',
width = '16px',
height = '16px',
className,
}) => {
return (
<Icon width={width} height={height} className={className} viewBox="0 0 800 800">
<path
d="M371.147 371.04c-59.092 0-106.995 47.903-106.995 106.995 0 59.092 47.903 106.995 106.995 106.995 59.092 0 106.995-47.903 106.995-106.995 0-59.092-47.903-106.996-106.995-106.996zm0 20.708c47.687 0 86.287 38.592 86.287 86.287 0 47.687-38.592 86.286-86.287 86.286-47.687 0-86.286-38.592-86.286-86.286 0-47.688 38.592-86.287 86.286-86.287m60.489 56.201l-9.723-9.8a5.177 5.177 0 00-7.321-.03l-60.984 60.494-25.796-26.006a5.177 5.177 0 00-7.322-.03l-9.802 9.723a5.177 5.177 0 00-.029 7.322l39.166 39.483a5.177 5.177 0 007.321.03l74.46-73.864a5.178 5.178 0 00.03-7.321z"
fill="#7367f0"
fill={outerColor}
/>
<path
d="M264.69 682.877H467.7c56.038 0 101.504-45.465 101.504-101.504h33.835c74.648 0 135.34-60.692 135.34-135.34s-60.692-135.34-135.34-135.34H188.562a25.315 25.315 0 00-25.376 25.377v245.303c0 56.039 45.465 101.504 101.504 101.504zM603.04 378.364c37.324 0 67.67 30.345 67.67 67.67 0 37.323-30.346 67.669-67.67 67.669h-33.835v-135.34zm50.435 406.018H112.75c-50.329 0-64.497-67.67-38.064-67.67h616.746c26.434 0 12.477 67.67-37.958 67.67z"
fill="#7367f0"
fill={outerColor}
/>
<g fill="none" stroke="#7367f0" strokeWidth="3.392">
<g fill="none" stroke={outerColor} strokeWidth="3.392">
<path
d="M286.302 276.2c-12.491-12.65-24.51-24.821-23.906-35.239.604-10.417 14.068-18.838 26.772-30.358 12.705-11.52 24.65-26.139 14.907-39.935-9.743-13.797-41.175-26.772-40.697-42.89.478-16.119 32.868-35.378 37.236-52.814 4.369-17.435-19.286-33.048-42.944-48.662M374.624 276.2c-12.492-12.65-24.51-24.821-23.907-35.239.604-10.417 14.068-18.838 26.773-30.358 12.704-11.52 24.65-26.139 14.906-39.935-9.742-13.797-41.174-26.772-40.696-42.89.478-16.119 32.867-35.378 37.236-52.814 4.368-17.435-19.287-33.048-42.944-48.662M462.945 276.2c-12.491-12.65-24.51-24.821-23.906-35.239.604-10.417 14.068-18.838 26.772-30.358 12.705-11.52 24.65-26.139 14.907-39.935-9.743-13.797-41.175-26.772-40.697-42.89.478-16.119 32.868-35.378 37.236-52.814 4.369-17.436-19.286-33.048-42.944-48.662"
strokeWidth="28.00374144"
@ -20,7 +31,7 @@ const Taskcafe: React.FC<IconProps> = ({ width = '16px', height = '16px', classN
</g>
<path
d="M371.147 363.194c-73.749 0-133.534 59.785-133.534 133.534 0 73.75 59.785 133.535 133.534 133.535 73.75 0 133.535-59.786 133.535-133.535s-59.786-133.534-133.535-133.534zm0 25.845c59.516 0 107.69 48.165 107.69 107.69 0 59.515-48.165 107.688-107.69 107.688-59.515 0-107.689-48.164-107.689-107.689 0-59.515 48.165-107.689 107.69-107.689m75.492 70.142l-12.135-12.232a6.462 6.462 0 00-9.138-.039l-76.11 75.498-32.194-32.456a6.463 6.463 0 00-9.138-.038l-12.233 12.134a6.451 6.451 0 00-.025 9.138l48.88 49.277a6.462 6.462 0 009.138.038l92.93-92.183a6.452 6.452 0 00.024-9.138z"
fill="#262c49"
fill={innerColor}
/>
</Icon>
);