style: page detail (#1030)

* style: page detail header styling

* style: page detail ui

* style: page block, create block styling
This commit is contained in:
Anmol Singh Bhatia 2023-05-11 18:03:37 +05:30 committed by GitHub
parent 1a534a3c19
commit 44d49b5500
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 386 additions and 285 deletions

View File

@ -0,0 +1,113 @@
import React, { KeyboardEventHandler, useCallback, useEffect, useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
// react-hook-form
import { useForm } from "react-hook-form";
// services
import pagesService from "services/pages.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { TextArea } from "components/ui";
// types
import { IPageBlock } from "types";
// fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
const defaultValues = {
name: "",
};
export const CreateBlock = () => {
const [blockTitle, setBlockTitle] = useState("");
const router = useRouter();
const { workspaceSlug, projectId, pageId } = router.query;
const { setToastAlert } = useToast();
const {
handleSubmit,
register,
control,
watch,
setValue,
setFocus,
reset,
formState: { isSubmitting },
} = useForm<IPageBlock>({
defaultValues,
});
const createPageBlock = async () => {
if (!workspaceSlug || !projectId || !pageId) return;
await pagesService
.createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
name: watch("name"),
})
.then((res) => {
mutate<IPageBlock[]>(
PAGE_BLOCKS_LIST(pageId as string),
(prevData) => [...(prevData as IPageBlock[]), res],
false
);
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Page could not be created. Please try again.",
});
});
reset();
};
const handleKeyDown = (e: any) => {
const keyCombination =
((e.ctrlKey || e.metaKey) && e.key === "Enter") || (e.shiftKey && e.key === "Enter");
if (e.key === "Enter" && !keyCombination) {
if (watch("name") && watch("name") !== "") {
e.preventDefault();
createPageBlock();
reset();
}
}
};
return (
<div className="relative">
<form
className="flex flex-col items-center justify-between rounded border-2 border-brand-base p-2"
onSubmit={handleSubmit(createPageBlock)}
>
<div className="flex min-h-[75px] w-full">
<TextArea
id="name"
name="name"
placeholder="Title"
register={register}
className="min-h-10 block max-h-24 w-full resize-none overflow-hidden border-none bg-transparent px-1 py-1 text-sm font-medium"
role="textbox"
onKeyDown={handleKeyDown}
maxLength={255}
/>
</div>
<div className="flex w-full items-center justify-end gap-2 p-1">
<button type="submit">
<PaperAirplaneIcon className="h-5 w-5 text-brand-base" />
</button>
</div>
</form>
</div>
);
};

View File

@ -18,7 +18,7 @@ import useToast from "hooks/use-toast";
// components
import { GptAssistantModal } from "components/core";
// ui
import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
import { Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
// types
import { IPageBlock } from "types";
// fetch-keys
@ -253,17 +253,17 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
return (
<div className="relative">
<form
className="divide-y divide-brand-base rounded-[10px] border border-brand-base shadow"
className="divide-y divide-brand-base rounded border border-brand-base shadow"
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
>
<div className="pt-2">
<div className="flex justify-between">
<Input
<TextArea
id="name"
name="name"
placeholder="Title"
register={register}
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
className="min-h-10 font medium block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base"
autoComplete="off"
maxLength={255}
/>

View File

@ -7,3 +7,4 @@ export * from "./pages-view";
export * from "./single-page-block";
export * from "./single-page-detailed-item";
export * from "./single-page-list-item";
export * from "./create-block";

View File

@ -20,7 +20,7 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
import { GptAssistantModal } from "components/core";
import { CreateUpdateBlockInline } from "components/pages";
// ui
import { CustomMenu } from "components/ui";
import { CustomMenu, TextArea } from "components/ui";
// icons
import { LayerDiagonalIcon } from "components/icons";
import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
@ -274,12 +274,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
{(provided, snapshot) => (
<>
{createBlockForm ? (
<div
className="mb-4 pt-4"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<CreateUpdateBlockInline
handleAiAssistance={handleAiAssistance}
handleClose={() => setCreateBlockForm(false)}
@ -290,15 +285,15 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</div>
) : (
<div
className={`group relative text-brand-secondary ${
snapshot.isDragging ? "rounded-[10px] bg-brand-surface-2 p-6 shadow" : ""
className={`group relative w-full rounded bg-brand-surface-2 text-brand-secondary ${
snapshot.isDragging ? "bg-brand-base p-4 shadow" : ""
}`}
ref={provided.innerRef}
{...provided.draggableProps}
>
<button
type="button"
className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
className="absolute top-4 -left-0 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
{...provided.dragHandleProps}
>
<EllipsisVerticalIcon className="h-[18px]" />
@ -306,12 +301,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</button>
<div
ref={actionSectionRef}
className={`absolute top-4 right-0 hidden items-center gap-2 pl-4 group-hover:!flex ${
className={`absolute top-4 right-2 hidden items-center gap-2 bg-brand-surface-2 pl-4 group-hover:!flex ${
isMenuActive ? "!flex" : ""
}`}
>
{block.issue && block.sync && (
<div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs">
<div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs">
{isSyncing ? (
<ArrowPathIcon className="h-3 w-3 animate-spin" />
) : (
@ -322,8 +317,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
)}
<button
type="button"
className={`flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
iAmFeelingLucky ? "cursor-wait bg-brand-surface-2" : ""
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
iAmFeelingLucky ? "cursor-wait" : ""
}`}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
@ -338,7 +333,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</button>
<button
type="button"
className="-mr-2 flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2"
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
onClick={() => setGptAssistantModal((prevData) => !prevData)}
>
<SparklesIcon className="h-4 w-4" />
@ -346,7 +341,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</button>
<button
type="button"
className="-mr-2 flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2"
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
onClick={() => setCreateBlockForm(true)}
>
<PencilIcon className="h-3.5 w-3.5" />
@ -354,7 +349,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
<CustomMenu
customButton={
<button
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded bg-brand-surface-1 px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-1"
onClick={() => setIsMenuActive(!isMenuActive)}
>
<BoltIcon className="h-4.5 w-3.5" />
@ -392,16 +387,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</CustomMenu.MenuItem>
</CustomMenu>
</div>
<div
className={`flex items-start gap-2 ${
snapshot.isDragging ? "" : "border-brand-base py-4 [&:not(:last-child)]:border-b"
}`}
>
<div className={`flex items-start gap-2 px-3 ${snapshot.isDragging ? "" : "py-4"}`}>
<div
className="w-full cursor-pointer overflow-hidden break-all px-4"
onClick={() => setCreateBlockForm(true)}
>
<div className="flex">
<div className="flex items-center">
{block.issue && (
<div className="mr-1.5 flex">
<Link
@ -414,9 +405,11 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</Link>
</div>
)}
<h3 className="max-w-[1000px] overflow-hidden text-sm text-brand-base">
{block.name}
</h3>
<TextArea
name="blockName"
value={block.name}
className="min-h-5 block w-full resize-none overflow-hidden border-none bg-transparent px-0 py-0 text-sm text-brand-base"
/>
</div>
{block?.description_stripped.length > 0 && (
<p className="mt-3 h-5 truncate text-sm font-normal text-brand-secondary">

View File

@ -25,6 +25,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
// components
import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
import { CreateLabelModal } from "components/labels";
import { CreateBlock } from "components/pages/create-block";
// ui
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
import { CustomSearchSelect, Loader, PrimaryButton, TextArea, Tooltip } from "components/ui";
@ -287,18 +288,6 @@ const SinglePage: NextPage = () => {
});
}, [reset, pageDetails]);
useEffect(() => {
const openCreateBlockForm = (e: KeyboardEvent) => {
if (e.shiftKey && e.key === "Enter") handleNewBlock();
};
window.addEventListener("keydown", openCreateBlockForm);
return () => {
window.removeEventListener("keydown", openCreateBlockForm);
};
}, [handleNewBlock, createBlockForm]);
return (
<ProjectAuthorizationWrapper
meta={{
@ -312,17 +301,33 @@ const SinglePage: NextPage = () => {
}
>
{pageDetails ? (
<div className="space-y-4 p-4">
<div className="flex items-center justify-between gap-2 px-3">
<div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
<div className="h-full w-full overflow-y-auto">
<div className="flex items-center justify-between gap-2">
<div className="flex w-full flex-col gap-2">
<div className="flex w-full items-center gap-2">
<button
type="button"
className="flex items-center gap-2 text-sm text-brand-secondary"
onClick={() => router.back()}
>
<ArrowLeftIcon className="h-4 w-4" />
Back
</button>
<div className="flex flex-wrap gap-1">
<TextArea
id="name"
name="name"
placeholder="Page Title"
value={watch("name")}
onBlur={handleSubmit(updatePage)}
onChange={(e) => setValue("name", e.target.value)}
required={true}
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
role="textbox"
/>
</div>
<div className="flex w-full flex-wrap gap-1">
{pageDetails.labels.length > 0 ? (
<>
{pageDetails.labels.map((labelId) => {
@ -360,7 +365,7 @@ const SinglePage: NextPage = () => {
customButton={
<button
type="button"
className="flex items-center gap-1 rounded-md bg-brand-surface-2 p-1.5 text-xs"
className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
>
<PlusIcon className="h-3.5 w-3.5" />
</button>
@ -377,7 +382,7 @@ const SinglePage: NextPage = () => {
customButton={
<button
type="button"
className="flex items-center gap-1 rounded-md bg-brand-surface-2 px-3 py-1.5 text-xs"
className="flex items-center gap-1 rounded-sm bg-brand-surface-2 px-3 py-1.5 text-xs"
>
<PlusIcon className="h-3 w-3" />
Add label
@ -405,6 +410,8 @@ const SinglePage: NextPage = () => {
/>
)}
</div>
</div>
<div className="flex items-center">
<div className="flex items-center gap-6 text-brand-secondary">
<Tooltip
tooltipContent={`Last updated at ${renderShortTime(
@ -493,27 +500,20 @@ const SinglePage: NextPage = () => {
)}
</div>
</div>
<div className="px-4 pt-6">
<TextArea
id="name"
name="name"
placeholder="Page Title"
value={watch("name")}
onBlur={handleSubmit(updatePage)}
onChange={(e) => setValue("name", e.target.value)}
required={true}
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
role="textbox"
/>
</div>
<div className="px-7">
<div className="mt-4 h-full w-full">
{pageBlocks ? (
<>
<DragDropContext onDragEnd={handleOnDragEnd}>
{pageBlocks.length !== 0 && (
<StrictModeDroppable droppableId="blocks-list">
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
<div
className="flex w-full flex-col gap-2"
ref={provided.innerRef}
{...provided.droppableProps}
>
{pageBlocks.map((block, index) => (
<SinglePageBlock
key={block.id}
@ -528,16 +528,6 @@ const SinglePage: NextPage = () => {
</StrictModeDroppable>
)}
</DragDropContext>
{!createBlockForm && (
<button
type="button"
className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-2"
onClick={handleNewBlock}
>
<PlusIcon className="h-3 w-3" />
Add new block
</button>
)}
{createBlockForm && (
<div className="mt-4" ref={scrollToRef}>
<CreateUpdateBlockInline
@ -562,6 +552,10 @@ const SinglePage: NextPage = () => {
)}
</div>
</div>
<div>
<CreateBlock />
</div>
</div>
) : (
<Loader className="p-8">
<Loader.Item height="200px" />