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

chore: peek overview improvement and bug fixes (#2683)

Browse Source 
* style: issue peek overview improvement

* style: peek overview improvement

* fix: subscribe issue from peek overview fix and validation added

* fix: build error
This commit is contained in:
Anmol Singh Bhatia 2023-11-07 15:58:42 +05:30 committed by GitHub
parent f30b16e9d8
commit 25f3a5b2e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/components/issues/issue-peek-overview/properties.tsx
View File

@ -190,7 +190,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<div className="flex flex-col gap-5 py-5 w-full"> <div className="flex flex-col gap-5 py-5 w-full">
{/* state */} {/* state */}
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm"> <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" /> <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
<p>State</p> <p>State</p>
</div> </div>
@ -201,7 +201,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* assignee */} {/* assignee */}
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm"> <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<UserGroupIcon className="h-4 w-4 flex-shrink-0" /> <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
<p>Assignees</p> <p>Assignees</p>
</div> </div>
@ -216,7 +216,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* priority */} {/* priority */}
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm"> <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<Signal className="h-4 w-4 flex-shrink-0" /> <Signal className="h-4 w-4 flex-shrink-0" />
<p>Priority</p> <p>Priority</p>
</div> </div>
@ -231,7 +231,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* estimate */} {/* estimate */}
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm"> <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<Triangle className="h-4 w-4 flex-shrink-0 " /> <Triangle className="h-4 w-4 flex-shrink-0 " />
<p>Estimate</p> <p>Estimate</p>
</div> </div>
@ -246,7 +246,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* start date */} {/* start date */}
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm"> <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<CalendarDays className="h-4 w-4 flex-shrink-0" /> <CalendarDays className="h-4 w-4 flex-shrink-0" />
<p>Start date</p> <p>Start date</p>
</div> </div>
@ -264,7 +264,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* due date */} {/* due date */}
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm"> <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<CalendarDays className="h-4 w-4 flex-shrink-0" /> <CalendarDays className="h-4 w-4 flex-shrink-0" />
<p>Due date</p> <p>Due date</p>
</div> </div>
@ -282,7 +282,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* parent */} {/* parent */}
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm"> <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<User2 className="h-4 w-4 flex-shrink-0" /> <User2 className="h-4 w-4 flex-shrink-0" />
<p>Parent</p> <p>Parent</p>
</div> </div>
@ -295,8 +295,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<span className="border-t border-custom-border-200" /> <span className="border-t border-custom-border-200" />
<div className="flex flex-col gap-5 py-5 w-full"> <div className="flex flex-col gap-5 py-5 w-full">
<div className="flex items-center gap-2 w-80"> <div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm"> <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<ContrastIcon className="h-4 w-4 flex-shrink-0" /> <ContrastIcon className="h-4 w-4 flex-shrink-0" />
<p>Cycle</p> <p>Cycle</p>
</div> </div>
@ -309,8 +309,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
</div> </div>
</div> </div>
<div className="flex items-center gap-2 w-80"> <div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm"> <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<DiceIcon className="h-4 w-4 flex-shrink-0" /> <DiceIcon className="h-4 w-4 flex-shrink-0" />
<p>Module</p> <p>Module</p>
</div> </div>

16
web/components/issues/issue-peek-overview/view.tsx
View File

@ -174,7 +174,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
}} }}
> >
{/* header */} {/* header */}
<div className="relative flex items-center justify-between p-5 border-b border-custom-border-200"> <div
className={`relative flex items-center justify-between p-4 ${
currentMode?.key === "full-screen" ? "border-b border-custom-border-200" : ""
}`}
>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<button onClick={removeRoutePeekId}> <button onClick={removeRoutePeekId}>
<MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" /> <MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
@ -214,15 +218,17 @@ export const IssueView: FC<IIssueView> = observer((props) => {
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{!isArchived && ( {issue?.created_by !== user?.id &&
!issue?.assignees.includes(user?.id ?? "") &&
!router.pathname.includes("[archivedIssueId]") && (
<Button <Button
size="sm" size="sm"
prependIcon={<Bell className="h-3 w-3" />} prependIcon={<Bell className="h-3 w-3" />}
variant="outline-primary" variant="outline-primary"
onClick={() => onClick={() =>
issueSubscription && issueSubscription.subscribed issueSubscription && issueSubscription.subscribed
? issueSubscriptionRemove ? issueSubscriptionRemove()
: issueSubscriptionCreate : issueSubscriptionCreate()
} }
> >
{issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"} {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
@ -250,7 +256,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
issue && ( issue && (
<> <>
{["side-peek", "modal"].includes(peekMode) ? ( {["side-peek", "modal"].includes(peekMode) ? (
<div className="flex flex-col gap-3 py-6 px-8"> <div className="flex flex-col gap-3 py-5 px-8">
<PeekOverviewIssueDetails <PeekOverviewIssueDetails
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
issue={issue} issue={issue}

8
web/components/issues/sidebar-select/cycle.tsx
View File

@ -79,17 +79,17 @@ export const SidebarCycleSelect: React.FC<Props> = ({ issueDetail, handleCycleCh
<Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}> <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}>
<button <button
type="button" type="button"
className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${ className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
disabled ? "cursor-not-allowed" : "" disabled ? "cursor-not-allowed" : ""
}`} } max-w-[10rem]`}
> >
<span <span
className={`flex items-center gap-1.5 truncate ${ className={`flex items-center gap-1.5 truncate ${
issueCycle ? "text-custom-text-100" : "text-custom-text-200" issueCycle ? "text-custom-text-100" : "text-custom-text-200"
}`} }`}
> >
{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />} <span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
{issueCycle ? issueCycle.cycle_detail.name : "No cycle"} <span className="truncate">{issueCycle ? issueCycle.cycle_detail.name : "No cycle"}</span>
</span> </span>
</button> </button>
</Tooltip> </Tooltip>

8
web/components/issues/sidebar-select/module.tsx
View File

@ -74,18 +74,20 @@ export const SidebarModuleSelect: React.FC<Props> = ({ issueDetail, handleModule
> >
<button <button
type="button" type="button"
className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${ className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
disabled ? "cursor-not-allowed" : "" disabled ? "cursor-not-allowed" : ""
}`} } max-w-[10rem]`}
> >
<span <span
className={`flex items-center gap-1.5 truncate ${ className={`flex items-center gap-1.5 truncate ${
issueModule ? "text-custom-text-100" : "text-custom-text-200" issueModule ? "text-custom-text-100" : "text-custom-text-200"
}`} }`}
> >
{issueModule && <DiceIcon className="h-3.5 w-3.5" />} <span className="flex-shrink-0">{issueModule && <DiceIcon className="h-3.5 w-3.5" />}</span>
<span className="truncate">
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"} {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
</span> </span>
</span>
</button> </button>
</Tooltip> </Tooltip>
</div> </div>