Skip to content
Snippets Groups Projects
Commit 91567604 authored by Bernard Roland (Student Com20)'s avatar Bernard Roland (Student Com20)
Browse files

Merge branch 'frontend-devel'

parents f7b2064c 5568c805
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 99 additions and 67 deletions
client/src/components/forms/AssigneesForm/assignees-form.scss
+ 1
− 1
View file @ 91567604
......@@ -6,7 +6,7 @@
width: 100%;
padding: 20px;
border-radius: 15px;
background: s.$gray;
background: s.$background-white;
position: relative;
margin: 10px 0;
......
client/src/components/forms/AssigneesForm/index.tsx
+ 18
− 14
View file @ 91567604
......@@ -6,39 +6,45 @@ import { TaskAssignment } from "adapters/task";
import Popup from 'components/ui/Popup';
import Button from 'components/ui/Button';
import { PossibleMember } from "components/forms/TaskForm";
import TimeInput from "components/ui/TimeInput";
import './assignees-form.scss';
interface Props {
assignees: TaskAssignment[];
setAssignees: Function;
members: PossibleMember[]
onNew: (req: TaskAssignment) => any,
onDelete: (req: string) => any
}
export default function AssigneesForm({ assignees, setAssignees, members }: Props) {
export default function AssigneesForm({ assignees, members, onNew, onDelete }: Props) {
const [possibleMembers, setPossibleMembers] = useState<PossibleMember[]>([]);
const [addNew, setAddNew] = useState(false);
const [selectedMember, setSelectedMember] = useState('');
const [selectedTime, setSelectedTime] = useState('');
const [selectedTime, setSelectedTime] = useState(Number.NaN);
useEffect(() => {
setPossibleMembers(members.filter(member => !assignees.find(r => r.user === member.id)));
}, [members, assignees, setAssignees])
}, [members, assignees])
const addAssignee = useCallback((e) => {
e.preventDefault();
if (selectedTime && selectedMember) {
setAssignees((state: any) => [...state, { user: selectedMember, time: selectedTime }]);
if (!Number.isNaN(selectedTime) && selectedMember) {
onNew({
user: selectedMember,
time: selectedTime * 60,
finished: false,
});
setAddNew(false);
setSelectedMember('');
setSelectedTime('');
setSelectedTime(Number.NaN);
}
}, [setAssignees, selectedMember, selectedTime])
}, [selectedMember, selectedTime, onNew])
const removeAssignee = useCallback((member: string) => {
setAssignees((state: any) => state.filter((r: any) => r.user !== member));
}, [setAssignees])
onDelete(member);
}, [onDelete])
return (
<>
......@@ -78,10 +84,8 @@ export default function AssigneesForm({ assignees, setAssignees, members }: Prop
))
}
</select>
<div className="time-field">
<input type="number" min={1} onChange={(e) => setSelectedTime(e.target.value)} />
</div>
<Button type="submit" onClick={addAssignee} className="Expanded">
<TimeInput onChange={value => setSelectedTime(value)} />
<Button type="submit" onClick={addAssignee} className="expanded">
Add the assignee
</Button>
</Popup>
......
client/src/components/forms/RequirementsForm/index.tsx
+ 15
− 13
View file @ 91567604
......@@ -6,20 +6,22 @@ import { TaskRequirement } from 'adapters/task';
import { PossibleRole } from 'components/forms/TaskForm';
import Popup from 'components/ui/Popup';
import Button from 'components/ui/Button';
import TimeInput from 'components/ui/TimeInput'
import './requirements-form.scss';
interface Props {
roles: PossibleRole[],
requirements: TaskRequirement[],
setRequirements: Function
onNew: (req: TaskRequirement) => any,
onDelete: (req: string) => any
}
export default function RequirementsForm({ roles, requirements, setRequirements }: Props) {
export default function RequirementsForm({ roles, requirements, onNew, onDelete }: Props) {
const [possibleRoles, setPossibleRoles] = useState<PossibleRole[]>([]);
const [addNew, setAddNew] = useState(false);
const [selectedRole, setSelectedRole] = useState('');
const [selectedTime, setSelectedTime] = useState('');
const [selectedTime, setSelectedTime] = useState(Number.NaN);
useEffect(() => {
setPossibleRoles(roles.filter(role => !requirements.find(r => r.role === role.id)));
......@@ -27,17 +29,20 @@ export default function RequirementsForm({ roles, requirements, setRequirements
const addRequirement = useCallback((e) => {
e.preventDefault();
if (selectedTime && selectedRole) {
setRequirements((state: any) => [...state, { role: selectedRole, time: selectedTime }]);
if (!Number.isNaN(selectedTime) && selectedRole) {
onNew({
role: selectedRole,
time: selectedTime * 60,
});
setAddNew(false);
setSelectedRole('');
setSelectedTime('');
setSelectedTime(Number.NaN);
}
}, [selectedRole, selectedTime, setRequirements])
}, [selectedRole, selectedTime, onNew])
const removeRequirement = useCallback((role: string) => {
setRequirements((state: any) => state.filter((r: any) => r.role !== role));
}, [setRequirements])
onDelete(role);
}, [onDelete])
return (
<>
......@@ -75,14 +80,11 @@ export default function RequirementsForm({ roles, requirements, setRequirements
))
}
</select>
<div className="time-field">
<input type="number" min={1} onChange={(e) => setSelectedTime(e.target.value)} />
</div>
<TimeInput onChange={value => setSelectedTime(value)} />
<Button type="submit" onClick={addRequirement} className="expanded">
Create new requirement
</Button>
</Popup>
)
}
</>
......
client/src/components/forms/RequirementsForm/requirements-form.scss
+ 1
− 1
View file @ 91567604
......@@ -6,7 +6,7 @@
width: 100%;
padding: 20px;
border-radius: 15px;
background: s.$gray;
background: s.$background-white;
position: relative;
margin: 10px 0;
......
client/src/components/forms/RoleForm/role-form.scss
+ 2
− 2
View file @ 91567604
......@@ -6,7 +6,7 @@
flex-direction: column;
.role-item {
background: s.$light;
background: s.$background-light;
border-radius: 25px;
font-size: 18px;
width: 100%;
......@@ -81,7 +81,7 @@
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: s.$white;
background: s.$background-white;
border-radius: 50%;
opacity: 0;
transition: 300ms ease;
......
client/src/components/forms/TaskForm/index.tsx
+ 12
− 2
View file @ 91567604
......@@ -243,7 +243,12 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
<div className="col">
{ allRoles
? allRoles.length > 0 && (
<RequirementsForm setRequirements={setRequirements} roles={allRoles} requirements={requirements} />
<RequirementsForm
roles={allRoles}
requirements={requirements}
onNew={req => setRequirements([ ...requirements, req ])}
onDelete={role => setRequirements(requirements.filter(req => req.role !== role))}
/>
)
: <LoadingScreen />
}
......@@ -251,7 +256,12 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
<div className="col">
{ allMembers
? allMembers.length > 0 && (
<AssigneesForm members={allMembers} setAssignees={setAssignees} assignees={assignees} />
<AssigneesForm
members={allMembers}
assignees={assignees}
onNew={mem => setAssignees([ ...assignees, mem ])}
onDelete={user => setAssignees(assignees.filter(ass => ass.user !== user))}
/>
)
: <LoadingScreen />
}
......
client/src/components/forms/TaskForm/task-form.scss
+ 12
− 0
View file @ 91567604
@use 'styles/settings' as s;
.task-form {
.emoji-mart {
width: 100% !important;
height: 340px;
border-radius: 15px;
overflow: hidden;
background: s.$background-white;
.emoji-mart-scroll {
height: 247.5px;
......@@ -17,6 +20,15 @@
.emoji-mart-emoji span {
cursor: pointer;
}
.emoji-mart-category-label span {
background: rgba(s.$background-white-rgb, 0.95);
color: s.$text;
}
.emoji-mart-category .emoji-mart-emoji:hover::before {
background: s.$background-input;
}
}
.current-icon {
......
client/src/components/forms/UserForm/user-form.scss
+ 1
− 5
View file @ 91567604
......@@ -27,13 +27,9 @@
width: 100%;
height: 140px;
margin-bottom: 20px;
background: rgba(0, 0, 0, 0.025);
background: s.$background-input;
font-size: 18px;
&:hover {
background: rgba(0, 0, 0, 0.04);
}
@include mx.breakpoint(large) {
margin-top: 30px;
}
......
client/src/components/forms/form.scss
+ 4
− 14
View file @ 91567604
......@@ -49,19 +49,9 @@ form {
transform: translateY(-50%);
}
.time-field {
margin: 20px 0;
display: flex;
align-items: baseline;
&:after {
content: 'min';
margin-left: 10px;
}
}
select,
input {
input,
textarea {
width: 100%;
font-size: 16px;
border: none;
......@@ -71,10 +61,10 @@ form {
position: relative;
display: block;
border-radius: 15px;
color: s.$body-color;
color: s.$text;
font-weight: s.$weight-regular;
font-family: s.$body-font;
background: rgba(0, 0, 0, 0.025);
background: s.$background-input;
}
h2 {
......
client/src/components/graphs/BarChart/bar-chart.scss
+ 3
− 3
View file @ 91567604
......@@ -5,7 +5,7 @@
height: 180px;
width: 100%;
padding: 50px;
background: s.$white;
background: s.$background-white;
border-radius: 10px;
.error-screen {
......@@ -30,7 +30,7 @@
bottom: 0;
left: 0;
height: 24px;
background: s.$light;
background: s.$background-light;
width: 100%;
z-index: 0;
border-radius: 5px;
......@@ -47,7 +47,7 @@
transform: translate(-50%, -75%);
padding: 10px;
background: s.$white;
color: s.$body-color;
color: s.$black;
border-radius: 5px;
display: block;
visibility: hidden;
......
client/src/components/graphs/CircularProgress/circular-progress.scss
+ 1
− 1
View file @ 91567604
......@@ -44,7 +44,7 @@
circle {
fill: none;
stroke: #F3F3F3;
stroke: s.$background;
stroke-width: 8;
}
}
......
client/src/components/graphs/LinearProgress/linear-progress.scss
+ 1
− 1
View file @ 91567604
......@@ -3,7 +3,7 @@
.linear-progress {
width: 120px;
background: s.$light;
background: s.$background;
position: relative;
height: 10px;
border-radius: 5px;
......
client/src/components/helpers/Filter/filter.scss
+ 2
− 0
View file @ 91567604
......@@ -23,6 +23,8 @@
outline: none;
border-radius: 15px;
box-shadow: 0 0 15px rgba(s.$black, 0.05);
background: s.$background-white;
color: s.$text;
}
label {
position: absolute;
......
client/src/components/layout/CommentList/comment-list.scss
+ 4
− 2
View file @ 91567604
@use 'styles/settings.scss'as s;
@use 'styles/settings.scss' as s;
.comment-list {
.comment-container {
......@@ -16,6 +17,7 @@
position: relative;
label {
z-index: 10;
position: absolute;
left: 30px;
top: 0;
......@@ -40,4 +42,4 @@
transform: translateY(50%);
}
}
}
\ No newline at end of file
}
client/src/components/layout/Page/page.scss
+ 2
− 1
View file @ 91567604
@use 'styles/settings' as s;
@use 'styles/mixins' as mx;
body {
......@@ -12,7 +13,7 @@ body {
max-width: 1540px;
min-height: 100vh;
margin: 0 auto;
background: rgba(255, 255, 255, 0.5);
background: rgba(s.$background-white-rgb, 0.5);
padding-bottom: 80px;
@include mx.breakpoint(xlarge) {
......
client/src/components/layout/ProjectGrid/project-grid.scss
+ 1
− 1
View file @ 91567604
......@@ -21,7 +21,7 @@
cursor: pointer;
a {
color: s.$body-color;
color: s.$text;
}
}
......
client/src/components/layout/ProjectsSlider/projects-slider.scss
+ 14
− 1
View file @ 91567604
......@@ -16,7 +16,7 @@
cursor: pointer;
position: absolute;
opacity: 0.75;
background-color: s.$light;
background-color: s.$background-light;
width: 50px;
height: 100px;
border-radius: 25px;
......@@ -55,5 +55,18 @@
width: calc(33.3% - 24px);
}
}
@include mx.breakpoint(large) {
padding: 30px 90px;
margin: -30px -90px;
.prev-button {
left: 70px;
}
.next-button {
right: 70px;
}
}
}
client/src/components/layout/TaskList/task-list.scss
+ 2
− 2
View file @ 91567604
......@@ -12,9 +12,9 @@
display: flex;
justify-content: center;
align-items: center;
background: s.$white;
background: s.$background-white;
font-weight: s.$weight-semi-bold;
color: s.$body-color;
color: s.$text;
font-size: 36px;
border-radius: 15px;
cursor: pointer;
......
client/src/components/layout/UserList/user-list.scss
+ 1
− 1
View file @ 91567604
......@@ -8,7 +8,7 @@
display: flex;
justify-content: center;
align-items: center;
background: s.$white;
background: s.$background-white;
font-weight: s.$weight-semi-bold;
font-size: 36px;
border-radius: 15px;
......
client/src/components/navigation/Dropdown/dropdown.scss
+ 2
− 2
View file @ 91567604
......@@ -37,7 +37,7 @@
bottom: 0;
left: 0;
transform: translateY(75%);
background: s.$white;
background: s.$background-white;
z-index: 2000;
border-radius: 5px;
white-space: nowrap;
......@@ -53,7 +53,7 @@
.dropdown-item {
padding: 10px 20px;
display: block;
color: s.$body-color;
color: s.$text;
border-radius: 5px;
min-width: 100px;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment