webskel/dolphins7.skeleton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: improve 'New task' page

Browse source
This commit is contained in:
0x1eef 2024-01-13 20:21:03 -03:00
parent 024728c2eb
commit 4ea61b2c89
3 changed files with 87 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
twenty-frontend/src/js/components/Group.tsx
View file

@ -30,10 +30,19 @@ export function Group({ groupName, getItems }: Props) {
const classes = {};
const editHref = `/tasks/edit#id=${task.id}`;
return (
<li className={classnames("flex flex-row p-3 secondary-hover w-full", classes)} key={key}>
<li
className={classnames(
"flex flex-row p-3 secondary-hover w-full",
classes,
)}
key={key}
>
<div className="flex flex-wrap w-3/4">
<div className="w-full">
<a className="no-underline text-accent block h-14" href={editHref}>
<a
className="no-underline text-accent block h-14"
href={editHref}
>
<span className="block w-full">{task.title}</span>
<span className="block w-full text-smaller text-secondary">
{datetime.toFormat("dd LLL, yyyy")} at{" "}
@ -63,7 +72,8 @@ export function Group({ groupName, getItems }: Props) {
<br />
<a className="w-100" href="/tasks/new">
Add a task
</a> .
</a>{" "}
.
</p>
)}
</div>

14
twenty-frontend/src/js/components/NavBar.tsx
View file

@ -9,7 +9,11 @@ const ACTIVE_CLASSNAMES = [
"bg-secondary",
"text-primary",
].join(" ");
const INACTIVE_CLASSNAMES = [...BASE_CLASSNAMES, "text-accent", "secondary-hover"].join(" ");
const INACTIVE_CLASSNAMES = [
...BASE_CLASSNAMES,
"text-accent",
"secondary-hover",
].join(" ");
type Item = { text: string; href: string };
type Bar = Record<string, Array<Item>>;
@ -42,13 +46,17 @@ export function NavBar() {
const items = bar[key];
return (
<>
<h1>{key}</h1>
<h3>{key}</h3>
<ul>
{...items.flatMap(item => {
return (
<li>
<a
className={activeItem == item ? ACTIVE_CLASSNAMES : INACTIVE_CLASSNAMES}
className={
activeItem == item
? ACTIVE_CLASSNAMES
: INACTIVE_CLASSNAMES
}
href={item.href}
>
{item.text}

40
twenty-frontend/src/js/components/Task.tsx
View file

@ -72,26 +72,30 @@ export function Task({ taskId }: { taskId?: number }) {
</div>
<div className="w-3/4">
<h1>{task ? "Edit task" : "New task"}</h1>
<form className="group h-100" onSubmit={handleSubmit(onSave)}>
<div className="group-name">
<ul className="tabs">
<form onSubmit={handleSubmit(onSave)}>
<ul className="flex w-3/4 mb-3">
<li className={classnames("tab", { active: isEditable })}>
<a href="#" onClick={() => setIsEditable(true)}>
<a
className="no-underline"
href="#"
onClick={() => setIsEditable(true)}
>
Editor
</a>
</li>
<li className={classnames("tab", { active: !isEditable })}>
<a href="#" onClick={() => setIsEditable(false)}>
<a
className="no-underline"
href="#"
onClick={() => setIsEditable(false)}
>
Preview
</a>
</li>
</ul>
</div>
<div className="group-items h-80">
<div>
<select
{...register("projectId")}
className="form"
className="p-3 w-3/4 mb-3"
value={projectId}
onChange={event => {
const v: string = event.target.value;
@ -106,28 +110,25 @@ export function Task({ taskId }: { taskId?: number }) {
);
})}
</select>
</div>
<div>
<input
className="form"
className="p-3 flex w-3/4 mb-3"
type="text"
placeholder="Title"
defaultValue={task?.title}
{...register("title", { required: true })}
/>
</div>
{isEditable ? (
<>
<div className="h-96 w-3/4">
<textarea
className="w-full h-full"
className="p-3 h-72 flex w-3/4 mb-3"
defaultValue={task?.content || DEFAULT_TASK_CONTENT}
{...register("content", { required: true })}
/>
</div>
<div className="row">
<input className="form" type="submit" value="Save" />
</div>
<input
className="cursor-pointer bg-secondary text-primary p-3 rounded font-bold"
type="submit"
value="Save"
/>
</>
) : (
<div
@ -137,7 +138,6 @@ export function Task({ taskId }: { taskId?: number }) {
}}
/>
)}
</div>
</form>
</div>
</div>