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

fix: unify popup content padding

Browse Source
This commit is contained in:
Jordan Knott
2020-07-16 22:31:33 -05:00
parent c35f63e668
commit 1222111bef
6 changed files with 207 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/Admin/index.tsx
View File

@@ -56,6 +56,7 @@ type CreateUserData = {
const CreateUserForm = styled.form` const CreateUserForm = styled.form`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 12px;
`; `;
const CreateUserButton = styled(Button)` const CreateUserButton = styled(Button)`
margin-top: 8px; margin-top: 8px;
@@ -188,20 +189,20 @@ const AdminRoute = () => {
}, },
}); });
if (loading) { if (loading) {
return <GlobalTopNavbar projectID={null} onSaveProjectName={() => { }} name={null} />; return <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />;
} }
if (data) { if (data) {
return ( return (
<> <>
<GlobalTopNavbar projectID={null} onSaveProjectName={() => { }} name={null} /> <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
<Admin <Admin
initialTab={1} initialTab={1}
users={data.users} users={data.users}
onInviteUser={() => { }} onInviteUser={() => {}}
onUpdateUserPassword={(user, password) => { onUpdateUserPassword={(user, password) => {
console.log(user) console.log(user);
console.log(password) console.log(password);
hidePopup() hidePopup();
}} }}
onDeleteUser={($target, userID) => { onDeleteUser={($target, userID) => {
showPopup( showPopup(

39
frontend/src/App/TopNavbar.tsx
View File

@@ -1,9 +1,9 @@
import React, {useState, useContext, useEffect} from 'react'; import React, { useState, useContext, useEffect } from 'react';
import TopNavbar, {MenuItem} from 'shared/components/TopNavbar'; import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
import styled from 'styled-components/macro'; import styled from 'styled-components/macro';
import DropdownMenu, {ProfileMenu} from 'shared/components/DropdownMenu'; import DropdownMenu, { ProfileMenu } from 'shared/components/DropdownMenu';
import ProjectSettings, {DeleteConfirm, DELETE_INFO} from 'shared/components/ProjectSettings'; import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
import {useHistory} from 'react-router'; import { useHistory } from 'react-router';
import UserIDContext from 'App/context'; import UserIDContext from 'App/context';
import { import {
RoleCode, RoleCode,
@@ -12,14 +12,15 @@ import {
useGetProjectsQuery, useGetProjectsQuery,
GetProjectsDocument, GetProjectsDocument,
} from 'shared/generated/graphql'; } from 'shared/generated/graphql';
import {usePopup, Popup} from 'shared/components/PopupMenu'; import { usePopup, Popup } from 'shared/components/PopupMenu';
import {History} from 'history'; import { History } from 'history';
import produce from 'immer'; import produce from 'immer';
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
const TeamContainer = styled.div` const TeamContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 8px;
`; `;
const TeamTitle = styled.h3` const TeamTitle = styled.h3`
@@ -45,7 +46,7 @@ const TeamProjectLink = styled(Link)`
user-select: none; user-select: none;
`; `;
const TeamProjectBackground = styled.div<{color: string}>` const TeamProjectBackground = styled.div<{ color: string }>`
background-image: url(null); background-image: url(null);
background-color: ${props => props.color}; background-color: ${props => props.color};
@@ -68,7 +69,7 @@ const TeamProjectBackground = styled.div<{color: string}>`
} }
`; `;
const TeamProjectAvatar = styled.div<{color: string}>` const TeamProjectAvatar = styled.div<{ color: string }>`
background-image: url(null); background-image: url(null);
background-color: ${props => props.color}; background-color: ${props => props.color};
@@ -122,12 +123,12 @@ const TeamProjectContainer = styled.div`
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f']; const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
const ProjectFinder = () => { const ProjectFinder = () => {
const {loading, data} = useGetProjectsQuery(); const { loading, data } = useGetProjectsQuery();
if (loading) { if (loading) {
return <span>loading</span>; return <span>loading</span>;
} }
if (data) { if (data) {
const {projects, teams, organizations} = data; const { projects, teams, organizations } = data;
const projectTeams = teams.map(team => { const projectTeams = teams.map(team => {
return { return {
id: team.id, id: team.id,
@@ -166,8 +167,8 @@ type ProjectPopupProps = {
projectID: string; projectID: string;
}; };
export const ProjectPopup: React.FC<ProjectPopupProps> = ({history, name, projectID}) => { export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, projectID }) => {
const {hidePopup, setTab} = usePopup(); const { hidePopup, setTab } = usePopup();
const [deleteProject] = useDeleteProjectMutation({ const [deleteProject] = useDeleteProjectMutation({
update: (client, deleteData) => { update: (client, deleteData) => {
const cacheData: any = client.readQuery({ const cacheData: any = client.readQuery({
@@ -206,7 +207,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({history, name, projec
deletedItems={DELETE_INFO.DELETE_PROJECTS.deletedItems} deletedItems={DELETE_INFO.DELETE_PROJECTS.deletedItems}
onConfirmDelete={() => { onConfirmDelete={() => {
if (projectID) { if (projectID) {
deleteProject({variables: {projectID}}); deleteProject({ variables: { projectID } });
hidePopup(); hidePopup();
history.push('/projects'); history.push('/projects');
} }
@@ -249,16 +250,16 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
nameOnly, nameOnly,
}) => { }) => {
console.log(popupContent); console.log(popupContent);
const {loading, data} = useMeQuery(); const { loading, data } = useMeQuery();
const {showPopup, hidePopup, setTab} = usePopup(); const { showPopup, hidePopup, setTab } = usePopup();
const history = useHistory(); const history = useHistory();
const {userID, setUserID} = useContext(UserIDContext); const { userID, setUserID } = useContext(UserIDContext);
const onLogout = () => { const onLogout = () => {
fetch('/auth/logout', { fetch('/auth/logout', {
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
}).then(async x => { }).then(async x => {
const {status} = x; const { status } = x;
if (status === 200) { if (status === 200) {
history.replace('/login'); history.replace('/login');
setUserID(null); setUserID(null);

7
frontend/src/Teams/Members/index.tsx
View File

@@ -18,13 +18,14 @@ import styled, { css } from 'styled-components/macro';
import { usePopup, Popup } from 'shared/components/PopupMenu'; import { usePopup, Popup } from 'shared/components/PopupMenu';
import TaskAssignee from 'shared/components/TaskAssignee'; import TaskAssignee from 'shared/components/TaskAssignee';
import Member from 'shared/components/Member'; import Member from 'shared/components/Member';
import ControlledInput from 'shared/components/ControlledInput';
const MemberListWrapper = styled.div` const MemberListWrapper = styled.div`
flex: 1 1; flex: 1 1;
`; `;
const SearchInput = styled(Input)` const SearchInput = styled(ControlledInput)`
margin: 0; margin: 0 12px;
`; `;
const UserMember = styled(Member)` const UserMember = styled(Member)`
@@ -37,7 +38,7 @@ const UserMember = styled(Member)`
`; `;
const TeamMemberList = styled.div` const TeamMemberList = styled.div`
margin: 8px 0; margin: 8px 12px;
`; `;
type UserManagementPopupProps = { type UserManagementPopupProps = {

4
frontend/src/shared/components/ListActions/Styles.ts
View File

@@ -33,3 +33,7 @@ export const ListSeparator = styled.hr`
padding: 0; padding: 0;
width: 100%; width: 100%;
`; `;
export const InnerContent = styled.div`
margin: 0 12px;
`;

6
frontend/src/shared/components/ListActions/index.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles'; import { InnerContent, ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
type Props = { type Props = {
taskGroupID: string; taskGroupID: string;
@@ -8,7 +8,7 @@ type Props = {
}; };
const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => { const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
return ( return (
<> <InnerContent>
<ListActionsWrapper> <ListActionsWrapper>
<ListActionItemWrapper> <ListActionItemWrapper>
<ListActionItem>Add card...</ListActionItem> <ListActionItem>Add card...</ListActionItem>
@@ -44,7 +44,7 @@ const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
<ListActionItem>Archive This List</ListActionItem> <ListActionItem>Archive This List</ListActionItem>
</ListActionItemWrapper> </ListActionItemWrapper>
</ListActionsWrapper> </ListActionsWrapper>
</> </InnerContent>
); );
}; };
export default LabelManager; export default LabelManager;

10
frontend/src/shared/components/ProjectSettings/index.tsx
View File

@@ -5,7 +5,7 @@ import Button from 'shared/components/Button';
export const ListActionsWrapper = styled.ul` export const ListActionsWrapper = styled.ul`
list-style-type: none; list-style-type: none;
margin: 0; margin: 0 12px;
padding: 0; padding: 0;
`; `;
@@ -40,7 +40,7 @@ export const ListSeparator = styled.hr`
type Props = { type Props = {
onDeleteProject: () => void; onDeleteProject: () => void;
}; };
const ProjectSettings: React.FC<Props> = ({onDeleteProject}) => { const ProjectSettings: React.FC<Props> = ({ onDeleteProject }) => {
return ( return (
<> <>
<ListActionsWrapper> <ListActionsWrapper>
@@ -55,7 +55,7 @@ const ProjectSettings: React.FC<Props> = ({onDeleteProject}) => {
type TeamSettingsProps = { type TeamSettingsProps = {
onDeleteTeam: () => void; onDeleteTeam: () => void;
}; };
export const TeamSettings: React.FC<TeamSettingsProps> = ({onDeleteTeam}) => { export const TeamSettings: React.FC<TeamSettingsProps> = ({ onDeleteTeam }) => {
return ( return (
<> <>
<ListActionsWrapper> <ListActionsWrapper>
@@ -109,7 +109,7 @@ export const DELETE_INFO = {
}, },
}; };
const DeleteConfirm: React.FC<DeleteConfirmProps> = ({description, deletedItems, onConfirmDelete}) => { const DeleteConfirm: React.FC<DeleteConfirmProps> = ({ description, deletedItems, onConfirmDelete }) => {
return ( return (
<ConfirmWrapper> <ConfirmWrapper>
<ConfirmDescription> <ConfirmDescription>
@@ -127,5 +127,5 @@ const DeleteConfirm: React.FC<DeleteConfirmProps> = ({description, deletedItems,
); );
}; };
export {DeleteConfirm}; export { DeleteConfirm };
export default ProjectSettings; export default ProjectSettings;