github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: ai buttons overlapping issue (#4621)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-05-31 20:28:28 +05:30 committed by GitHub
parent 1c901446ab
commit de7dad59f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/core/modals/gpt-assistant-popover.tsx
View File

@ -173,13 +173,15 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
const generateResponseButtonText = isSubmitting const generateResponseButtonText = isSubmitting
? "Generating response..." ? "Generating response..."
: response === "" : response === ""
? "Generate response" ? "Generate response"
: "Generate again"; : "Generate again";
return ( return (
<Popover as="div" className={`relative w-min text-left`}> <Popover as="div" className={`relative w-min text-left`}>
<Popover.Button as={Fragment}> <Popover.Button as={Fragment}>
<button ref={setReferenceElement}>{button}</button> <button ref={setReferenceElement} className="flex items-center">
{button}
</button>
</Popover.Button> </Popover.Button>
<Transition <Transition
show={isOpen} show={isOpen}

52
web/components/issues/issue-modal/form.tsx
View File

@ -413,7 +413,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
/> />
<span className="text-xs text-red-500">{errors?.name?.message}</span> <span className="text-xs text-red-500">{errors?.name?.message}</span>
</div> </div>
<div className="relative"> <div className="border-[0.5px] border-custom-border-200 rounded-lg">
{data?.description_html === undefined ? ( {data?.description_html === undefined ? (
<Loader className="min-h-[7rem] space-y-2 overflow-hidden rounded-md border border-custom-border-200 p-2 py-2"> <Loader className="min-h-[7rem] space-y-2 overflow-hidden rounded-md border border-custom-border-200 p-2 py-2">
<Loader.Item width="100%" height="26px" /> <Loader.Item width="100%" height="26px" />
@ -436,11 +436,33 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
</Loader> </Loader>
) : ( ) : (
<> <>
<div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex items-center gap-2"> <Controller
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
<RichTextEditor
initialValue={value}
value={data.description_html}
workspaceSlug={workspaceSlug?.toString() as string}
workspaceId={workspaceId}
projectId={projectId}
onChange={(_description: object, description_html: string) => {
onChange(description_html);
handleFormChange();
}}
onEnterKeyPress={() => submitBtnRef?.current?.click()}
ref={editorRef}
tabIndex={getTabIndex("description_html")}
placeholder={getDescriptionPlaceholder}
containerClassName="pt-3 min-h-[150px] max-h-64 overflow-y-auto vertical-scrollbar scrollbar-sm"
/>
)}
/>
<div className="border-0.5 z-10 flex items-center justify-end gap-2 p-3">
{issueName && issueName.trim() !== "" && config?.has_openai_configured && ( {issueName && issueName.trim() !== "" && config?.has_openai_configured && (
<button <button
type="button" type="button"
className={`flex items-center gap-1 rounded bg-custom-background-90 px-1.5 py-1 text-xs ${ className={`flex items-center gap-1 rounded bg-custom-background-90 hover:bg-custom-background-80 px-1.5 py-1 text-xs ${
iAmFeelingLucky ? "cursor-wait" : "" iAmFeelingLucky ? "cursor-wait" : ""
}`} }`}
onClick={handleAutoGenerateDescription} onClick={handleAutoGenerateDescription}
@ -472,7 +494,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
button={ button={
<button <button
type="button" type="button"
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90" className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-90 hover:bg-custom-background-80"
onClick={() => setGptAssistantModal((prevData) => !prevData)} onClick={() => setGptAssistantModal((prevData) => !prevData)}
tabIndex={getTabIndex("ai_assistant")} tabIndex={getTabIndex("ai_assistant")}
> >
@ -483,28 +505,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
/> />
)} )}
</div> </div>
<Controller
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
<RichTextEditor
initialValue={value}
value={data.description_html}
workspaceSlug={workspaceSlug?.toString() as string}
workspaceId={workspaceId}
projectId={projectId}
onChange={(_description: object, description_html: string) => {
onChange(description_html);
handleFormChange();
}}
onEnterKeyPress={() => submitBtnRef?.current?.click()}
ref={editorRef}
tabIndex={getTabIndex("description_html")}
placeholder={getDescriptionPlaceholder}
containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
/>
)}
/>
</> </>
)} )}
</div> </div>