style: pages UI (#769)
* style: pages ui * chore: added toast alert and tooltip * fix: fixed issues in pages block * fix: ai buttons inside pages block
This commit is contained in:
Kunal Vishwakarma
GitHub
parent
f1f716e8f6
commit
e4e66b3ae4
9 changed files with 286 additions and 135 deletions
|
|
@ -33,12 +33,12 @@ import {
|
|||
LockClosedIcon,
|
||||
LockOpenIcon,
|
||||
PlusIcon,
|
||||
ShareIcon,
|
||||
StarIcon,
|
||||
LinkIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { ColorPalletteIcon } from "components/icons";
|
||||
import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
|
||||
// helpers
|
||||
import { renderShortTime } from "helpers/date-time.helper";
|
||||
import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
|
|
@ -155,7 +155,13 @@ const SinglePage: NextPage = () => {
|
|||
is_favorite: true,
|
||||
}),
|
||||
false
|
||||
);
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success",
|
||||
message: "Added to favorites",
|
||||
});
|
||||
});;
|
||||
|
||||
pagesService.addPageToFavorites(workspaceSlug as string, projectId as string, {
|
||||
page: pageId as string,
|
||||
|
|
@ -172,13 +178,16 @@ const SinglePage: NextPage = () => {
|
|||
is_favorite: false,
|
||||
}),
|
||||
false
|
||||
);
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success",
|
||||
message: "Removed from favorites",
|
||||
});
|
||||
});;
|
||||
|
||||
pagesService.removePageFromFavorites(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
pageId as string
|
||||
);
|
||||
pagesService
|
||||
.removePageFromFavorites(workspaceSlug as string, projectId as string, pageId as string);
|
||||
};
|
||||
|
||||
const handleOnDragEnd = (result: DropResult) => {
|
||||
|
|
@ -345,10 +354,10 @@ const SinglePage: NextPage = () => {
|
|||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded-md bg-gray-100 px-3 py-1.5 text-xs hover:bg-gray-200"
|
||||
className="flex items-center gap-1 rounded-full bg-gray-100 px-2 pr-2.5 py-1 text-xs hover:bg-gray-200"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add new label
|
||||
Add label
|
||||
</button>
|
||||
}
|
||||
value={pageDetails.labels}
|
||||
|
|
@ -359,19 +368,17 @@ const SinglePage: NextPage = () => {
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-6">
|
||||
<Tooltip
|
||||
tooltipContent={`Page last updated at ${renderShortTime(pageDetails.updated_at)}`}
|
||||
theme="dark"
|
||||
tooltipContent={`Last updated at ${renderShortTime(
|
||||
pageDetails.updated_at
|
||||
)} on ${renderShortDate(pageDetails.updated_at)}`}
|
||||
>
|
||||
<span className="cursor-default text-sm text-gray-500">
|
||||
{renderShortTime(pageDetails.updated_at)}
|
||||
</span>
|
||||
<p className="text-sm text-gray-500">{renderShortTime(pageDetails.updated_at)}</p>
|
||||
</Tooltip>
|
||||
<PrimaryButton className="flex items-center gap-2" onClick={handleCopyText}>
|
||||
<ShareIcon className="h-4 w-4" />
|
||||
Share
|
||||
</PrimaryButton>
|
||||
<button className="flex items-center gap-2" onClick={handleCopyText}>
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<div className="flex-shrink-0">
|
||||
<Popover className="relative grid place-items-center">
|
||||
{({ open }) => (
|
||||
|
|
@ -415,7 +422,14 @@ const SinglePage: NextPage = () => {
|
|||
</Popover>
|
||||
</div>
|
||||
{pageDetails.created_by === user?.id && (
|
||||
<>
|
||||
<Tooltip
|
||||
tooltipContent={`${
|
||||
pageDetails.access
|
||||
? "This page is only visible to you."
|
||||
: "This page can be viewed by anyone in the project."
|
||||
}`}
|
||||
theme="dark"
|
||||
>
|
||||
{pageDetails.access ? (
|
||||
<button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
|
||||
<LockClosedIcon className="h-4 w-4" />
|
||||
|
|
@ -429,7 +443,7 @@ const SinglePage: NextPage = () => {
|
|||
<LockOpenIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
</Tooltip>
|
||||
)}
|
||||
{pageDetails.is_favorite ? (
|
||||
<button onClick={handleRemoveFromFavorites} className="z-10">
|
||||
|
|
@ -442,20 +456,20 @@ const SinglePage: NextPage = () => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="px-4 pt-6">
|
||||
<TextArea
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Enter issue 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 focus:ring-1 focus:ring-gray-200"
|
||||
className="min-h-10 block w-full resize-none overflow-hidden placeholder:text-[#858E96] rounded border-none bg-transparent px-3 py-2 text-3xl font-semibold outline-none ring-0 "
|
||||
role="textbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="px-3">
|
||||
<div className="px-7">
|
||||
{pageBlocks ? (
|
||||
<>
|
||||
<DragDropContext onDragEnd={handleOnDragEnd}>
|
||||
|
|
@ -481,7 +495,7 @@ const SinglePage: NextPage = () => {
|
|||
{!createBlockForm && (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded bg-gray-100 px-2.5 py-1 ml-6 text-xs hover:bg-gray-200 mt-4"
|
||||
className="flex items-center gap-1 rounded-full bg-gray-100 px-2 py-1 pr-2.5 text-xs hover:bg-gray-200 mt-4"
|
||||
onClick={handleNewBlock}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
|
|
@ -493,7 +507,7 @@ const SinglePage: NextPage = () => {
|
|||
<CreateUpdateBlockInline
|
||||
handleClose={() => setCreateBlockForm(false)}
|
||||
focus="name"
|
||||
setGptAssistantModal={()=>{}}
|
||||
setGptAssistantModal={() => {}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -177,24 +177,28 @@ const ProjectPages: NextPage = () => {
|
|||
<div className="space-y-4">
|
||||
<form
|
||||
onSubmit={handleSubmit(createPage)}
|
||||
className="flex items-center justify-between gap-2 rounded-[10px] border border-gray-200 bg-white p-2 shadow-sm"
|
||||
className="flex relative justify-between gap-2 mb-12 rounded-[6px] h-[80px] border border-gray-200 bg-white p-2 shadow-md"
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
name="name"
|
||||
register={register}
|
||||
className="border-none outline-none focus:ring-0"
|
||||
placeholder="Type to create a new page..."
|
||||
className="border-none text-start font-semibold flex break-all text-2xl outline-none focus:ring-0"
|
||||
placeholder="Title"
|
||||
/>
|
||||
{watch("name") !== "" && (
|
||||
<PrimaryButton type="submit" loading={isSubmitting}>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
loading={isSubmitting}
|
||||
className="h-8 absolute top-6 right-2"
|
||||
>
|
||||
{isSubmitting ? "Creating..." : "Create"}
|
||||
</PrimaryButton>
|
||||
)}
|
||||
</form>
|
||||
<div>
|
||||
<Tab.Group>
|
||||
<Tab.List as="div" className="flex items-center justify-between">
|
||||
<Tab.List as="div" className="flex items-center justify-between mb-6">
|
||||
<div className="flex gap-4">
|
||||
{["Recent", "All", "Favorites", "Created by me", "Created by others"].map(
|
||||
(tab, index) => (
|
||||
|
|
@ -213,7 +217,7 @@ const ProjectPages: NextPage = () => {
|
|||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<div className="flex gap-x-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue