mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
[WEB-482] chore: issue sidebar improvement (#3733)
* 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:
parent
c851ec7034
commit
022a286eba
@ -88,13 +88,13 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
) : 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) => {
|
||||
const moduleDetails = getModuleById(moduleId);
|
||||
return (
|
||||
<div
|
||||
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" />}
|
||||
{!hideText && (
|
||||
|
@ -133,7 +133,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<div className="h-full w-full overflow-y-auto px-5">
|
||||
<h5 className="text-sm font-medium mt-6">Properties</h5>
|
||||
{/* 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-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
|
||||
@ -269,8 +269,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
)}
|
||||
|
||||
{projectDetails?.module_view && (
|
||||
<div className="flex items-center gap-2 min-h-8 h-full">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<div className="flex gap-2 min-h-8">
|
||||
<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" />
|
||||
<span>Module</span>
|
||||
</div>
|
||||
@ -376,10 +376,9 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 min-h-8 py-2">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<div className="flex gap-2 min-h-8">
|
||||
<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" />
|
||||
<span>Labels</span>
|
||||
</div>
|
||||
@ -392,6 +391,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<IssueLinkRoot
|
||||
workspaceSlug={workspaceSlug}
|
||||
|
@ -2,7 +2,7 @@ import { FC, useState } from "react";
|
||||
import { Bell, BellOff } from "lucide-react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// UI
|
||||
import { Button } from "@plane/ui";
|
||||
import { Button, Loader } from "@plane/ui";
|
||||
// hooks
|
||||
import { useIssueDetail } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
@ -49,6 +49,8 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{subscription ? (
|
||||
<div>
|
||||
<Button
|
||||
size="sm"
|
||||
@ -59,7 +61,7 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
|
||||
>
|
||||
{loading ? (
|
||||
<span>
|
||||
<span className="hidden sm:block">Loading</span>...
|
||||
<span className="hidden sm:block">Loading...</span>
|
||||
</span>
|
||||
) : subscription?.subscribed ? (
|
||||
<div className="hidden sm:block">Unsubscribe</div>
|
||||
@ -68,5 +70,13 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Loader>
|
||||
<Loader.Item height="28px" width="106px" />
|
||||
</Loader>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
@ -102,7 +102,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
||||
buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
|
||||
className="w-3/4 flex-grow group"
|
||||
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}
|
||||
dropdownArrow
|
||||
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
|
||||
|
Loading…
Reference in New Issue
Block a user