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-bg-secondary {
|
||||||
&:hover {
|
&:hover {
|
||||||
@extend .no-underline;
|
@extend .no-underline;
|
||||||
@extend .p-3;
|
|
||||||
@extend .rounded;
|
@extend .rounded;
|
||||||
@extend .bg-secondary;
|
@extend .bg-secondary;
|
||||||
@extend .text-primary;
|
@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 React, { useState } from "react";
|
||||||
import { Maybe } from "/types/schema";
|
import { Maybe } from "/types/schema";
|
||||||
import classnames from "classnames";
|
|
||||||
|
|
||||||
const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"];
|
const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"];
|
||||||
const ACTIVE_CLASSNAMES = [
|
const ACTIVE_CLASSNAMES = [
|
||||||
|
|
|
@ -73,26 +73,6 @@ export function Task({ taskId }: { taskId?: number }) {
|
||||||
<div className="w-3/4">
|
<div className="w-3/4">
|
||||||
<h1>{task ? "Edit task" : "New task"}</h1>
|
<h1>{task ? "Edit task" : "New task"}</h1>
|
||||||
<form onSubmit={handleSubmit(onSave)}>
|
<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
|
<select
|
||||||
{...register("projectId")}
|
{...register("projectId")}
|
||||||
className="p-3 w-3/4 mb-3"
|
className="p-3 w-3/4 mb-3"
|
||||||
|
@ -117,6 +97,38 @@ export function Task({ taskId }: { taskId?: number }) {
|
||||||
defaultValue={task?.title}
|
defaultValue={task?.title}
|
||||||
{...register("title", { required: true })}
|
{...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 ? (
|
{isEditable ? (
|
||||||
<>
|
<>
|
||||||
<textarea
|
<textarea
|
||||||
|
@ -125,7 +137,7 @@ export function Task({ taskId }: { taskId?: number }) {
|
||||||
{...register("content", { required: true })}
|
{...register("content", { required: true })}
|
||||||
/>
|
/>
|
||||||
<input
|
<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"
|
type="submit"
|
||||||
value="Save"
|
value="Save"
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue