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

[WEB-482] chore: issue sidebar improvement (#3733)

Browse Source 
* chore: module-select dropdown improvement

* chore: issue sidebar subscription loader added

* chore: issue sidebar improvement

* fix: peek overview exception error
This commit is contained in:
Anmol Singh Bhatia 2024-02-21 18:19:49 +05:30 committed by GitHub
parent c851ec7034
commit 022a286eba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 49 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/dropdowns/module.tsx
View File

@ -88,13 +88,13 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
</div> </div>
</div> </div>
) : value.length > 0 ? ( ) : value.length > 0 ? (
<div className="flex items-center gap-2 py-0.5 flex-wrap"> <div className="flex items-center gap-2 py-0.5 max-w-full flex-grow truncate flex-wrap">
{value.map((moduleId) => { {value.map((moduleId) => {
const moduleDetails = getModuleById(moduleId); const moduleDetails = getModuleById(moduleId);
return ( return (
<div <div
key={moduleId} key={moduleId}
className="flex items-center gap-1 bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1" className="flex items-center gap-1 max-w-full bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1"
> >
{!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />} {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
{!hideText && ( {!hideText && (

32
web/components/issues/issue-detail/sidebar.tsx
View File

@ -133,7 +133,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="h-full w-full overflow-y-auto px-5"> <div className="h-full w-full overflow-y-auto px-5">
<h5 className="text-sm font-medium mt-6">Properties</h5> <h5 className="text-sm font-medium mt-6">Properties</h5>
{/* TODO: render properties using a common component */} {/* TODO: render properties using a common component */}
<div className={`mt-3 space-y-2 ${!is_editable ? "opacity-60" : ""}`}> <div className={`mt-3 mb-2 space-y-2.5 ${!is_editable ? "opacity-60" : ""}`}>
<div className="flex items-center gap-2 h-8"> <div className="flex items-center gap-2 h-8">
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300"> <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" /> <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
@ -269,8 +269,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
)} )}
{projectDetails?.module_view && ( {projectDetails?.module_view && (
<div className="flex items-center gap-2 min-h-8 h-full"> <div className="flex gap-2 min-h-8">
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300"> <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
<DiceIcon className="h-4 w-4 flex-shrink-0" /> <DiceIcon className="h-4 w-4 flex-shrink-0" />
<span>Module</span> <span>Module</span>
</div> </div>
@ -376,20 +376,20 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
disabled={!is_editable} disabled={!is_editable}
/> />
</div> </div>
</div>
<div className="flex items-center gap-2 min-h-8 py-2"> <div className="flex gap-2 min-h-8">
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300"> <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
<Tag className="h-4 w-4 flex-shrink-0" /> <Tag className="h-4 w-4 flex-shrink-0" />
<span>Labels</span> <span>Labels</span>
</div> </div>
<div className="w-3/5 flex-grow min-h-8 h-full"> <div className="w-3/5 flex-grow min-h-8 h-full">
<IssueLabel <IssueLabel
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
projectId={projectId} projectId={projectId}
issueId={issueId} issueId={issueId}
disabled={!is_editable} disabled={!is_editable}
/> />
</div>
</div> </div>
</div> </div>

50
web/components/issues/issue-detail/subscription.tsx
View File

@ -2,7 +2,7 @@ import { FC, useState } from "react";
import { Bell, BellOff } from "lucide-react"; import { Bell, BellOff } from "lucide-react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// UI // UI
import { Button } from "@plane/ui"; import { Button, Loader } from "@plane/ui";
// hooks // hooks
import { useIssueDetail } from "hooks/store"; import { useIssueDetail } from "hooks/store";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
@ -49,24 +49,34 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
}; };
return ( return (
<div> <>
<Button {subscription ? (
size="sm" <div>
prependIcon={subscription?.subscribed ? <BellOff /> : <Bell className="h-3 w-3" />} <Button
variant="outline-primary" size="sm"
className="hover:!bg-custom-primary-100/20" prependIcon={subscription?.subscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
onClick={handleSubscription} variant="outline-primary"
> className="hover:!bg-custom-primary-100/20"
{loading ? ( onClick={handleSubscription}
<span> >
<span className="hidden sm:block">Loading</span>... {loading ? (
</span> <span>
) : subscription?.subscribed ? ( <span className="hidden sm:block">Loading...</span>
<div className="hidden sm:block">Unsubscribe</div> </span>
) : ( ) : subscription?.subscribed ? (
<div className="hidden sm:block">Subscribe</div> <div className="hidden sm:block">Unsubscribe</div>
)} ) : (
</Button> <div className="hidden sm:block">Subscribe</div>
</div> )}
</Button>
</div>
) : (
<>
<Loader>
<Loader.Item height="28px" width="106px" />
</Loader>
</>
)}
</>
); );
}); });

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

@ -102,7 +102,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"} buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
className="w-3/4 flex-grow group" className="w-3/4 flex-grow group"
buttonContainerClassName="w-full text-left" buttonContainerClassName="w-full text-left"
buttonClassName={`text-sm justify-between ${issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"}`} buttonClassName={`text-sm justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-custom-text-400"}`}
hideIcon={issue.assignee_ids?.length === 0} hideIcon={issue.assignee_ids?.length === 0}
dropdownArrow dropdownArrow
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline" dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"