thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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
Show Stats 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
import useToast from "hooks/use-toast";
// ui
import { Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
import { Input, Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
// types
import { IPageBlock } from "types";
// fetch-keys
@ -232,23 +232,22 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
return (
<div>
<form
className="border divide-y rounded-[10px] shadow"
className="divide-y rounded-[10px] border shadow"
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
>
<div className="px-2 pt-2">
<div className="pt-2">
<div className="flex justify-between">
<TextArea
<Input
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 ring-0 focus:ring-gray-200"
role="textbox"
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
autoComplete="off"
maxLength={255}
/>
</div>
<div className="page-block-section text-gray-500 relative -mt-2">
<div className="page-block-section relative -mt-2 text-gray-500">
<Controller
name="description"
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
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" : ""
}`}
onClick={handleAutoGenerateDescription}
@ -288,7 +287,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
{data && (
<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={() => {
onClose();
setGptAssistantModal();
@ -301,7 +300,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
</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>
<PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
{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)}
data={block}
setIsSyncing={setIsSyncing}
focus="name"
/>
</div>
) : (
<div
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}
{...provided.draggableProps}
>
<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}
>
<EllipsisVerticalIcon className="h-[18px]" />
<EllipsisVerticalIcon className="h-[18px] -ml-3" />
<EllipsisVerticalIcon className="-ml-3 h-[18px]" />
</button>
<div
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" : ""
}`}
>
@ -363,7 +364,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
<CustomMenu
customButton={
<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)}
>
<BoltIcon className="h-4.5 w-3.5" />
@ -407,28 +408,28 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
}`}
>
<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)}
>
<div className="flex">
{block.issue && (
<div className="flex mr-1.5">
<div className="mr-1.5 flex">
<Link
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" />
{projectDetails?.identifier}-{block.issue_detail?.sequence_id}
</a>
</Link>
</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}
</h3>
</div>
{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}
</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) &&
!(typeof value === "string" && value.includes("<")) &&
placeholder && (
<p className="absolute pointer-events-none top-4 left-4 text-brand-secondary">
{placeholder}
</p>
<p className="pointer-events-none absolute top-4 left-4 text-sm">{placeholder}</p>
)}
<EditorComponent />