Compare commits
2 Commits
0.3.0
...
feat/list-
| Author | SHA1 | Date | |
|---|---|---|---|
| 0eb9c0db94 | |||
| cdcccbfb4a |
2
.github/ISSUE_TEMPLATE/bug_report.md
vendored
2
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@ -18,8 +18,6 @@ If applicable, add screenshots to help explain your problem.
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
|
||||
Please send the Taskcafe web service logs if applicable.
|
||||
|
||||
<!--
|
||||
|
||||
Please read the contributing guide before working on any new pull requests!
|
||||
|
||||
@ -21,4 +21,4 @@ windows:
|
||||
- database:
|
||||
root: ./
|
||||
panes:
|
||||
- pgcli postgres://taskcafe:taskcafe_test@localhost:8855/taskcafe
|
||||
- pgcli postgres://taskcafe:taskcafe_test@localhost:5432/taskcafe
|
||||
|
||||
@ -9,7 +9,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
### Added
|
||||
- Task sorting & filtering
|
||||
- Redesigned the Task Details UI
|
||||
- Implement task group actions (duplicate/delete all tasks/sort)
|
||||
|
||||
### Fixed
|
||||
- removed CORS middleware to fix security issue
|
||||
|
||||
@ -32,10 +32,6 @@ The `description` is a decriptive summary of the change the PR will make.
|
||||
- One PR per fix or feature
|
||||
- Setup & install [pre-commit hooks](https://pre-commit.com/#install) then install the hooks `pre-commit install && pre-commit install --hook-type commit-msg`
|
||||
|
||||
### Unwanted PRs
|
||||
|
||||
- Please do not submit pull requests containing only typo fixes, fixed spelling mistakes, or minor wording changes.
|
||||
|
||||
### Git Commit Message Style
|
||||
|
||||
This project uses the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) format.
|
||||
|
||||
@ -9,14 +9,11 @@
|
||||
<img alt="Releases" src="https://img.shields.io/github/v/release/JordanKnott/taskcafe" />
|
||||
</a>
|
||||
<a href="https://hub.docker.com/repository/docker/taskcafe/taskcafe">
|
||||
<img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker&sort=semver" />
|
||||
<img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker" />
|
||||
</a>
|
||||
<a href="https://goreportcard.com/report/github.com/JordanKnott/taskcafe">
|
||||
<img alt="Go Report Card" src="https://goreportcard.com/badge/github.com/JordanKnott/taskcafe" />
|
||||
</a>
|
||||
<a href="">
|
||||
<img alt="Docker pulls" src="https://img.shields.io/docker/pulls/taskcafe/taskcafe" />
|
||||
</a>
|
||||
</p>
|
||||
<p align="center">
|
||||
Was this project useful? Please consider <a href="https://www.buymeacoffee.com/jordanknott">donating</a> to help me improve it!
|
||||
@ -24,8 +21,6 @@ Was this project useful? Please consider <a href="https://www.buymeacoffee.com/j
|
||||
|
||||
**Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
Currently Taskcafe only offers basic task tracking through a Kanban board.
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
# Config file for [Air](https://github.com/cosmtrek/air) in TOML format
|
||||
|
||||
# Working directory
|
||||
# . or absolute path, please note that the directories following must be under root.
|
||||
root = "."
|
||||
tmp_dir = "tmp"
|
||||
|
||||
[build]
|
||||
# Just plain old shell command. You could use `make` as well.
|
||||
cmd = "go build -o ./dist/taskcafe cmd/taskcafe/main.go"
|
||||
# Binary file yields from `cmd`.
|
||||
bin = "dist/taskcafe"
|
||||
# Customize binary.
|
||||
full_bin = "./dist/taskcafe web"
|
||||
# Watch these filename extensions.
|
||||
include_ext = ["go"]
|
||||
# Ignore these filename extensions or directories.
|
||||
exclude_dir = ["dist", "frontend"]
|
||||
# Watch these directories if you specified.
|
||||
include_dir = []
|
||||
# Exclude files.
|
||||
exclude_file = []
|
||||
# This log file places in your tmp_dir.
|
||||
log = "air.log"
|
||||
# It's not necessary to trigger build each time file changes if it's too frequent.
|
||||
delay = 1000 # ms
|
||||
# Stop running old binary when build errors occur.
|
||||
stop_on_error = true
|
||||
# Send Interrupt signal before killing process (windows does not support this feature)
|
||||
send_interrupt = false
|
||||
# Delay after sending Interrupt signal
|
||||
kill_delay = 500 # ms
|
||||
|
||||
[log]
|
||||
# Show log time
|
||||
time = false
|
||||
|
||||
[color]
|
||||
# Customize each part's color. If no color found, use the raw app log.
|
||||
main = "magenta"
|
||||
watcher = "cyan"
|
||||
build = "yellow"
|
||||
runner = "green"
|
||||
|
||||
[misc]
|
||||
# Delete tmp directory on exit
|
||||
clean_on_exit = true
|
||||
@ -1,5 +1,5 @@
|
||||
[server]
|
||||
hostname = '0.0.0.0:3333'
|
||||
[general]
|
||||
host = '0.0.0.0:3333'
|
||||
|
||||
[email_notifications]
|
||||
enabled = true
|
||||
@ -17,9 +17,8 @@ user = 'taskcafe'
|
||||
password = 'taskcafe_test'
|
||||
|
||||
[smtp]
|
||||
username = 'taskcafe@example.com'
|
||||
password = ''
|
||||
from = 'no-reply@taskcafe.com'
|
||||
host = 'localhost'
|
||||
port = 11500
|
||||
skip_verify = false
|
||||
username = 'admin@example.com'
|
||||
password = 'example'
|
||||
server = 'mail.example.com'
|
||||
port = 465
|
||||
connection_security = 'STARTTLS'
|
||||
|
||||
@ -12,7 +12,7 @@ services:
|
||||
volumes:
|
||||
- taskcafe-postgres:/var/lib/postgresql/data
|
||||
ports:
|
||||
- 8855:5432
|
||||
- 5432:5432
|
||||
mailhog:
|
||||
image: mailhog/mailhog:latest
|
||||
restart: always
|
||||
|
||||
@ -31,9 +31,7 @@
|
||||
"@typescript-eslint/no-unused-vars": "off",
|
||||
"react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
|
||||
"no-case-declarations": "off",
|
||||
"no-plusplus": "off",
|
||||
"react/prop-types": 0,
|
||||
"no-continue": "off",
|
||||
"react/jsx-props-no-spreading": "off",
|
||||
"no-param-reassign": "off",
|
||||
"import/extensions": [
|
||||
|
||||
@ -6,16 +6,21 @@
|
||||
"@apollo/client": "^3.0.0-rc.8",
|
||||
"@apollo/react-common": "^3.1.4",
|
||||
"@apollo/react-hooks": "^3.1.3",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.27",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.12.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.12.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.12.1",
|
||||
"@fortawesome/react-fontawesome": "^0.1.8",
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@testing-library/user-event": "^7.1.2",
|
||||
"@types/axios": "^0.14.0",
|
||||
"@types/color": "^3.0.1",
|
||||
"@types/date-fns": "^2.6.0",
|
||||
"@types/dompurify": "^2.0.4",
|
||||
"@types/emoji-mart": "^3.0.4",
|
||||
"@types/jest": "^24.0.0",
|
||||
"@types/jwt-decode": "^2.2.1",
|
||||
"@types/lodash": "^4.14.149",
|
||||
"@types/node": "^12.0.0",
|
||||
"@types/query-string": "^6.3.0",
|
||||
"@types/react": "^16.9.21",
|
||||
"@types/react-beautiful-dnd": "^12.1.1",
|
||||
"@types/react-datepicker": "^2.11.0",
|
||||
@ -36,34 +41,28 @@
|
||||
"axios-auth-refresh": "^2.2.7",
|
||||
"color": "^3.1.2",
|
||||
"date-fns": "^2.14.0",
|
||||
"dayjs": "^1.9.1",
|
||||
"dompurify": "^2.2.6",
|
||||
"emoji-mart": "^3.0.0",
|
||||
"emoticon": "^3.2.0",
|
||||
"graphql": "^15.0.0",
|
||||
"graphql-tag": "^2.10.3",
|
||||
"history": "^4.10.1",
|
||||
"immer": "^6.0.3",
|
||||
"jwt-decode": "^2.2.0",
|
||||
"lodash": "^4.17.20",
|
||||
"node-emoji": "^1.10.0",
|
||||
"lodash": "^4.17.15",
|
||||
"moment": "^2.24.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"query-string": "^6.13.7",
|
||||
"react": "^16.12.0",
|
||||
"react-autosize-textarea": "^7.0.0",
|
||||
"react-beautiful-dnd": "^13.0.0",
|
||||
"react-datepicker": "^2.14.1",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-emoji-render": "^1.2.4",
|
||||
"react-hook-form": "^6.0.6",
|
||||
"react-markdown": "^4.3.1",
|
||||
"react-router": "^5.1.2",
|
||||
"react-router-dom": "^5.1.2",
|
||||
"react-scripts": "3.4.0",
|
||||
"react-select": "^3.1.0",
|
||||
"rich-markdown-editor": "^10.6.5",
|
||||
"react-timeago": "^4.4.0",
|
||||
"react-toastify": "^6.0.8",
|
||||
"rich-markdown-editor": "^10.6.5",
|
||||
"styled-components": "^5.0.1",
|
||||
"typescript": "~3.7.2"
|
||||
},
|
||||
|
||||
@ -5,7 +5,6 @@ import GlobalTopNavbar from 'App/TopNavbar';
|
||||
import {
|
||||
useUsersQuery,
|
||||
useDeleteUserAccountMutation,
|
||||
useDeleteInvitedUserAccountMutation,
|
||||
useCreateUserAccountMutation,
|
||||
UsersDocument,
|
||||
UsersQuery,
|
||||
@ -82,7 +81,7 @@ const AddUserInput = styled(Input)`
|
||||
`;
|
||||
|
||||
const InputError = styled.span`
|
||||
color: ${props => props.theme.colors.danger};
|
||||
color: rgba(${props => props.theme.colors.danger});
|
||||
font-size: 12px;
|
||||
`;
|
||||
|
||||
@ -172,27 +171,16 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
|
||||
|
||||
const AdminRoute = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'Admin | Taskcafé';
|
||||
document.title = 'Taskcafé | Admin';
|
||||
}, []);
|
||||
const { loading, data } = useUsersQuery({ fetchPolicy: 'cache-and-network' });
|
||||
const { loading, data } = useUsersQuery();
|
||||
const { showPopup, hidePopup } = usePopup();
|
||||
const { user } = useCurrentUser();
|
||||
const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.invitedUsers = cache.invitedUsers.filter(
|
||||
u => u.id !== response.data?.deleteInvitedUserAccount.invitedUser.id,
|
||||
);
|
||||
}),
|
||||
);
|
||||
},
|
||||
});
|
||||
const [deleteUser] = useDeleteUserAccountMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.users = cache.users.filter(u => u.id !== response.data?.deleteUserAccount.userAccount.id);
|
||||
draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
|
||||
}),
|
||||
);
|
||||
},
|
||||
@ -203,7 +191,7 @@ const AdminRoute = () => {
|
||||
query: UsersDocument,
|
||||
});
|
||||
const newData = produce(cacheData, (draftState: any) => {
|
||||
draftState.users = [...draftState.users, { ...createData.data?.createUserAccount }];
|
||||
draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
|
||||
});
|
||||
|
||||
client.writeQuery({
|
||||
@ -214,6 +202,9 @@ const AdminRoute = () => {
|
||||
});
|
||||
},
|
||||
});
|
||||
if (loading) {
|
||||
return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
|
||||
}
|
||||
if (data && user) {
|
||||
if (user.roles.org !== 'admin') {
|
||||
return <Redirect to="/" />;
|
||||
@ -224,16 +215,11 @@ const AdminRoute = () => {
|
||||
<Admin
|
||||
initialTab={0}
|
||||
users={data.users}
|
||||
invitedUsers={data.invitedUsers}
|
||||
canInviteUser={user.roles.org === 'admin'}
|
||||
onInviteUser={NOOP}
|
||||
onUpdateUserPassword={() => {
|
||||
hidePopup();
|
||||
}}
|
||||
onDeleteInvitedUser={invitedUserID => {
|
||||
deleteInvitedUser({ variables: { invitedUserID } });
|
||||
hidePopup();
|
||||
}}
|
||||
onDeleteUser={(userID, newOwnerID) => {
|
||||
deleteUser({ variables: { userID, newOwnerID } });
|
||||
hidePopup();
|
||||
@ -256,7 +242,7 @@ const AdminRoute = () => {
|
||||
</>
|
||||
);
|
||||
}
|
||||
return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
|
||||
return <span>error</span>;
|
||||
};
|
||||
|
||||
export default AdminRoute;
|
||||
|
||||
@ -1,20 +1,16 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Switch, Route, useHistory } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import { Switch, Route } from 'react-router-dom';
|
||||
import * as H from 'history';
|
||||
|
||||
import Dashboard from 'Dashboard';
|
||||
import Admin from 'Admin';
|
||||
import Confirm from 'Confirm';
|
||||
import Projects from 'Projects';
|
||||
import Project from 'Projects/Project';
|
||||
import Teams from 'Teams';
|
||||
import Login from 'Auth';
|
||||
import Register from 'Register';
|
||||
import Install from 'Install';
|
||||
import Profile from 'Profile';
|
||||
import styled from 'styled-components';
|
||||
import JwtDecode from 'jwt-decode';
|
||||
import { setAccessToken } from 'shared/utils/accessToken';
|
||||
import { useCurrentUser } from 'App/context';
|
||||
|
||||
const MainContent = styled.div`
|
||||
padding: 0 0 0 0;
|
||||
@ -25,55 +21,6 @@ const MainContent = styled.div`
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
type RefreshTokenResponse = {
|
||||
accessToken: string;
|
||||
setup?: null | { confirmToken: string };
|
||||
};
|
||||
|
||||
const AuthorizedRoutes = () => {
|
||||
const history = useHistory();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { setUser } = useCurrentUser();
|
||||
useEffect(() => {
|
||||
fetch('/auth/refresh_token', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
}).then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 400) {
|
||||
history.replace('/login');
|
||||
} else {
|
||||
const response: RefreshTokenResponse = await x.json();
|
||||
const { accessToken, setup } = response;
|
||||
if (setup) {
|
||||
history.replace(`/register?confirmToken=${setup.confirmToken}`);
|
||||
} else {
|
||||
const claims: JWTToken = JwtDecode(accessToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(accessToken);
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
return loading ? null : (
|
||||
<Switch>
|
||||
<MainContent>
|
||||
<Route exact path="/" component={Dashboard} />
|
||||
<Route exact path="/projects" component={Projects} />
|
||||
<Route path="/projects/:projectID" component={Project} />
|
||||
<Route path="/teams/:teamID" component={Teams} />
|
||||
<Route path="/profile" component={Profile} />
|
||||
<Route path="/admin" component={Admin} />
|
||||
</MainContent>
|
||||
</Switch>
|
||||
);
|
||||
};
|
||||
|
||||
type RoutesProps = {
|
||||
history: H.History;
|
||||
};
|
||||
@ -81,9 +28,15 @@ type RoutesProps = {
|
||||
const Routes: React.FC<RoutesProps> = () => (
|
||||
<Switch>
|
||||
<Route exact path="/login" component={Login} />
|
||||
<Route exact path="/register" component={Register} />
|
||||
<Route exact path="/confirm" component={Confirm} />
|
||||
<AuthorizedRoutes />
|
||||
<Route exact path="/install" component={Install} />
|
||||
<MainContent>
|
||||
<Route exact path="/" component={Dashboard} />
|
||||
<Route exact path="/projects" component={Projects} />
|
||||
<Route path="/projects/:projectID" component={Project} />
|
||||
<Route path="/teams/:teamID" component={Teams} />
|
||||
<Route path="/profile" component={Profile} />
|
||||
<Route path="/admin" component={Admin} />
|
||||
</MainContent>
|
||||
</Switch>
|
||||
);
|
||||
|
||||
|
||||
@ -1,28 +1,26 @@
|
||||
import { DefaultTheme } from 'styled-components';
|
||||
import Color from 'color';
|
||||
|
||||
const theme: DefaultTheme = {
|
||||
borderRadius: {
|
||||
primary: '3x',
|
||||
primary: '3px',
|
||||
alternate: '6px',
|
||||
},
|
||||
colors: {
|
||||
multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
|
||||
primary: 'rgb(115, 103, 240)',
|
||||
secondary: 'rgb(216, 93, 216)',
|
||||
alternate: 'rgb(65, 69, 97)',
|
||||
success: 'rgb(40, 199, 111)',
|
||||
danger: 'rgb(234, 84, 85)',
|
||||
warning: 'rgb(255, 159, 67)',
|
||||
dark: 'rgb(30, 30, 30)',
|
||||
primary: '115, 103, 240',
|
||||
secondary: '216, 93, 216',
|
||||
alternate: '65, 69, 97',
|
||||
success: '40, 199, 111',
|
||||
danger: '234, 84, 85',
|
||||
warning: '255, 159, 67',
|
||||
dark: '30, 30, 30',
|
||||
text: {
|
||||
primary: 'rgb(194, 198, 220)',
|
||||
secondary: 'rgb(255, 255, 255)',
|
||||
primary: '194, 198, 220',
|
||||
secondary: '255, 255, 255',
|
||||
},
|
||||
border: 'rgb(65, 69, 97)',
|
||||
border: '65, 69, 97',
|
||||
bg: {
|
||||
primary: 'rgb(16, 22, 58)',
|
||||
secondary: 'rgb(38, 44, 73)',
|
||||
primary: '16, 22, 58',
|
||||
secondary: '38, 44, 73',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -20,7 +20,6 @@ import MiniProfile from 'shared/components/MiniProfile';
|
||||
import cache from 'App/cache';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
|
||||
import theme from './ThemeStyles';
|
||||
|
||||
const TeamContainer = styled.div`
|
||||
display: flex;
|
||||
@ -63,7 +62,7 @@ const TeamProjectBackground = styled.div<{ color: string }>`
|
||||
opacity: 1;
|
||||
border-radius: 3px;
|
||||
&:before {
|
||||
background: ${props => props.theme.colors.bg.secondary};
|
||||
background: rgba(${props => props.theme.colors.bg.secondary});
|
||||
bottom: 0;
|
||||
content: '';
|
||||
left: 0;
|
||||
@ -115,7 +114,7 @@ const TeamProjectContainer = styled.div`
|
||||
margin: 0 4px 4px 0;
|
||||
min-width: 0;
|
||||
&:hover ${TeamProjectTitle} {
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
&:hover ${TeamProjectAvatar} {
|
||||
opacity: 1;
|
||||
@ -125,38 +124,24 @@ const TeamProjectContainer = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const colors = [theme.colors.primary, theme.colors.secondary];
|
||||
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
|
||||
|
||||
const ProjectFinder = () => {
|
||||
const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'cache-and-network' });
|
||||
const { loading, data } = useGetProjectsQuery();
|
||||
if (loading) {
|
||||
return <span>loading</span>;
|
||||
}
|
||||
if (data) {
|
||||
const { projects, teams } = data;
|
||||
const personalProjects = data.projects.filter(p => p.team === null);
|
||||
const projectTeams = teams.map(team => {
|
||||
return {
|
||||
id: team.id,
|
||||
name: team.name,
|
||||
projects: projects.filter(project => project.team && project.team.id === team.id),
|
||||
projects: projects.filter(project => project.team.id === team.id),
|
||||
};
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<TeamContainer>
|
||||
<TeamTitle>Personal</TeamTitle>
|
||||
<TeamProjects>
|
||||
{personalProjects.map((project, idx) => (
|
||||
<TeamProjectContainer key={project.id}>
|
||||
<TeamProjectLink to={`/projects/${project.id}`}>
|
||||
<TeamProjectBackground color={colors[idx % 5]} />
|
||||
<TeamProjectAvatar color={colors[idx % 5]} />
|
||||
<TeamProjectContent>
|
||||
<TeamProjectTitle>{project.name}</TeamProjectTitle>
|
||||
</TeamProjectContent>
|
||||
</TeamProjectLink>
|
||||
</TeamProjectContainer>
|
||||
))}
|
||||
</TeamProjects>
|
||||
</TeamContainer>
|
||||
{projectTeams.map(team => (
|
||||
<TeamContainer key={team.id}>
|
||||
<TeamTitle>{team.name}</TeamTitle>
|
||||
@ -178,10 +163,10 @@ const ProjectFinder = () => {
|
||||
</>
|
||||
);
|
||||
}
|
||||
return <span>loading</span>;
|
||||
return <span>error</span>;
|
||||
};
|
||||
type ProjectPopupProps = {
|
||||
history: any;
|
||||
history: History<History.PoorMansUnknown>;
|
||||
name: string;
|
||||
projectID: string;
|
||||
};
|
||||
@ -196,7 +181,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, proje
|
||||
|
||||
const newData = produce(cacheData, (draftState: any) => {
|
||||
draftState.projects = draftState.projects.filter(
|
||||
(project: any) => project.id !== deleteData.data?.deleteProject.project.id,
|
||||
(project: any) => project.id !== deleteData.data.deleteProject.project.id,
|
||||
);
|
||||
});
|
||||
|
||||
@ -245,12 +230,10 @@ type GlobalTopNavbarProps = {
|
||||
menuType?: Array<MenuItem>;
|
||||
onChangeRole?: (userID: string, roleCode: RoleCode) => void;
|
||||
projectMembers?: null | Array<TaskUser>;
|
||||
projectInvitedMembers?: null | Array<InvitedUser>;
|
||||
onSaveProjectName?: (projectName: string) => void;
|
||||
onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
|
||||
onSetTab?: (tab: number) => void;
|
||||
onRemoveFromBoard?: (userID: string) => void;
|
||||
onRemoveInvitedFromBoard?: (email: string) => void;
|
||||
};
|
||||
|
||||
const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
@ -263,10 +246,8 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
name,
|
||||
popupContent,
|
||||
projectMembers,
|
||||
projectInvitedMembers,
|
||||
onInviteUser,
|
||||
onSaveProjectName,
|
||||
onRemoveInvitedFromBoard,
|
||||
onRemoveFromBoard,
|
||||
}) => {
|
||||
const { user, setUserRoles, setUser } = useCurrentUser();
|
||||
@ -343,7 +324,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
/>
|
||||
))}
|
||||
</NotificationPopup>,
|
||||
{ width: 415, borders: false, diamondColor: theme.colors.primary },
|
||||
{ width: 415, borders: false, diamondColor: '#7367f0' },
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -352,34 +333,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
return null;
|
||||
}
|
||||
const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
|
||||
const onInvitedMemberProfile = ($targetRef: React.RefObject<HTMLElement>, email: string) => {
|
||||
const member = projectInvitedMembers ? projectInvitedMembers.find(u => u.email === email) : null;
|
||||
if (member) {
|
||||
showPopup(
|
||||
$targetRef,
|
||||
<MiniProfile
|
||||
onRemoveFromBoard={() => {
|
||||
if (onRemoveInvitedFromBoard) {
|
||||
onRemoveInvitedFromBoard(member.email);
|
||||
}
|
||||
}}
|
||||
invited
|
||||
user={{
|
||||
id: member.email,
|
||||
fullName: member.email,
|
||||
bio: 'Invited',
|
||||
profileIcon: {
|
||||
bgColor: '#000',
|
||||
url: null,
|
||||
initials: member.email.charAt(0),
|
||||
},
|
||||
}}
|
||||
bio=""
|
||||
/>,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
|
||||
const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
|
||||
const warning =
|
||||
@ -429,7 +382,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
canEditProjectName={userIsTeamOrProjectAdmin}
|
||||
canInviteUser={userIsTeamOrProjectAdmin}
|
||||
onMemberProfile={onMemberProfile}
|
||||
onInvitedMemberProfile={onInvitedMemberProfile}
|
||||
onInviteUser={onInviteUser}
|
||||
onChangeRole={onChangeRole}
|
||||
onChangeProjectOwner={onChangeProjectOwner}
|
||||
@ -440,7 +392,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
history.push('/');
|
||||
}}
|
||||
projectMembers={projectMembers}
|
||||
projectInvitedMembers={projectInvitedMembers}
|
||||
onProfileClick={onProfileClick}
|
||||
onSaveName={onSaveProjectName}
|
||||
onOpenSettings={onOpenSettings}
|
||||
|
||||
@ -28,13 +28,13 @@ const StyledContainer = styled(ToastContainer).attrs({
|
||||
color: #fff;
|
||||
}
|
||||
.Toastify__toast--error {
|
||||
background: ${props => props.theme.colors.danger};
|
||||
background: rgba(${props => props.theme.colors.danger});
|
||||
}
|
||||
.Toastify__toast--warning {
|
||||
background: ${props => props.theme.colors.warning};
|
||||
background: rgba(${props => props.theme.colors.warning});
|
||||
}
|
||||
.Toastify__toast--success {
|
||||
background: ${props => props.theme.colors.success};
|
||||
background: rgba(${props => props.theme.colors.success});
|
||||
}
|
||||
.Toastify__toast-body {
|
||||
}
|
||||
@ -46,8 +46,13 @@ const StyledContainer = styled(ToastContainer).attrs({
|
||||
`;
|
||||
|
||||
const history = createBrowserHistory();
|
||||
type RefreshTokenResponse = {
|
||||
accessToken: string;
|
||||
isInstalled: boolean;
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [user, setUser] = useState<CurrentUserRaw | null>(null);
|
||||
const setUserRoles = (roles: CurrentUserRoles) => {
|
||||
if (user) {
|
||||
@ -58,6 +63,32 @@ const App = () => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/auth/refresh_token', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
}).then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 400) {
|
||||
history.replace('/login');
|
||||
} else {
|
||||
const response: RefreshTokenResponse = await x.json();
|
||||
const { accessToken, isInstalled } = response;
|
||||
const claims: JWTToken = jwtDecode(accessToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(accessToken);
|
||||
if (!isInstalled) {
|
||||
history.replace('/install');
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<UserContext.Provider value={{ user, setUser, setUserRoles }}>
|
||||
@ -66,7 +97,13 @@ const App = () => {
|
||||
<BaseStyles />
|
||||
<Router history={history}>
|
||||
<PopupProvider>
|
||||
<Routes history={history} />
|
||||
{loading ? (
|
||||
<div>loading</div>
|
||||
) : (
|
||||
<>
|
||||
<Routes history={history} />
|
||||
</>
|
||||
)}
|
||||
</PopupProvider>
|
||||
</Router>
|
||||
<StyledContainer
|
||||
|
||||
@ -52,20 +52,7 @@ const Auth = () => {
|
||||
}).then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 200) {
|
||||
const response: RefreshTokenResponse = await x.json();
|
||||
const { accessToken, setup } = response;
|
||||
if (setup) {
|
||||
history.replace(`/register?confirmToken=${setup.confirmToken}`);
|
||||
} else {
|
||||
const claims: JWTToken = JwtDecode(accessToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(accessToken);
|
||||
history.replace('/projects');
|
||||
}
|
||||
history.replace('/projects');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import Confirm from 'shared/components/Confirm';
|
||||
import { useHistory, useLocation } from 'react-router';
|
||||
import * as QueryString from 'query-string';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Container, LoginWrapper } from './Styles';
|
||||
import JwtDecode from 'jwt-decode';
|
||||
import { setAccessToken } from 'shared/utils/accessToken';
|
||||
import { useCurrentUser } from 'App/context';
|
||||
|
||||
const UsersConfirm = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const [registered, setRegistered] = useState(false);
|
||||
const params = QueryString.parse(location.search);
|
||||
const { setUser } = useCurrentUser();
|
||||
return (
|
||||
<Container>
|
||||
<LoginWrapper>
|
||||
<Confirm
|
||||
hasConfirmToken={params.confirmToken !== undefined}
|
||||
onConfirmUser={setFailed => {
|
||||
fetch('/auth/confirm', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
confirmToken: params.confirmToken,
|
||||
}),
|
||||
})
|
||||
.then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 200) {
|
||||
const response = await x.json();
|
||||
const { accessToken } = response;
|
||||
const claims: JWTToken = JwtDecode(accessToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: {
|
||||
org: claims.orgRole,
|
||||
teams: new Map<string, string>(),
|
||||
projects: new Map<string, string>(),
|
||||
},
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(accessToken);
|
||||
history.push('/');
|
||||
} else {
|
||||
setFailed();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setFailed();
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</LoginWrapper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default UsersConfirm;
|
||||
88
frontend/src/Install/index.tsx
Normal file
88
frontend/src/Install/index.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import React, { useEffect, useContext } from 'react';
|
||||
import axios from 'axios';
|
||||
import Register from 'shared/components/Register';
|
||||
import { useHistory } from 'react-router';
|
||||
import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
|
||||
import UserContext from 'App/context';
|
||||
import jwtDecode from 'jwt-decode';
|
||||
import { Container, LoginWrapper } from './Styles';
|
||||
|
||||
const Install = () => {
|
||||
const history = useHistory();
|
||||
const { setUser } = useContext(UserContext);
|
||||
useEffect(() => {
|
||||
fetch('/auth/refresh_token', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
}).then(async x => {
|
||||
const { status } = x;
|
||||
const response: RefreshTokenResponse = await x.json();
|
||||
const { isInstalled } = response;
|
||||
if (status === 200 && isInstalled) {
|
||||
history.replace('/projects');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<Container>
|
||||
<LoginWrapper>
|
||||
<Register
|
||||
onSubmit={(data, setComplete, setError) => {
|
||||
const accessToken = getAccessToken();
|
||||
if (data.password !== data.password_confirm) {
|
||||
setError('password', { type: 'error', message: 'Passwords must match' });
|
||||
setError('password_confirm', { type: 'error', message: 'Passwords must match' });
|
||||
} else {
|
||||
axios
|
||||
.post(
|
||||
'/auth/install',
|
||||
{
|
||||
user: {
|
||||
username: data.username,
|
||||
roleCode: 'admin',
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
initials: data.initials,
|
||||
fullname: data.fullname,
|
||||
},
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
},
|
||||
},
|
||||
)
|
||||
.then(async x => {
|
||||
const { status } = x;
|
||||
if (status === 400) {
|
||||
history.replace('/login');
|
||||
} else {
|
||||
const response: RefreshTokenResponse = await x.data;
|
||||
const { accessToken: newToken, isInstalled } = response;
|
||||
const claims: JWTToken = jwtDecode(accessToken);
|
||||
const currentUser = {
|
||||
id: claims.userId,
|
||||
roles: {
|
||||
org: claims.orgRole,
|
||||
teams: new Map<string, string>(),
|
||||
projects: new Map<string, string>(),
|
||||
},
|
||||
};
|
||||
setUser(currentUser);
|
||||
setAccessToken(accessToken);
|
||||
if (!isInstalled) {
|
||||
history.replace('/install');
|
||||
}
|
||||
}
|
||||
history.push('/projects');
|
||||
});
|
||||
}
|
||||
setComplete(true);
|
||||
}}
|
||||
/>
|
||||
</LoginWrapper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Install;
|
||||
@ -3,20 +3,11 @@ import styled from 'styled-components/macro';
|
||||
import GlobalTopNavbar from 'App/TopNavbar';
|
||||
import { getAccessToken } from 'shared/utils/accessToken';
|
||||
import Settings from 'shared/components/Settings';
|
||||
import {
|
||||
useMeQuery,
|
||||
useClearProfileAvatarMutation,
|
||||
useUpdateUserPasswordMutation,
|
||||
useUpdateUserInfoMutation,
|
||||
MeQuery,
|
||||
MeDocument,
|
||||
} from 'shared/generated/graphql';
|
||||
import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
|
||||
import axios from 'axios';
|
||||
import { useCurrentUser } from 'App/context';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import { toast } from 'react-toastify';
|
||||
import updateApolloCache from 'shared/utils/cache';
|
||||
import produce from 'immer';
|
||||
|
||||
const MainContent = styled.div`
|
||||
padding: 0 0 50px 80px;
|
||||
@ -28,7 +19,6 @@ const Projects = () => {
|
||||
const $fileUpload = useRef<HTMLInputElement>(null);
|
||||
const [clearProfileAvatar] = useClearProfileAvatarMutation();
|
||||
const { user } = useCurrentUser();
|
||||
const [updateUserInfo] = useUpdateUserInfoMutation();
|
||||
const [updateUserPassword] = useUpdateUserPasswordMutation();
|
||||
const { loading, data, refetch } = useMeQuery();
|
||||
useEffect(() => {
|
||||
@ -79,13 +69,6 @@ const Projects = () => {
|
||||
toast('Password was changed!');
|
||||
done();
|
||||
}}
|
||||
onChangeUserInfo={(d, done) => {
|
||||
updateUserInfo({
|
||||
variables: { name: d.full_name, bio: d.bio, email: d.email, initials: d.initials },
|
||||
});
|
||||
toast('User info was saved!');
|
||||
done();
|
||||
}}
|
||||
onProfileAvatarRemove={() => {
|
||||
clearProfileAvatar();
|
||||
}}
|
||||
|
||||
@ -5,6 +5,7 @@ import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'sha
|
||||
import Input from 'shared/components/ControlledInput';
|
||||
import { Popup, usePopup } from 'shared/components/PopupMenu';
|
||||
import produce from 'immer';
|
||||
import moment from 'moment';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
import Member from 'shared/components/Member';
|
||||
|
||||
@ -12,7 +13,7 @@ const FilterMember = styled(Member)`
|
||||
margin: 2px 0;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgba(${props => props.theme.colors.primary});
|
||||
}
|
||||
`;
|
||||
|
||||
@ -71,7 +72,7 @@ export const ActionItem = styled.li`
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -80,7 +81,7 @@ export const ActionTitle = styled.span`
|
||||
`;
|
||||
|
||||
const ActionItemSeparator = styled.li`
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
|
||||
@ -30,7 +30,7 @@ export const ActionItem = styled.li`
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
&:hover ${ActionExtraMenuContainer} {
|
||||
visibility: visible;
|
||||
@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: rgb(${props => props.theme.colors.primary});
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
const ActionExtraMenuSeparator = styled.li`
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
export const ActionsList = styled.ul`
|
||||
margin: 0;
|
||||
@ -21,7 +20,7 @@ export const ActionItem = styled.li`
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -30,7 +29,7 @@ export const ActionTitle = styled.span`
|
||||
`;
|
||||
|
||||
const ActionItemSeparator = styled.li`
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
@ -74,11 +73,6 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
|
||||
>
|
||||
<ActionTitle>Task title</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
|
||||
>
|
||||
<ActionTitle>Complete</ActionTitle>
|
||||
</ActionItem>
|
||||
</ActionsList>
|
||||
);
|
||||
};
|
||||
|
||||
@ -136,14 +136,14 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
${props =>
|
||||
props.disabled &&
|
||||
@ -280,7 +280,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.findProject.taskGroups = draftCache.findProject.taskGroups.filter(
|
||||
(taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data?.deleteTaskGroup.taskGroup.id,
|
||||
(taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data.deleteTaskGroup.taskGroup.id,
|
||||
);
|
||||
}),
|
||||
{ projectID },
|
||||
@ -296,11 +296,9 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
const { taskGroups } = cache.findProject;
|
||||
const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data?.createTask.taskGroup.id);
|
||||
const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data.createTask.taskGroup.id);
|
||||
if (idx !== -1) {
|
||||
if (newTaskData.data) {
|
||||
draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
|
||||
}
|
||||
draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
|
||||
}
|
||||
}),
|
||||
{ projectID },
|
||||
@ -315,9 +313,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (newTaskGroupData.data) {
|
||||
draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
|
||||
}
|
||||
draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
|
||||
}),
|
||||
{ projectID },
|
||||
);
|
||||
@ -336,7 +332,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
const idx = cache.findProject.taskGroups.findIndex(
|
||||
t => t.id === resp.data?.deleteTaskGroupTasks.taskGroupID,
|
||||
t => t.id === resp.data.deleteTaskGroupTasks.taskGroupID,
|
||||
);
|
||||
if (idx !== -1) {
|
||||
draftCache.findProject.taskGroups[idx].tasks = [];
|
||||
@ -352,9 +348,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (resp.data) {
|
||||
draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
|
||||
}
|
||||
draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
|
||||
}),
|
||||
{ projectID },
|
||||
);
|
||||
@ -370,24 +364,19 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (newTask.data) {
|
||||
const { previousTaskGroupID, task } = newTask.data.updateTaskLocation;
|
||||
if (previousTaskGroupID !== task.taskGroup.id) {
|
||||
const { taskGroups } = cache.findProject;
|
||||
const oldTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === previousTaskGroupID);
|
||||
const newTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === task.taskGroup.id);
|
||||
if (oldTaskGroupIdx !== -1 && newTaskGroupIdx !== -1) {
|
||||
const previousTask = cache.findProject.taskGroups[oldTaskGroupIdx].tasks.find(t => t.id === task.id);
|
||||
draftCache.findProject.taskGroups[oldTaskGroupIdx].tasks = taskGroups[oldTaskGroupIdx].tasks.filter(
|
||||
(t: Task) => t.id !== task.id,
|
||||
);
|
||||
if (previousTask) {
|
||||
draftCache.findProject.taskGroups[newTaskGroupIdx].tasks = [
|
||||
...taskGroups[newTaskGroupIdx].tasks,
|
||||
{ ...previousTask },
|
||||
];
|
||||
}
|
||||
}
|
||||
const { previousTaskGroupID, task } = newTask.data.updateTaskLocation;
|
||||
if (previousTaskGroupID !== task.taskGroup.id) {
|
||||
const { taskGroups } = cache.findProject;
|
||||
const oldTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === previousTaskGroupID);
|
||||
const newTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === task.taskGroup.id);
|
||||
if (oldTaskGroupIdx !== -1 && newTaskGroupIdx !== -1) {
|
||||
draftCache.findProject.taskGroups[oldTaskGroupIdx].tasks = taskGroups[oldTaskGroupIdx].tasks.filter(
|
||||
(t: Task) => t.id !== task.id,
|
||||
);
|
||||
draftCache.findProject.taskGroups[newTaskGroupIdx].tasks = [
|
||||
...taskGroups[newTaskGroupIdx].tasks,
|
||||
{ ...task },
|
||||
];
|
||||
}
|
||||
}
|
||||
}),
|
||||
@ -459,6 +448,9 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <BoardLoading />;
|
||||
}
|
||||
const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
|
||||
if (filter.status === TaskStatus.COMPLETE) {
|
||||
return 'Complete';
|
||||
@ -815,7 +807,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
||||
);
|
||||
}
|
||||
|
||||
return <BoardLoading />;
|
||||
return <span>Error</span>;
|
||||
};
|
||||
|
||||
export default ProjectBoard;
|
||||
|
||||
@ -21,9 +21,6 @@ import {
|
||||
useCreateTaskChecklistItemMutation,
|
||||
FindTaskDocument,
|
||||
FindTaskQuery,
|
||||
useCreateTaskCommentMutation,
|
||||
useDeleteTaskCommentMutation,
|
||||
useUpdateTaskCommentMutation,
|
||||
} from 'shared/generated/graphql';
|
||||
import { useCurrentUser } from 'App/context';
|
||||
import MiniProfile from 'shared/components/MiniProfile';
|
||||
@ -36,73 +33,6 @@ import { useForm } from 'react-hook-form';
|
||||
import updateApolloCache from 'shared/utils/cache';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
|
||||
export const ActionsList = styled.ul`
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const ActionItem = styled.li`
|
||||
position: relative;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
export const ActionTitle = styled.span`
|
||||
margin-left: 20px;
|
||||
`;
|
||||
|
||||
const WarningLabel = styled.p`
|
||||
font-size: 14px;
|
||||
margin: 8px 12px;
|
||||
`;
|
||||
const DeleteConfirm = styled(Button)`
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 6px;
|
||||
`;
|
||||
|
||||
type TaskCommentActionsProps = {
|
||||
onDeleteComment: () => void;
|
||||
onEditComment: () => void;
|
||||
};
|
||||
const TaskCommentActions: React.FC<TaskCommentActionsProps> = ({ onDeleteComment, onEditComment }) => {
|
||||
const { setTab } = usePopup();
|
||||
return (
|
||||
<>
|
||||
<Popup tab={0} title={null}>
|
||||
<ActionsList>
|
||||
<ActionItem>
|
||||
<ActionTitle>Pin to top</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem onClick={() => onEditComment()}>
|
||||
<ActionTitle>Edit comment</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem onClick={() => setTab(1)}>
|
||||
<ActionTitle>Delete comment</ActionTitle>
|
||||
</ActionItem>
|
||||
</ActionsList>
|
||||
</Popup>
|
||||
<Popup tab={1} title="Delete comment?">
|
||||
<WarningLabel>Deleting a comment can not be undone.</WarningLabel>
|
||||
<DeleteConfirm onClick={() => onDeleteComment()} color="danger">
|
||||
Delete comment
|
||||
</DeleteConfirm>
|
||||
</Popup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
|
||||
const total = checklists.reduce((prev: any, next: any) => {
|
||||
return (
|
||||
@ -200,40 +130,6 @@ const Details: React.FC<DetailsProps> = ({
|
||||
const { user } = useCurrentUser();
|
||||
const { showPopup, hidePopup } = usePopup();
|
||||
const history = useHistory();
|
||||
const [deleteTaskComment] = useDeleteTaskCommentMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<FindTaskQuery>(
|
||||
client,
|
||||
FindTaskDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (response.data) {
|
||||
draftCache.findTask.comments = cache.findTask.comments.filter(
|
||||
c => c.id !== response.data?.deleteTaskComment.commentID,
|
||||
);
|
||||
}
|
||||
}),
|
||||
{ taskID },
|
||||
);
|
||||
},
|
||||
});
|
||||
const [createTaskComment] = useCreateTaskCommentMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<FindTaskQuery>(
|
||||
client,
|
||||
FindTaskDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (response.data) {
|
||||
draftCache.findTask.comments.push({
|
||||
...response.data.createTaskComment.comment,
|
||||
});
|
||||
}
|
||||
}),
|
||||
{ taskID },
|
||||
);
|
||||
},
|
||||
});
|
||||
const [updateTaskChecklistLocation] = useUpdateTaskChecklistLocationMutation();
|
||||
const [updateTaskChecklistItemLocation] = useUpdateTaskChecklistItemLocationMutation({
|
||||
update: (client, response) => {
|
||||
@ -242,23 +138,21 @@ const Details: React.FC<DetailsProps> = ({
|
||||
FindTaskDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (response.data) {
|
||||
const { prevChecklistID, taskChecklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
|
||||
if (taskChecklistID !== prevChecklistID) {
|
||||
const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
|
||||
const newIdx = cache.findTask.checklists.findIndex(c => c.id === taskChecklistID);
|
||||
if (oldIdx > -1 && newIdx > -1) {
|
||||
const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
|
||||
if (item) {
|
||||
draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
|
||||
i => i.id !== checklistItem.id,
|
||||
);
|
||||
draftCache.findTask.checklists[newIdx].items.push({
|
||||
...item,
|
||||
position: checklistItem.position,
|
||||
taskChecklistID,
|
||||
});
|
||||
}
|
||||
const { prevChecklistID, checklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
|
||||
if (checklistID !== prevChecklistID) {
|
||||
const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
|
||||
const newIdx = cache.findTask.checklists.findIndex(c => c.id === checklistID);
|
||||
if (oldIdx > -1 && newIdx > -1) {
|
||||
const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
|
||||
if (item) {
|
||||
draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
|
||||
i => i.id !== checklistItem.id,
|
||||
);
|
||||
draftCache.findTask.checklists[newIdx].items.push({
|
||||
...item,
|
||||
position: checklistItem.position,
|
||||
taskChecklistID: checklistID,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -294,7 +188,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||
produce(cache, draftCache => {
|
||||
const { checklists } = cache.findTask;
|
||||
draftCache.findTask.checklists = checklists.filter(
|
||||
c => c.id !== deleteData.data?.deleteTaskChecklist.taskChecklist.id,
|
||||
c => c.id !== deleteData.data.deleteTaskChecklist.taskChecklist.id,
|
||||
);
|
||||
const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.badges.checklist = {
|
||||
@ -318,10 +212,8 @@ const Details: React.FC<DetailsProps> = ({
|
||||
FindTaskDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (createData.data) {
|
||||
const item = createData.data.createTaskChecklist;
|
||||
draftCache.findTask.checklists.push({ ...item });
|
||||
}
|
||||
const item = createData.data.createTaskChecklist;
|
||||
draftCache.findTask.checklists.push({ ...item });
|
||||
}),
|
||||
{ taskID },
|
||||
);
|
||||
@ -335,21 +227,19 @@ const Details: React.FC<DetailsProps> = ({
|
||||
FindTaskDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (deleteData.data) {
|
||||
const item = deleteData.data.deleteTaskChecklistItem.taskChecklistItem;
|
||||
const targetIdx = cache.findTask.checklists.findIndex(c => c.id === item.taskChecklistID);
|
||||
if (targetIdx > -1) {
|
||||
draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(
|
||||
c => item.id !== c.id,
|
||||
);
|
||||
}
|
||||
const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.badges.checklist = {
|
||||
__typename: 'ChecklistBadge',
|
||||
complete,
|
||||
total,
|
||||
};
|
||||
const item = deleteData.data.deleteTaskChecklistItem.taskChecklistItem;
|
||||
const targetIdx = cache.findTask.checklists.findIndex(c => c.id === item.taskChecklistID);
|
||||
if (targetIdx > -1) {
|
||||
draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(
|
||||
c => item.id !== c.id,
|
||||
);
|
||||
}
|
||||
const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.badges.checklist = {
|
||||
__typename: 'ChecklistBadge',
|
||||
complete,
|
||||
total,
|
||||
};
|
||||
}),
|
||||
{ taskID },
|
||||
);
|
||||
@ -362,30 +252,24 @@ const Details: React.FC<DetailsProps> = ({
|
||||
FindTaskDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (newTaskItem.data) {
|
||||
const item = newTaskItem.data.createTaskChecklistItem;
|
||||
const { checklists } = cache.findTask;
|
||||
const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
|
||||
if (idx !== -1) {
|
||||
draftCache.findTask.checklists[idx].items.push({ ...item });
|
||||
const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.badges.checklist = {
|
||||
__typename: 'ChecklistBadge',
|
||||
complete,
|
||||
total,
|
||||
};
|
||||
}
|
||||
const item = newTaskItem.data.createTaskChecklistItem;
|
||||
const { checklists } = cache.findTask;
|
||||
const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
|
||||
if (idx !== -1) {
|
||||
draftCache.findTask.checklists[idx].items.push({ ...item });
|
||||
const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.badges.checklist = {
|
||||
__typename: 'ChecklistBadge',
|
||||
complete,
|
||||
total,
|
||||
};
|
||||
}
|
||||
}),
|
||||
{ taskID },
|
||||
);
|
||||
},
|
||||
});
|
||||
const { loading, data, refetch } = useFindTaskQuery({
|
||||
variables: { taskID },
|
||||
pollInterval: 3000,
|
||||
fetchPolicy: 'cache-and-network',
|
||||
});
|
||||
const { loading, data, refetch } = useFindTaskQuery({ variables: { taskID } });
|
||||
const [setTaskComplete] = useSetTaskCompleteMutation();
|
||||
const [updateTaskDueDate] = useUpdateTaskDueDateMutation({
|
||||
onCompleted: () => {
|
||||
@ -405,8 +289,9 @@ const Details: React.FC<DetailsProps> = ({
|
||||
refreshCache();
|
||||
},
|
||||
});
|
||||
const [updateTaskComment] = useUpdateTaskCommentMutation();
|
||||
const [editableComment, setEditableComment] = useState<null | string>(null);
|
||||
if (loading) {
|
||||
return null;
|
||||
}
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
@ -420,34 +305,11 @@ const Details: React.FC<DetailsProps> = ({
|
||||
renderContent={() => {
|
||||
return (
|
||||
<TaskDetails
|
||||
onCancelCommentEdit={() => setEditableComment(null)}
|
||||
onUpdateComment={(commentID, message) => {
|
||||
updateTaskComment({ variables: { commentID, message } });
|
||||
}}
|
||||
editableComment={editableComment}
|
||||
me={data.me.user}
|
||||
onCommentShowActions={(commentID, $targetRef) => {
|
||||
showPopup(
|
||||
$targetRef,
|
||||
<TaskCommentActions
|
||||
onDeleteComment={() => {
|
||||
deleteTaskComment({ variables: { commentID } });
|
||||
hidePopup();
|
||||
}}
|
||||
onEditComment={() => {
|
||||
setEditableComment(commentID);
|
||||
hidePopup();
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
}}
|
||||
task={data.findTask}
|
||||
onCreateComment={(task, message) => {
|
||||
createTaskComment({ variables: { taskID: task.id, message } });
|
||||
}}
|
||||
onChecklistDrop={checklist => {
|
||||
updateTaskChecklistLocation({
|
||||
variables: { taskChecklistID: checklist.id, position: checklist.position },
|
||||
variables: { checklistID: checklist.id, position: checklist.position },
|
||||
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
@ -462,24 +324,20 @@ const Details: React.FC<DetailsProps> = ({
|
||||
},
|
||||
});
|
||||
}}
|
||||
onChecklistItemDrop={(prevChecklistID, taskChecklistID, checklistItem) => {
|
||||
onChecklistItemDrop={(prevChecklistID, checklistID, checklistItem) => {
|
||||
updateTaskChecklistItemLocation({
|
||||
variables: {
|
||||
taskChecklistID,
|
||||
taskChecklistItemID: checklistItem.id,
|
||||
position: checklistItem.position,
|
||||
},
|
||||
variables: { checklistID, checklistItemID: checklistItem.id, position: checklistItem.position },
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
updateTaskChecklistItemLocation: {
|
||||
__typename: 'UpdateTaskChecklistItemLocationPayload',
|
||||
prevChecklistID,
|
||||
taskChecklistID,
|
||||
checklistID,
|
||||
checklistItem: {
|
||||
__typename: 'TaskChecklistItem',
|
||||
position: checklistItem.position,
|
||||
id: checklistItem.id,
|
||||
taskChecklistID,
|
||||
taskChecklistID: checklistID,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -3,11 +3,32 @@ import updateApolloCache from 'shared/utils/cache';
|
||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||
import produce from 'immer';
|
||||
import {
|
||||
useUpdateProjectMemberRoleMutation,
|
||||
useCreateProjectMemberMutation,
|
||||
useDeleteProjectMemberMutation,
|
||||
useSetTaskCompleteMutation,
|
||||
useToggleTaskLabelMutation,
|
||||
useUpdateProjectNameMutation,
|
||||
useFindProjectQuery,
|
||||
useUpdateTaskGroupNameMutation,
|
||||
useUpdateTaskNameMutation,
|
||||
useUpdateProjectLabelMutation,
|
||||
useCreateTaskMutation,
|
||||
useDeleteProjectLabelMutation,
|
||||
useDeleteTaskMutation,
|
||||
useUpdateTaskLocationMutation,
|
||||
useUpdateTaskGroupLocationMutation,
|
||||
useCreateTaskGroupMutation,
|
||||
useDeleteTaskGroupMutation,
|
||||
useUpdateTaskDescriptionMutation,
|
||||
useAssignTaskMutation,
|
||||
DeleteTaskDocument,
|
||||
FindProjectDocument,
|
||||
useCreateProjectLabelMutation,
|
||||
useUnassignTaskMutation,
|
||||
useUpdateTaskDueDateMutation,
|
||||
FindProjectQuery,
|
||||
useUsersQuery,
|
||||
} from 'shared/generated/graphql';
|
||||
import LabelManager from 'shared/components/PopupMenu/LabelManager';
|
||||
import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
|
||||
@ -36,9 +57,7 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (newLabelData.data) {
|
||||
draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
|
||||
}
|
||||
draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
|
||||
}),
|
||||
{
|
||||
projectID,
|
||||
@ -55,7 +74,7 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.findProject.labels = cache.findProject.labels.filter(
|
||||
label => label.id !== newLabelData.data?.deleteProjectLabel.id,
|
||||
label => label.id !== newLabelData.data.deleteProjectLabel.id,
|
||||
);
|
||||
}),
|
||||
{ projectID },
|
||||
|
||||
@ -3,7 +3,6 @@ import React, { useState, useRef, useEffect, useContext } from 'react';
|
||||
import updateApolloCache from 'shared/utils/cache';
|
||||
import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
|
||||
import styled from 'styled-components/macro';
|
||||
import AsyncSelect from 'react-select/async';
|
||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||
import {
|
||||
useParams,
|
||||
@ -16,12 +15,11 @@ import {
|
||||
} from 'react-router-dom';
|
||||
import {
|
||||
useUpdateProjectMemberRoleMutation,
|
||||
useInviteProjectMembersMutation,
|
||||
useCreateProjectMemberMutation,
|
||||
useDeleteProjectMemberMutation,
|
||||
useToggleTaskLabelMutation,
|
||||
useUpdateProjectNameMutation,
|
||||
useFindProjectQuery,
|
||||
useDeleteInvitedProjectMemberMutation,
|
||||
useUpdateTaskNameMutation,
|
||||
useCreateTaskMutation,
|
||||
useDeleteTaskMutation,
|
||||
@ -32,27 +30,19 @@ import {
|
||||
FindProjectDocument,
|
||||
FindProjectQuery,
|
||||
} from 'shared/generated/graphql';
|
||||
|
||||
import produce from 'immer';
|
||||
import UserContext, { useCurrentUser } from 'App/context';
|
||||
import Input from 'shared/components/Input';
|
||||
import Member from 'shared/components/Member';
|
||||
import EmptyBoard from 'shared/components/EmptyBoard';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import { Lock, Cross } from 'shared/icons';
|
||||
import Button from 'shared/components/Button';
|
||||
import { useApolloClient } from '@apollo/react-hooks';
|
||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||
import gql from 'graphql-tag';
|
||||
import { colourStyles } from 'shared/components/Select';
|
||||
import Board, { BoardLoading } from './Board';
|
||||
import Details from './Details';
|
||||
import LabelManagerEditor from './LabelManagerEditor';
|
||||
import { mixin } from '../../shared/utils/styles';
|
||||
|
||||
const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
|
||||
|
||||
const RFC2822_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
|
||||
|
||||
const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
|
||||
const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');
|
||||
|
||||
@ -71,7 +61,7 @@ const UserMember = styled(Member)`
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
|
||||
background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
|
||||
}
|
||||
border-radius: 6px;
|
||||
`;
|
||||
@ -80,293 +70,29 @@ const MemberList = styled.div`
|
||||
margin: 8px 0;
|
||||
`;
|
||||
|
||||
type InviteUserData = {
|
||||
email?: string;
|
||||
suerID?: string;
|
||||
};
|
||||
type UserManagementPopupProps = {
|
||||
projectID: string;
|
||||
users: Array<User>;
|
||||
projectMembers: Array<TaskUser>;
|
||||
onInviteProjectMembers: (data: Array<InviteUserData>) => void;
|
||||
onAddProjectMember: (userID: string) => void;
|
||||
};
|
||||
|
||||
const VisibiltyPrivateIcon = styled(Lock)`
|
||||
padding-right: 4px;
|
||||
`;
|
||||
|
||||
const VisibiltyButtonText = styled.span`
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const ShareActions = styled.div`
|
||||
border-top: 1px solid #414561;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const VisibiltyButton = styled.button`
|
||||
cursor: pointer;
|
||||
margin: 2px 4px;
|
||||
padding: 2px 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid transparent;
|
||||
&:hover ${VisibiltyButtonText} {
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
&:hover ${VisibiltyPrivateIcon} {
|
||||
fill: rgba(${props => props.theme.colors.text.secondary});
|
||||
stroke: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
&:hover {
|
||||
border-bottom: 1px solid rgba(${props => props.theme.colors.primary});
|
||||
}
|
||||
`;
|
||||
|
||||
type MemberFilterOptions = {
|
||||
projectID?: null | string;
|
||||
teamID?: null | string;
|
||||
organization?: boolean;
|
||||
};
|
||||
|
||||
const fetchMembers = async (client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) => {
|
||||
if (input && input.trim().length < 3) {
|
||||
return [];
|
||||
}
|
||||
const res = await client.query({
|
||||
query: gql`
|
||||
query {
|
||||
searchMembers(input: {searchFilter:"${input}", projectID:"${projectID}"}) {
|
||||
id
|
||||
similarity
|
||||
status
|
||||
user {
|
||||
id
|
||||
fullName
|
||||
email
|
||||
profileIcon {
|
||||
url
|
||||
initials
|
||||
bgColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
});
|
||||
|
||||
let results: any = [];
|
||||
const emails: Array<string> = [];
|
||||
if (res.data && res.data.searchMembers) {
|
||||
results = [
|
||||
...res.data.searchMembers.map((m: any) => {
|
||||
if (m.status === 'INVITED') {
|
||||
return {
|
||||
label: m.id,
|
||||
value: {
|
||||
id: m.id,
|
||||
type: 2,
|
||||
profileIcon: {
|
||||
bgColor: '#ccc',
|
||||
initials: m.id.charAt(0),
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
emails.push(m.user.email);
|
||||
return {
|
||||
label: m.user.fullName,
|
||||
value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
|
||||
};
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
if (RFC2822_EMAIL.test(input) && !emails.find(e => e === input)) {
|
||||
results = [
|
||||
...results,
|
||||
{
|
||||
label: input,
|
||||
value: {
|
||||
id: input,
|
||||
type: 1,
|
||||
profileIcon: {
|
||||
bgColor: '#ccc',
|
||||
initials: input.charAt(0),
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
type UserOptionProps = {
|
||||
innerProps: any;
|
||||
isDisabled: boolean;
|
||||
isFocused: boolean;
|
||||
label: string;
|
||||
data: any;
|
||||
getValue: any;
|
||||
};
|
||||
|
||||
const OptionWrapper = styled.div<{ isFocused: boolean }>`
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
${props => props.isFocused && `background: rgba(${props.theme.colors.primary});`}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
const OptionContent = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 12px;
|
||||
`;
|
||||
|
||||
const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: ${p => p.fontSize}px;
|
||||
color: rgba(${p => (p.quiet ? p.theme.colors.text.primary : p.theme.colors.text.primary)});
|
||||
`;
|
||||
|
||||
const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
|
||||
return !isDisabled ? (
|
||||
<OptionWrapper {...innerProps} isFocused={isFocused}>
|
||||
<TaskAssignee
|
||||
size={32}
|
||||
member={{
|
||||
id: '',
|
||||
fullName: data.value.label,
|
||||
profileIcon: data.value.profileIcon,
|
||||
}}
|
||||
/>
|
||||
<OptionContent>
|
||||
<OptionLabel fontSize={16} quiet={false}>
|
||||
{label}
|
||||
</OptionLabel>
|
||||
{data.value.type === 2 && (
|
||||
<OptionLabel fontSize={14} quiet>
|
||||
Joined
|
||||
</OptionLabel>
|
||||
)}
|
||||
</OptionContent>
|
||||
</OptionWrapper>
|
||||
) : null;
|
||||
};
|
||||
|
||||
const OptionValueWrapper = styled.div`
|
||||
background: rgba(${props => props.theme.colors.bg.primary});
|
||||
border-radius: 4px;
|
||||
margin: 2px;
|
||||
padding: 3px 6px 3px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const OptionValueLabel = styled.span`
|
||||
font-size: 12px;
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
`;
|
||||
|
||||
const OptionValueRemove = styled.button`
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 4px;
|
||||
`;
|
||||
const OptionValue = ({ data, removeProps }: any) => {
|
||||
return (
|
||||
<OptionValueWrapper>
|
||||
<OptionValueLabel>{data.label}</OptionValueLabel>
|
||||
<OptionValueRemove {...removeProps}>
|
||||
<Cross width={14} height={14} />
|
||||
</OptionValueRemove>
|
||||
</OptionValueWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const InviteButton = styled(Button)`
|
||||
margin-top: 12px;
|
||||
height: 32px;
|
||||
padding: 4px 12px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const InviteContainer = styled.div`
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const UserManagementPopup: React.FC<UserManagementPopupProps> = ({
|
||||
projectID,
|
||||
users,
|
||||
projectMembers,
|
||||
onInviteProjectMembers,
|
||||
}) => {
|
||||
const client = useApolloClient();
|
||||
const [invitedUsers, setInvitedUsers] = useState<Array<any> | null>(null);
|
||||
const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, projectMembers, onAddProjectMember }) => {
|
||||
return (
|
||||
<Popup tab={0} title="Invite a user">
|
||||
<InviteContainer>
|
||||
<AsyncSelect
|
||||
getOptionValue={option => option.value.id}
|
||||
placeholder="Email address or username"
|
||||
noOptionsMessage={() => null}
|
||||
onChange={(e: any) => {
|
||||
setInvitedUsers(e);
|
||||
}}
|
||||
isMulti
|
||||
autoFocus
|
||||
cacheOptions
|
||||
styles={colourStyles}
|
||||
defaultOption
|
||||
components={{
|
||||
MultiValue: OptionValue,
|
||||
Option: UserOption,
|
||||
IndicatorSeparator: null,
|
||||
DropdownIndicator: null,
|
||||
}}
|
||||
loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
|
||||
/>
|
||||
</InviteContainer>
|
||||
<InviteButton
|
||||
onClick={() => {
|
||||
if (invitedUsers) {
|
||||
onInviteProjectMembers(
|
||||
invitedUsers.map(user => {
|
||||
if (user.value.type === 0) {
|
||||
return {
|
||||
userID: user.value.id,
|
||||
};
|
||||
}
|
||||
return {
|
||||
email: user.value.id,
|
||||
};
|
||||
}),
|
||||
);
|
||||
}
|
||||
}}
|
||||
disabled={invitedUsers === null}
|
||||
hoverVariant="none"
|
||||
fontSize="16px"
|
||||
>
|
||||
Send Invite
|
||||
</InviteButton>
|
||||
<SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
|
||||
<MemberList>
|
||||
{users
|
||||
.filter(u => u.id !== projectMembers.find(p => p.id === u.id)?.id)
|
||||
.map(user => (
|
||||
<UserMember
|
||||
key={user.id}
|
||||
onCardMemberClick={() => onAddProjectMember(user.id)}
|
||||
showName
|
||||
member={user}
|
||||
taskID=""
|
||||
/>
|
||||
))}
|
||||
</MemberList>
|
||||
</Popup>
|
||||
);
|
||||
};
|
||||
@ -409,34 +135,12 @@ const Project = () => {
|
||||
const [value, setValue] = useStateWithLocalStorage(CARD_LABEL_VARIANT_STORAGE_KEY);
|
||||
const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();
|
||||
|
||||
const [deleteTask] = useDeleteTaskMutation({
|
||||
update: (client, resp) =>
|
||||
updateApolloCache<FindProjectQuery>(
|
||||
client,
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (resp.data) {
|
||||
const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
|
||||
tg => tg.tasks.findIndex(t => t.id === resp.data?.deleteTask.taskID) !== -1,
|
||||
);
|
||||
|
||||
if (taskGroupIdx !== -1) {
|
||||
draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
|
||||
taskGroupIdx
|
||||
].tasks.filter(t => t.id !== resp.data?.deleteTask.taskID);
|
||||
}
|
||||
}
|
||||
}),
|
||||
{ projectID },
|
||||
),
|
||||
});
|
||||
const [deleteTask] = useDeleteTaskMutation();
|
||||
|
||||
const [updateTaskName] = useUpdateTaskNameMutation();
|
||||
|
||||
const { loading, data, error } = useFindProjectQuery({
|
||||
const { loading, data } = useFindProjectQuery({
|
||||
variables: { projectID },
|
||||
pollInterval: 3000,
|
||||
});
|
||||
|
||||
const [updateProjectName] = useUpdateProjectNameMutation({
|
||||
@ -446,45 +150,21 @@ const Project = () => {
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.findProject.name = newName.data?.updateProjectName.name ?? '';
|
||||
draftCache.findProject.name = newName.data.updateProjectName.name;
|
||||
}),
|
||||
{ projectID },
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const [inviteProjectMembers] = useInviteProjectMembersMutation({
|
||||
const [createProjectMember] = useCreateProjectMemberMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<FindProjectQuery>(
|
||||
client,
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (response.data) {
|
||||
draftCache.findProject.members = [
|
||||
...cache.findProject.members,
|
||||
...response.data.inviteProjectMembers.members,
|
||||
];
|
||||
draftCache.findProject.invitedMembers = [
|
||||
...cache.findProject.invitedMembers,
|
||||
...response.data.inviteProjectMembers.invitedMembers,
|
||||
];
|
||||
}
|
||||
}),
|
||||
{ projectID },
|
||||
);
|
||||
},
|
||||
});
|
||||
const [deleteInvitedProjectMember] = useDeleteInvitedProjectMemberMutation({
|
||||
update: (client, response) => {
|
||||
updateApolloCache<FindProjectQuery>(
|
||||
client,
|
||||
FindProjectDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
|
||||
m => m.email !== response.data?.deleteInvitedProjectMember.invitedMember.email ?? '',
|
||||
);
|
||||
draftCache.findProject.members.push({ ...response.data.createProjectMember.member });
|
||||
}),
|
||||
{ projectID },
|
||||
);
|
||||
@ -498,7 +178,7 @@ const Project = () => {
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.findProject.members = cache.findProject.members.filter(
|
||||
m => m.id !== response.data?.deleteProjectMember.member.id,
|
||||
m => m.id !== response.data.deleteProjectMember.member.id,
|
||||
);
|
||||
}),
|
||||
{ projectID },
|
||||
@ -517,8 +197,13 @@ const Project = () => {
|
||||
document.title = `${data.findProject.name} | Taskcafé`;
|
||||
}
|
||||
}, [data]);
|
||||
if (error) {
|
||||
history.push('/projects');
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
|
||||
<BoardLoading />
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (data) {
|
||||
labelsRef.current = data.findProject.labels;
|
||||
@ -536,10 +221,6 @@ const Project = () => {
|
||||
deleteProjectMember({ variables: { userID, projectID } });
|
||||
hidePopup();
|
||||
}}
|
||||
onRemoveInvitedFromBoard={email => {
|
||||
deleteInvitedProjectMember({ variables: { projectID, email } });
|
||||
hidePopup();
|
||||
}}
|
||||
onSaveProjectName={projectName => {
|
||||
updateProjectName({ variables: { projectID, name: projectName } });
|
||||
}}
|
||||
@ -547,10 +228,8 @@ const Project = () => {
|
||||
showPopup(
|
||||
$target,
|
||||
<UserManagementPopup
|
||||
projectID={projectID}
|
||||
onInviteProjectMembers={members => {
|
||||
inviteProjectMembers({ variables: { projectID, members } });
|
||||
hidePopup();
|
||||
onAddProjectMember={userID => {
|
||||
createProjectMember({ variables: { userID, projectID } });
|
||||
}}
|
||||
users={data.users}
|
||||
projectMembers={data.findProject.members}
|
||||
@ -561,9 +240,8 @@ const Project = () => {
|
||||
menuType={[{ name: 'Board', link: location.pathname }]}
|
||||
currentTab={0}
|
||||
projectMembers={data.findProject.members}
|
||||
projectInvitedMembers={data.findProject.invitedMembers}
|
||||
projectID={projectID}
|
||||
teamID={data.findProject.team ? data.findProject.team.id : null}
|
||||
teamID={data.findProject.team.id}
|
||||
name={data.findProject.name}
|
||||
/>
|
||||
<Route path={`${match.path}`} exact render={() => <Redirect to={`${match.url}/board`} />} />
|
||||
@ -606,7 +284,6 @@ const Project = () => {
|
||||
}}
|
||||
onDeleteTask={deletedTask => {
|
||||
deleteTask({ variables: { taskID: deletedTask.id } });
|
||||
history.push(`${match.url}/board`);
|
||||
}}
|
||||
onOpenAddLabelPopup={(task, $targetRef) => {
|
||||
taskLabelsRef.current = task.labels;
|
||||
@ -629,12 +306,7 @@ const Project = () => {
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
|
||||
<BoardLoading />
|
||||
</>
|
||||
);
|
||||
return <div>Error</div>;
|
||||
};
|
||||
|
||||
export default Project;
|
||||
|
||||
@ -20,8 +20,33 @@ import Input from 'shared/components/Input';
|
||||
import updateApolloCache from 'shared/utils/cache';
|
||||
import produce from 'immer';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import theme from 'App/ThemeStyles';
|
||||
import { mixin } from '../shared/utils/styles';
|
||||
|
||||
const EmptyStateContent = styled.div`
|
||||
display: flex;
|
||||
justy-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const EmptyStateTitle = styled.h3`
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
`;
|
||||
|
||||
const EmptyStatePrompt = styled.span`
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
font-size: 16px;
|
||||
margin-top: 8px;
|
||||
`;
|
||||
|
||||
const EmptyState = styled(Empty)`
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
||||
const CreateTeamButton = styled(Button)`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
type CreateTeamData = { teamName: string };
|
||||
|
||||
@ -31,10 +56,6 @@ type CreateTeamFormProps = {
|
||||
|
||||
const CreateTeamFormContainer = styled.form``;
|
||||
|
||||
const CreateTeamButton = styled(Button)`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
|
||||
const { register, handleSubmit } = useForm<CreateTeamData>();
|
||||
const createTeam = (data: CreateTeamData) => {
|
||||
@ -56,7 +77,7 @@ const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
|
||||
};
|
||||
|
||||
const ProjectAddTile = styled.div`
|
||||
background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
|
||||
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
color: #fff;
|
||||
@ -178,7 +199,7 @@ const SectionActionLink = styled(Link)`
|
||||
|
||||
const ProjectSectionTitle = styled.h3`
|
||||
font-size: 16px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const ProjectsContainer = styled.div`
|
||||
@ -188,6 +209,13 @@ const ProjectsContainer = styled.div`
|
||||
min-width: 288px;
|
||||
`;
|
||||
|
||||
const ProjectGrid = styled.div`
|
||||
max-width: 780px;
|
||||
display: grid;
|
||||
grid-template-columns: 240px 240px 240px;
|
||||
gap: 20px 10px;
|
||||
`;
|
||||
|
||||
const AddTeamButton = styled(Button)`
|
||||
padding: 6px 12px;
|
||||
position: absolute;
|
||||
@ -195,6 +223,10 @@ const AddTeamButton = styled(Button)`
|
||||
right: 12px;
|
||||
`;
|
||||
|
||||
const CreateFirstTeam = styled(Button)`
|
||||
margin-top: 8px;
|
||||
`;
|
||||
|
||||
type ShowNewProject = {
|
||||
open: boolean;
|
||||
initialTeamID: null | string;
|
||||
@ -202,7 +234,7 @@ type ShowNewProject = {
|
||||
|
||||
const Projects = () => {
|
||||
const { showPopup, hidePopup } = usePopup();
|
||||
const { loading, data } = useGetProjectsQuery({ pollInterval: 3000, fetchPolicy: 'cache-and-network' });
|
||||
const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
|
||||
useEffect(() => {
|
||||
document.title = 'Taskcafé';
|
||||
}, []);
|
||||
@ -210,9 +242,7 @@ const Projects = () => {
|
||||
update: (client, newProject) => {
|
||||
updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (newProject.data) {
|
||||
draftCache.projects.push({ ...newProject.data.createProject });
|
||||
}
|
||||
draftCache.projects.push({ ...newProject.data.createProject });
|
||||
}),
|
||||
);
|
||||
},
|
||||
@ -224,25 +254,23 @@ const Projects = () => {
|
||||
update: (client, createData) => {
|
||||
updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (createData.data) {
|
||||
draftCache.teams.push({ ...createData.data?.createTeam });
|
||||
}
|
||||
draftCache.teams.push({ ...createData.data.createTeam });
|
||||
}),
|
||||
);
|
||||
},
|
||||
});
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<span>loading</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const colors = theme.colors.multiColors;
|
||||
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
|
||||
if (data && user) {
|
||||
const { projects, teams, organizations } = data;
|
||||
const organizationID = organizations[0].id ?? null;
|
||||
const personalProjects = projects
|
||||
.filter(p => p.team === null)
|
||||
.sort((a, b) => {
|
||||
const textA = a.name.toUpperCase();
|
||||
const textB = b.name.toUpperCase();
|
||||
return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
|
||||
});
|
||||
const projectTeams = teams
|
||||
.sort((a, b) => {
|
||||
const textA = a.name.toUpperCase();
|
||||
@ -254,7 +282,7 @@ const Projects = () => {
|
||||
id: team.id,
|
||||
name: team.name,
|
||||
projects: projects
|
||||
.filter(project => project.team && project.team.id === team.id)
|
||||
.filter(project => project.team.id === team.id)
|
||||
.sort((a, b) => {
|
||||
const textA = a.name.toUpperCase();
|
||||
const textB = b.name.toUpperCase();
|
||||
@ -295,35 +323,39 @@ const Projects = () => {
|
||||
Add Team
|
||||
</AddTeamButton>
|
||||
)}
|
||||
<div>
|
||||
<ProjectSectionTitleWrapper>
|
||||
<ProjectSectionTitle>Personal Projects</ProjectSectionTitle>
|
||||
</ProjectSectionTitleWrapper>
|
||||
<ProjectList>
|
||||
{personalProjects.map((project, idx) => (
|
||||
<ProjectListItem key={project.id}>
|
||||
<ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
|
||||
<ProjectTileFade />
|
||||
<ProjectTileDetails>
|
||||
<ProjectTileName>{project.name}</ProjectTileName>
|
||||
</ProjectTileDetails>
|
||||
</ProjectTile>
|
||||
</ProjectListItem>
|
||||
))}
|
||||
<ProjectListItem>
|
||||
<ProjectAddTile
|
||||
onClick={() => {
|
||||
setShowNewProject({ open: true, initialTeamID: 'no-team' });
|
||||
}}
|
||||
>
|
||||
<ProjectTileFade />
|
||||
<ProjectAddTileDetails>
|
||||
<ProjectTileName centered>Create new project</ProjectTileName>
|
||||
</ProjectAddTileDetails>
|
||||
</ProjectAddTile>
|
||||
</ProjectListItem>
|
||||
</ProjectList>
|
||||
</div>
|
||||
{projectTeams.length === 0 && (
|
||||
<EmptyStateContent>
|
||||
<EmptyState width={425} height={425} />
|
||||
<EmptyStateTitle>No teams exist</EmptyStateTitle>
|
||||
<EmptyStatePrompt>Create a new team to get started</EmptyStatePrompt>
|
||||
<CreateFirstTeam
|
||||
variant="outline"
|
||||
onClick={$target => {
|
||||
showPopup(
|
||||
$target,
|
||||
<Popup
|
||||
title="Create team"
|
||||
tab={0}
|
||||
onClose={() => {
|
||||
hidePopup();
|
||||
}}
|
||||
>
|
||||
<CreateTeamForm
|
||||
onCreateTeam={teamName => {
|
||||
if (organizationID) {
|
||||
createTeam({ variables: { name: teamName, organizationID } });
|
||||
hidePopup();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Popup>,
|
||||
);
|
||||
}}
|
||||
>
|
||||
Create new team
|
||||
</CreateFirstTeam>
|
||||
</EmptyStateContent>
|
||||
)}
|
||||
{projectTeams.map(team => {
|
||||
return (
|
||||
<div key={team.id}>
|
||||
@ -377,7 +409,7 @@ const Projects = () => {
|
||||
initialTeamID={showNewProject.initialTeamID}
|
||||
onCreateProject={(name, teamID) => {
|
||||
if (user) {
|
||||
createProject({ variables: { teamID, name } });
|
||||
createProject({ variables: { teamID, name, userID: user.id } });
|
||||
setShowNewProject({ open: false, initialTeamID: null });
|
||||
}
|
||||
}}
|
||||
@ -392,7 +424,7 @@ const Projects = () => {
|
||||
</>
|
||||
);
|
||||
}
|
||||
return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
|
||||
return <div>Error!</div>;
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
export const LoginWrapper = styled.div`
|
||||
width: 60%;
|
||||
`;
|
||||
@ -1,62 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import Register from 'shared/components/Register';
|
||||
import { useHistory, useLocation } from 'react-router';
|
||||
import * as QueryString from 'query-string';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Container, LoginWrapper } from './Styles';
|
||||
|
||||
const UsersRegister = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const [registered, setRegistered] = useState(false);
|
||||
const params = QueryString.parse(location.search);
|
||||
return (
|
||||
<Container>
|
||||
<LoginWrapper>
|
||||
<Register
|
||||
registered={registered}
|
||||
onSubmit={(data, setComplete, setError) => {
|
||||
if (data.password !== data.password_confirm) {
|
||||
setError('password', { type: 'error', message: 'Passwords must match' });
|
||||
setError('password_confirm', { type: 'error', message: 'Passwords must match' });
|
||||
} else {
|
||||
// TODO: change to fetch?
|
||||
fetch('/auth/register', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
user: {
|
||||
username: data.username,
|
||||
roleCode: 'admin',
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
initials: data.initials,
|
||||
fullname: data.fullname,
|
||||
},
|
||||
}),
|
||||
})
|
||||
.then(async x => {
|
||||
const response = await x.json();
|
||||
const { setup } = response;
|
||||
console.log(response);
|
||||
if (setup) {
|
||||
history.replace(`/confirm?confirmToken=xxxx`);
|
||||
} else if (params.confirmToken) {
|
||||
history.replace(`/confirm?confirmToken=${params.confirmToken}`);
|
||||
} else {
|
||||
setRegistered(true);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
toast('There was an issue trying to register');
|
||||
});
|
||||
}
|
||||
setComplete(true);
|
||||
}}
|
||||
/>
|
||||
</LoginWrapper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default UsersRegister;
|
||||
@ -21,7 +21,6 @@ import TaskAssignee from 'shared/components/TaskAssignee';
|
||||
import Member from 'shared/components/Member';
|
||||
import ControlledInput from 'shared/components/ControlledInput';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
const MemberListWrapper = styled.div`
|
||||
flex: 1 1;
|
||||
@ -35,7 +34,7 @@ const UserMember = styled(Member)`
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
|
||||
background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
|
||||
}
|
||||
border-radius: 6px;
|
||||
`;
|
||||
@ -120,12 +119,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
|
||||
? css`
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
color: rgba(${props.theme.colors.text.primary}, 0.4);
|
||||
`
|
||||
: css`
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: ${props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`}
|
||||
`;
|
||||
@ -136,7 +135,7 @@ export const Content = styled.div`
|
||||
|
||||
export const CurrentPermission = styled.span`
|
||||
margin-left: 4px;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
|
||||
color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
|
||||
`;
|
||||
|
||||
export const Separator = styled.div`
|
||||
@ -147,13 +146,13 @@ export const Separator = styled.div`
|
||||
|
||||
export const WarningText = styled.span`
|
||||
display: flex;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||||
padding: 6px;
|
||||
`;
|
||||
|
||||
export const DeleteDescription = styled.div`
|
||||
font-size: 14px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
export const RemoveMemberButton = styled(Button)`
|
||||
@ -306,14 +305,14 @@ const MemberItemOption = styled(Button)`
|
||||
`;
|
||||
|
||||
const MemberList = styled.div`
|
||||
border-top: 1px solid ${props => props.theme.colors.border};
|
||||
border-top: 1px solid rgba(${props => props.theme.colors.border});
|
||||
`;
|
||||
|
||||
const MemberListItem = styled.div`
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid ${props => props.theme.colors.border};
|
||||
border-bottom: 1px solid rgba(${props => props.theme.colors.border});
|
||||
min-height: 40px;
|
||||
padding: 12px 0 12px 40px;
|
||||
position: relative;
|
||||
@ -337,11 +336,11 @@ const MemberProfile = styled(TaskAssignee)`
|
||||
`;
|
||||
|
||||
const MemberItemName = styled.p`
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
`;
|
||||
|
||||
const MemberItemUsername = styled.p`
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const MemberListHeader = styled.div`
|
||||
@ -350,12 +349,12 @@ const MemberListHeader = styled.div`
|
||||
`;
|
||||
const ListTitle = styled.h3`
|
||||
font-size: 18px;
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
margin-bottom: 12px;
|
||||
`;
|
||||
const ListDesc = styled.span`
|
||||
font-size: 16px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
const FilterSearch = styled(Input)`
|
||||
margin: 0;
|
||||
@ -387,11 +386,11 @@ const FilterTabItem = styled.li`
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
padding: 6px 8px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
&:hover {
|
||||
border-radius: 6px;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
background: rgba(${props => props.theme.colors.primary});
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
`;
|
||||
|
||||
@ -419,11 +418,7 @@ type MembersProps = {
|
||||
|
||||
const Members: React.FC<MembersProps> = ({ teamID }) => {
|
||||
const { showPopup, hidePopup } = usePopup();
|
||||
const { loading, data } = useGetTeamQuery({
|
||||
variables: { teamID },
|
||||
fetchPolicy: 'cache-and-network',
|
||||
pollInterval: 3000,
|
||||
});
|
||||
const { loading, data } = useGetTeamQuery({ variables: { teamID } });
|
||||
const { user, setUserRoles } = useCurrentUser();
|
||||
const warning =
|
||||
'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
|
||||
@ -434,13 +429,11 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
|
||||
GetTeamDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (response.data) {
|
||||
draftCache.findTeam.members.push({
|
||||
...response.data.createTeamMember.teamMember,
|
||||
member: { __typename: 'MemberList', projects: [], teams: [] },
|
||||
owned: { __typename: 'OwnedList', projects: [], teams: [] },
|
||||
});
|
||||
}
|
||||
draftCache.findTeam.members.push({
|
||||
...response.data.createTeamMember.teamMember,
|
||||
member: { __typename: 'MemberList', projects: [], teams: [] },
|
||||
owned: { __typename: 'OwnedList', projects: [], teams: [] },
|
||||
});
|
||||
}),
|
||||
{ teamID },
|
||||
);
|
||||
@ -465,13 +458,16 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.findTeam.members = cache.findTeam.members.filter(
|
||||
member => member.id !== response.data?.deleteTeamMember.userID,
|
||||
member => member.id !== response.data.deleteTeamMember.userID,
|
||||
);
|
||||
}),
|
||||
{ teamID },
|
||||
);
|
||||
},
|
||||
});
|
||||
if (loading) {
|
||||
return <span>loading</span>;
|
||||
}
|
||||
|
||||
if (data && user) {
|
||||
return (
|
||||
@ -559,7 +555,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
|
||||
);
|
||||
}
|
||||
|
||||
return <div>loading</div>;
|
||||
return <div>error</div>;
|
||||
};
|
||||
|
||||
export default Members;
|
||||
|
||||
@ -8,7 +8,6 @@ import {
|
||||
} from 'shared/generated/graphql';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Input from 'shared/components/Input';
|
||||
import theme from 'App/ThemeStyles';
|
||||
|
||||
const FilterSearch = styled(Input)`
|
||||
margin: 0;
|
||||
@ -35,11 +34,11 @@ const FilterTabItem = styled.li`
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
padding: 6px 8px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
&:hover {
|
||||
border-radius: 6px;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
background: rgba(${props => props.theme.colors.primary});
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
`;
|
||||
|
||||
@ -56,7 +55,7 @@ const FilterTabTitle = styled.h2`
|
||||
`;
|
||||
|
||||
const ProjectAddTile = styled.div`
|
||||
background-color: ${props => props.theme.colors.bg.primary};
|
||||
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
color: #fff;
|
||||
@ -148,18 +147,17 @@ const ProjectListWrapper = styled.div`
|
||||
flex: 1 1;
|
||||
`;
|
||||
|
||||
const colors = theme.colors.multiColors;
|
||||
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
|
||||
|
||||
type TeamProjectsProps = {
|
||||
teamID: string;
|
||||
};
|
||||
|
||||
const TeamProjects: React.FC<TeamProjectsProps> = ({ teamID }) => {
|
||||
const { loading, data } = useGetTeamQuery({
|
||||
variables: { teamID },
|
||||
fetchPolicy: 'cache-and-network',
|
||||
pollInterval: 3000,
|
||||
});
|
||||
const { loading, data } = useGetTeamQuery({ variables: { teamID } });
|
||||
if (loading) {
|
||||
return <span>loading</span>;
|
||||
}
|
||||
if (data) {
|
||||
return (
|
||||
<ProjectsContainer>
|
||||
@ -190,7 +188,7 @@ const TeamProjects: React.FC<TeamProjectsProps> = ({ teamID }) => {
|
||||
</ProjectsContainer>
|
||||
);
|
||||
}
|
||||
return <span>loading</span>;
|
||||
return <span>error</span>;
|
||||
};
|
||||
|
||||
export default TeamProjects;
|
||||
|
||||
@ -33,7 +33,7 @@ const Wrapper = styled.div`
|
||||
`;
|
||||
|
||||
type TeamPopupProps = {
|
||||
history: History<any>;
|
||||
history: History<History.PoorMansUnknown>;
|
||||
name: string;
|
||||
teamID: string;
|
||||
};
|
||||
@ -44,9 +44,9 @@ export const TeamPopup: React.FC<TeamPopupProps> = ({ history, name, teamID }) =
|
||||
update: (client, deleteData) => {
|
||||
updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
|
||||
produce(cache, draftCache => {
|
||||
draftCache.teams = cache.teams.filter((team: any) => team.id !== deleteData.data?.deleteTeam.team.id);
|
||||
draftCache.teams = cache.teams.filter((team: any) => team.id !== deleteData.data.deleteTeam.team.id);
|
||||
draftCache.projects = cache.projects.filter(
|
||||
(project: any) => project.team.id !== deleteData.data?.deleteTeam.team.id,
|
||||
(project: any) => project.team.id !== deleteData.data.deleteTeam.team.id,
|
||||
);
|
||||
}),
|
||||
);
|
||||
@ -85,15 +85,20 @@ type TeamsRouteProps = {
|
||||
const Teams = () => {
|
||||
const { teamID } = useParams<TeamsRouteProps>();
|
||||
const history = useHistory();
|
||||
const { loading, data } = useGetTeamQuery({
|
||||
variables: { teamID },
|
||||
onCompleted: resp => {
|
||||
document.title = `${resp.findTeam.name} | Taskcafé`;
|
||||
},
|
||||
});
|
||||
const { loading, data } = useGetTeamQuery({ variables: { teamID } });
|
||||
const { user } = useCurrentUser();
|
||||
const [currentTab, setCurrentTab] = useState(0);
|
||||
const match = useRouteMatch();
|
||||
useEffect(() => {
|
||||
document.title = 'Teams | Taskcafé';
|
||||
}, []);
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<span>loading</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (data && user) {
|
||||
if (!user.isVisible(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)) {
|
||||
return <Redirect to="/" />;
|
||||
@ -129,21 +134,7 @@ const Teams = () => {
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<GlobalTopNavbar
|
||||
menuType={[
|
||||
{ name: 'Projects', link: `${match.url}` },
|
||||
{ name: 'Members', link: `${match.url}/members` },
|
||||
]}
|
||||
currentTab={currentTab}
|
||||
onSetTab={tab => {
|
||||
setCurrentTab(tab);
|
||||
}}
|
||||
onSaveProjectName={NOOP}
|
||||
projectID={null}
|
||||
name={null}
|
||||
/>
|
||||
);
|
||||
return <div>Error!</div>;
|
||||
};
|
||||
|
||||
export default Teams;
|
||||
|
||||
@ -8,28 +8,15 @@ import { HttpLink } from 'apollo-link-http';
|
||||
import { onError } from 'apollo-link-error';
|
||||
import { enableMapSet } from 'immer';
|
||||
import { ApolloLink, Observable, fromPromise } from 'apollo-link';
|
||||
import dayjs from 'dayjs';
|
||||
import updateLocale from 'dayjs/plugin/updateLocale';
|
||||
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
import isBetween from 'dayjs/plugin/isBetween';
|
||||
import weekday from 'dayjs/plugin/weekday';
|
||||
import moment from 'moment';
|
||||
import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
|
||||
import cache from './App/cache';
|
||||
import App from './App';
|
||||
|
||||
// https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
|
||||
|
||||
dayjs.extend(isSameOrAfter);
|
||||
|
||||
dayjs.extend(weekday);
|
||||
dayjs.extend(isBetween);
|
||||
dayjs.extend(customParseFormat);
|
||||
enableMapSet();
|
||||
|
||||
dayjs.extend(updateLocale);
|
||||
|
||||
dayjs.updateLocale('en', {
|
||||
moment.updateLocale('en', {
|
||||
week: {
|
||||
dow: 1, // First day of week is Monday
|
||||
doy: 7, // First week of year must contain 1 January (7 + 1 - 1)
|
||||
|
||||
0
frontend/src/outline.d.ts
vendored
0
frontend/src/outline.d.ts
vendored
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import theme from 'App/ThemeStyles';
|
||||
import AddList from '.';
|
||||
|
||||
export default {
|
||||
@ -8,7 +7,7 @@ export default {
|
||||
title: 'AddList',
|
||||
parameters: {
|
||||
backgrounds: [
|
||||
{ name: 'gray', value: theme.colors.bg.secondary, default: true },
|
||||
{ name: 'gray', value: '#262c49', default: true },
|
||||
{ name: 'white', value: '#ffffff' },
|
||||
],
|
||||
},
|
||||
|
||||
@ -67,7 +67,7 @@ export const ListNameEditorWrapper = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
export const ListNameEditor = styled(TextareaAutosize)`
|
||||
background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
|
||||
background-color: ${props => mixin.lighten('#262c49', 0.05)};
|
||||
border: none;
|
||||
box-shadow: inset 0 0 0 2px #0079bf;
|
||||
transition: margin 85ms ease-in, background 85ms ease-in;
|
||||
@ -91,7 +91,7 @@ export const ListNameEditor = styled(TextareaAutosize)`
|
||||
|
||||
color: #c2c6dc;
|
||||
l &:focus {
|
||||
background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
|
||||
background-color: ${props => mixin.lighten('#262c49', 0.05)};
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -51,9 +51,7 @@ export const Default = () => {
|
||||
},
|
||||
},
|
||||
]}
|
||||
invitedUsers={[]}
|
||||
onAddUser={action('add user')}
|
||||
onDeleteInvitedUser={action('delete invited user')}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
</>
|
||||
|
||||
@ -8,7 +8,6 @@ import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
|
||||
import Input from 'shared/components/Input';
|
||||
import Button from 'shared/components/Button';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
export const RoleCheckmark = styled(Checkmark)`
|
||||
padding-left: 4px;
|
||||
@ -59,12 +58,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
|
||||
? css`
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
color: rgba(${props.theme.colors.text.primary}, 0.4);
|
||||
`
|
||||
: css`
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: ${props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`}
|
||||
`;
|
||||
@ -75,7 +74,7 @@ export const Content = styled.div`
|
||||
|
||||
export const CurrentPermission = styled.span`
|
||||
margin-left: 4px;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
|
||||
color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
|
||||
`;
|
||||
|
||||
export const Separator = styled.div`
|
||||
@ -86,13 +85,13 @@ export const Separator = styled.div`
|
||||
|
||||
export const WarningText = styled.span`
|
||||
display: flex;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||||
padding: 6px;
|
||||
`;
|
||||
|
||||
export const DeleteDescription = styled.div`
|
||||
font-size: 14px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
export const RemoveMemberButton = styled(Button)`
|
||||
@ -105,8 +104,8 @@ type TeamRoleManagerPopupProps = {
|
||||
user: User;
|
||||
users: Array<User>;
|
||||
warning?: string | null;
|
||||
canChangeRole?: boolean;
|
||||
onChangeRole?: (roleCode: RoleCode) => void;
|
||||
canChangeRole: boolean;
|
||||
onChangeRole: (roleCode: RoleCode) => void;
|
||||
updateUserPassword?: (user: TaskUser, password: string) => void;
|
||||
onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
|
||||
};
|
||||
@ -334,14 +333,14 @@ const MemberItemOption = styled(Button)`
|
||||
`;
|
||||
|
||||
const MemberList = styled.div`
|
||||
border-top: 1px solid ${props => props.theme.colors.border};
|
||||
border-top: 1px solid rgba(${props => props.theme.colors.border});
|
||||
`;
|
||||
|
||||
const MemberListItem = styled.div`
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid ${props => props.theme.colors.border};
|
||||
border-bottom: 1px solid rgba(${props => props.theme.colors.border});
|
||||
min-height: 40px;
|
||||
padding: 12px 0 12px 40px;
|
||||
position: relative;
|
||||
@ -365,11 +364,11 @@ const MemberProfile = styled(TaskAssignee)`
|
||||
`;
|
||||
|
||||
const MemberItemName = styled.p`
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
`;
|
||||
|
||||
const MemberItemUsername = styled.p`
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const MemberListHeader = styled.div`
|
||||
@ -378,12 +377,12 @@ const MemberListHeader = styled.div`
|
||||
`;
|
||||
const ListTitle = styled.h3`
|
||||
font-size: 18px;
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
margin-bottom: 12px;
|
||||
`;
|
||||
const ListDesc = styled.span`
|
||||
font-size: 16px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
const FilterSearch = styled(Input)`
|
||||
margin: 0;
|
||||
@ -444,17 +443,17 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
color: ${props => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
|
||||
color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
|
||||
&:hover {
|
||||
color: ${props => `${props.theme.colors.primary}`};
|
||||
color: rgba(115, 103, 240);
|
||||
}
|
||||
&:hover svg {
|
||||
fill: ${props => props.theme.colors.primary};
|
||||
fill: rgba(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
const TabItemUser = styled(User)<{ active: boolean }>`
|
||||
fill: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
|
||||
stroke: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
|
||||
fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
|
||||
stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
|
||||
`;
|
||||
|
||||
const TabNavItemSpan = styled.span`
|
||||
@ -471,8 +470,8 @@ const TabNavLine = styled.span<{ top: number }>`
|
||||
transform: scaleX(1);
|
||||
top: ${props => props.top}px;
|
||||
|
||||
background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
|
||||
box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
|
||||
background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
|
||||
box-shadow: 0 0 8px 0 rgba(115, 103, 240);
|
||||
display: block;
|
||||
position: absolute;
|
||||
transition: all 0.2s ease;
|
||||
@ -531,10 +530,8 @@ type AdminProps = {
|
||||
onDeleteUser: (userID: string, newOwnerID: string | null) => void;
|
||||
onInviteUser: ($target: React.RefObject<HTMLElement>) => void;
|
||||
users: Array<User>;
|
||||
invitedUsers: Array<InvitedUserAccount>;
|
||||
canInviteUser: boolean;
|
||||
onUpdateUserPassword: (user: TaskUser, password: string) => void;
|
||||
onDeleteInvitedUser: (invitedUserID: string) => void;
|
||||
};
|
||||
|
||||
const Admin: React.FC<AdminProps> = ({
|
||||
@ -543,9 +540,7 @@ const Admin: React.FC<AdminProps> = ({
|
||||
onUpdateUserPassword,
|
||||
canInviteUser,
|
||||
onDeleteUser,
|
||||
onDeleteInvitedUser,
|
||||
onInviteUser,
|
||||
invitedUsers,
|
||||
users,
|
||||
}) => {
|
||||
const warning =
|
||||
@ -562,7 +557,6 @@ const Admin: React.FC<AdminProps> = ({
|
||||
<TabNavContent>
|
||||
{items.map((item, idx) => (
|
||||
<NavItem
|
||||
key={item.name}
|
||||
onClick={(tab, top) => {
|
||||
if ($tabNav && $tabNav.current) {
|
||||
const pos = $tabNav.current.getBoundingClientRect();
|
||||
@ -582,7 +576,7 @@ const Admin: React.FC<AdminProps> = ({
|
||||
<TabContent>
|
||||
<MemberListWrapper>
|
||||
<MemberListHeader>
|
||||
<ListTitle>{`Members (${users.length + invitedUsers.length})`}</ListTitle>
|
||||
<ListTitle>{`Members (${users.length})`}</ListTitle>
|
||||
<ListDesc>
|
||||
Organization admins can create / manage / delete all projects & teams. Members only have access to teams
|
||||
or projects they have been added to.
|
||||
@ -640,65 +634,6 @@ const Admin: React.FC<AdminProps> = ({
|
||||
</MemberListItem>
|
||||
);
|
||||
})}
|
||||
{invitedUsers.map(member => {
|
||||
return (
|
||||
<MemberListItem>
|
||||
<MemberProfile
|
||||
showRoleIcons
|
||||
size={32}
|
||||
onMemberProfile={NOOP}
|
||||
member={{
|
||||
id: member.id,
|
||||
fullName: member.email,
|
||||
profileIcon: {
|
||||
bgColor: '#fff',
|
||||
url: null,
|
||||
initials: member.email.charAt(0),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<MemberListItemDetails>
|
||||
<MemberItemName>{member.email}</MemberItemName>
|
||||
<MemberItemUsername>Invited</MemberItemUsername>
|
||||
</MemberListItemDetails>
|
||||
<MemberItemOptions>
|
||||
<MemberItemOption
|
||||
variant="outline"
|
||||
onClick={$target => {
|
||||
showPopup(
|
||||
$target,
|
||||
<TeamRoleManagerPopup
|
||||
user={{
|
||||
id: member.id,
|
||||
fullName: member.email,
|
||||
profileIcon: {
|
||||
bgColor: '#fff',
|
||||
url: null,
|
||||
initials: member.email.charAt(0),
|
||||
},
|
||||
member: {
|
||||
teams: [],
|
||||
projects: [],
|
||||
},
|
||||
owned: {
|
||||
teams: [],
|
||||
projects: [],
|
||||
},
|
||||
}}
|
||||
users={users}
|
||||
onDeleteUser={() => {
|
||||
onDeleteInvitedUser(member.id);
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
}}
|
||||
>
|
||||
Manage
|
||||
</MemberItemOption>
|
||||
</MemberItemOptions>
|
||||
</MemberListItem>
|
||||
);
|
||||
})}
|
||||
</MemberList>
|
||||
</MemberListWrapper>
|
||||
</TabContent>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useRef } from 'react';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import { mixin } from '../../utils/styles';
|
||||
|
||||
const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
|
||||
position: relative;
|
||||
@ -9,7 +8,7 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon
|
||||
justify-content: ${props => props.justifyTextContent};
|
||||
transition: all 0.2s ease;
|
||||
font-size: ${props => props.fontSize};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
${props =>
|
||||
props.hasIcon &&
|
||||
css`
|
||||
@ -36,37 +35,32 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
|
||||
`}
|
||||
`;
|
||||
|
||||
const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
|
||||
background: ${props => props.theme.colors[props.color]};
|
||||
${props =>
|
||||
props.hoverVariant === 'boxShadow' &&
|
||||
css`
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px -8px ${props.theme.colors[props.color]};
|
||||
}
|
||||
`}
|
||||
const Filled = styled(Base)`
|
||||
background: rgba(${props => props.theme.colors[props.color]});
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
|
||||
}
|
||||
`;
|
||||
|
||||
const Outline = styled(Base)<{ invert: boolean }>`
|
||||
border: 1px solid ${props => props.theme.colors[props.color]};
|
||||
border: 1px solid rgba(${props => props.theme.colors[props.color]});
|
||||
background: transparent;
|
||||
${props =>
|
||||
props.invert
|
||||
? css`
|
||||
background: ${props.theme.colors[props.color]});
|
||||
background: rgba(${props.theme.colors[props.color]});
|
||||
& ${Text} {
|
||||
color: ${props.theme.colors.text.secondary});
|
||||
color: rgba(${props.theme.colors.text.secondary});
|
||||
}
|
||||
&:hover {
|
||||
background: ${mixin.rgba(props.theme.colors[props.color], 0.8)};
|
||||
background: rgba(${props.theme.colors[props.color]}, 0.8);
|
||||
}
|
||||
`
|
||||
: css`
|
||||
& ${Text} {
|
||||
color: ${props.theme.colors[props.color]});
|
||||
color: rgba(${props.theme.colors[props.color]});
|
||||
}
|
||||
&:hover {
|
||||
background: ${mixin.rgba(props.theme.colors[props.color], 0.08)};
|
||||
background: rgba(${props.theme.colors[props.color]}, 0.08);
|
||||
}
|
||||
`}
|
||||
`;
|
||||
@ -74,7 +68,7 @@ const Outline = styled(Base)<{ invert: boolean }>`
|
||||
const Flat = styled(Base)`
|
||||
background: transparent;
|
||||
&:hover {
|
||||
background: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
|
||||
background: rgba(${props => props.theme.colors[props.color]}, 0.2);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -87,7 +81,7 @@ const LineX = styled.span<{ color: string }>`
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
|
||||
background: rgba(${props => props.theme.colors[props.color]}, 1);
|
||||
`;
|
||||
|
||||
const LineDown = styled(Base)`
|
||||
@ -96,7 +90,7 @@ const LineDown = styled(Base)`
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
border-color: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
|
||||
border-color: rgba(${props => props.theme.colors[props.color]}, 0.2);
|
||||
|
||||
&:hover ${LineX} {
|
||||
width: 100%;
|
||||
@ -109,8 +103,8 @@ const LineDown = styled(Base)`
|
||||
const Gradient = styled(Base)`
|
||||
background: linear-gradient(
|
||||
30deg,
|
||||
${props => mixin.rgba(props.theme.colors[props.color], 1)},
|
||||
${props => mixin.rgba(props.theme.colors[props.color], 0.5)}
|
||||
rgba(${props => props.theme.colors[props.color]}, 1),
|
||||
rgba(${props => props.theme.colors[props.color]}, 0.5)
|
||||
);
|
||||
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
&:hover {
|
||||
@ -119,7 +113,7 @@ const Gradient = styled(Base)`
|
||||
`;
|
||||
|
||||
const Relief = styled(Base)`
|
||||
background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
|
||||
background: rgba(${props => props.theme.colors[props.color]}, 1);
|
||||
-webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset;
|
||||
box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
@ -129,11 +123,9 @@ const Relief = styled(Base)`
|
||||
}
|
||||
`;
|
||||
|
||||
type HoverVariant = 'boxShadow' | 'none';
|
||||
type ButtonProps = {
|
||||
fontSize?: string;
|
||||
variant?: 'filled' | 'outline' | 'flat' | 'lineDown' | 'gradient' | 'relief';
|
||||
hoverVariant?: HoverVariant;
|
||||
color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
|
||||
disabled?: boolean;
|
||||
type?: 'button' | 'submit';
|
||||
@ -150,7 +142,6 @@ const Button: React.FC<ButtonProps> = ({
|
||||
invert = false,
|
||||
color = 'primary',
|
||||
variant = 'filled',
|
||||
hoverVariant = 'boxShadow',
|
||||
type = 'button',
|
||||
justifyTextContent = 'center',
|
||||
icon,
|
||||
@ -167,15 +158,7 @@ const Button: React.FC<ButtonProps> = ({
|
||||
switch (variant) {
|
||||
case 'filled':
|
||||
return (
|
||||
<Filled
|
||||
ref={$button}
|
||||
hoverVariant={hoverVariant}
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
color={color}
|
||||
>
|
||||
<Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
|
||||
{icon && icon}
|
||||
<Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
|
||||
{children}
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import styled, { css, keyframes } from 'styled-components';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
import TextareaAutosize from 'react-autosize-textarea';
|
||||
import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
|
||||
import { CheckCircle, CheckSquareOutline } from 'shared/icons';
|
||||
import { RefObject } from 'react';
|
||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||
|
||||
export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
|
||||
box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
|
||||
inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
|
||||
box-shadow: 0 0 0 2px rgba(${props => props.theme.colors.bg.secondary}),
|
||||
inset 0 0 0 1px rgba(${props => props.theme.colors.bg.secondary}, 0.07);
|
||||
z-index: ${props => props.zIndex};
|
||||
position: relative;
|
||||
`;
|
||||
@ -14,13 +16,11 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
|
||||
${props =>
|
||||
props.color === 'success' &&
|
||||
css`
|
||||
fill: ${props.theme.colors.success};
|
||||
stroke: ${props.theme.colors.success};
|
||||
fill: rgba(${props.theme.colors.success});
|
||||
stroke: rgba(${props.theme.colors.success});
|
||||
`}
|
||||
`;
|
||||
export const ClockIcon = styled(Clock)<{ color: string }>`
|
||||
fill: ${props => props.color};
|
||||
`;
|
||||
export const ClockIcon = styled(FontAwesomeIcon)``;
|
||||
|
||||
export const EditorTextarea = styled(TextareaAutosize)`
|
||||
overflow: hidden;
|
||||
@ -38,7 +38,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
&:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
@ -89,7 +89,7 @@ export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
|
||||
padding: 0 4px 0 6px;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
${props => props.color === 'success' && `color: ${props.theme.colors.success};`}
|
||||
${props => props.color === 'success' && `color: rgba(${props.theme.colors.success});`}
|
||||
`;
|
||||
|
||||
export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
|
||||
@ -101,9 +101,7 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
|
||||
position: relative;
|
||||
|
||||
background-color: ${props =>
|
||||
props.isActive && !props.editable
|
||||
? mixin.darken(props.theme.colors.bg.secondary, 0.1)
|
||||
: `${props.theme.colors.bg.secondary}`};
|
||||
props.isActive && !props.editable ? mixin.darken('#262c49', 0.1) : `rgba(${props.theme.colors.bg.secondary})`};
|
||||
`;
|
||||
|
||||
export const ListCardInnerContainer = styled.div`
|
||||
@ -149,11 +147,6 @@ export const ListCardLabelText = styled.span`
|
||||
line-height: 16px;
|
||||
`;
|
||||
|
||||
export const ListCardLabelsWrapper = styled.div`
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
|
||||
${props =>
|
||||
props.variant === 'small'
|
||||
@ -185,6 +178,8 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
|
||||
`;
|
||||
|
||||
export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@ -223,7 +218,7 @@ export const ListCardOperation = styled.span`
|
||||
top: 2px;
|
||||
z-index: 100;
|
||||
&:hover {
|
||||
background-color: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
|
||||
background-color: ${props => mixin.darken('#262c49', 0.25)};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -235,7 +230,7 @@ export const CardTitle = styled.span`
|
||||
word-wrap: break-word;
|
||||
line-height: 18px;
|
||||
font-size: 14px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -248,7 +243,7 @@ export const CardMembers = styled.div`
|
||||
`;
|
||||
|
||||
export const CompleteIcon = styled(CheckCircle)`
|
||||
fill: ${props => props.theme.colors.success};
|
||||
fill: rgba(${props => props.theme.colors.success});
|
||||
margin-right: 4px;
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Pencil, Eye, List } from 'shared/icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faClock, faEye } from '@fortawesome/free-regular-svg-icons';
|
||||
import {
|
||||
EditorTextarea,
|
||||
CardMember,
|
||||
@ -18,7 +20,6 @@ import {
|
||||
ListCardLabels,
|
||||
ListCardLabel,
|
||||
ListCardLabelText,
|
||||
ListCardLabelsWrapper,
|
||||
ListCardOperation,
|
||||
CardTitle,
|
||||
CardMembers,
|
||||
@ -153,42 +154,39 @@ const Card = React.forwardRef(
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Pencil width={8} height={8} />
|
||||
<FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
|
||||
</ListCardOperation>
|
||||
)}
|
||||
<ListCardDetails complete={complete ?? false}>
|
||||
{labels && labels.length !== 0 && (
|
||||
<ListCardLabelsWrapper>
|
||||
<ListCardLabels
|
||||
toggleLabels={toggleLabels}
|
||||
toggleDirection={toggleDirection}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
if (onCardLabelClick) {
|
||||
onCardLabelClick();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{labels
|
||||
.slice()
|
||||
.sort((a, b) => a.labelColor.position - b.labelColor.position)
|
||||
.map(label => (
|
||||
<ListCardLabel
|
||||
onAnimationEnd={() => {
|
||||
if (setToggleLabels) {
|
||||
setToggleLabels(false);
|
||||
}
|
||||
}}
|
||||
variant={labelVariant ?? 'large'}
|
||||
color={label.labelColor.colorHex}
|
||||
key={label.id}
|
||||
>
|
||||
<ListCardLabelText>{label.name}</ListCardLabelText>
|
||||
</ListCardLabel>
|
||||
))}
|
||||
</ListCardLabels>
|
||||
</ListCardLabelsWrapper>
|
||||
)}
|
||||
<ListCardLabels
|
||||
toggleLabels={toggleLabels}
|
||||
toggleDirection={toggleDirection}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
if (onCardLabelClick) {
|
||||
onCardLabelClick();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{labels &&
|
||||
labels
|
||||
.slice()
|
||||
.sort((a, b) => a.labelColor.position - b.labelColor.position)
|
||||
.map(label => (
|
||||
<ListCardLabel
|
||||
onAnimationEnd={() => {
|
||||
if (setToggleLabels) {
|
||||
setToggleLabels(false);
|
||||
}
|
||||
}}
|
||||
variant={labelVariant ?? 'large'}
|
||||
color={label.labelColor.colorHex}
|
||||
key={label.id}
|
||||
>
|
||||
<ListCardLabelText>{label.name}</ListCardLabelText>
|
||||
</ListCardLabel>
|
||||
))}
|
||||
</ListCardLabels>
|
||||
{editable ? (
|
||||
<EditorContent>
|
||||
{complete && <CompleteIcon width={16} height={16} />}
|
||||
@ -216,18 +214,18 @@ const Card = React.forwardRef(
|
||||
<ListCardBadges>
|
||||
{watched && (
|
||||
<ListCardBadge>
|
||||
<Eye width={8} height={8} />
|
||||
<FontAwesomeIcon color="#6b778c" icon={faEye} size="xs" />
|
||||
</ListCardBadge>
|
||||
)}
|
||||
{dueDate && (
|
||||
<DueDateCardBadge isPastDue={dueDate.isPastDue}>
|
||||
<ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} width={8} height={8} />
|
||||
<ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} icon={faClock} size="xs" />
|
||||
<ListCardBadgeText>{dueDate.formattedDate}</ListCardBadgeText>
|
||||
</DueDateCardBadge>
|
||||
)}
|
||||
{description && (
|
||||
<DescriptionBadge>
|
||||
<List width={8} height={8} />
|
||||
<FontAwesomeIcon color="#6b778c" icon={faList} size="xs" />
|
||||
</DescriptionBadge>
|
||||
)}
|
||||
{checklists && (
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import styled from 'styled-components';
|
||||
import Button from 'shared/components/Button';
|
||||
import TextareaAutosize from 'react-autosize-textarea';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
export const CancelIconWrapper = styled.div`
|
||||
export const CancelIcon = styled(FontAwesomeIcon)`
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
font-size: 1.25em;
|
||||
padding-left: 5px;
|
||||
`;
|
||||
|
||||
export const CardComposerWrapper = styled.div<{ isOpen: boolean }>`
|
||||
padding-bottom: 8px;
|
||||
display: ${props => (props.isOpen ? 'flex' : 'none')};
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
|
||||
import { faTimes } from '@fortawesome/free-solid-svg-icons';
|
||||
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
||||
import { Cross } from 'shared/icons';
|
||||
|
||||
import {
|
||||
CardComposerWrapper,
|
||||
CancelIconWrapper,
|
||||
CancelIcon,
|
||||
AddCardButton,
|
||||
ComposerControls,
|
||||
ComposerControlsSaveSection,
|
||||
@ -26,9 +26,10 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
|
||||
useOnOutsideClick($cardRef, true, onClose, null);
|
||||
useOnEscapeKeyDown(isOpen, onClose);
|
||||
return (
|
||||
<CardComposerWrapper isOpen={isOpen} ref={$cardRef}>
|
||||
<CardComposerWrapper isOpen={isOpen}>
|
||||
<Card
|
||||
title={cardName}
|
||||
ref={$cardRef}
|
||||
taskID=""
|
||||
taskGroupID=""
|
||||
editable
|
||||
@ -51,9 +52,7 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
|
||||
>
|
||||
Add Card
|
||||
</AddCardButton>
|
||||
<CancelIconWrapper onClick={() => onClose()}>
|
||||
<Cross width={12} height={12} />
|
||||
</CancelIconWrapper>
|
||||
<CancelIcon onClick={onClose} icon={faTimes} color="#42526e" />
|
||||
</ComposerControlsSaveSection>
|
||||
<ComposerControlsActionsSection />
|
||||
</ComposerControls>
|
||||
|
||||
@ -22,7 +22,7 @@ export default {
|
||||
const Container = styled.div`
|
||||
width: 552px;
|
||||
margin: 25px;
|
||||
border: 1px solid ${props => props.theme.colors.bg.primary};
|
||||
border: 1px solid rgba(${props => props.theme.colors.bg.primary});
|
||||
`;
|
||||
|
||||
const defaultItems = [
|
||||
|
||||
@ -12,7 +12,6 @@ import Button from 'shared/components/Button';
|
||||
import TextareaAutosize from 'react-autosize-textarea';
|
||||
import Control from 'react-select/src/components/Control';
|
||||
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
margin-bottom: 24px;
|
||||
@ -39,7 +38,7 @@ const WindowChecklistTitle = styled.div`
|
||||
|
||||
const WindowTitleText = styled.h3`
|
||||
cursor: pointer;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
margin: 6px 0;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
@ -74,7 +73,7 @@ const ChecklistProgressPercent = styled.span`
|
||||
`;
|
||||
|
||||
const ChecklistProgressBar = styled.div`
|
||||
background: ${props => props.theme.colors.bg.primary};
|
||||
background: rgba(${props => props.theme.colors.bg.primary});
|
||||
border-radius: 4px;
|
||||
clear: both;
|
||||
height: 8px;
|
||||
@ -84,7 +83,7 @@ const ChecklistProgressBar = styled.div`
|
||||
`;
|
||||
const ChecklistProgressBarCurrent = styled.div<{ width: number }>`
|
||||
width: ${props => props.width}%;
|
||||
background: ${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)};
|
||||
background: rgba(${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)});
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
@ -112,7 +111,7 @@ const ChecklistIcon = styled.div`
|
||||
`;
|
||||
|
||||
const ChecklistItemCheckedIcon = styled(CheckSquare)`
|
||||
fill: ${props => props.theme.colors.primary};
|
||||
fill: rgba(${props => props.theme.colors.primary});
|
||||
`;
|
||||
|
||||
const ChecklistItemDetails = styled.div`
|
||||
@ -134,7 +133,7 @@ const ChecklistItemTextControls = styled.div`
|
||||
`;
|
||||
|
||||
const ChecklistItemText = styled.span<{ complete: boolean }>`
|
||||
color: ${props => (props.complete ? '#5e6c84' : `${props.theme.colors.text.primary}`)};
|
||||
color: ${props => (props.complete ? '#5e6c84' : `rgba(${props.theme.colors.text.primary})`)};
|
||||
${props => props.complete && 'text-decoration: line-through;'}
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
@ -156,14 +155,14 @@ const ControlButton = styled.div`
|
||||
margin-left: 4px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 6px;
|
||||
background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.8)};
|
||||
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.8);
|
||||
display: flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
background-color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
|
||||
background-color: rgba(${props => props.theme.colors.primary}, 1);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -190,27 +189,27 @@ export const ChecklistNameEditor = styled(TextareaAutosize)`
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
border: 1px solid ${props => props.theme.colors.primary};
|
||||
border: 1px solid rgba(${props => props.theme.colors.primary});
|
||||
border-radius: 3px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
|
||||
border-color: ${props => props.theme.colors.border};
|
||||
background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
|
||||
border-color: rgba(${props => props.theme.colors.border});
|
||||
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
|
||||
&:focus {
|
||||
border-color: ${props => props.theme.colors.primary};
|
||||
border-color: rgba(${props => props.theme.colors.primary});
|
||||
}
|
||||
`;
|
||||
|
||||
const AssignUserButton = styled(AccountPlus)`
|
||||
fill: ${props => props.theme.colors.text.primary};
|
||||
fill: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const ClockButton = styled(Clock)`
|
||||
fill: ${props => props.theme.colors.text.primary};
|
||||
fill: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const TrashButton = styled(Trash)`
|
||||
fill: ${props => props.theme.colors.text.primary};
|
||||
fill: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const ChecklistItemWrapper = styled.div<{ ref: any }>`
|
||||
@ -225,7 +224,7 @@ const ChecklistItemWrapper = styled.div<{ ref: any }>`
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
|
||||
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
|
||||
}
|
||||
&:hover ${ControlButton} {
|
||||
opacity: 1;
|
||||
@ -247,10 +246,10 @@ const CancelButton = styled.div`
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
& svg {
|
||||
fill: ${props => props.theme.colors.text.primary};
|
||||
fill: rgba(${props => props.theme.colors.text.primary});
|
||||
}
|
||||
&:hover svg {
|
||||
fill: ${props => props.theme.colors.text.secondary};
|
||||
fill: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
`;
|
||||
|
||||
@ -266,7 +265,7 @@ const EditableDeleteButton = styled.button`
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
|
||||
background: rgba(${props => props.theme.colors.primary}, 0.8);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ const LabelText = styled.span`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const Container = styled.div<{ color?: string }>`
|
||||
@ -24,11 +24,11 @@ const Container = styled.div<{ color?: string }>`
|
||||
? css`
|
||||
background: ${props.color};
|
||||
& ${LabelText} {
|
||||
color: ${props.theme.colors.text.secondary};
|
||||
color: rgba(${props.theme.colors.text.secondary});
|
||||
}
|
||||
`
|
||||
: css`
|
||||
background: ${props.theme.colors.bg.primary};
|
||||
background: rgba(${props.theme.colors.bg.primary});
|
||||
`}
|
||||
`;
|
||||
|
||||
|
||||
@ -1,103 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
import Button from 'shared/components/Button';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
background: #eff2f7;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
export const Column = styled.div`
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const LoginFormWrapper = styled.div`
|
||||
background: #10163a;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const LoginFormContainer = styled.div`
|
||||
min-height: 505px;
|
||||
padding: 2rem;
|
||||
`;
|
||||
|
||||
export const Title = styled.h1`
|
||||
color: #ebeefd;
|
||||
font-size: 18px;
|
||||
margin-bottom: 14px;
|
||||
`;
|
||||
|
||||
export const SubTitle = styled.h2`
|
||||
color: #c2c6dc;
|
||||
font-size: 14px;
|
||||
margin-bottom: 14px;
|
||||
`;
|
||||
export const Form = styled.form`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const FormLabel = styled.label`
|
||||
color: #c2c6dc;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
margin-top: 14px;
|
||||
`;
|
||||
|
||||
export const FormTextInput = styled.input`
|
||||
width: 100%;
|
||||
background: #262c49;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
margin-top: 4px;
|
||||
padding: 0.7rem 1rem 0.7rem 3rem;
|
||||
font-size: 1rem;
|
||||
color: #c2c6dc;
|
||||
border-radius: 5px;
|
||||
`;
|
||||
|
||||
export const FormIcon = styled.div`
|
||||
top: 30px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
export const FormError = styled.span`
|
||||
font-size: 0.875rem;
|
||||
color: rgb(234, 84, 85);
|
||||
`;
|
||||
|
||||
export const LoginButton = styled(Button)``;
|
||||
|
||||
export const ActionButtons = styled.div`
|
||||
margin-top: 17.5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
export const RegisterButton = styled(Button)``;
|
||||
|
||||
export const LogoTitle = styled.div`
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-left: 12px;
|
||||
transition: visibility, opacity, transform 0.25s ease;
|
||||
color: #7367f0;
|
||||
`;
|
||||
|
||||
export const LogoWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 24px;
|
||||
color: rgb(222, 235, 255);
|
||||
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
|
||||
`;
|
||||
@ -1,62 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import AccessAccount from 'shared/undraw/AccessAccount';
|
||||
import { User, Lock, Taskcafe } from 'shared/icons';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import LoadingSpinner from 'shared/components/LoadingSpinner';
|
||||
import {
|
||||
Form,
|
||||
LogoWrapper,
|
||||
LogoTitle,
|
||||
ActionButtons,
|
||||
RegisterButton,
|
||||
FormError,
|
||||
FormIcon,
|
||||
FormLabel,
|
||||
FormTextInput,
|
||||
Wrapper,
|
||||
Column,
|
||||
LoginFormWrapper,
|
||||
LoginFormContainer,
|
||||
Title,
|
||||
SubTitle,
|
||||
} from './Styles';
|
||||
|
||||
const Confirm = ({ onConfirmUser, hasConfirmToken }: ConfirmProps) => {
|
||||
const [hasFailed, setFailed] = useState(false);
|
||||
const setHasFailed = () => {
|
||||
setFailed(true);
|
||||
};
|
||||
useEffect(() => {
|
||||
onConfirmUser(setHasFailed);
|
||||
});
|
||||
return (
|
||||
<Wrapper>
|
||||
<Column>
|
||||
<AccessAccount width={275} height={250} />
|
||||
</Column>
|
||||
<Column>
|
||||
<LoginFormWrapper>
|
||||
<LoginFormContainer>
|
||||
<LogoWrapper>
|
||||
<Taskcafe width={42} height={42} />
|
||||
<LogoTitle>Taskcafé</LogoTitle>
|
||||
</LogoWrapper>
|
||||
{hasConfirmToken ? (
|
||||
<>
|
||||
<Title>Confirming user...</Title>
|
||||
{hasFailed ? <SubTitle>There was an error while confirming your user</SubTitle> : <LoadingSpinner />}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Title>There is no confirmation token</Title>
|
||||
<SubTitle>There seems to have been an error.</SubTitle>
|
||||
</>
|
||||
)}
|
||||
</LoginFormContainer>
|
||||
</LoginFormWrapper>
|
||||
</Column>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Confirm;
|
||||
@ -19,7 +19,7 @@ export default {
|
||||
};
|
||||
|
||||
const Wrapper = styled.div`
|
||||
background: ${props => props.theme.colors.bg.primary};
|
||||
background: rgba(${props => props.theme.colors.bg.primary});
|
||||
padding: 45px;
|
||||
margin: 25px;
|
||||
display: flex;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import theme from '../../../App/ThemeStyles';
|
||||
|
||||
const InputWrapper = styled.div<{ width: string }>`
|
||||
position: relative;
|
||||
@ -58,14 +57,14 @@ const InputInput = styled.input<{
|
||||
background: ${props => props.focusBg};
|
||||
}
|
||||
&:focus ~ ${InputLabel} {
|
||||
color: ${props => props.theme.colors.primary};
|
||||
color: rgba(115, 103, 240);
|
||||
transform: translate(-3px, -90%);
|
||||
}
|
||||
${props =>
|
||||
props.hasValue &&
|
||||
css`
|
||||
& ~ ${InputLabel} {
|
||||
color: ${props.theme.colors.primary};
|
||||
color: rgba(115, 103, 240);
|
||||
transform: translate(-3px, -90%);
|
||||
}
|
||||
`}
|
||||
@ -116,8 +115,8 @@ const ControlledInput = ({
|
||||
}: ControlledInputProps) => {
|
||||
const $input = useRef<HTMLInputElement>(null);
|
||||
const [hasValue, setHasValue] = useState(false);
|
||||
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : theme.colors.alternate;
|
||||
const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
|
||||
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
|
||||
const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
|
||||
useEffect(() => {
|
||||
if (autoFocus && $input && $input.current) {
|
||||
$input.current.focus();
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { createRef, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import DropdownMenu from '.';
|
||||
import theme from '../../../App/ThemeStyles';
|
||||
|
||||
export default {
|
||||
component: DropdownMenu,
|
||||
@ -11,7 +10,7 @@ export default {
|
||||
backgrounds: [
|
||||
{ name: 'white', value: '#ffffff' },
|
||||
{ name: 'gray', value: '#f8f8f8' },
|
||||
{ name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
|
||||
{ name: 'darkBlue', value: '#262c49', default: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@ -59,7 +59,7 @@ export const ActionItem = styled.li`
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -19,23 +19,23 @@ display: flex
|
||||
}
|
||||
|
||||
& .react-datepicker-time__header {
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
}
|
||||
& .react-datepicker__time-list-item {
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
}
|
||||
& .react-datepicker__time-container .react-datepicker__time
|
||||
.react-datepicker__time-box ul.react-datepicker__time-list
|
||||
li.react-datepicker__time-list-item:hover {
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
background: ${props => props.theme.colors.bg.secondary};
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
background: rgba(${props => props.theme.colors.bg.secondary});
|
||||
}
|
||||
& .react-datepicker__time-container .react-datepicker__time {
|
||||
background: ${props => props.theme.colors.bg.primary};
|
||||
background: rgba(${props => props.theme.colors.bg.primary});
|
||||
}
|
||||
& .react-datepicker--time-only {
|
||||
background: ${props => props.theme.colors.bg.primary};
|
||||
border: 1px solid ${props => props.theme.colors.border};
|
||||
background: rgba(${props => props.theme.colors.bg.primary});
|
||||
border: 1px solid rgba(${props => props.theme.colors.border});
|
||||
}
|
||||
|
||||
& .react-datepicker * {
|
||||
@ -75,12 +75,12 @@ display: flex
|
||||
}
|
||||
& .react-datepicker__day--selected {
|
||||
border-radius: 50%;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgba(115, 103, 240);
|
||||
color: #fff;
|
||||
}
|
||||
& .react-datepicker__day--selected:hover {
|
||||
border-radius: 50%;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgba(115, 103, 240);
|
||||
color: #fff;
|
||||
}
|
||||
& .react-datepicker__header {
|
||||
@ -88,7 +88,7 @@ display: flex
|
||||
border: none;
|
||||
}
|
||||
& .react-datepicker__header--time {
|
||||
border-bottom: 1px solid ${props => props.theme.colors.border};
|
||||
border-bottom: 1px solid rgba(${props => props.theme.colors.border});
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect, forwardRef } from 'react';
|
||||
import dayjs from 'dayjs';
|
||||
import moment from 'moment';
|
||||
import styled from 'styled-components';
|
||||
import DatePicker from 'react-datepicker';
|
||||
import _ from 'lodash';
|
||||
@ -43,7 +43,7 @@ const HeaderSelectLabel = styled.div`
|
||||
color: #c2c6dc;
|
||||
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgba(115, 103, 240);
|
||||
color: #c2c6dc;
|
||||
}
|
||||
`;
|
||||
@ -60,8 +60,8 @@ const HeaderSelect = styled.select`
|
||||
appearance: none;
|
||||
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.bg.secondary};
|
||||
border: 1px solid ${props => props.theme.colors.primary};
|
||||
background: #262c49;
|
||||
border: 1px solid rgba(115, 103, 240);
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
color: #c2c6dc;
|
||||
@ -93,7 +93,7 @@ const HeaderButton = styled.button`
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgba(115, 103, 240);
|
||||
color: #fff;
|
||||
}
|
||||
`;
|
||||
@ -110,12 +110,12 @@ const HeaderActions = styled.div`
|
||||
`;
|
||||
|
||||
const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
|
||||
const now = dayjs();
|
||||
const now = moment();
|
||||
const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
|
||||
const [startDate, setStartDate] = useState(new Date());
|
||||
|
||||
useEffect(() => {
|
||||
const newDate = dayjs(startDate).format('YYYY-MM-DD');
|
||||
const newDate = moment(startDate).format('YYYY-MM-DD');
|
||||
setValue('endDate', newDate);
|
||||
}, [startDate]);
|
||||
|
||||
@ -135,7 +135,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
||||
'December',
|
||||
];
|
||||
const saveDueDate = (data: any) => {
|
||||
const newDate = dayjs(`${data.endDate} ${dayjs(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
|
||||
const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
|
||||
if (newDate.isValid()) {
|
||||
onDueDateChange(task, newDate.toDate());
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import styled, { keyframes } from 'styled-components/macro';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
import theme from '../../../App/ThemeStyles';
|
||||
|
||||
export const BoardContainer = styled.div`
|
||||
position: relative;
|
||||
@ -35,9 +34,9 @@ export const Container = styled.div`
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
export const defaultBaseColor = theme.colors.bg.primary;
|
||||
export const defaultBaseColor = '#10163a';
|
||||
|
||||
export const defaultHighlightColor = mixin.lighten(theme.colors.bg.primary, 0.25);
|
||||
export const defaultHighlightColor = mixin.lighten('#10163a', 0.25);
|
||||
|
||||
export const skeletonKeyframes = keyframes`
|
||||
0% {
|
||||
|
||||
@ -19,7 +19,7 @@ export default {
|
||||
};
|
||||
|
||||
const Wrapper = styled.div`
|
||||
background: ${props => props.theme.colors.bg.primary};
|
||||
background: rgba(${props => props.theme.colors.bg.primary});
|
||||
padding: 45px;
|
||||
margin: 25px;
|
||||
display: flex;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import theme from '../../../App/ThemeStyles';
|
||||
|
||||
const InputWrapper = styled.div<{ width: string }>`
|
||||
position: relative;
|
||||
@ -54,18 +53,18 @@ const InputInput = styled.input<{
|
||||
transition: all 0.3s ease;
|
||||
&:focus {
|
||||
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid ${props => props.theme.colors.primary};
|
||||
border: 1px solid rgba(115, 103, 240);
|
||||
background: ${props => props.focusBg};
|
||||
}
|
||||
&:focus ~ ${InputLabel} {
|
||||
color: ${props => props.theme.colors.primary};
|
||||
color: rgba(115, 103, 240);
|
||||
transform: translate(-3px, -90%);
|
||||
}
|
||||
${props =>
|
||||
props.hasValue &&
|
||||
css`
|
||||
& ~ ${InputLabel} {
|
||||
color: ${props.theme.colors.primary};
|
||||
color: rgba(115, 103, 240);
|
||||
transform: translate(-3px, -90%);
|
||||
}
|
||||
`}
|
||||
@ -79,7 +78,6 @@ const Icon = styled.div`
|
||||
|
||||
type InputProps = {
|
||||
variant?: 'normal' | 'alternate';
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
width?: string;
|
||||
floatingLabel?: boolean;
|
||||
@ -118,7 +116,6 @@ function useCombinedRefs(...refs: any) {
|
||||
const Input = React.forwardRef(
|
||||
(
|
||||
{
|
||||
disabled = false,
|
||||
width = 'auto',
|
||||
variant = 'normal',
|
||||
type = 'text',
|
||||
@ -139,8 +136,8 @@ const Input = React.forwardRef(
|
||||
$ref: any,
|
||||
) => {
|
||||
const [hasValue, setHasValue] = useState(defaultValue !== '');
|
||||
const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
|
||||
const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
|
||||
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
|
||||
const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
|
||||
|
||||
// Merge forwarded ref and internal ref in order to be able to access the ref in the useEffect
|
||||
// The forwarded ref is not accessible by itself, which is what the innerRef & combined ref is for
|
||||
@ -163,7 +160,6 @@ const Input = React.forwardRef(
|
||||
onChange={e => {
|
||||
setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
|
||||
}}
|
||||
disabled={disabled}
|
||||
hasValue={hasValue}
|
||||
ref={combinedRef}
|
||||
id={id}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
import TextareaAutosize from 'react-autosize-textarea';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
export const Container = styled.div`
|
||||
width: 272px;
|
||||
@ -33,7 +34,7 @@ export const AddCardButton = styled.a`
|
||||
&:hover {
|
||||
color: #c2c6dc;
|
||||
text-decoration: none;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
export const Wrapper = styled.div`
|
||||
@ -72,6 +73,7 @@ export const HeaderName = styled(TextareaAutosize)`
|
||||
box-shadow: none;
|
||||
font-weight: 600;
|
||||
margin: -4px 0;
|
||||
padding: 4px 8px;
|
||||
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
@ -95,7 +97,7 @@ export const Header = styled.div<{ isEditing: boolean }>`
|
||||
props.isEditing &&
|
||||
css`
|
||||
& ${HeaderName} {
|
||||
box-shadow: ${props.theme.colors.primary} 0px 0px 0px 1px;
|
||||
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
@ -21,7 +21,7 @@ export const ListActionItem = styled.span`
|
||||
margin: 0 -12px;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import theme from 'App/ThemeStyles';
|
||||
import Lists from '.';
|
||||
|
||||
export default {
|
||||
@ -8,7 +7,7 @@ export default {
|
||||
title: 'Lists',
|
||||
parameters: {
|
||||
backgrounds: [
|
||||
{ name: 'gray', value: theme.colors.bg.secondary, default: true },
|
||||
{ name: 'gray', value: '#262c49', default: true },
|
||||
{ name: 'white', value: '#ffffff' },
|
||||
],
|
||||
},
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
getNewDraggablePosition,
|
||||
getAfterDropDraggableList,
|
||||
} from 'shared/utils/draggables';
|
||||
import dayjs from 'dayjs';
|
||||
import moment from 'moment';
|
||||
import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
|
||||
|
||||
import { Container, BoardContainer, BoardWrapper } from './Styles';
|
||||
@ -51,7 +51,7 @@ export type TaskStatusFilter = {
|
||||
|
||||
export interface TaskMetaFilterName {
|
||||
meta: TaskMeta;
|
||||
value?: string | dayjs.Dayjs | null;
|
||||
value?: string | moment.Moment | null;
|
||||
id?: string | null;
|
||||
}
|
||||
|
||||
@ -104,30 +104,30 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
|
||||
return true;
|
||||
}
|
||||
if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
|
||||
const completedAt = dayjs(task.completedAt);
|
||||
const REFERENCE = dayjs();
|
||||
const completedAt = moment(task.completedAt);
|
||||
const REFERENCE = moment(); // fixed just for testing, use moment();
|
||||
switch (filter.since) {
|
||||
case TaskSince.TODAY:
|
||||
const TODAY = REFERENCE.clone().startOf('day');
|
||||
return completedAt.isSame(TODAY, 'd');
|
||||
case TaskSince.YESTERDAY:
|
||||
const YESTERDAY = REFERENCE.clone()
|
||||
.subtract(1, 'day')
|
||||
.subtract(1, 'days')
|
||||
.startOf('day');
|
||||
return completedAt.isSameOrAfter(YESTERDAY, 'd');
|
||||
case TaskSince.ONE_WEEK:
|
||||
const ONE_WEEK = REFERENCE.clone()
|
||||
.subtract(7, 'day')
|
||||
.subtract(7, 'days')
|
||||
.startOf('day');
|
||||
return completedAt.isSameOrAfter(ONE_WEEK, 'd');
|
||||
case TaskSince.TWO_WEEKS:
|
||||
const TWO_WEEKS = REFERENCE.clone()
|
||||
.subtract(14, 'day')
|
||||
.subtract(14, 'days')
|
||||
.startOf('day');
|
||||
return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
|
||||
case TaskSince.THREE_WEEKS:
|
||||
const THREE_WEEKS = REFERENCE.clone()
|
||||
.subtract(21, 'day')
|
||||
.subtract(21, 'days')
|
||||
.startOf('day');
|
||||
return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
|
||||
default:
|
||||
@ -353,7 +353,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
|
||||
task.dueDate
|
||||
? {
|
||||
isPastDue: false,
|
||||
formattedDate: dayjs(task.dueDate).format('MMM D, YYYY'),
|
||||
formattedDate: moment(task.dueDate).format('MMM D, YYYY'),
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
|
||||
import dayjs from 'dayjs';
|
||||
import moment from 'moment';
|
||||
|
||||
enum ShouldFilter {
|
||||
NO_FILTER,
|
||||
@ -24,8 +24,8 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
|
||||
isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
|
||||
}
|
||||
if (task.dueDate) {
|
||||
const taskDueDate = dayjs(task.dueDate);
|
||||
const today = dayjs();
|
||||
const taskDueDate = moment(task.dueDate);
|
||||
const today = moment();
|
||||
let start;
|
||||
let end;
|
||||
switch (filters.dueDate.type) {
|
||||
@ -40,7 +40,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
|
||||
taskDueDate.isBefore(
|
||||
today
|
||||
.clone()
|
||||
.add(1, 'day')
|
||||
.add(1, 'days')
|
||||
.endOf('day'),
|
||||
),
|
||||
);
|
||||
@ -60,12 +60,12 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
|
||||
start = today
|
||||
.clone()
|
||||
.weekday(0)
|
||||
.add(7, 'day')
|
||||
.add(7, 'days')
|
||||
.startOf('day');
|
||||
end = today
|
||||
.clone()
|
||||
.weekday(6)
|
||||
.add(7, 'day')
|
||||
.add(7, 'days')
|
||||
.endOf('day');
|
||||
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
|
||||
break;
|
||||
@ -73,7 +73,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
|
||||
start = today.clone().startOf('day');
|
||||
end = today
|
||||
.clone()
|
||||
.add(7, 'day')
|
||||
.add(7, 'days')
|
||||
.endOf('day');
|
||||
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
|
||||
break;
|
||||
@ -81,7 +81,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
|
||||
start = today.clone().startOf('day');
|
||||
end = today
|
||||
.clone()
|
||||
.add(14, 'day')
|
||||
.add(14, 'days')
|
||||
.endOf('day');
|
||||
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
|
||||
break;
|
||||
@ -89,7 +89,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
|
||||
start = today.clone().startOf('day');
|
||||
end = today
|
||||
.clone()
|
||||
.add(21, 'day')
|
||||
.add(21, 'days')
|
||||
.endOf('day');
|
||||
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
|
||||
break;
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import NormalizeStyles from 'App/NormalizeStyles';
|
||||
import BaseStyles from 'App/BaseStyles';
|
||||
import LoadingSpinner from '.';
|
||||
|
||||
export default {
|
||||
component: LoadingSpinner,
|
||||
title: 'Login',
|
||||
parameters: {
|
||||
backgrounds: [
|
||||
{ name: 'white', value: '#ffffff' },
|
||||
{ name: 'gray', value: '#cdd3e1', default: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
export const Default = () => {
|
||||
return (
|
||||
<>
|
||||
<NormalizeStyles />
|
||||
<BaseStyles />
|
||||
<LoadingSpinner />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,42 +0,0 @@
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
|
||||
const LoadingSpinnerKeyframes = keyframes`
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
`;
|
||||
|
||||
export const LoadingSpinnerWrapper = styled.div<{ color: string; size: string; borderSize: string; thickness: string }>`
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: ${props => props.borderSize};
|
||||
height: ${props => props.borderSize};
|
||||
|
||||
& > div {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: ${props => props.size};
|
||||
height: ${props => props.size};
|
||||
margin: ${props => props.thickness};
|
||||
border: ${props => props.thickness} solid ${props => props.theme.colors[props.color]};
|
||||
border-radius: 50%;
|
||||
animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
border-color: ${props => props.theme.colors[props.color]} transparent transparent transparent;
|
||||
}
|
||||
|
||||
& > div:nth-child(1) {
|
||||
animation-delay: -0.45s;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
animation-delay: -0.15s;
|
||||
}
|
||||
`;
|
||||
|
||||
export default LoadingSpinnerWrapper;
|
||||
@ -1,41 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { LoadingSpinnerWrapper } from './Styles';
|
||||
|
||||
type LoadingSpinnerProps = {
|
||||
color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
|
||||
size?: string;
|
||||
borderSize?: string;
|
||||
thickness?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* The default parameters may not be applicable to every scenario
|
||||
*
|
||||
* While borderSize and size should be a single prop,
|
||||
* it is currently not as such because it would require math to be done to strings
|
||||
* e.g "80px - 16"
|
||||
*
|
||||
*
|
||||
* @param color
|
||||
* @param size The size of the spinner. It is recommended to be at least 16 px less than the borderSize
|
||||
* @param thickness
|
||||
* @param borderSize Border size affects the size of the border which if is too small may break the spinner.
|
||||
* @constructor
|
||||
*/
|
||||
const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
||||
color = 'primary',
|
||||
size = '64px',
|
||||
thickness = '8px',
|
||||
borderSize = '80px',
|
||||
}) => {
|
||||
return (
|
||||
<LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</LoadingSpinnerWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoadingSpinner;
|
||||
@ -1,6 +1,5 @@
|
||||
import styled from 'styled-components';
|
||||
import Button from 'shared/components/Button';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
background: #eff2f7;
|
||||
@ -69,7 +68,7 @@ export const FormIcon = styled.div`
|
||||
|
||||
export const FormError = styled.span`
|
||||
font-size: 0.875rem;
|
||||
color: ${props => props.theme.colors.danger};
|
||||
color: rgb(234, 84, 85);
|
||||
`;
|
||||
|
||||
export const LoginButton = styled(Button)``;
|
||||
@ -100,5 +99,5 @@ export const LogoWrapper = styled.div`
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 24px;
|
||||
color: rgb(222, 235, 255);
|
||||
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
|
||||
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
|
||||
`;
|
||||
|
||||
@ -3,7 +3,6 @@ import AccessAccount from 'shared/undraw/AccessAccount';
|
||||
import { User, Lock, Taskcafe } from 'shared/icons';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import LoadingSpinner from 'shared/components/LoadingSpinner';
|
||||
import {
|
||||
Form,
|
||||
LogoWrapper,
|
||||
@ -74,7 +73,6 @@ const Login = ({ onSubmit }: LoginProps) => {
|
||||
|
||||
<ActionButtons>
|
||||
<RegisterButton variant="outline">Register</RegisterButton>
|
||||
{!isComplete && <LoadingSpinner size="32px" thickness="2px" borderSize="48px" />}
|
||||
<LoginButton type="submit" disabled={!isComplete}>
|
||||
Login
|
||||
</LoginButton>
|
||||
|
||||
@ -20,14 +20,14 @@ export const MemberManagerSearch = styled(TextareaAutosize)`
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
background: ${props => props.theme.colors.bg.secondary};
|
||||
background: #262c49;
|
||||
outline: none;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
border-color: ${props => props.theme.colors.border};
|
||||
color: #c2c6dc;
|
||||
border-color: #414561;
|
||||
|
||||
&:focus {
|
||||
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
|
||||
background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
|
||||
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
|
||||
background: ${mixin.darken('#262c49', 0.15)};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -66,8 +66,8 @@ export const BoardMemberListItemContent = styled(Member)`
|
||||
color: #c2c6dc;
|
||||
|
||||
&:hover {
|
||||
background-color: ${props => props.theme.colors.primary};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
background-color: rgba(${props => props.theme.colors.primary});
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
`;
|
||||
|
||||
@ -80,7 +80,7 @@ export const ProfileIcon = styled.div`
|
||||
justify-content: center;
|
||||
color: #c2c6dc;
|
||||
font-weight: 700;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
`;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
import Button from 'shared/components/Button';
|
||||
import { Checkmark } from 'shared/icons';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
export const RoleCheckmark = styled(Checkmark)`
|
||||
padding-left: 4px;
|
||||
@ -81,36 +80,36 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
|
||||
? css`
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
color: rgba(${props.theme.colors.text.primary}, 0.4);
|
||||
`
|
||||
: css`
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: ${props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export const CurrentPermission = styled.span`
|
||||
margin-left: 4px;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
|
||||
color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
|
||||
`;
|
||||
|
||||
export const Separator = styled.div`
|
||||
height: 1px;
|
||||
border-top: 1px solid ${props => props.theme.colors.alternate};
|
||||
border-top: 1px solid #414561;
|
||||
margin: 0.25rem !important;
|
||||
`;
|
||||
|
||||
export const WarningText = styled.span`
|
||||
display: flex;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||||
padding: 6px;
|
||||
`;
|
||||
|
||||
export const DeleteDescription = styled.div`
|
||||
font-size: 14px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
export const RemoveMemberButton = styled(Button)`
|
||||
|
||||
@ -47,7 +47,6 @@ const permissions = [
|
||||
type MiniProfileProps = {
|
||||
bio: string;
|
||||
user: TaskUser;
|
||||
invited?: boolean;
|
||||
onRemoveFromTask?: () => void;
|
||||
onChangeRole?: (roleCode: RoleCode) => void;
|
||||
onRemoveFromBoard?: () => void;
|
||||
@ -57,7 +56,6 @@ type MiniProfileProps = {
|
||||
const MiniProfile: React.FC<MiniProfileProps> = ({
|
||||
user,
|
||||
bio,
|
||||
invited,
|
||||
canChangeRole,
|
||||
onRemoveFromTask,
|
||||
onChangeRole,
|
||||
@ -76,7 +74,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
|
||||
)}
|
||||
<ProfileInfo>
|
||||
<InfoTitle>{user.fullName}</InfoTitle>
|
||||
{invited ? <InfoUsername>Invited</InfoUsername> : <InfoUsername>{`@${user.username}`}</InfoUsername>}
|
||||
<InfoUsername>{`@${user.username}`}</InfoUsername>
|
||||
<InfoBio>{bio}</InfoBio>
|
||||
</ProfileInfo>
|
||||
</Profile>
|
||||
|
||||
@ -30,9 +30,9 @@ const CloseIcon = styled(Cross)`
|
||||
top: 16px;
|
||||
right: -32px;
|
||||
cursor: pointer;
|
||||
fill: ${props => props.theme.colors.text.primary};
|
||||
fill: rgba(${props => props.theme.colors.text.primary});
|
||||
&:hover {
|
||||
fill: ${props => props.theme.colors.text.secondary};
|
||||
fill: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
export const Logo = styled.div``;
|
||||
|
||||
@ -10,7 +9,7 @@ export const LogoTitle = styled.div`
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
transition: visibility, opacity, transform 0.25s ease;
|
||||
color: #22ff00;
|
||||
color: #7367f0;
|
||||
`;
|
||||
export const ActionContainer = styled.div`
|
||||
position: relative;
|
||||
@ -47,8 +46,8 @@ export const ActionButtonWrapper = styled.div<{ active?: boolean }>`
|
||||
${props =>
|
||||
props.active &&
|
||||
css`
|
||||
background: ${props.theme.colors.primary};
|
||||
box-shadow: 0 0 10px 1px ${mixin.rgba(props.theme.colors.primary, 0.7)};
|
||||
background: rgb(115, 103, 240);
|
||||
box-shadow: 0 0 10px 1px rgba(115, 103, 240, 0.7);
|
||||
`}
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
@ -74,7 +73,7 @@ export const LogoWrapper = styled.div`
|
||||
color: rgb(222, 235, 255);
|
||||
cursor: pointer;
|
||||
transition: color 0.1s ease 0s, border 0.1s ease 0s;
|
||||
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
|
||||
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
|
||||
`;
|
||||
|
||||
export const Container = styled.aside`
|
||||
@ -88,12 +87,12 @@ export const Container = styled.aside`
|
||||
transform: translateZ(0px);
|
||||
background: #10163a;
|
||||
transition: all 0.1s ease 0s;
|
||||
border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
|
||||
border-right: 1px solid rgba(65, 69, 97, 0.65);
|
||||
|
||||
&:hover {
|
||||
width: 260px;
|
||||
box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 50px 0px;
|
||||
border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
|
||||
border-right: 1px solid rgba(65, 69, 97, 0);
|
||||
}
|
||||
&:hover ${LogoTitle} {
|
||||
bottom: -12px;
|
||||
@ -107,6 +106,6 @@ export const Container = styled.aside`
|
||||
}
|
||||
|
||||
&:hover ${LogoWrapper} {
|
||||
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
|
||||
border-bottom: 1px solid rgba(65, 69, 97, 0);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -3,17 +3,16 @@ import styled from 'styled-components';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
import Select from 'react-select';
|
||||
import { ArrowLeft, Cross } from 'shared/icons';
|
||||
import theme from '../../../App/ThemeStyles';
|
||||
|
||||
function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
|
||||
if (isDisabled) {
|
||||
return null;
|
||||
}
|
||||
if (isSelected) {
|
||||
return mixin.darken(theme.colors.bg.secondary, 0.25);
|
||||
return mixin.darken('#262c49', 0.25);
|
||||
}
|
||||
if (isFocused) {
|
||||
return mixin.darken(theme.colors.bg.secondary, 0.15);
|
||||
return mixin.darken('#262c49', 0.15);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@ -98,8 +97,8 @@ const ProjectName = styled.input`
|
||||
font-weight: 400;
|
||||
|
||||
&:focus {
|
||||
background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
|
||||
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
|
||||
background: ${mixin.darken('#262c49', 0.15)};
|
||||
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
|
||||
}
|
||||
`;
|
||||
const ProjectNameLabel = styled.label`
|
||||
@ -127,35 +126,35 @@ const colourStyles = {
|
||||
control: (styles: any, data: any) => {
|
||||
return {
|
||||
...styles,
|
||||
backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
|
||||
boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
|
||||
backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
|
||||
boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
|
||||
borderRadius: '3px',
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderImage: 'initial',
|
||||
borderColor: theme.colors.alternate,
|
||||
borderColor: '#414561',
|
||||
':hover': {
|
||||
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
|
||||
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
|
||||
borderRadius: '3px',
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderImage: 'initial',
|
||||
borderColor: theme.colors.alternate,
|
||||
borderColor: '#414561',
|
||||
},
|
||||
':active': {
|
||||
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
|
||||
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
|
||||
borderRadius: '3px',
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderImage: 'initial',
|
||||
borderColor: `${theme.colors.primary}`,
|
||||
borderColor: 'rgb(115, 103, 240)',
|
||||
},
|
||||
};
|
||||
},
|
||||
menu: (styles: any) => {
|
||||
return {
|
||||
...styles,
|
||||
backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
|
||||
backgroundColor: mixin.darken('#262c49', 0.15),
|
||||
};
|
||||
},
|
||||
dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
|
||||
@ -168,11 +167,11 @@ const colourStyles = {
|
||||
cursor: isDisabled ? 'not-allowed' : 'default',
|
||||
':active': {
|
||||
...styles[':active'],
|
||||
backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
|
||||
backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
|
||||
},
|
||||
':hover': {
|
||||
...styles[':hover'],
|
||||
backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
|
||||
backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
|
||||
},
|
||||
};
|
||||
},
|
||||
@ -210,21 +209,21 @@ const CreateButton = styled.button`
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
border-color: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
border-color: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
type NewProjectProps = {
|
||||
initialTeamID: string | null;
|
||||
teams: Array<Team>;
|
||||
onClose: () => void;
|
||||
onCreateProject: (projectName: string, teamID: string | null) => void;
|
||||
onCreateProject: (projectName: string, teamID: string) => void;
|
||||
};
|
||||
|
||||
const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose, onCreateProject }) => {
|
||||
const [projectName, setProjectName] = useState('');
|
||||
const [team, setTeam] = useState<null | string>(initialTeamID);
|
||||
const options = [{ label: 'No team', value: 'no-team' }, ...teams.map(t => ({ label: t.name, value: t.id }))];
|
||||
const options = teams.map(t => ({ label: t.name, value: t.id }));
|
||||
return (
|
||||
<Overlay>
|
||||
<Content>
|
||||
@ -263,7 +262,7 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
|
||||
onChange={(e: any) => {
|
||||
setTeam(e.value);
|
||||
}}
|
||||
value={options.find(d => d.value === team)}
|
||||
value={options.filter(d => d.value === team)}
|
||||
styles={colourStyles}
|
||||
classNamePrefix="teamSelect"
|
||||
options={options}
|
||||
@ -272,8 +271,8 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
|
||||
</ProjectInfo>
|
||||
<CreateButton
|
||||
onClick={() => {
|
||||
if (projectName !== '') {
|
||||
onCreateProject(projectName, team === 'no-team' ? null : team);
|
||||
if (team && projectName !== '') {
|
||||
onCreateProject(projectName, team);
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
@ -37,7 +37,7 @@ const ItemTextContainer = styled.div`
|
||||
const ItemTextTitle = styled.span`
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
color: ${props => props.theme.colors.primary};
|
||||
color: rgba(${props => props.theme.colors.primary});
|
||||
font-size: 14px;
|
||||
`;
|
||||
const ItemTextDesc = styled.span`
|
||||
@ -76,21 +76,21 @@ const NotificationHeader = styled.div`
|
||||
text-align: center;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgba(${props => props.theme.colors.primary});
|
||||
`;
|
||||
|
||||
const NotificationHeaderTitle = styled.span`
|
||||
font-size: 14px;
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
`;
|
||||
|
||||
const NotificationFooter = styled.div`
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
color: ${props => props.theme.colors.primary};
|
||||
color: rgba(${props => props.theme.colors.primary});
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.bg.primary};
|
||||
background: #10163a;
|
||||
}
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
|
||||
@ -4,7 +4,7 @@ import styled from 'styled-components';
|
||||
import { SaveButton, DeleteButton, LabelBox, EditLabelForm, FieldLabel, FieldName } from './Styles';
|
||||
|
||||
const WhiteCheckmark = styled(Checkmark)`
|
||||
fill: ${props => props.theme.colors.text.secondary};
|
||||
fill: rgba(${props => props.theme.colors.text.secondary});
|
||||
`;
|
||||
type Props = {
|
||||
labelColors: Array<LabelColor>;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
import ControlledInput from 'shared/components/ControlledInput';
|
||||
import theme from 'App/ThemeStyles';
|
||||
|
||||
export const Container = styled.div<{
|
||||
invertY: boolean;
|
||||
@ -177,7 +176,7 @@ export const LabelIcon = styled.div`
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -234,8 +233,8 @@ export const FieldName = styled.input`
|
||||
font-weight: 400;
|
||||
|
||||
&:focus {
|
||||
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
|
||||
background: ${mixin.darken(theme.colors.bg.secondary, 0.15)};
|
||||
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
|
||||
background: ${mixin.darken('#262c49', 0.15)};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -259,7 +258,7 @@ export const LabelBox = styled.span<{ color: string }>`
|
||||
`;
|
||||
|
||||
export const SaveButton = styled.input`
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
@ -297,7 +296,7 @@ export const DeleteButton = styled.input`
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
border-color: transparent;
|
||||
}
|
||||
`;
|
||||
@ -318,7 +317,7 @@ export const CreateLabelButton = styled.button`
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@ import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
||||
import { createPortal } from 'react-dom';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import produce from 'immer';
|
||||
import theme from 'App/ThemeStyles';
|
||||
import {
|
||||
Container,
|
||||
ContainerDiamond,
|
||||
@ -19,7 +18,7 @@ import {
|
||||
function getPopupOptions(options?: PopupOptions) {
|
||||
const popupOptions = {
|
||||
borders: true,
|
||||
diamondColor: theme.colors.bg.secondary,
|
||||
diamondColor: '#262c49',
|
||||
targetPadding: '10px',
|
||||
showDiamond: true,
|
||||
width: 316,
|
||||
|
||||
@ -24,7 +24,7 @@ export const ListActionItem = styled.span`
|
||||
margin: 0 -12px;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import styled, { keyframes, css } from 'styled-components';
|
||||
import TextareaAutosize from 'react-autosize-textarea';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
export const Wrapper = styled.div<{ open: boolean }>`
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
@ -28,7 +30,7 @@ export const Container = styled.div<{ fixed: boolean; width: number; top: number
|
||||
|
||||
export const SaveButton = styled.button`
|
||||
cursor: pointer;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import styled from 'styled-components';
|
||||
import Button from 'shared/components/Button';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
background: #eff2f7;
|
||||
@ -69,7 +68,7 @@ export const FormIcon = styled.div`
|
||||
|
||||
export const FormError = styled.span`
|
||||
font-size: 0.875rem;
|
||||
color: ${props => props.theme.colors.danger};
|
||||
color: rgb(234, 84, 85);
|
||||
`;
|
||||
|
||||
export const LoginButton = styled(Button)``;
|
||||
@ -100,5 +99,5 @@ export const LogoWrapper = styled.div`
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 24px;
|
||||
color: rgb(222, 235, 255);
|
||||
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
|
||||
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
|
||||
`;
|
||||
|
||||
@ -24,7 +24,7 @@ import {
|
||||
const EMAIL_PATTERN = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
|
||||
const INITIALS_PATTERN = /[a-zA-Z]{2,3}/i;
|
||||
|
||||
const Register = ({ onSubmit, registered = false }: RegisterProps) => {
|
||||
const Register = ({ onSubmit }: RegisterProps) => {
|
||||
const [isComplete, setComplete] = useState(true);
|
||||
const { register, handleSubmit, errors, setError } = useForm<RegisterFormData>();
|
||||
const loginSubmit = (data: RegisterFormData) => {
|
||||
@ -43,112 +43,103 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
|
||||
<Taskcafe width={42} height={42} />
|
||||
<LogoTitle>Taskcafé</LogoTitle>
|
||||
</LogoWrapper>
|
||||
{registered ? (
|
||||
<>
|
||||
<Title>Thanks for registering</Title>
|
||||
<SubTitle>Please check your inbox for a confirmation email.</SubTitle>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Title>Register</Title>
|
||||
<SubTitle>Please create your user</SubTitle>
|
||||
<Form onSubmit={handleSubmit(loginSubmit)}>
|
||||
<FormLabel htmlFor="fullname">
|
||||
Full name
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="fullname"
|
||||
name="fullname"
|
||||
ref={register({ required: 'Full name is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||
<FormLabel htmlFor="username">
|
||||
Username
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
ref={register({ required: 'Username is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||
<FormLabel htmlFor="email">
|
||||
Email
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
ref={register({
|
||||
required: 'Email is required',
|
||||
pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
|
||||
})}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.email && <FormError>{errors.email.message}</FormError>}
|
||||
<FormLabel htmlFor="initials">
|
||||
Initials
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="initials"
|
||||
name="initials"
|
||||
ref={register({
|
||||
required: 'Initials is required',
|
||||
pattern: {
|
||||
value: INITIALS_PATTERN,
|
||||
message: 'Initials must be between 2 to 3 characters.',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.initials && <FormError>{errors.initials.message}</FormError>}
|
||||
<FormLabel htmlFor="password">
|
||||
Password
|
||||
<FormTextInput
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
ref={register({ required: 'Password is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<Lock width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.password && <FormError>{errors.password.message}</FormError>}
|
||||
<FormLabel htmlFor="password_confirm">
|
||||
Password (Confirm)
|
||||
<FormTextInput
|
||||
type="password"
|
||||
id="password_confirm"
|
||||
name="password_confirm"
|
||||
ref={register({ required: 'Password (confirm) is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<Lock width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
|
||||
<Title>Register</Title>
|
||||
<SubTitle>Please create the system admin user</SubTitle>
|
||||
<Form onSubmit={handleSubmit(loginSubmit)}>
|
||||
<FormLabel htmlFor="fullname">
|
||||
Full name
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="fullname"
|
||||
name="fullname"
|
||||
ref={register({ required: 'Full name is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||
<FormLabel htmlFor="username">
|
||||
Username
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
ref={register({ required: 'Username is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||
<FormLabel htmlFor="email">
|
||||
Email
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
ref={register({
|
||||
required: 'Email is required',
|
||||
pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
|
||||
})}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.email && <FormError>{errors.email.message}</FormError>}
|
||||
<FormLabel htmlFor="initials">
|
||||
Initials
|
||||
<FormTextInput
|
||||
type="text"
|
||||
id="initials"
|
||||
name="initials"
|
||||
ref={register({
|
||||
required: 'Initials is required',
|
||||
pattern: {
|
||||
value: INITIALS_PATTERN,
|
||||
message: 'Initials must be between 2 to 3 characters.',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<FormIcon>
|
||||
<User width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.initials && <FormError>{errors.initials.message}</FormError>}
|
||||
<FormLabel htmlFor="password">
|
||||
Password
|
||||
<FormTextInput
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
ref={register({ required: 'Password is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<Lock width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.password && <FormError>{errors.password.message}</FormError>}
|
||||
<FormLabel htmlFor="password_confirm">
|
||||
Password (Confirm)
|
||||
<FormTextInput
|
||||
type="password"
|
||||
id="password_confirm"
|
||||
name="password_confirm"
|
||||
ref={register({ required: 'Password (confirm) is required' })}
|
||||
/>
|
||||
<FormIcon>
|
||||
<Lock width={20} height={20} />
|
||||
</FormIcon>
|
||||
</FormLabel>
|
||||
{errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
|
||||
|
||||
<ActionButtons>
|
||||
<RegisterButton type="submit" disabled={!isComplete}>
|
||||
Register
|
||||
</RegisterButton>
|
||||
</ActionButtons>
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
<ActionButtons>
|
||||
<RegisterButton type="submit" disabled={!isComplete}>
|
||||
Register
|
||||
</RegisterButton>
|
||||
</ActionButtons>
|
||||
</Form>
|
||||
</LoginFormContainer>
|
||||
</LoginFormWrapper>
|
||||
</Column>
|
||||
|
||||
@ -2,54 +2,53 @@ import React from 'react';
|
||||
import Select from 'react-select';
|
||||
import styled from 'styled-components';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
import theme from 'App/ThemeStyles';
|
||||
|
||||
function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
|
||||
if (isDisabled) {
|
||||
return null;
|
||||
}
|
||||
if (isSelected) {
|
||||
return mixin.darken(theme.colors.bg.secondary, 0.25);
|
||||
return mixin.darken('#262c49', 0.25);
|
||||
}
|
||||
if (isFocused) {
|
||||
return mixin.darken(theme.colors.bg.secondary, 0.15);
|
||||
return mixin.darken('#262c49', 0.15);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export const colourStyles = {
|
||||
const colourStyles = {
|
||||
control: (styles: any, data: any) => {
|
||||
return {
|
||||
...styles,
|
||||
backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
|
||||
boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
|
||||
backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
|
||||
boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
|
||||
borderRadius: '3px',
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderImage: 'initial',
|
||||
borderColor: theme.colors.alternate,
|
||||
borderColor: '#414561',
|
||||
':hover': {
|
||||
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
|
||||
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
|
||||
borderRadius: '3px',
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderImage: 'initial',
|
||||
borderColor: theme.colors.alternate,
|
||||
borderColor: '#414561',
|
||||
},
|
||||
':active': {
|
||||
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
|
||||
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
|
||||
borderRadius: '3px',
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderImage: 'initial',
|
||||
borderColor: `${theme.colors.primary}`,
|
||||
borderColor: 'rgb(115, 103, 240)',
|
||||
},
|
||||
};
|
||||
},
|
||||
menu: (styles: any) => {
|
||||
return {
|
||||
...styles,
|
||||
backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
|
||||
backgroundColor: mixin.darken('#262c49', 0.15),
|
||||
};
|
||||
},
|
||||
dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
|
||||
@ -62,11 +61,11 @@ export const colourStyles = {
|
||||
cursor: isDisabled ? 'not-allowed' : 'default',
|
||||
':active': {
|
||||
...styles[':active'],
|
||||
backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
|
||||
backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
|
||||
},
|
||||
':hover': {
|
||||
...styles[':hover'],
|
||||
backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
|
||||
backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
|
||||
},
|
||||
};
|
||||
},
|
||||
@ -87,7 +86,7 @@ export const colourStyles = {
|
||||
const InputLabel = styled.span<{ width: string }>`
|
||||
width: ${props => props.width};
|
||||
padding-left: 0.7rem;
|
||||
color: ${props => props.theme.colors.primary};
|
||||
color: rgba(115, 103, 240);
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@ -27,7 +27,6 @@ export const Default = () => {
|
||||
<BaseStyles />
|
||||
<Settings
|
||||
profile={profile}
|
||||
onChangeUserInfo={action('change user info')}
|
||||
onResetPassword={action('reset password')}
|
||||
onProfileAvatarRemove={action('remove')}
|
||||
onProfileAvatarChange={action('profile avatar change')}
|
||||
|
||||
@ -10,14 +10,9 @@ const PasswordInput = styled(Input)`
|
||||
margin-bottom: 0;
|
||||
`;
|
||||
|
||||
const UserInfoInput = styled(Input)`
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
`;
|
||||
|
||||
const FormError = styled.span`
|
||||
font-size: 12px;
|
||||
color: ${props => props.theme.colors.warning};
|
||||
color: rgba(${props => props.theme.colors.warning});
|
||||
`;
|
||||
|
||||
const ProfileContainer = styled.div`
|
||||
@ -152,12 +147,12 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
color: ${props => (props.active ? `${props.theme.colors.primary}` : '#c2c6dc')};
|
||||
color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
|
||||
&:hover {
|
||||
color: ${props => props.theme.colors.primary};
|
||||
color: rgba(115, 103, 240);
|
||||
}
|
||||
&:hover svg {
|
||||
fill: ${props => props.theme.colors.primary};
|
||||
fill: rgba(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -175,8 +170,8 @@ const TabNavLine = styled.span<{ top: number }>`
|
||||
transform: scaleX(1);
|
||||
top: ${props => props.top}px;
|
||||
|
||||
background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
|
||||
box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
|
||||
background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
|
||||
box-shadow: 0 0 8px 0 rgba(115, 103, 240);
|
||||
display: block;
|
||||
position: absolute;
|
||||
transition: all 0.2s ease;
|
||||
@ -245,7 +240,6 @@ const SaveButton = styled(Button)`
|
||||
type SettingsProps = {
|
||||
onProfileAvatarChange: () => void;
|
||||
onProfileAvatarRemove: () => void;
|
||||
onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
|
||||
onResetPassword: (password: string, done: () => void) => void;
|
||||
profile: TaskUser;
|
||||
};
|
||||
@ -306,93 +300,9 @@ const ResetPasswordTab: React.FC<ResetPasswordTabProps> = ({ onResetPassword })
|
||||
);
|
||||
};
|
||||
|
||||
type UserInfoData = {
|
||||
full_name: string;
|
||||
bio: string;
|
||||
initials: string;
|
||||
email: string;
|
||||
};
|
||||
type UserInfoTabProps = {
|
||||
profile: TaskUser;
|
||||
onProfileAvatarChange: () => void;
|
||||
onProfileAvatarRemove: () => void;
|
||||
onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
|
||||
};
|
||||
|
||||
const EMAIL_PATTERN = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
|
||||
const INITIALS_PATTERN = /^[a-zA-Z]{2,3}$/i;
|
||||
|
||||
const UserInfoTab: React.FC<UserInfoTabProps> = ({
|
||||
profile,
|
||||
onProfileAvatarRemove,
|
||||
onProfileAvatarChange,
|
||||
onChangeUserInfo,
|
||||
}) => {
|
||||
const [active, setActive] = useState(true);
|
||||
const { register, handleSubmit, errors } = useForm<UserInfoData>();
|
||||
const done = () => {
|
||||
setActive(true);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<AvatarSettings
|
||||
onProfileAvatarRemove={onProfileAvatarRemove}
|
||||
onProfileAvatarChange={onProfileAvatarChange}
|
||||
profile={profile.profileIcon}
|
||||
/>
|
||||
<form
|
||||
onSubmit={handleSubmit(data => {
|
||||
setActive(false);
|
||||
onChangeUserInfo(data, done);
|
||||
})}
|
||||
>
|
||||
<UserInfoInput
|
||||
ref={register({ required: 'Full name is required' })}
|
||||
name="full_name"
|
||||
defaultValue={profile.fullName}
|
||||
width="100%"
|
||||
label="Name"
|
||||
/>
|
||||
{errors.full_name && <FormError>{errors.full_name.message}</FormError>}
|
||||
<UserInfoInput
|
||||
defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
|
||||
ref={register({
|
||||
required: 'Initials is required',
|
||||
pattern: { value: INITIALS_PATTERN, message: 'Intials must be between two to four characters' },
|
||||
})}
|
||||
name="initials"
|
||||
width="100%"
|
||||
label="Initials "
|
||||
/>
|
||||
{errors.initials && <FormError>{errors.initials.message}</FormError>}
|
||||
<UserInfoInput disabled defaultValue={profile.username ?? ''} width="100%" label="Username " />
|
||||
<UserInfoInput
|
||||
width="100%"
|
||||
name="email"
|
||||
ref={register({
|
||||
required: 'Email is required',
|
||||
pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
|
||||
})}
|
||||
defaultValue={profile.email ?? ''}
|
||||
label="Email"
|
||||
/>
|
||||
{errors.email && <FormError>{errors.email.message}</FormError>}
|
||||
<UserInfoInput width="100%" name="bio" ref={register()} defaultValue={profile.bio ?? ''} label="Bio" />
|
||||
{errors.bio && <FormError>{errors.bio.message}</FormError>}
|
||||
<SettingActions>
|
||||
<SaveButton disabled={!active} type="submit">
|
||||
Save Change
|
||||
</SaveButton>
|
||||
</SettingActions>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Settings: React.FC<SettingsProps> = ({
|
||||
onProfileAvatarRemove,
|
||||
onProfileAvatarChange,
|
||||
onChangeUserInfo,
|
||||
onResetPassword,
|
||||
profile,
|
||||
}) => {
|
||||
@ -405,7 +315,6 @@ const Settings: React.FC<SettingsProps> = ({
|
||||
<TabNavContent>
|
||||
{items.map((item, idx) => (
|
||||
<NavItem
|
||||
key={item.name}
|
||||
onClick={(tab, top) => {
|
||||
if ($tabNav && $tabNav.current) {
|
||||
const pos = $tabNav.current.getBoundingClientRect();
|
||||
@ -423,12 +332,23 @@ const Settings: React.FC<SettingsProps> = ({
|
||||
</TabNav>
|
||||
<TabContentWrapper>
|
||||
<Tab tab={0} currentTab={currentTab}>
|
||||
<UserInfoTab
|
||||
onProfileAvatarChange={onProfileAvatarChange}
|
||||
<AvatarSettings
|
||||
onProfileAvatarRemove={onProfileAvatarRemove}
|
||||
profile={profile}
|
||||
onChangeUserInfo={onChangeUserInfo}
|
||||
onProfileAvatarChange={onProfileAvatarChange}
|
||||
profile={profile.profileIcon}
|
||||
/>
|
||||
<Input defaultValue={profile.fullName} width="100%" label="Name" />
|
||||
<Input
|
||||
defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
|
||||
width="100%"
|
||||
label="Initials "
|
||||
/>
|
||||
<Input defaultValue={profile.username ?? ''} width="100%" label="Username " />
|
||||
<Input width="100%" label="Email" />
|
||||
<Input width="100%" label="Bio" />
|
||||
<SettingActions>
|
||||
<SaveButton>Save Change</SaveButton>
|
||||
</SettingActions>
|
||||
</Tab>
|
||||
<Tab tab={1} currentTab={currentTab}>
|
||||
<ResetPasswordTab onResetPassword={onResetPassword} />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useRef } from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
import { DoubleChevronUp, Crown } from 'shared/icons';
|
||||
|
||||
export const AdminIcon = styled(DoubleChevronUp)`
|
||||
@ -24,78 +24,46 @@ const TaskDetailAssignee = styled.div`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
export const Wrapper = styled.div<{
|
||||
size: number | string;
|
||||
bgColor: string | null;
|
||||
backgroundURL: string | null;
|
||||
hasClick: boolean;
|
||||
}>`
|
||||
export const Wrapper = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
|
||||
width: ${props => props.size}px;
|
||||
height: ${props => props.size}px;
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${props => (props.backgroundURL ? props.theme.colors.text.primary : 'rgb(0,0,0)')};
|
||||
color: rgba(${props => (props.backgroundURL ? props.theme.colors.text.primary : '0,0,0')});
|
||||
background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
${props =>
|
||||
props.hasClick &&
|
||||
css`
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
`}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
`;
|
||||
|
||||
type TaskAssigneeProps = {
|
||||
size: number | string;
|
||||
showRoleIcons?: boolean;
|
||||
member: TaskUser;
|
||||
invited?: boolean;
|
||||
onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
|
||||
onMemberProfile: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const TaskAssignee: React.FC<TaskAssigneeProps> = ({
|
||||
showRoleIcons,
|
||||
member,
|
||||
invited,
|
||||
onMemberProfile,
|
||||
size,
|
||||
className,
|
||||
}) => {
|
||||
const TaskAssignee: React.FC<TaskAssigneeProps> = ({ showRoleIcons, member, onMemberProfile, size, className }) => {
|
||||
const $memberRef = useRef<HTMLDivElement>(null);
|
||||
let profileIcon: ProfileIcon = {
|
||||
url: null,
|
||||
bgColor: null,
|
||||
initials: null,
|
||||
};
|
||||
if (member.profileIcon) {
|
||||
profileIcon = member.profileIcon;
|
||||
}
|
||||
return (
|
||||
<TaskDetailAssignee
|
||||
className={className}
|
||||
ref={$memberRef}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
if (onMemberProfile) {
|
||||
onMemberProfile($memberRef, member.id);
|
||||
}
|
||||
onMemberProfile($memberRef, member.id);
|
||||
}}
|
||||
key={member.id}
|
||||
>
|
||||
<Wrapper
|
||||
hasClick={typeof onMemberProfile !== undefined}
|
||||
backgroundURL={profileIcon.url ?? null}
|
||||
bgColor={profileIcon.bgColor ?? null}
|
||||
size={size}
|
||||
>
|
||||
{(!profileIcon.url && profileIcon.initials) ?? ''}
|
||||
<Wrapper backgroundURL={member.profileIcon.url ?? null} bgColor={member.profileIcon.bgColor ?? null} size={size}>
|
||||
{(!member.profileIcon.url && member.profileIcon.initials) ?? ''}
|
||||
</Wrapper>
|
||||
{showRoleIcons && member.role && member.role.code === 'admin' && <AdminIcon width={10} height={10} />}
|
||||
{showRoleIcons && member.role && member.role.code === 'owner' && <OwnerIcon width={10} height={10} />}
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { TaskActivityData, ActivityType } from 'shared/generated/graphql';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
type ActivityMessageProps = {
|
||||
type: ActivityType;
|
||||
data: Array<TaskActivityData>;
|
||||
};
|
||||
|
||||
function getVariable(data: Array<TaskActivityData>, name: string) {
|
||||
const target = data.find(d => d.name === name);
|
||||
return target ? target.value : null;
|
||||
}
|
||||
|
||||
function renderDate(timestamp: string | null) {
|
||||
if (timestamp) {
|
||||
return dayjs(timestamp).format('MMM D [at] h:mm A');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const ActivityMessage: React.FC<ActivityMessageProps> = ({ type, data }) => {
|
||||
let message = '';
|
||||
switch (type) {
|
||||
case ActivityType.TaskAdded:
|
||||
message = `added this task to ${getVariable(data, 'TaskGroup')}`;
|
||||
break;
|
||||
case ActivityType.TaskMoved:
|
||||
message = `moved this task from ${getVariable(data, 'PrevTaskGroup')} to ${getVariable(data, 'CurTaskGroup')}`;
|
||||
break;
|
||||
case ActivityType.TaskDueDateAdded:
|
||||
message = `set this task to be due ${renderDate(getVariable(data, 'DueDate'))}`;
|
||||
break;
|
||||
case ActivityType.TaskDueDateRemoved:
|
||||
message = `removed the due date from this task`;
|
||||
break;
|
||||
case ActivityType.TaskDueDateChanged:
|
||||
message = `changed the due date of this task to ${renderDate(getVariable(data, 'CurDueDate'))}`;
|
||||
break;
|
||||
case ActivityType.TaskMarkedComplete:
|
||||
message = `marked this task complete`;
|
||||
break;
|
||||
case ActivityType.TaskMarkedIncomplete:
|
||||
message = `marked this task incomplete`;
|
||||
break;
|
||||
default:
|
||||
message = '<unknown type>';
|
||||
}
|
||||
return <>{message}</>;
|
||||
};
|
||||
|
||||
export default ActivityMessage;
|
||||
@ -1,133 +0,0 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import {
|
||||
CommentTextArea,
|
||||
CommentEditorContainer,
|
||||
CommentEditorActions,
|
||||
CommentEditorActionIcon,
|
||||
CommentEditorSaveButton,
|
||||
CommentProfile,
|
||||
CommentInnerWrapper,
|
||||
} from './Styles';
|
||||
import { usePopup } from 'shared/components/PopupMenu';
|
||||
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
||||
import { At, Paperclip, Smile } from 'shared/icons';
|
||||
import { Picker, Emoji } from 'emoji-mart';
|
||||
import Task from 'shared/icons/Task';
|
||||
|
||||
type CommentCreatorProps = {
|
||||
me?: TaskUser;
|
||||
autoFocus?: boolean;
|
||||
onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
|
||||
message?: string | null;
|
||||
onCreateComment: (message: string) => void;
|
||||
onCancelEdit?: () => void;
|
||||
};
|
||||
|
||||
const CommentCreator: React.FC<CommentCreatorProps> = ({
|
||||
me,
|
||||
message,
|
||||
onMemberProfile,
|
||||
onCreateComment,
|
||||
onCancelEdit,
|
||||
autoFocus = false,
|
||||
}) => {
|
||||
const $commentWrapper = useRef<HTMLDivElement>(null);
|
||||
const $comment = useRef<HTMLTextAreaElement>(null);
|
||||
const $emoji = useRef<HTMLDivElement>(null);
|
||||
const $emojiCart = useRef<HTMLDivElement>(null);
|
||||
const [comment, setComment] = useState(message ?? '');
|
||||
const [showCommentActions, setShowCommentActions] = useState(autoFocus);
|
||||
const { showPopup, hidePopup } = usePopup();
|
||||
useEffect(() => {
|
||||
if (autoFocus && $comment && $comment.current) {
|
||||
$comment.current.select();
|
||||
}
|
||||
}, []);
|
||||
useOnOutsideClick(
|
||||
[$commentWrapper, $emojiCart],
|
||||
showCommentActions,
|
||||
() => {
|
||||
if (onCancelEdit) {
|
||||
onCancelEdit();
|
||||
}
|
||||
setShowCommentActions(false);
|
||||
},
|
||||
null,
|
||||
);
|
||||
return (
|
||||
<CommentInnerWrapper ref={$commentWrapper}>
|
||||
{me && onMemberProfile && (
|
||||
<CommentProfile
|
||||
member={me}
|
||||
size={32}
|
||||
onMemberProfile={$target => {
|
||||
onMemberProfile($target, me.id);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<CommentEditorContainer>
|
||||
<CommentTextArea
|
||||
showCommentActions={showCommentActions}
|
||||
placeholder="Write a comment..."
|
||||
ref={$comment}
|
||||
value={comment}
|
||||
onChange={e => setComment(e.currentTarget.value)}
|
||||
onFocus={() => {
|
||||
setShowCommentActions(true);
|
||||
}}
|
||||
/>
|
||||
<CommentEditorActions visible={showCommentActions}>
|
||||
<CommentEditorActionIcon>
|
||||
<Paperclip width={12} height={12} />
|
||||
</CommentEditorActionIcon>
|
||||
<CommentEditorActionIcon>
|
||||
<At width={12} height={12} />
|
||||
</CommentEditorActionIcon>
|
||||
<CommentEditorActionIcon
|
||||
ref={$emoji}
|
||||
onClick={() => {
|
||||
showPopup(
|
||||
$emoji,
|
||||
<div ref={$emojiCart}>
|
||||
<Picker
|
||||
onClick={emoji => {
|
||||
console.log(emoji);
|
||||
if ($comment && $comment.current) {
|
||||
let textToInsert = `${emoji.colons} `;
|
||||
let cursorPosition = $comment.current.selectionStart;
|
||||
let textBeforeCursorPosition = $comment.current.value.substring(0, cursorPosition);
|
||||
let textAfterCursorPosition = $comment.current.value.substring(
|
||||
cursorPosition,
|
||||
$comment.current.value.length,
|
||||
);
|
||||
setComment(textBeforeCursorPosition + textToInsert + textAfterCursorPosition);
|
||||
}
|
||||
hidePopup();
|
||||
}}
|
||||
set="google"
|
||||
/>
|
||||
</div>,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Smile width={12} height={12} />
|
||||
</CommentEditorActionIcon>
|
||||
<CommentEditorActionIcon>
|
||||
<Task width={12} height={12} />
|
||||
</CommentEditorActionIcon>
|
||||
<CommentEditorSaveButton
|
||||
onClick={() => {
|
||||
setShowCommentActions(false);
|
||||
onCreateComment(comment);
|
||||
setComment('');
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</CommentEditorSaveButton>
|
||||
</CommentEditorActions>
|
||||
</CommentEditorContainer>
|
||||
</CommentInnerWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentCreator;
|
||||
@ -3,6 +3,8 @@ import TextareaAutosize from 'react-autosize-textarea';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
import Button from 'shared/components/Button';
|
||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||
import { User, Trash, Paperclip } from 'shared/icons';
|
||||
import Member from 'shared/components/Member';
|
||||
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
@ -31,35 +33,35 @@ export const MarkCompleteButton = styled.button<{ invert: boolean }>`
|
||||
${props =>
|
||||
props.invert
|
||||
? css`
|
||||
background: ${props.theme.colors.success};
|
||||
background: rgba(${props.theme.colors.success});
|
||||
& svg {
|
||||
fill: ${props.theme.colors.text.secondary};
|
||||
fill: rgba(${props.theme.colors.text.secondary});
|
||||
}
|
||||
& span {
|
||||
color: ${props.theme.colors.text.secondary};
|
||||
color: rgba(${props.theme.colors.text.secondary});
|
||||
}
|
||||
&:hover {
|
||||
background: ${mixin.rgba(props.theme.colors.success, 0.8)};
|
||||
background: rgba(${props.theme.colors.success}, 0.8);
|
||||
}
|
||||
`
|
||||
: css`
|
||||
background: none;
|
||||
border: 1px solid ${props.theme.colors.text.secondary};
|
||||
border: 1px solid rgba(${props.theme.colors.text.secondary});
|
||||
& svg {
|
||||
fill: ${props.theme.colors.text.secondary};
|
||||
fill: rgba(${props.theme.colors.text.secondary});
|
||||
}
|
||||
& span {
|
||||
color: ${props.theme.colors.text.secondary};
|
||||
color: rgba(${props.theme.colors.text.secondary});
|
||||
}
|
||||
&:hover {
|
||||
background: ${mixin.rgba(props.theme.colors.success, 0.08)};
|
||||
border: 1px solid ${props.theme.colors.success};
|
||||
background: rgba(${props.theme.colors.success}, 0.08);
|
||||
border: 1px solid rgba(${props.theme.colors.success});
|
||||
}
|
||||
&:hover svg {
|
||||
fill: ${props.theme.colors.success};
|
||||
fill: rgba(${props.theme.colors.success});
|
||||
}
|
||||
&:hover span {
|
||||
color: ${props.theme.colors.success};
|
||||
color: rgba(${props.theme.colors.success});
|
||||
}
|
||||
`}
|
||||
`;
|
||||
@ -83,7 +85,7 @@ export const SidebarTitle = styled.div`
|
||||
font-size: 12px;
|
||||
min-height: 24px;
|
||||
margin-left: 8px;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.75);
|
||||
padding-top: 4px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
@ -91,7 +93,7 @@ export const SidebarTitle = styled.div`
|
||||
|
||||
export const SidebarButton = styled.div`
|
||||
font-size: 14px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
min-height: 32px;
|
||||
width: 100%;
|
||||
|
||||
@ -166,7 +168,7 @@ export const TaskDetailsTitle = styled(TextareaAutosize)`
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: ${props => props.theme.colors.primary};
|
||||
border-color: rgba(${props => props.theme.colors.primary});
|
||||
}
|
||||
`;
|
||||
|
||||
@ -174,7 +176,7 @@ export const DueDateTitle = styled.div`
|
||||
font-size: 12px;
|
||||
min-height: 24px;
|
||||
margin-left: 8px;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.75);
|
||||
padding-top: 8px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
@ -185,7 +187,7 @@ export const AssignedUsersSection = styled.div`
|
||||
padding-right: 32px;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid ${props => props.theme.colors.alternate};
|
||||
border-bottom: 1px solid #414561;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
@ -203,10 +205,10 @@ export const AssignUserIcon = styled.div`
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
border: 1px solid ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
|
||||
border: 1px solid rgba(${props => props.theme.colors.text.secondary}, 0.75);
|
||||
}
|
||||
&:hover svg {
|
||||
fill: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
|
||||
fill: rgba(${props => props.theme.colors.text.secondary}, 0.75);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -221,17 +223,17 @@ export const AssignUsersButton = styled.div`
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
&:hover {
|
||||
border: 1px solid ${props => mixin.darken(props.theme.colors.alternate, 0.15)};
|
||||
border: 1px solid ${mixin.darken('#414561', 0.15)};
|
||||
}
|
||||
&:hover ${AssignUserIcon} {
|
||||
border: 1px solid ${props => props.theme.colors.alternate};
|
||||
border: 1px solid #414561;
|
||||
}
|
||||
`;
|
||||
|
||||
export const AssignUserLabel = styled.span`
|
||||
flex: 1 1 auto;
|
||||
line-height: 15px;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.75);
|
||||
`;
|
||||
|
||||
export const ExtraActionsSection = styled.div`
|
||||
@ -243,7 +245,7 @@ export const ExtraActionsSection = styled.div`
|
||||
`;
|
||||
|
||||
export const ActionButtonsTitle = styled.h3`
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
@ -253,7 +255,7 @@ export const ActionButton = styled(Button)`
|
||||
margin-top: 8px;
|
||||
margin-left: -10px;
|
||||
padding: 8px 16px;
|
||||
background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.5)};
|
||||
background: rgba(${props => props.theme.colors.bg.primary}, 0.5);
|
||||
text-align: left;
|
||||
transition: transform 0.2s ease;
|
||||
& span {
|
||||
@ -262,7 +264,7 @@ export const ActionButton = styled(Button)`
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
transform: translateX(4px);
|
||||
background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.75)};
|
||||
background: rgba(${props => props.theme.colors.bg.primary}, 0.75);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -281,10 +283,10 @@ export const HeaderActionIcon = styled.div`
|
||||
|
||||
cursor: pointer;
|
||||
svg {
|
||||
fill: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
|
||||
fill: rgba(${props => props.theme.colors.text.primary}, 0.75);
|
||||
}
|
||||
&:hover svg {
|
||||
fill: ${props => mixin.rgba(props.theme.colors.primary, 0.75)});
|
||||
fill: rgba(${props => props.theme.colors.primary});
|
||||
}
|
||||
`;
|
||||
|
||||
@ -341,7 +343,7 @@ export const MetaDetail = styled.div`
|
||||
`;
|
||||
|
||||
export const MetaDetailTitle = styled.h3`
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
@ -360,7 +362,7 @@ export const MetaDetailContent = styled.div`
|
||||
`;
|
||||
export const TaskDetailsAddLabel = styled.div`
|
||||
border-radius: 3px;
|
||||
background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
|
||||
background: ${mixin.darken('#262c49', 0.15)};
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
@ -375,7 +377,7 @@ export const TaskDetailsAddLabelIcon = styled.div`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
|
||||
background: ${mixin.darken('#262c49', 0.15)};
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
@ -450,11 +452,11 @@ export const TabBarSection = styled.div`
|
||||
`;
|
||||
|
||||
export const TabBarItem = styled.div`
|
||||
box-shadow: inset 0 -2px ${props => props.theme.colors.primary};
|
||||
box-shadow: inset 0 -2px rgba(216, 93, 216);
|
||||
padding: 12px 7px 14px 7px;
|
||||
margin-bottom: -1px;
|
||||
margin-right: 36px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
export const CommentContainer = styled.div`
|
||||
@ -475,7 +477,6 @@ export const CommentEditorContainer = styled.div`
|
||||
border: 1px solid #414561;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #1f243e;
|
||||
`;
|
||||
export const CommentProfile = styled(TaskAssignee)`
|
||||
margin-right: 8px;
|
||||
@ -485,27 +486,25 @@ export const CommentProfile = styled(TaskAssignee)`
|
||||
align-items: normal;
|
||||
`;
|
||||
|
||||
export const CommentTextArea = styled(TextareaAutosize)<{ showCommentActions: boolean }>`
|
||||
export const CommentTextArea = styled(TextareaAutosize)`
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 6px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
background: #1f243e;
|
||||
border: none;
|
||||
transition: max-height 200ms, height 200ms, min-height 200ms;
|
||||
min-height: 36px;
|
||||
max-height: 36px;
|
||||
${props =>
|
||||
props.showCommentActions
|
||||
? css`
|
||||
min-height: 80px;
|
||||
max-height: none;
|
||||
line-height: 20px;
|
||||
`
|
||||
: css`
|
||||
height: 36px;
|
||||
`}
|
||||
&:not(:focus) {
|
||||
height: 36px;
|
||||
}
|
||||
&:focus {
|
||||
min-height: 80px;
|
||||
max-height: none;
|
||||
line-height: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CommentEditorActions = styled.div<{ visible: boolean }>`
|
||||
@ -532,18 +531,6 @@ export const ActivitySection = styled.div`
|
||||
overflow-x: hidden;
|
||||
|
||||
padding: 8px 26px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
`;
|
||||
|
||||
export const ActivityItemCommentAction = styled.div`
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
fill: ${props => props.theme.colors.text.primary} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ActivityItem = styled.div`
|
||||
@ -552,37 +539,30 @@ export const ActivityItem = styled.div`
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
&:hover ${ActivityItemCommentAction} {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ActivityItemHeader = styled.div<{ editable?: boolean }>`
|
||||
export const ActivityItemHeader = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 8px;
|
||||
${props => props.editable && 'width: 100%;'}
|
||||
`;
|
||||
export const ActivityItemHeaderUser = styled(TaskAssignee)`
|
||||
align-items: start;
|
||||
margin-right: 4px;
|
||||
`;
|
||||
|
||||
export const ActivityItemHeaderTitle = styled.div`
|
||||
margin-left: 4px;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
padding-bottom: 2px;
|
||||
`;
|
||||
|
||||
export const ActivityItemHeaderTitleName = styled.span`
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
font-weight: 500;
|
||||
padding-right: 3px;
|
||||
`;
|
||||
|
||||
export const ActivityItemTimestamp = styled.span<{ margin: number }>`
|
||||
font-size: 12px;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.65)};
|
||||
color: rgba(${props => props.theme.colors.text.primary}, 0.65);
|
||||
margin-left: ${props => props.margin}px;
|
||||
`;
|
||||
|
||||
@ -590,73 +570,18 @@ export const ActivityItemDetails = styled.div`
|
||||
margin-left: 32px;
|
||||
`;
|
||||
|
||||
export const ActivityItemCommentContainer = styled.div``;
|
||||
export const ActivityItemComment = styled.div<{ editable: boolean }>`
|
||||
export const ActivityItemComment = styled.div`
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
border-radius: 3px;
|
||||
${mixin.boxShadowCard}
|
||||
position: relative;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
padding: 8px 12px;
|
||||
margin: 4px 0;
|
||||
background-color: ${props => mixin.darken(props.theme.colors.alternate, 0.1)};
|
||||
${props => props.editable && 'width: 100%;'}
|
||||
|
||||
& span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
& ul {
|
||||
list-style-type: disc;
|
||||
margin: 8px 0;
|
||||
}
|
||||
& ul > li {
|
||||
margin: 8px 8px 8px 24px;
|
||||
margin-inline-start: 24px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
& ul > li ul > li {
|
||||
list-style: circle;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ActivityItemCommentActions = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
background-color: ${mixin.darken('#262c49', 0.1)};
|
||||
`;
|
||||
|
||||
export const ActivityItemLog = styled.span`
|
||||
margin-left: 2px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
`;
|
||||
|
||||
export const ViewRawButton = styled.button`
|
||||
border-radius: 3px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: -24px;
|
||||
cursor: pointer;
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.25)};
|
||||
&:hover {
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
export const TaskDetailsEditor = styled(TextareaAutosize)`
|
||||
min-height: 108px;
|
||||
color: #c2c6dc;
|
||||
background: #262c49;
|
||||
border-radius: 3px;
|
||||
line-height: 20px;
|
||||
margin-left: 32px;
|
||||
margin-right: 32px;
|
||||
padding: 9px 8px 7px 8px;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
@ -0,0 +1,86 @@
|
||||
import React, { useState } from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import NormalizeStyles from 'App/NormalizeStyles';
|
||||
import BaseStyles from 'App/BaseStyles';
|
||||
import Modal from 'shared/components/Modal';
|
||||
import TaskDetails from '.';
|
||||
|
||||
export default {
|
||||
component: TaskDetails,
|
||||
title: 'TaskDetails',
|
||||
parameters: {
|
||||
backgrounds: [
|
||||
{ name: 'white', value: '#ffffff' },
|
||||
{ name: 'gray', value: '#cdd3e1', default: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = () => {
|
||||
const [description, setDescription] = useState('');
|
||||
return (
|
||||
<>
|
||||
<NormalizeStyles />
|
||||
<BaseStyles />
|
||||
<Modal
|
||||
width={1040}
|
||||
onClose={action('on close')}
|
||||
renderContent={() => {
|
||||
return (
|
||||
<TaskDetails
|
||||
onDeleteItem={action('delete item')}
|
||||
onChangeItemName={action('change item name')}
|
||||
task={{
|
||||
id: '1',
|
||||
taskGroup: { name: 'General', id: '1' },
|
||||
name: 'Hello, world',
|
||||
position: 1,
|
||||
labels: [
|
||||
{
|
||||
id: 'soft-skills',
|
||||
assignedDate: new Date().toString(),
|
||||
projectLabel: {
|
||||
createdDate: new Date().toString(),
|
||||
id: 'label-soft-skills',
|
||||
name: 'Soft Skills',
|
||||
labelColor: {
|
||||
id: '1',
|
||||
name: 'white',
|
||||
colorHex: '#fff',
|
||||
position: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
description,
|
||||
assigned: [
|
||||
{
|
||||
id: '1',
|
||||
profileIcon: { bgColor: null, url: null, initials: null },
|
||||
fullName: 'Jordan Knott',
|
||||
},
|
||||
],
|
||||
}}
|
||||
onTaskNameChange={action('task name change')}
|
||||
onTaskDescriptionChange={(_task, desc) => setDescription(desc)}
|
||||
onDeleteTask={action('delete task')}
|
||||
onCloseModal={action('close modal')}
|
||||
onMemberProfile={action('profile')}
|
||||
onOpenAddMemberPopup={action('open add member popup')}
|
||||
onAddItem={action('add item')}
|
||||
onToggleTaskComplete={action('toggle task complete')}
|
||||
onToggleChecklistItem={action('toggle checklist item')}
|
||||
onOpenAddLabelPopup={action('open add label popup')}
|
||||
onChangeChecklistName={action('change checklist name')}
|
||||
onDeleteChecklist={action('delete checklist')}
|
||||
onOpenAddChecklistPopup={action(' open checklist')}
|
||||
onOpenDueDatePopop={action('open due date popup')}
|
||||
onChecklistDrop={action('on checklist drop')}
|
||||
onChecklistItemDrop={action('on checklist item drop')}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -12,32 +12,17 @@ import {
|
||||
At,
|
||||
Smile,
|
||||
} from 'shared/icons';
|
||||
import { toArray } from 'react-emoji-render';
|
||||
import DOMPurify from 'dompurify';
|
||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
||||
import { usePopup } from 'shared/components/PopupMenu';
|
||||
import CommentCreator from 'shared/components/TaskDetails/CommentCreator';
|
||||
import { AngleDown } from 'shared/icons/AngleDown';
|
||||
import Editor from 'rich-markdown-editor';
|
||||
import dark from 'shared/utils/editorTheme';
|
||||
import styled from 'styled-components';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Picker, Emoji } from 'emoji-mart';
|
||||
import 'emoji-mart/css/emoji-mart.css';
|
||||
|
||||
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
||||
import dayjs from 'dayjs';
|
||||
import ActivityMessage from './ActivityMessage';
|
||||
import moment from 'moment';
|
||||
|
||||
import Task from 'shared/icons/Task';
|
||||
import {
|
||||
ActivityItemHeader,
|
||||
ActivityItemTimestamp,
|
||||
ActivityItem,
|
||||
ActivityItemCommentAction,
|
||||
ActivityItemCommentActions,
|
||||
TaskDetailLabel,
|
||||
CommentContainer,
|
||||
ActivityItemCommentContainer,
|
||||
MetaDetailContent,
|
||||
TaskDetailsAddLabelIcon,
|
||||
ActionButton,
|
||||
@ -45,7 +30,6 @@ import {
|
||||
AssignUserLabel,
|
||||
AssignUsersButton,
|
||||
AssignedUsersSection,
|
||||
ViewRawButton,
|
||||
DueDateTitle,
|
||||
Container,
|
||||
LeftSidebar,
|
||||
@ -73,126 +57,17 @@ import {
|
||||
TaskMember,
|
||||
TabBarSection,
|
||||
TabBarItem,
|
||||
CommentTextArea,
|
||||
CommentEditorContainer,
|
||||
CommentEditorActions,
|
||||
CommentEditorActionIcon,
|
||||
CommentEditorSaveButton,
|
||||
CommentProfile,
|
||||
CommentInnerWrapper,
|
||||
ActivitySection,
|
||||
TaskDetailsEditor,
|
||||
ActivityItemHeaderUser,
|
||||
ActivityItemHeaderTitle,
|
||||
ActivityItemHeaderTitleName,
|
||||
ActivityItemComment,
|
||||
} from './Styles';
|
||||
import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
|
||||
import onDragEnd from './onDragEnd';
|
||||
import { plugin as em } from './remark';
|
||||
|
||||
const parseEmojis = (value: string) => {
|
||||
const emojisArray = toArray(value);
|
||||
|
||||
// toArray outputs React elements for emojis and strings for other
|
||||
const newValue = emojisArray.reduce((previous: any, current: any) => {
|
||||
if (typeof current === 'string') {
|
||||
return previous + current;
|
||||
}
|
||||
return previous + current.props.children;
|
||||
}, '');
|
||||
|
||||
return newValue;
|
||||
};
|
||||
|
||||
type StreamCommentProps = {
|
||||
comment?: TaskComment | null;
|
||||
onUpdateComment: (message: string) => void;
|
||||
onExtraActions: (commentID: string, $target: React.RefObject<HTMLElement>) => void;
|
||||
onCancelCommentEdit: () => void;
|
||||
editable: boolean;
|
||||
};
|
||||
const StreamComment: React.FC<StreamCommentProps> = ({
|
||||
comment,
|
||||
onExtraActions,
|
||||
editable,
|
||||
onUpdateComment,
|
||||
onCancelCommentEdit,
|
||||
}) => {
|
||||
const $actions = useRef<HTMLDivElement>(null);
|
||||
if (comment) {
|
||||
return (
|
||||
<ActivityItem>
|
||||
<ActivityItemHeaderUser size={32} member={comment.createdBy} />
|
||||
<ActivityItemHeader editable={editable}>
|
||||
<ActivityItemHeaderTitle>
|
||||
<ActivityItemHeaderTitleName>{comment.createdBy.fullName}</ActivityItemHeaderTitleName>
|
||||
<ActivityItemTimestamp margin={8}>
|
||||
{dayjs(comment.createdAt).format('MMM D [at] h:mm A')}
|
||||
{comment.updatedAt && ' (edited)'}
|
||||
</ActivityItemTimestamp>
|
||||
</ActivityItemHeaderTitle>
|
||||
<ActivityItemCommentContainer>
|
||||
<ActivityItemComment editable={editable}>
|
||||
{editable ? (
|
||||
<CommentCreator
|
||||
message={comment.message}
|
||||
autoFocus
|
||||
onCancelEdit={onCancelCommentEdit}
|
||||
onCreateComment={onUpdateComment}
|
||||
/>
|
||||
) : (
|
||||
<ReactMarkdown escapeHtml={false} plugins={[em]}>
|
||||
{DOMPurify.sanitize(comment.message, { FORBID_TAGS: ['style', 'img'] })}
|
||||
</ReactMarkdown>
|
||||
)}
|
||||
</ActivityItemComment>
|
||||
<ActivityItemCommentActions>
|
||||
<ActivityItemCommentAction
|
||||
ref={$actions}
|
||||
onClick={() => {
|
||||
onExtraActions(comment.id, $actions);
|
||||
}}
|
||||
>
|
||||
<AngleDown width={18} height={18} />
|
||||
</ActivityItemCommentAction>
|
||||
</ActivityItemCommentActions>
|
||||
</ActivityItemCommentContainer>
|
||||
</ActivityItemHeader>
|
||||
</ActivityItem>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
type StreamActivityProps = {
|
||||
activity?: TaskActivity | null;
|
||||
};
|
||||
const StreamActivity: React.FC<StreamActivityProps> = ({ activity }) => {
|
||||
if (activity) {
|
||||
return (
|
||||
<ActivityItem>
|
||||
<ActivityItemHeaderUser
|
||||
size={32}
|
||||
member={{
|
||||
id: activity.causedBy.id,
|
||||
fullName: activity.causedBy.fullName,
|
||||
profileIcon: activity.causedBy.profileIcon
|
||||
? activity.causedBy.profileIcon
|
||||
: {
|
||||
url: null,
|
||||
initials: activity.causedBy.fullName.charAt(0),
|
||||
bgColor: '#fff',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ActivityItemHeader>
|
||||
<ActivityItemHeaderTitle>
|
||||
<ActivityItemHeaderTitleName>{activity.causedBy.fullName}</ActivityItemHeaderTitleName>
|
||||
<ActivityMessage type={activity.type} data={activity.data} />
|
||||
</ActivityItemHeaderTitle>
|
||||
<ActivityItemTimestamp margin={0}>
|
||||
{dayjs(activity.createdAt).format('MMM D [at] h:mm A')}
|
||||
</ActivityItemTimestamp>
|
||||
</ActivityItemHeader>
|
||||
</ActivityItem>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const ChecklistContainer = styled.div``;
|
||||
|
||||
@ -237,13 +112,8 @@ type TaskDetailsProps = {
|
||||
onOpenAddLabelPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
|
||||
onOpenDueDatePopop: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
|
||||
onOpenAddChecklistPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
|
||||
onCreateComment: (task: Task, message: string) => void;
|
||||
onCommentShowActions: (commentID: string, $targetRef: React.RefObject<HTMLElement>) => void;
|
||||
onMemberProfile: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
|
||||
onCancelCommentEdit: () => void;
|
||||
onUpdateComment: (commentID: string, message: string) => void;
|
||||
onChangeChecklistName: (checklistID: string, name: string) => void;
|
||||
editableComment?: string | null;
|
||||
onDeleteChecklist: ($target: React.RefObject<HTMLElement>, checklistID: string) => void;
|
||||
onCloseModal: () => void;
|
||||
onChecklistDrop: (checklist: TaskChecklist) => void;
|
||||
@ -252,15 +122,11 @@ type TaskDetailsProps = {
|
||||
|
||||
const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||
me,
|
||||
onCancelCommentEdit,
|
||||
task,
|
||||
editableComment = null,
|
||||
onDeleteChecklist,
|
||||
onTaskNameChange,
|
||||
onCommentShowActions,
|
||||
onOpenAddChecklistPopup,
|
||||
onChangeChecklistName,
|
||||
onCreateComment,
|
||||
onChecklistDrop,
|
||||
onChecklistItemDrop,
|
||||
onToggleTaskComplete,
|
||||
@ -269,7 +135,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||
onDeleteItem,
|
||||
onDeleteTask,
|
||||
onCloseModal,
|
||||
onUpdateComment,
|
||||
onOpenAddMemberPopup,
|
||||
onOpenAddLabelPopup,
|
||||
onOpenDueDatePopop,
|
||||
@ -288,39 +153,12 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||
return true;
|
||||
});
|
||||
const [saveTimeout, setSaveTimeout] = useState<any>(null);
|
||||
const [showRaw, setShowRaw] = useState(false);
|
||||
const [showCommentActions, setShowCommentActions] = useState(false);
|
||||
const taskDescriptionRef = useRef(task.description ?? '');
|
||||
const $noMemberBtn = useRef<HTMLDivElement>(null);
|
||||
const $addMemberBtn = useRef<HTMLDivElement>(null);
|
||||
const $dueDateBtn = useRef<HTMLDivElement>(null);
|
||||
|
||||
const activityStream: Array<{ id: string; data: { time: string; type: 'comment' | 'activity' } }> = [];
|
||||
|
||||
if (task.activity) {
|
||||
task.activity.forEach(activity => {
|
||||
activityStream.push({
|
||||
id: activity.id,
|
||||
data: {
|
||||
time: activity.createdAt,
|
||||
type: 'activity',
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (task.comments) {
|
||||
task.comments.forEach(comment => {
|
||||
activityStream.push({
|
||||
id: comment.id,
|
||||
data: {
|
||||
time: comment.createdAt,
|
||||
type: 'comment',
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
activityStream.sort((a, b) => (dayjs(a.data.time).isAfter(dayjs(b.data.time)) ? 1 : -1));
|
||||
|
||||
const saveDescription = () => {
|
||||
onTaskDescriptionChange(task, taskDescriptionRef.current);
|
||||
};
|
||||
@ -331,7 +169,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||
<LeftSidebarSection>
|
||||
<SidebarTitle>TASK GROUP</SidebarTitle>
|
||||
<SidebarButton>
|
||||
<SidebarButtonText>{task.taskGroup.name}</SidebarButtonText>
|
||||
<SidebarButtonText>Release 0.1.0</SidebarButtonText>
|
||||
</SidebarButton>
|
||||
<DueDateTitle>DUE DATE</DueDateTitle>
|
||||
<SidebarButton
|
||||
@ -341,7 +179,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||
}}
|
||||
>
|
||||
{task.dueDate ? (
|
||||
<SidebarButtonText>{dayjs(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
|
||||
<SidebarButtonText>{moment(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
|
||||
) : (
|
||||
<SidebarButtonText>No due date</SidebarButtonText>
|
||||
)}
|
||||
@ -471,34 +309,28 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||
</HeaderContainer>
|
||||
<InnerContentContainer>
|
||||
<DescriptionContainer>
|
||||
{showRaw ? (
|
||||
<TaskDetailsEditor value={taskDescriptionRef.current} />
|
||||
) : (
|
||||
<EditorContainer
|
||||
onClick={e => {
|
||||
if (!editTaskDescription) {
|
||||
setEditTaskDescription(true);
|
||||
}
|
||||
<EditorContainer
|
||||
onClick={e => {
|
||||
if (!editTaskDescription) {
|
||||
setEditTaskDescription(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Editor
|
||||
defaultValue={task.description ?? ''}
|
||||
theme={dark}
|
||||
readOnly={!editTaskDescription}
|
||||
autoFocus
|
||||
onChange={value => {
|
||||
setSaveTimeout(() => {
|
||||
clearTimeout(saveTimeout);
|
||||
return setTimeout(saveDescription, 2000);
|
||||
});
|
||||
const text = value();
|
||||
taskDescriptionRef.current = text;
|
||||
}}
|
||||
>
|
||||
<Editor
|
||||
defaultValue={task.description ?? ''}
|
||||
theme={dark}
|
||||
readOnly={!editTaskDescription}
|
||||
autoFocus
|
||||
onChange={value => {
|
||||
setSaveTimeout(() => {
|
||||
clearTimeout(saveTimeout);
|
||||
return setTimeout(saveDescription, 2000);
|
||||
});
|
||||
const text = value();
|
||||
taskDescriptionRef.current = text;
|
||||
}}
|
||||
/>
|
||||
</EditorContainer>
|
||||
)}
|
||||
|
||||
<ViewRawButton onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Show editor' : 'Show raw'}</ViewRawButton>
|
||||
/>
|
||||
</EditorContainer>
|
||||
</DescriptionContainer>
|
||||
<ChecklistSection>
|
||||
<DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>
|
||||
@ -584,29 +416,46 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||
<TabBarSection>
|
||||
<TabBarItem>Activity</TabBarItem>
|
||||
</TabBarSection>
|
||||
<ActivitySection>
|
||||
{activityStream.map(stream =>
|
||||
stream.data.type === 'comment' ? (
|
||||
<StreamComment
|
||||
onExtraActions={onCommentShowActions}
|
||||
onCancelCommentEdit={onCancelCommentEdit}
|
||||
onUpdateComment={message => onUpdateComment(stream.id, message)}
|
||||
editable={stream.id === editableComment}
|
||||
comment={task.comments && task.comments.find(comment => comment.id === stream.id)}
|
||||
/>
|
||||
) : (
|
||||
<StreamActivity activity={task.activity && task.activity.find(activity => activity.id === stream.id)} />
|
||||
),
|
||||
)}
|
||||
</ActivitySection>
|
||||
<ActivitySection />
|
||||
</InnerContentContainer>
|
||||
<CommentContainer>
|
||||
{me && (
|
||||
<CommentCreator
|
||||
me={me}
|
||||
onCreateComment={message => onCreateComment(task, message)}
|
||||
onMemberProfile={onMemberProfile}
|
||||
/>
|
||||
<CommentInnerWrapper>
|
||||
<CommentProfile
|
||||
member={me}
|
||||
size={32}
|
||||
onMemberProfile={$target => {
|
||||
onMemberProfile($target, me.id);
|
||||
}}
|
||||
/>
|
||||
<CommentEditorContainer>
|
||||
<CommentTextArea
|
||||
disabled
|
||||
placeholder="Write a comment..."
|
||||
onFocus={() => {
|
||||
setShowCommentActions(true);
|
||||
}}
|
||||
onBlur={() => {
|
||||
setShowCommentActions(false);
|
||||
}}
|
||||
/>
|
||||
<CommentEditorActions visible={showCommentActions}>
|
||||
<CommentEditorActionIcon>
|
||||
<Paperclip width={12} height={12} />
|
||||
</CommentEditorActionIcon>
|
||||
<CommentEditorActionIcon>
|
||||
<At width={12} height={12} />
|
||||
</CommentEditorActionIcon>
|
||||
<CommentEditorActionIcon>
|
||||
<Smile width={12} height={12} />
|
||||
</CommentEditorActionIcon>
|
||||
<CommentEditorActionIcon>
|
||||
<Task width={12} height={12} />
|
||||
</CommentEditorActionIcon>
|
||||
<CommentEditorSaveButton>Save</CommentEditorSaveButton>
|
||||
</CommentEditorActions>
|
||||
</CommentEditorContainer>
|
||||
</CommentInnerWrapper>
|
||||
)}
|
||||
</CommentContainer>
|
||||
</ContentContainer>
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
import visit from 'unist-util-visit';
|
||||
import emoji from 'node-emoji';
|
||||
import emoticon from 'emoticon';
|
||||
import { Emoji } from 'emoji-mart';
|
||||
import React from 'react';
|
||||
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
|
||||
const RE_EMOJI = /:\+1:|:-1:|:[\w-]+:/g;
|
||||
const RE_SHORT = /[$@|*'",;.=:\-)([\]\\/<>038BOopPsSdDxXzZ]{2,5}/g;
|
||||
|
||||
const DEFAULT_SETTINGS = {
|
||||
padSpaceAfter: false,
|
||||
emoticon: false,
|
||||
};
|
||||
|
||||
function plugin(options) {
|
||||
const settings = Object.assign({}, DEFAULT_SETTINGS, options);
|
||||
const pad = !!settings.padSpaceAfter;
|
||||
const emoticonEnable = !!settings.emoticon;
|
||||
|
||||
function getEmojiByShortCode(match) {
|
||||
// find emoji by shortcode - full match or with-out last char as it could be from text e.g. :-),
|
||||
const iconFull = emoticon.find(e => e.emoticons.includes(match)); // full match
|
||||
const iconPart = emoticon.find(e => e.emoticons.includes(match.slice(0, -1))); // second search pattern
|
||||
const trimmedChar = iconPart ? match.slice(-1) : '';
|
||||
const addPad = pad ? ' ' : '';
|
||||
let icon = iconFull ? iconFull.emoji + addPad : iconPart && iconPart.emoji + addPad + trimmedChar;
|
||||
return icon || match;
|
||||
}
|
||||
|
||||
function getEmoji(match) {
|
||||
console.log(match);
|
||||
const got = emoji.get(match);
|
||||
if (pad && got !== match) {
|
||||
return got + ' ';
|
||||
}
|
||||
|
||||
console.log(got);
|
||||
return ReactDOMServer.renderToStaticMarkup(<Emoji set="google" emoji={match} size={16} />);
|
||||
}
|
||||
|
||||
function transformer(tree) {
|
||||
visit(tree, 'paragraph', function(node) {
|
||||
console.log(tree);
|
||||
// node.value = node.value.replace(RE_EMOJI, getEmoji);
|
||||
node.type = 'html';
|
||||
node.tagName = 'div';
|
||||
node.value = node.children[0].value.replace(RE_EMOJI, getEmoji);
|
||||
|
||||
if (emoticonEnable) {
|
||||
// node.value = node.value.replace(RE_SHORT, getEmojiByShortCode);
|
||||
}
|
||||
console.log(node);
|
||||
});
|
||||
}
|
||||
|
||||
return transformer;
|
||||
}
|
||||
|
||||
export { plugin };
|
||||
@ -24,7 +24,7 @@ const Textarea = styled(TextareaAutosize)`
|
||||
font-size: 20px;
|
||||
padding: 3px 10px 3px 8px;
|
||||
&:focus {
|
||||
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
|
||||
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -11,8 +11,7 @@ export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
|
||||
z-index: ${props => props.zIndex};
|
||||
position: relative;
|
||||
|
||||
box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.primary},
|
||||
inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.primary, 0.07)};
|
||||
box-shadow: 0 0 0 2px rgba(16, 22, 58), inset 0 0 0 1px rgba(16, 22, 58, 0.07);
|
||||
`;
|
||||
|
||||
export const NavbarWrapper = styled.div`
|
||||
@ -29,9 +28,9 @@ export const NavbarHeader = styled.header`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: ${props => props.theme.colors.bg.primary};
|
||||
background: rgb(16, 22, 58);
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
|
||||
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
|
||||
`;
|
||||
export const Breadcrumbs = styled.div`
|
||||
color: rgb(94, 108, 132);
|
||||
@ -125,7 +124,7 @@ export const ProjectTabs = styled.div`
|
||||
|
||||
export const ProjectTab = styled(NavLink)`
|
||||
font-size: 80%;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@ -142,22 +141,22 @@ export const ProjectTab = styled(NavLink)`
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 -2px ${props => props.theme.colors.text.secondary};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
box-shadow: inset 0 -2px rgba(${props => props.theme.colors.text.secondary});
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
}
|
||||
|
||||
&.active {
|
||||
box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
|
||||
color: ${props => props.theme.colors.secondary};
|
||||
box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary});
|
||||
color: rgba(${props => props.theme.colors.secondary});
|
||||
}
|
||||
&.active:hover {
|
||||
box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
|
||||
color: ${props => props.theme.colors.secondary};
|
||||
box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary});
|
||||
color: rgba(${props => props.theme.colors.secondary});
|
||||
}
|
||||
`;
|
||||
|
||||
export const ProjectName = styled.h1`
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
padding: 3px 10px 3px 8px;
|
||||
@ -186,7 +185,7 @@ export const ProjectNameTextarea = styled(TextareaAutosize)`
|
||||
font-size: 20px;
|
||||
padding: 3px 10px 3px 8px;
|
||||
&:focus {
|
||||
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
|
||||
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -204,7 +203,7 @@ export const ProjectSwitcher = styled.button`
|
||||
color: #c2c6dc;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -228,7 +227,7 @@ export const ProjectSettingsButton = styled.button`
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: rgb(115, 103, 240);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -244,7 +243,7 @@ export const ProjectFinder = styled(Button)`
|
||||
|
||||
export const NavSeparator = styled.div`
|
||||
width: 1px;
|
||||
background: ${props => props.theme.colors.border};
|
||||
background: rgba(${props => props.theme.colors.border});
|
||||
height: 34px;
|
||||
margin: 0 20px;
|
||||
`;
|
||||
@ -252,8 +251,8 @@ export const NavSeparator = styled.div`
|
||||
export const LogoContainer = styled(Link)`
|
||||
display: block;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -261,11 +260,11 @@ export const LogoContainer = styled(Link)`
|
||||
|
||||
export const TaskcafeTitle = styled.h2`
|
||||
margin-left: 5px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
font-size: 20px;
|
||||
`;
|
||||
|
||||
export const TaskcafeLogo = styled(Taskcafe)`
|
||||
fill: ${props => props.theme.colors.text.primary};
|
||||
stroke: ${props => props.theme.colors.text.primary};
|
||||
fill: rgba(${props => props.theme.colors.text.primary});
|
||||
stroke: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
@ -2,8 +2,8 @@ import React, { useState } from 'react';
|
||||
import NormalizeStyles from 'App/NormalizeStyles';
|
||||
import BaseStyles from 'App/BaseStyles';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import DropdownMenu from 'shared/components/DropdownMenu';
|
||||
import TopNavbar from '.';
|
||||
import theme from '../../../App/ThemeStyles';
|
||||
|
||||
export default {
|
||||
component: TopNavbar,
|
||||
@ -15,7 +15,7 @@ export default {
|
||||
backgrounds: [
|
||||
{ name: 'white', value: '#ffffff' },
|
||||
{ name: 'gray', value: '#f8f8f8' },
|
||||
{ name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
|
||||
{ name: 'darkBlue', value: '#262c49', default: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { Home, Star, Bell, AngleDown, BarChart, CheckCircle, ListUnordered } from 'shared/icons';
|
||||
import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
|
||||
import styled from 'styled-components';
|
||||
import ProfileIcon from 'shared/components/ProfileIcon';
|
||||
import { usePopup } from 'shared/components/PopupMenu';
|
||||
import { RoleCode } from 'shared/generated/graphql';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import { useHistory } from 'react-router';
|
||||
import {
|
||||
TaskcafeLogo,
|
||||
TaskcafeTitle,
|
||||
@ -174,11 +173,8 @@ type NavBarProps = {
|
||||
user: TaskUser | null;
|
||||
onOpenSettings: ($target: React.RefObject<HTMLElement>) => void;
|
||||
projectMembers?: Array<TaskUser> | null;
|
||||
projectInvitedMembers?: Array<InvitedUser> | null;
|
||||
|
||||
onRemoveFromBoard?: (userID: string) => void;
|
||||
onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
|
||||
onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
|
||||
};
|
||||
|
||||
const NavBar: React.FC<NavBarProps> = ({
|
||||
@ -188,12 +184,10 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
onChangeProjectOwner,
|
||||
currentTab,
|
||||
onMemberProfile,
|
||||
onInvitedMemberProfile,
|
||||
canEditProjectName = false,
|
||||
onOpenProjectFinder,
|
||||
onFavorite,
|
||||
onSetTab,
|
||||
projectInvitedMembers,
|
||||
onChangeRole,
|
||||
name,
|
||||
onRemoveFromBoard,
|
||||
@ -210,7 +204,6 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
onProfileClick($target);
|
||||
}
|
||||
};
|
||||
const history = useHistory();
|
||||
const { showPopup } = usePopup();
|
||||
return (
|
||||
<NavbarWrapper>
|
||||
@ -252,38 +245,19 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
<TaskcafeTitle>Taskcafé</TaskcafeTitle>
|
||||
</LogoContainer>
|
||||
<GlobalActions>
|
||||
{projectMembers && projectInvitedMembers && onMemberProfile && onInvitedMemberProfile && (
|
||||
{projectMembers && onMemberProfile && (
|
||||
<>
|
||||
<ProjectMembers>
|
||||
{projectMembers.map((member, idx) => (
|
||||
<ProjectMember
|
||||
showRoleIcons
|
||||
zIndex={projectMembers.length - idx + projectInvitedMembers.length}
|
||||
zIndex={projectMembers.length - idx}
|
||||
key={member.id}
|
||||
size={28}
|
||||
member={member}
|
||||
onMemberProfile={onMemberProfile}
|
||||
/>
|
||||
))}
|
||||
{projectInvitedMembers.map((member, idx) => (
|
||||
<ProjectMember
|
||||
showRoleIcons
|
||||
zIndex={projectInvitedMembers.length - idx}
|
||||
key={member.email}
|
||||
size={28}
|
||||
invited
|
||||
member={{
|
||||
id: member.email,
|
||||
fullName: member.email,
|
||||
profileIcon: {
|
||||
url: null,
|
||||
initials: member.email.charAt(0),
|
||||
bgColor: '#fff',
|
||||
},
|
||||
}}
|
||||
onMemberProfile={onInvitedMemberProfile}
|
||||
/>
|
||||
))}
|
||||
{canInviteUser && (
|
||||
<InviteButton
|
||||
onClick={$target => {
|
||||
@ -309,9 +283,6 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
<IconContainer disabled onClick={NOOP}>
|
||||
<CheckCircle width={20} height={20} />
|
||||
</IconContainer>
|
||||
<IconContainer disabled onClick={NOOP}>
|
||||
<ListUnordered width={20} height={20} />
|
||||
</IconContainer>
|
||||
<IconContainer disabled onClick={onNotificationClick}>
|
||||
<Bell color="#c2c6dc" size={20} />
|
||||
</IconContainer>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
mutation createProject($teamID: UUID, $name: String!) {
|
||||
createProject(input: {teamID: $teamID, name: $name}) {
|
||||
mutation createProject($teamID: UUID!, $userID: UUID!, $name: String!) {
|
||||
createProject(input: {teamID: $teamID, userID: $userID, name: $name}) {
|
||||
id
|
||||
name
|
||||
team {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
mutation createTaskGroup( $projectID: UUID!, $name: String!, $position: Float! ) {
|
||||
mutation createTaskGroup( $projectID: String!, $name: String!, $position: Float! ) {
|
||||
createTaskGroup(
|
||||
input: { projectID: $projectID, name: $name, position: $position }
|
||||
) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
mutation deleteTask($taskID: UUID!) {
|
||||
mutation deleteTask($taskID: String!) {
|
||||
deleteTask(input: { taskID: $taskID }) {
|
||||
taskID
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user