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

feature: add project labels

Browse Source
This commit is contained in:
Jordan Knott
2020-05-27 16:18:50 -05:00
parent fba4de631f
commit cbcd8c5f82
42 changed files with 1024 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/shared/components/PopupMenu/LabelEditor.tsx
View File

@ -4,14 +4,15 @@ import { Checkmark } from 'shared/icons';
import { SaveButton, DeleteButton, LabelBox, EditLabelForm, FieldLabel, FieldName } from './Styles';
type Props = {
labelColors: Array<LabelColor>;
label: Label | null;
onLabelEdit: (labelId: string | null, labelName: string, color: string) => void;
onLabelEdit: (labelId: string | null, labelName: string, labelColor: LabelColor) => void;
};
const LabelManager = ({ label, onLabelEdit }: Props) => {
const LabelManager = ({ labelColors, label, onLabelEdit }: Props) => {
console.log(label);
const [currentLabel, setCurrentLabel] = useState(label ? label.name : '');
const [currentColor, setCurrentColor] = useState<string | null>(label ? label.color : null);
const [currentColor, setCurrentColor] = useState<LabelColor | null>(label ? label.labelColor : null);
return (
<EditLabelForm>
<FieldLabel>Name</FieldLabel>
@ -26,14 +27,14 @@ const LabelManager = ({ label, onLabelEdit }: Props) => {
/>
<FieldLabel>Select a color</FieldLabel>
<div>
{Object.values(LabelColors).map(labelColor => (
{labelColors.map((labelColor: LabelColor) => (
<LabelBox
color={labelColor}
color={labelColor.colorHex}
onClick={() => {
setCurrentColor(labelColor);
}}
>
{labelColor === currentColor && <Checkmark color="#fff" size={12} />}
{currentColor && labelColor.id === currentColor.id && <Checkmark color="#fff" size={12} />}
</LabelBox>
))}
</div>

2
web/src/shared/components/PopupMenu/LabelManager.tsx
View File

@ -49,7 +49,7 @@ const LabelManager: React.FC<Props> = ({ labels, onLabelToggle, onLabelEdit, onL
</LabelIcon>
<CardLabel
key={label.labelId}
color={label.color}
color={label.labelColor.colorHex}
active={currentLabel === label.labelId}
onMouseEnter={() => {
setCurrentLabel(label.labelId);

43
web/src/shared/components/PopupMenu/PopupMenu.stories.tsx
View File

@ -28,13 +28,23 @@ const labelData = [
{
labelId: 'development',
name: 'Development',
color: LabelColors.BLUE,
active: true,
labelColor: {
id: '1',
name: 'white',
colorHex: LabelColors.BLUE,
position: 1,
},
active: false,
},
{
labelId: 'general',
name: 'General',
color: LabelColors.PINK,
labelColor: {
id: '1',
name: 'white',
colorHex: LabelColors.PINK,
position: 1,
},
active: false,
},
];
@ -75,13 +85,14 @@ const LabelManagerEditor = () => {
</Popup>
<Popup onClose={action('on close')} title="Edit label" tab={1}>
<LabelEditor
labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
label={labels.find(label => label.labelId === currentLabel) ?? null}
onLabelEdit={(_labelId, name, color) => {
setLabels(
produce(labels, draftState => {
const idx = labels.findIndex(label => label.labelId === currentLabel);
if (idx !== -1) {
draftState[idx] = { ...draftState[idx], name, color };
draftState[idx] = { ...draftState[idx], name, labelColor: color };
}
}),
);
@ -92,8 +103,9 @@ const LabelManagerEditor = () => {
<Popup onClose={action('on close')} title="Create new label" tab={2}>
<LabelEditor
label={null}
labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
onLabelEdit={(_labelId, name, color) => {
setLabels([...labels, { labelId: name, name, color, active: false }]);
setLabels([...labels, { labelId: name, name, labelColor: color, active: false }]);
setTab(0);
}}
/>
@ -141,7 +153,11 @@ export const LabelsLabelEditor = () => {
onClose={() => setPopupOpen(false)}
left={10}
>
<LabelEditor label={labelData[0]} onLabelEdit={action('label edit')} />
<LabelEditor
label={labelData[0]}
onLabelEdit={action('label edit')}
labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
/>
</PopupMenu>
)}
<button type="submit" onClick={() => setPopupOpen(true)}>
@ -239,7 +255,19 @@ export const DueDateManagerPopup = () => {
taskGroup: { name: 'General', taskGroupID: '1' },
name: 'Hello, world',
position: 1,
labels: [{ labelId: 'soft-skills', color: '#fff', active: true, name: 'Soft Skills' }],
labels: [
{
labelId: 'soft-skills',
labelColor: {
id: '1',
name: 'white',
colorHex: '#fff',
position: 1,
},
active: true,
name: 'Soft Skills',
},
],
description: 'hello!',
members: [
{ userID: '1', profileIcon: { bgColor: null, url: null, initials: null }, displayName: 'Jordan Knott' },
@ -325,4 +353,3 @@ export const MiniProfilePopup = () => {
</>
);
};

8
web/src/shared/components/PopupMenu/Styles.ts
View File

@ -207,22 +207,24 @@ export const FieldName = styled.input`
margin: 4px 0 12px;
width: 100%;
box-sizing: border-box;
border-radius: 3px;
display: block;
line-height: 20px;
margin-bottom: 12px;
padding: 8px 12px;
background: #262c49;
outline: none;
color: #c2c6dc;
border-radius: 3px;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-image: initial;
border-color: #414561;
font-size: 12px;
font-weight: 400;
color: #c2c6dc;
&:focus {
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
background: ${mixin.darken('#262c49', 0.15)};