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

change: add loading state to project board

Browse Source
This commit is contained in:
Jordan Knott
2020-07-16 21:14:26 -05:00
parent a90ace7a06
commit 45a92636cb
5 changed files with 207 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/shared/components/Button/index.tsx
View File

@ -1,11 +1,11 @@
import React, { useRef } from 'react';
import styled, { css } from 'styled-components/macro';
const Text = styled.span<{ fontSize: string }>`
const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
position: relative;
display: flex;
align-items: center;
justify-content: center;
justify-content: ${props => props.justifyTextContent};
transition: all 0.2s ease;
font-size: ${props => props.fontSize};
color: rgba(${props => props.theme.colors.text.secondary});
@ -112,6 +112,7 @@ type ButtonProps = {
type?: 'button' | 'submit';
className?: string;
onClick?: ($target: React.RefObject<HTMLButtonElement>) => void;
justifyTextContent?: string;
};
const Button: React.FC<ButtonProps> = ({
@ -120,6 +121,7 @@ const Button: React.FC<ButtonProps> = ({
color = 'primary',
variant = 'filled',
type = 'button',
justifyTextContent = 'center',
onClick,
className,
children,
@ -134,7 +136,9 @@ const Button: React.FC<ButtonProps> = ({
case 'filled':
return (
<Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Filled>
);
case 'outline':
@ -147,13 +151,17 @@ const Button: React.FC<ButtonProps> = ({
disabled={disabled}
color={color}
>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Outline>
);
case 'flat':
return (
<Flat ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Flat>
);
case 'lineDown':
@ -166,7 +174,9 @@ const Button: React.FC<ButtonProps> = ({
disabled={disabled}
color={color}
>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
<LineX color={color} />
</LineDown>
);
@ -180,13 +190,17 @@ const Button: React.FC<ButtonProps> = ({
disabled={disabled}
color={color}
>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Gradient>
);
case 'relief':
return (
<Relief ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Relief>
);
default:

94
frontend/src/shared/components/EmptyBoard/index.tsx Normal file
View File

@ -0,0 +1,94 @@
import React from 'react';
import styled, { keyframes } from 'styled-components/macro';
import { mixin } from 'shared/utils/styles';
export const BoardContainer = styled.div`
position: relative;
overflow-y: auto;
outline: none;
flex-grow: 1;
`;
export const BoardWrapper = styled.div`
display: flex;
user-select: none;
white-space: nowrap;
margin-bottom: 8px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 8px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
`;
export const Container = styled.div`
width: 272px;
margin: 0 4px;
height: 100%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
white-space: nowrap;
`;
export const defaultBaseColor = '#10163a';
export const defaultHighlightColor = mixin.lighten('#10163a', 0.25);
export const skeletonKeyframes = keyframes`
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
`;
export const Wrapper = styled.div`
// background-color: #ebecf0;
// background: rgb(244, 245, 247);
min-height: 120px;
opacity: 0.8;
background: #10163a;
color: #c2c6dc;
border-radius: 5px;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 100%;
position: relative;
white-space: normal;
background-image: linear-gradient(90deg, ${defaultBaseColor}, ${defaultHighlightColor}, ${defaultBaseColor});
background-size: 200px 100%;
background-repeat: no-repeat;
animation: ${skeletonKeyframes} 1.2s ease-in-out infinite;
`;
const EmptyBoard: React.FC = () => {
return (
<BoardContainer>
<BoardWrapper>
<Container>
<Wrapper />
</Container>
<Container>
<Wrapper />
</Container>
<Container>
<Wrapper />
</Container>
<Container>
<Wrapper />
</Container>
</BoardWrapper>
</BoardContainer>
);
};
export default EmptyBoard;

60
frontend/src/shared/components/TaskDetails/index.tsx
View File

@ -1,5 +1,5 @@
import React, {useState, useRef, useEffect} from 'react';
import {Bin, Cross, Plus} from 'shared/icons';
import React, { useState, useRef, useEffect } from 'react';
import { Bin, Cross, Plus } from 'shared/icons';
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
import ReactMarkdown from 'react-markdown';
@ -9,7 +9,7 @@ import {
getNewDraggablePosition,
getAfterDropDraggableList,
} from 'shared/utils/draggables';
import {DragDropContext, Droppable, Draggable, DropResult} from 'react-beautiful-dnd';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
import TaskAssignee from 'shared/components/TaskAssignee';
import moment from 'moment';
@ -54,7 +54,7 @@ import {
MetaDetailTitle,
MetaDetailContent,
} from './Styles';
import Checklist, {ChecklistItem, ChecklistItems} from '../Checklist';
import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
import styled from 'styled-components';
const ChecklistContainer = styled.div``;
@ -69,7 +69,7 @@ type TaskLabelProps = {
onClick: ($target: React.RefObject<HTMLElement>) => void;
};
const TaskLabelItem: React.FC<TaskLabelProps> = ({label, onClick}) => {
const TaskLabelItem: React.FC<TaskLabelProps> = ({ label, onClick }) => {
const $label = useRef<HTMLDivElement>(null);
return (
<TaskDetailLabel
@ -84,14 +84,14 @@ const TaskLabelItem: React.FC<TaskLabelProps> = ({label, onClick}) => {
);
};
const TaskContent: React.FC<TaskContentProps> = ({description, onEditContent}) => {
const TaskContent: React.FC<TaskContentProps> = ({ description, onEditContent }) => {
return description === '' ? (
<TaskDetailsAddDetailsButton onClick={onEditContent}>Add a more detailed description</TaskDetailsAddDetailsButton>
) : (
<TaskDetailsMarkdown onClick={onEditContent}>
<ReactMarkdown source={description} />
</TaskDetailsMarkdown>
);
<TaskDetailsMarkdown onClick={onEditContent}>
<ReactMarkdown source={description} />
</TaskDetailsMarkdown>
);
};
type DetailsEditorProps = {
@ -214,7 +214,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
onOpenAddLabelPopup(task, $target);
};
const onDragEnd = ({draggableId, source, destination, type}: DropResult) => {
const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
if (typeof destination === 'undefined') return;
if (!isPositionChanged(source, destination)) return;
@ -233,7 +233,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
};
beforeDropDraggables = getSortedDraggables(
task.checklists.map(checklist => {
return {id: checklist.id, position: checklist.position};
return { id: checklist.id, position: checklist.position };
}),
);
if (droppedDraggable === null || beforeDropDraggables === null) {
@ -249,9 +249,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
console.log(droppedGroup);
console.log(`positiion: ${newPosition}`);
onChecklistDrop({...droppedGroup, position: newPosition});
onChecklistDrop({ ...droppedGroup, position: newPosition });
} else {
throw {error: 'task group can not be found'};
throw { error: 'task group can not be found' };
}
} else {
const targetChecklist = task.checklists.findIndex(
@ -266,7 +266,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
};
beforeDropDraggables = getSortedDraggables(
task.checklists[targetChecklist].items.map(item => {
return {id: item.id, position: item.position};
return { id: item.id, position: item.position };
}),
);
if (droppedDraggable === null || beforeDropDraggables === null) {
@ -379,8 +379,8 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
}}
/>
) : (
<TaskContent description={description} onEditContent={handleClick} />
)}
<TaskContent description={description} onEditContent={handleClick} />
)}
<DragDropContext onDragEnd={onDragEnd}>
<Droppable direction="vertical" type="checklist" droppableId="root">
{dropProvided => (
@ -438,7 +438,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
complete={item.complete}
onDeleteItem={onDeleteItem}
onChangeName={onChangeItemName}
onToggleItem={(itemID, complete) => onToggleChecklistItem(item.id, complete)}
onToggleItem={(itemID, complete) =>
onToggleChecklistItem(item.id, complete)
}
/>
)}
</Draggable>
@ -461,15 +463,23 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
<TaskDetailsSidebar>
<ActionButtons>
<ActionButtonsTitle>ADD TO CARD</ActionButtonsTitle>
<ActionButton onClick={() => onToggleTaskComplete(task)}>
<ActionButton justifyTextContent="flex-start" onClick={() => onToggleTaskComplete(task)}>
{task.complete ? 'Mark Incomplete' : 'Mark Complete'}
</ActionButton>
<ActionButton onClick={$target => onAddMember($target)}>Members</ActionButton>
<ActionButton onClick={$target => onAddLabel($target)}>Labels</ActionButton>
<ActionButton onClick={$target => onAddChecklist($target)}>Checklist</ActionButton>
<ActionButton onClick={$target => onOpenDueDatePopop(task, $target)}>Due Date</ActionButton>
<ActionButton>Attachment</ActionButton>
<ActionButton>Cover</ActionButton>
<ActionButton justifyTextContent="flex-start" onClick={$target => onAddMember($target)}>
Members
</ActionButton>
<ActionButton justifyTextContent="flex-start" onClick={$target => onAddLabel($target)}>
Labels
</ActionButton>
<ActionButton justifyTextContent="flex-start" onClick={$target => onAddChecklist($target)}>
Checklist
</ActionButton>
<ActionButton justifyTextContent="flex-start" onClick={$target => onOpenDueDatePopop(task, $target)}>
Due Date
</ActionButton>
<ActionButton justifyTextContent="flex-start">Attachment</ActionButton>
<ActionButton justifyTextContent="flex-start">Cover</ActionButton>
</ActionButtons>
</TaskDetailsSidebar>
</TaskDetailsWrapper>