thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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
? "Generating response..."
: response === ""
? "Generate response"
: "Generate again";
? "Generate response"
: "Generate again";
return (
<Popover as="div" className={`relative w-min text-left`}>
<Popover.Button as={Fragment}>
<button ref={setReferenceElement}>{button}</button>
<button ref={setReferenceElement} className="flex items-center">
{button}
</button>
</Popover.Button>
<Transition
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>
</div>
<div className="relative">
<div className="border-[0.5px] border-custom-border-200 rounded-lg">
{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.Item width="100%" height="26px" />
@ -436,11 +436,33 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
</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 && (
<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" : ""
}`}
onClick={handleAutoGenerateDescription}
@ -472,7 +494,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
button={
<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)}
tabIndex={getTabIndex("ai_assistant")}
>
@ -483,28 +505,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
/>
)}
</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>