binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: page block input (#907)

Browse source 
* fix: sidebar workspace dropdown logo

* chore: changed textarea to input for page block
This commit is contained in:
Aaryan Khandelwal 2023-04-20 19:04:10 +05:30 • committed by GitHub
parent 4dda4ec610
commit 73388195ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

21
apps/app/components/pages/create-update-block-inline.tsx
View file

@ -16,7 +16,7 @@ import aiService from "services/ai.service";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; import { Input, Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
// types // types
import { IPageBlock } from "types"; import { IPageBlock } from "types";
// fetch-keys // fetch-keys
@ -232,23 +232,22 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
return ( return (
<div> <div>
<form <form
className="border divide-y rounded-[10px] shadow" className="divide-y rounded-[10px] border shadow"
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)} onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
> >
<div className="px-2 pt-2"> <div className="pt-2">
<div className="flex justify-between"> <div className="flex justify-between">
<TextArea <Input
id="name" id="name"
name="name" name="name"
placeholder="Title" placeholder="Title"
register={register} register={register}
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium ring-0 focus:ring-gray-200" className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
role="textbox"
autoComplete="off" autoComplete="off"
maxLength={255} maxLength={255}
/> />
</div> </div>
<div className="page-block-section text-gray-500 relative -mt-2"> <div className="page-block-section relative -mt-2 text-gray-500">
<Controller <Controller
name="description" name="description"
control={control} control={control}
@ -268,10 +267,10 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
/> />
)} )}
/> />
<div className="flex m-2 mt-6 ml-2"> <div className="m-2 mt-6 ml-2 flex">
<button <button
type="button" type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs border hover:bg-gray-100 ${ className={`flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100 ${
iAmFeelingLucky ? "cursor-wait bg-gray-100" : "" iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
}`} }`}
onClick={handleAutoGenerateDescription} onClick={handleAutoGenerateDescription}
@ -288,7 +287,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
{data && ( {data && (
<button <button
type="button" type="button"
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs border ml-4 hover:bg-gray-100" className="-mr-2 ml-4 flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100"
onClick={() => { onClick={() => {
onClose(); onClose();
setGptAssistantModal(); setGptAssistantModal();
@ -301,7 +300,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
</div> </div>
</div> </div>
</div> </div>
<div className="flex p-4 justify-end items-center gap-2"> <div className="flex items-center justify-end gap-2 p-4">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}> <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
{data {data

21
apps/app/components/pages/single-page-block.tsx
View file

@ -295,27 +295,28 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
handleClose={() => setCreateBlockForm(false)} handleClose={() => setCreateBlockForm(false)}
data={block} data={block}
setIsSyncing={setIsSyncing} setIsSyncing={setIsSyncing}
focus="name"
/> />
</div> </div>
) : ( ) : (
<div <div
className={`group relative ${ className={`group relative ${
snapshot.isDragging ? "border-2 bg-white border-theme shadow-lg rounded-md p-6" : "" snapshot.isDragging ? "rounded-md border-2 border-theme bg-white p-6 shadow-lg" : ""
}`} }`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
> >
<button <button
type="button" type="button"
className="absolute top-4 -left-4 p-0.5 hover:bg-gray-100 rounded hidden group-hover:!flex" className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-gray-100 group-hover:!flex"
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<EllipsisVerticalIcon className="h-[18px]" /> <EllipsisVerticalIcon className="h-[18px]" />
<EllipsisVerticalIcon className="h-[18px] -ml-3" /> <EllipsisVerticalIcon className="-ml-3 h-[18px]" />
</button> </button>
<div <div
ref={actionSectionRef} ref={actionSectionRef}
className={`absolute top-4 right-0 items-center gap-2 hidden group-hover:!flex bg-white pl-4 ${ className={`absolute top-4 right-0 hidden items-center gap-2 bg-white pl-4 group-hover:!flex ${
isMenuActive ? "!flex" : "" isMenuActive ? "!flex" : ""
}`} }`}
> >
@ -363,7 +364,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
<CustomMenu <CustomMenu
customButton={ customButton={
<button <button
className="flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-gray-100 text-left rounded w-full" 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-gray-100"
onClick={() => setIsMenuActive(!isMenuActive)} onClick={() => setIsMenuActive(!isMenuActive)}
> >
<BoltIcon className="h-4.5 w-3.5" /> <BoltIcon className="h-4.5 w-3.5" />
@ -407,28 +408,28 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
}`} }`}
> >
<div <div
className="px-4 w-full overflow-hidden break-all cursor-pointer" className="w-full cursor-pointer overflow-hidden break-all px-4"
onClick={() => setCreateBlockForm(true)} onClick={() => setCreateBlockForm(true)}
> >
<div className="flex"> <div className="flex">
{block.issue && ( {block.issue && (
<div className="flex mr-1.5"> <div className="mr-1.5 flex">
<Link <Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`} href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
> >
<a className="flex flex-shrink-0 items-center gap-1 rounded h-6 bg-gray-100 px-1.5 py-1 text-xs"> <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-gray-100 px-1.5 py-1 text-xs">
<LayerDiagonalIcon height="16" width="16" color="black" /> <LayerDiagonalIcon height="16" width="16" color="black" />
{projectDetails?.identifier}-{block.issue_detail?.sequence_id} {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
</a> </a>
</Link> </Link>
</div> </div>
)} )}
<h3 className="font-medium text-base overflow-hidden max-w-[1000px]"> <h3 className="max-w-[1000px] overflow-hidden text-base font-medium">
{block.name} {block.name}
</h3> </h3>
</div> </div>
{block?.description_stripped.length > 0 && ( {block?.description_stripped.length > 0 && (
<p className="mt-3 text-sm text-gray-500 font-normal h-5 truncate"> <p className="mt-3 h-5 truncate text-sm font-normal text-gray-500">
{block.description_stripped} {block.description_stripped}
</p> </p>
)} )}

4
apps/app/components/rich-text-editor/index.tsx
View file

@ -209,9 +209,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
{(!value || value === "" || value?.content?.[0]?.content === undefined) && {(!value || value === "" || value?.content?.[0]?.content === undefined) &&
!(typeof value === "string" && value.includes("<")) && !(typeof value === "string" && value.includes("<")) &&
placeholder && ( placeholder && (
<p className="absolute pointer-events-none top-4 left-4 text-brand-secondary"> <p className="pointer-events-none absolute top-4 left-4 text-sm">{placeholder}</p>
{placeholder}
</p>
)} )}
<EditorComponent /> <EditorComponent />