frontend: improve Task.tsx UI
This commit is contained in:
parent
9cfab64412
commit
046f5b9315
3 changed files with 44 additions and 23 deletions
|
@ -20,7 +20,6 @@ body {
|
|||
.hover-bg-secondary {
|
||||
&:hover {
|
||||
@extend .no-underline;
|
||||
@extend .p-3;
|
||||
@extend .rounded;
|
||||
@extend .bg-secondary;
|
||||
@extend .text-primary;
|
||||
|
@ -30,3 +29,14 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active-item {
|
||||
@extend .no-underline;
|
||||
@extend .rounded;
|
||||
@extend .bg-secondary;
|
||||
@extend .text-primary;
|
||||
a {
|
||||
@extend .text-primary;
|
||||
@extend .no-underline;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useState } from "react";
|
||||
import { Maybe } from "/types/schema";
|
||||
import classnames from "classnames";
|
||||
|
||||
const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"];
|
||||
const ACTIVE_CLASSNAMES = [
|
||||
|
|
|
@ -73,26 +73,6 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
<div className="w-3/4">
|
||||
<h1>{task ? "Edit task" : "New task"}</h1>
|
||||
<form onSubmit={handleSubmit(onSave)}>
|
||||
<ul className="flex w-3/4 mb-3">
|
||||
<li className={classnames("tab", { active: isEditable })}>
|
||||
<a
|
||||
className="no-underline"
|
||||
href="#"
|
||||
onClick={() => setIsEditable(true)}
|
||||
>
|
||||
Editor
|
||||
</a>
|
||||
</li>
|
||||
<li className={classnames("tab", { active: !isEditable })}>
|
||||
<a
|
||||
className="no-underline"
|
||||
href="#"
|
||||
onClick={() => setIsEditable(false)}
|
||||
>
|
||||
Preview
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<select
|
||||
{...register("projectId")}
|
||||
className="p-3 w-3/4 mb-3"
|
||||
|
@ -117,6 +97,38 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
defaultValue={task?.title}
|
||||
{...register("title", { required: true })}
|
||||
/>
|
||||
<ul className="flex w-3/4">
|
||||
<li
|
||||
className={classnames({
|
||||
"active-item": isEditable,
|
||||
"text-secondary": !isEditable,
|
||||
"hover-bg-secondary": !isEditable,
|
||||
})}
|
||||
>
|
||||
<a
|
||||
className="block p-2 text-smaller no-underline"
|
||||
href="#"
|
||||
onClick={() => setIsEditable(true)}
|
||||
>
|
||||
Editor
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className={classnames({
|
||||
"active-item": !isEditable,
|
||||
"text-primary": isEditable,
|
||||
"hover-bg-secondary": isEditable,
|
||||
})}
|
||||
>
|
||||
<a
|
||||
className="block p-2 text-smaller no-underline"
|
||||
href="#"
|
||||
onClick={() => setIsEditable(false)}
|
||||
>
|
||||
Preview
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{isEditable ? (
|
||||
<>
|
||||
<textarea
|
||||
|
@ -125,7 +137,7 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
{...register("content", { required: true })}
|
||||
/>
|
||||
<input
|
||||
className="cursor-pointer bg-secondary text-primary p-3 rounded font-bold"
|
||||
className="cursor-pointer block bg-secondary text-primary p-3 rounded font-bold"
|
||||
type="submit"
|
||||
value="Save"
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue