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

frontend: layout / design tweaks

Browse source
This commit is contained in:
0x1eef 2024-01-11 01:04:51 -03:00
parent 6ae8f05ee3
commit 6479c6c1c9
7 changed files with 107 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
twenty-frontend/src/css/_global.scss
View file

@ -13,5 +13,4 @@ body .wrapper {
margin: 0;
padding: 0;
}
.w-85 { width: 85%; }
}

4
twenty-frontend/src/css/_layout.scss
View file

@ -22,3 +22,7 @@
.w-100 { width: 100%; }
.w-95 { width: 95%; }
.w-85 { width: 85%; }
.h-100 { height: 100%; }
.h-80 { height: 80%; }
.h-50 { height: 50%; }
.h-70 { height: 70%; }

7
twenty-frontend/src/css/_panels.scss
View file

@ -33,8 +33,8 @@
border-radius: 5px;
min-width: 120px;
text-align: center;
background: $secondary-color;
color: lighten($secondary-color, 15%);
background: $primary-color;
color: $secondary-color;
cursor: pointer;
opacity: 0.5;
}
@ -51,6 +51,9 @@
width: 100%;
.task.content {
padding: 10px;
ul {
padding: revert;
}
ul li {
line-height: 1.7em;
}

4
twenty-frontend/src/html/tasks/edit/index.html.erb
View file

@ -1,4 +1,4 @@
<div class="root align-center max-width">
<div class="react-mount edit-task"></div>
<div class="wrapper align-center max-width h-100">
<div class="react-mount edit-task h-100"></div>
<script src="/js/main/task/edit.js"></script>
</div>

4
twenty-frontend/src/html/tasks/new/index.html.erb
View file

@ -1,4 +1,4 @@
<div class="root align-center max-width">
<div class="react-mount new-task"></div>
<div class="wrapper align-center max-width h-100">
<div class="react-mount new-task h-100"></div>
<script src="/js/main/task/new.js"></script>
</div>

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

@ -6,6 +6,8 @@ import { useFindTask } from "/hooks/queries/useFindTask";
import { useProjects } from "/hooks/queries/useProjects";
import { Task, Project, TaskInput, Maybe } from "/types/schema";
import { rendermd } from "/lib/markdown-utils";
import { NavBar } from "/components/NavBar";
import classnames from "classnames";
const DEFAULT_TASK_CONTENT = [
@ -30,7 +32,7 @@ export function Task({ taskId }: { taskId?: number }) {
defaultValues: { projectId: 1 },
});
const [isEditable, setIsEditable] = useState<boolean>(!taskId);
const [createTask] = useCreateTask();
const createTask = useCreateTask();
const updateTask = useUpdateTask();
const { data: taskData, loading: findingTask } = useFindTask(Number(taskId));
const { data: projectsData, loading: findingProjects } = useProjects();
@ -64,77 +66,85 @@ export function Task({ taskId }: { taskId?: number }) {
}
return (
<form className="task" onSubmit={handleSubmit(onSave)}>
<div className="panel">
<div className="panel-header panel-tabs">
<ul className="tabs">
<li
className={classnames({ active: isEditable })}
onClick={() => setIsEditable(true)}
>
Write
</li>
<li
className={classnames({ active: !isEditable })}
onClick={() => setIsEditable(false)}
>
Preview
</li>
</ul>
</div>
<div className="panel-body">
<div>
<select
{...register("projectId")}
className="form"
value={projectId}
onChange={event => {
const v: string = event.target.value;
set("projectId", Number(v));
}}
>
{projects.map((project: Project, key: number) => {
return (
<option key={key} value={project.id}>
{project.name}
</option>
);
})}
</select>
</div>
<div>
<input
className="form"
type="text"
placeholder="Title"
defaultValue={task?.title}
{...register("title", { required: true })}
/>
</div>
{isEditable ? (
<>
<div className="row textarea">
<textarea
<div className="two-columns h-100">
<div className="column-1">
<NavBar />
</div>
<div className="column-2 h-100">
<form className="task h-100" onSubmit={handleSubmit(onSave)}>
<div className="panel h-100">
<h1>{task ? "Edit task" : "New task"}</h1>
<div className="panel-header panel-tabs">
<ul className="tabs">
<li
className={classnames({ active: isEditable })}
onClick={() => setIsEditable(true)}
>
Write
</li>
<li
className={classnames({ active: !isEditable })}
onClick={() => setIsEditable(false)}
>
Preview
</li>
</ul>
</div>
<div className="panel-body h-80">
<div>
<select
{...register("projectId")}
className="form"
placeholder="Add your description heren"
defaultValue={task?.content || DEFAULT_TASK_CONTENT}
{...register("content", { required: true })}
value={projectId}
onChange={event => {
const v: string = event.target.value;
set("projectId", Number(v));
}}
>
{projects.map((project: Project, key: number) => {
return (
<option key={key} value={project.id}>
{project.name}
</option>
);
})}
</select>
</div>
<div>
<input
className="form"
type="text"
placeholder="Title"
defaultValue={task?.title}
{...register("title", { required: true })}
/>
</div>
<div className="row">
<input className="form" type="submit" value="Save" />
</div>
</>
) : (
<div
className="task content"
dangerouslySetInnerHTML={{
__html: rendermd(content || task?.content),
}}
/>
)}
</div>
{isEditable ? (
<>
<div className="row textarea h-70">
<textarea
className="form h-100"
placeholder="Add your description heren"
defaultValue={task?.content || DEFAULT_TASK_CONTENT}
{...register("content", { required: true })}
/>
</div>
<div className="row">
<input className="form" type="submit" value="Save" />
</div>
</>
) : (
<div
className="task content h-50"
dangerouslySetInnerHTML={{
__html: rendermd(content || task?.content),
}}
/>
)}
</div>
</div>
</form>
</div>
</form>
</div>
);
}

17
twenty-frontend/src/js/hooks/mutations/useCreateTask.ts
View file

@ -1,4 +1,8 @@
import { CreateTaskPayload, MutationCreateTaskArgs } from "/types/schema";
import {
CreateTaskPayload,
MutationCreateTaskArgs,
TaskInput,
} from "/types/schema";
import { gql, useMutation } from "@apollo/client";
const GQL = gql`
@ -9,6 +13,15 @@ const GQL = gql`
}
`;
type TArgs = {
variables: { input: TaskInput };
};
export function useCreateTask() {
return useMutation<CreateTaskPayload, MutationCreateTaskArgs>(GQL);
const [create] = useMutation<CreateTaskPayload, MutationCreateTaskArgs>(GQL);
return ({ variables: { input }, ...rest }: TArgs) => {
const projectId = Number(input.projectId);
const variables = { input: { ...input, ...{ projectId } } };
return create({ variables, ...rest });
};
}