fix: peek overview layout switch (#2064)

This commit is contained in:
Aaryan Khandelwal 2023-09-03 11:25:37 +05:30 committed by GitHub
parent 874d6e951b
commit 20e36194b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 40 deletions

View File

@ -151,35 +151,37 @@ export const IssuePeekOverview: React.FC<Props> = observer(
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Dialog.Panel <Dialog.Panel>
className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${ <div
peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]" className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
}`} peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
> }`}
{peekOverviewMode === "modal" && ( >
<SidePeekView {peekOverviewMode === "modal" && (
handleClose={handleClose} <SidePeekView
handleDeleteIssue={() => setDeleteIssueModal(true)} handleClose={handleClose}
handleUpdateIssue={handleUpdateIssue} handleDeleteIssue={() => setDeleteIssueModal(true)}
issue={issue} handleUpdateIssue={handleUpdateIssue}
mode={peekOverviewMode} issue={issue}
readOnly={readOnly} mode={peekOverviewMode}
setMode={(mode) => setPeekOverviewMode(mode)} readOnly={readOnly}
workspaceSlug={workspaceSlug} setMode={(mode) => setPeekOverviewMode(mode)}
/> workspaceSlug={workspaceSlug}
)} />
{peekOverviewMode === "full" && ( )}
<FullScreenPeekView {peekOverviewMode === "full" && (
handleClose={handleClose} <FullScreenPeekView
handleDeleteIssue={() => setDeleteIssueModal(true)} handleClose={handleClose}
handleUpdateIssue={handleUpdateIssue} handleDeleteIssue={() => setDeleteIssueModal(true)}
issue={issue} handleUpdateIssue={handleUpdateIssue}
mode={peekOverviewMode} issue={issue}
readOnly={readOnly} mode={peekOverviewMode}
setMode={(mode) => setPeekOverviewMode(mode)} readOnly={readOnly}
workspaceSlug={workspaceSlug} setMode={(mode) => setPeekOverviewMode(mode)}
/> workspaceSlug={workspaceSlug}
)} />
)}
</div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>

View File

@ -106,17 +106,19 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Dialog.Panel <Dialog.Panel>
className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${ <div
issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]" className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
}`} issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
> }`}
{issueDetailStore.peekMode === "modal" && ( >
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} /> {issueDetailStore.peekMode === "modal" && (
)} <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
{issueDetailStore.peekMode === "full" && ( )}
<FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} /> {issueDetailStore.peekMode === "full" && (
)} <FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
)}
</div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>