From 1f361fa76f8da7e21b32913c7ce94e67b1fbeb4f Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Sun, 20 Jun 2021 21:59:53 +0200
Subject: [PATCH] Style adjustments and bugfixes in the task form
---
.../components/forms/AssigneesForm/assignees-form.scss | 2 ++
client/src/components/forms/AssigneesForm/index.tsx | 2 +-
client/src/components/forms/ProjectForm/index.tsx | 4 ++--
client/src/components/forms/RequirementsForm/index.tsx | 2 +-
.../forms/RequirementsForm/requirements-form.scss | 2 ++
client/src/components/forms/TaskForm/index.tsx | 10 +++++-----
client/src/components/ui/Popup/popup.scss | 3 +--
7 files changed, 14 insertions(+), 11 deletions(-)
diff --git a/client/src/components/forms/AssigneesForm/assignees-form.scss b/client/src/components/forms/AssigneesForm/assignees-form.scss
index 66de42f..1c0ddd3 100644
--- a/client/src/components/forms/AssigneesForm/assignees-form.scss
+++ b/client/src/components/forms/AssigneesForm/assignees-form.scss
@@ -37,6 +37,8 @@
align-items: center;
font-size: 24px;
font-weight: s.$weight-bold;
+ height: calc(2em + 40px);
+ user-select: none;
}
}
}
diff --git a/client/src/components/forms/AssigneesForm/index.tsx b/client/src/components/forms/AssigneesForm/index.tsx
index 4a130b2..cbdeb6a 100644
--- a/client/src/components/forms/AssigneesForm/index.tsx
+++ b/client/src/components/forms/AssigneesForm/index.tsx
@@ -80,7 +80,7 @@ export default function AssigneesForm({ assignees, members, onNew, onDelete }: P
addNew && (
<Popup onClose={() => setAddNew(false)}>
<select onChange={(e) => setSelectedMember(e.target.value)}>
- <option value="">Please select a user</option>
+ <option value="" selected disabled hidden>Please select a user</option>
{
possibleMembers.map((member) => (
<option value={member.id} key={member.id}>{member.label}</option>
diff --git a/client/src/components/forms/ProjectForm/index.tsx b/client/src/components/forms/ProjectForm/index.tsx
index 6383c5a..e90180e 100644
--- a/client/src/components/forms/ProjectForm/index.tsx
+++ b/client/src/components/forms/ProjectForm/index.tsx
@@ -141,12 +141,12 @@ export default function ProjectForm({ project, onSubmit }: Props) {
status &&
<div className="field">
<label className="field-label" htmlFor="status">Status</label>
- <select id="status" defaultValue={project?.status} onChange={(e) => {
+ <select id="status" defaultValue={project?.status ?? ''} onChange={(e) => {
let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? undefined;
setStatus(currentStatus);
}
}>
- <option value="">Please choose a status</option>
+ <option value="" disabled hidden>Please choose a status</option>
{
allStatus.map((s) => (
<option value={s} key={s}>{s}</option>
diff --git a/client/src/components/forms/RequirementsForm/index.tsx b/client/src/components/forms/RequirementsForm/index.tsx
index 07235a3..c074075 100644
--- a/client/src/components/forms/RequirementsForm/index.tsx
+++ b/client/src/components/forms/RequirementsForm/index.tsx
@@ -76,7 +76,7 @@ export default function RequirementsForm({ roles, requirements, onNew, onDelete
addNew && (
<Popup onClose={() => setAddNew(false)}>
<select onChange={(e) => setSelectedRole(e.target.value)}>
- <option value="">Please select a role</option>
+ <option value="" selected disabled hidden>Please select a role</option>
{
possibleRoles.map((role) => (
<option value={role.id} key={role.id}>{role.label}</option>
diff --git a/client/src/components/forms/RequirementsForm/requirements-form.scss b/client/src/components/forms/RequirementsForm/requirements-form.scss
index e7dcfcb..6e3aca9 100644
--- a/client/src/components/forms/RequirementsForm/requirements-form.scss
+++ b/client/src/components/forms/RequirementsForm/requirements-form.scss
@@ -37,6 +37,8 @@
align-items: center;
font-size: 24px;
font-weight: s.$weight-bold;
+ height: calc(2em + 40px);
+ user-select: none;
}
}
}
diff --git a/client/src/components/forms/TaskForm/index.tsx b/client/src/components/forms/TaskForm/index.tsx
index 890d4ad..5de3fd1 100644
--- a/client/src/components/forms/TaskForm/index.tsx
+++ b/client/src/components/forms/TaskForm/index.tsx
@@ -185,11 +185,11 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
<label className="field-label" htmlFor="status">
Priority
</label>
- <select defaultValue={priority} onChange={(e) => {
+ <select defaultValue={priority ?? ''} onChange={(e) => {
let currentPriority = Object.values(Priority).find(s => s === e.target.value) ?? undefined;
setPriority(currentPriority);
}}>
- <option value={''}>Please choose a priority</option>
+ <option value="" disabled hidden>Please choose a priority</option>
{
allPriorities.map((priority) => (
<option value={priority} key={priority}>{priority}</option>
@@ -206,16 +206,16 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
</div>
<div className="col">
{
- status && (
+ task && (
<div className="field">
<label className="field-label" htmlFor="status">
Status
</label>
- <select defaultValue={status} id="status" onChange={(e) => {
+ <select defaultValue={status ?? ''} id="status" onChange={(e) => {
let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? undefined;
setStatus(currentStatus);
}}>
- <option value={''}>Please choose a status</option>
+ <option value="" disabled hidden>Please choose a status</option>
{
allStatus.map((status) => (
<option value={status} key={status}>{status}</option>
diff --git a/client/src/components/ui/Popup/popup.scss b/client/src/components/ui/Popup/popup.scss
index bf6e837..8293f07 100644
--- a/client/src/components/ui/Popup/popup.scss
+++ b/client/src/components/ui/Popup/popup.scss
@@ -14,6 +14,7 @@
align-items: center;
.popup {
+ will-change: transform;
animation: moveup 300ms ease;
max-height: 100vh;
overflow: auto;
@@ -44,7 +45,6 @@
transform: translateY(50px);
opacity: 0.5;
}
-
to {
transform: translateY(0);
opacity: 1;
@@ -55,7 +55,6 @@
from {
opacity: 0;
}
-
to {
opacity: 1;
}
--
GitLab