mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
[WEB-704] fix: inbox responsiveness (#4275)
* chore: inbox responsiveness * fix: sidebar in full view * style: border theme * condition update
This commit is contained in:
parent
ea436c925a
commit
0c880bbbc8
@ -17,6 +17,7 @@ import { Button, ControlLink, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui
|
||||
import {
|
||||
DeclineIssueModal,
|
||||
DeleteInboxIssueModal,
|
||||
InboxIssueActionsMobileHeader,
|
||||
InboxIssueCreateEditModalRoot,
|
||||
InboxIssueSnoozeModal,
|
||||
InboxIssueStatus,
|
||||
@ -38,10 +39,12 @@ type TInboxIssueActionsHeader = {
|
||||
projectId: string;
|
||||
inboxIssue: IInboxIssueStore | undefined;
|
||||
isSubmitting: "submitting" | "submitted" | "saved";
|
||||
toggleMobileSidebar: boolean;
|
||||
setToggleMobileSidebar: (value: boolean) => void;
|
||||
};
|
||||
|
||||
export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((props) => {
|
||||
const { workspaceSlug, projectId, inboxIssue, isSubmitting } = props;
|
||||
const { workspaceSlug, projectId, inboxIssue, isSubmitting, toggleMobileSidebar, setToggleMobileSidebar } = props;
|
||||
// states
|
||||
const [isSnoozeDateModalOpen, setIsSnoozeDateModalOpen] = useState(false);
|
||||
const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
|
||||
@ -207,7 +210,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
/>
|
||||
</>
|
||||
|
||||
<div className="relative flex h-full w-full items-center justify-between gap-2 px-4">
|
||||
<div className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 px-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{issue?.project_id && issue.sequence_id && (
|
||||
<h3 className="text-base font-medium text-custom-text-300 flex-shrink-0">
|
||||
@ -319,6 +322,28 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:hidden">
|
||||
<InboxIssueActionsMobileHeader
|
||||
inboxIssue={inboxIssue}
|
||||
isSubmitting={isSubmitting}
|
||||
handleCopyIssueLink={handleCopyIssueLink}
|
||||
setAcceptIssueModal={setAcceptIssueModal}
|
||||
setDeclineIssueModal={setDeclineIssueModal}
|
||||
setIsSnoozeDateModalOpen={setIsSnoozeDateModalOpen}
|
||||
setSelectDuplicateIssue={setSelectDuplicateIssue}
|
||||
setDeleteIssueModal={setDeleteIssueModal}
|
||||
canMarkAsAccepted={canMarkAsAccepted}
|
||||
canMarkAsDeclined={canMarkAsDeclined}
|
||||
canMarkAsDuplicate={canMarkAsDuplicate}
|
||||
canDelete={canDelete}
|
||||
isAcceptedOrDeclined={isAcceptedOrDeclined}
|
||||
handleInboxIssueNavigation={handleInboxIssueNavigation}
|
||||
workspaceSlug={workspaceSlug}
|
||||
toggleMobileSidebar={toggleMobileSidebar}
|
||||
setToggleMobileSidebar={setToggleMobileSidebar}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
170
web/components/inbox/content/inbox-issue-mobile-header.tsx
Normal file
170
web/components/inbox/content/inbox-issue-mobile-header.tsx
Normal file
@ -0,0 +1,170 @@
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
CircleCheck,
|
||||
CircleX,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Clock,
|
||||
ExternalLink,
|
||||
FileStack,
|
||||
Link,
|
||||
Trash2,
|
||||
PanelLeft,
|
||||
} from "lucide-react";
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
// components
|
||||
import { InboxIssueStatus } from "@/components/inbox";
|
||||
import { IssueUpdateStatus } from "@/components/issues";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
// store types
|
||||
import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
|
||||
|
||||
type Props = {
|
||||
workspaceSlug: string;
|
||||
inboxIssue: IInboxIssueStore | undefined;
|
||||
isSubmitting: "submitting" | "submitted" | "saved";
|
||||
handleInboxIssueNavigation: (direction: "next" | "prev") => void;
|
||||
canMarkAsAccepted: boolean;
|
||||
canMarkAsDeclined: boolean;
|
||||
isAcceptedOrDeclined: boolean | undefined;
|
||||
canMarkAsDuplicate: boolean;
|
||||
canDelete: boolean;
|
||||
setAcceptIssueModal: (value: boolean) => void;
|
||||
setDeclineIssueModal: (value: boolean) => void;
|
||||
setDeleteIssueModal: (value: boolean) => void;
|
||||
setIsSnoozeDateModalOpen: (value: boolean) => void;
|
||||
setSelectDuplicateIssue: (value: boolean) => void;
|
||||
handleCopyIssueLink: () => void;
|
||||
toggleMobileSidebar: boolean;
|
||||
setToggleMobileSidebar: (value: boolean) => void;
|
||||
};
|
||||
|
||||
export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) => {
|
||||
const {
|
||||
inboxIssue,
|
||||
isSubmitting,
|
||||
handleInboxIssueNavigation,
|
||||
canMarkAsAccepted,
|
||||
canMarkAsDeclined,
|
||||
canDelete,
|
||||
canMarkAsDuplicate,
|
||||
isAcceptedOrDeclined,
|
||||
workspaceSlug,
|
||||
setAcceptIssueModal,
|
||||
setDeclineIssueModal,
|
||||
setDeleteIssueModal,
|
||||
setIsSnoozeDateModalOpen,
|
||||
setSelectDuplicateIssue,
|
||||
handleCopyIssueLink,
|
||||
toggleMobileSidebar,
|
||||
setToggleMobileSidebar,
|
||||
} = props;
|
||||
const router = useRouter();
|
||||
const issue = inboxIssue?.issue;
|
||||
const currentInboxIssueId = issue?.id;
|
||||
|
||||
if (!issue || !inboxIssue) return null;
|
||||
|
||||
return (
|
||||
<div className="h-12 relative flex border-custom-border-200 w-full items-center gap-2 px-4">
|
||||
<PanelLeft
|
||||
onClick={() => setToggleMobileSidebar(!toggleMobileSidebar)}
|
||||
className={cn(
|
||||
"w-4 h-4 flex-shrink-0 mr-2",
|
||||
toggleMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200"
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-custom-border-200 p-1.5"
|
||||
onClick={() => handleInboxIssueNavigation("prev")}
|
||||
>
|
||||
<ChevronUp size={14} strokeWidth={2} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-custom-border-200 p-1.5"
|
||||
onClick={() => handleInboxIssueNavigation("next")}
|
||||
>
|
||||
<ChevronDown size={14} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
|
||||
<div className="flex items-center justify-end w-full">
|
||||
<IssueUpdateStatus isSubmitting={isSubmitting} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<CustomMenu verticalEllipsis placement="bottom-start">
|
||||
{isAcceptedOrDeclined && (
|
||||
<CustomMenu.MenuItem onClick={handleCopyIssueLink}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link size={14} strokeWidth={2} />
|
||||
Copy issue link
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{isAcceptedOrDeclined && (
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() =>
|
||||
router.push(`/${workspaceSlug}/projects/${issue?.project_id}/issues/${currentInboxIssueId}`)
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<ExternalLink size={14} strokeWidth={2} />
|
||||
Open issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{canMarkAsAccepted && !isAcceptedOrDeclined && (
|
||||
<CustomMenu.MenuItem onClick={() => setIsSnoozeDateModalOpen(true)}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={14} strokeWidth={2} />
|
||||
Snooze
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{canMarkAsDuplicate && !isAcceptedOrDeclined && (
|
||||
<CustomMenu.MenuItem onClick={() => setSelectDuplicateIssue(true)}>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileStack size={14} strokeWidth={2} />
|
||||
Mark as duplicate
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{canMarkAsAccepted && (
|
||||
<CustomMenu.MenuItem onClick={() => setAcceptIssueModal(true)}>
|
||||
<div className="flex items-center gap-2 text-green-500">
|
||||
<CircleCheck size={14} strokeWidth={2} />
|
||||
Accept
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{canMarkAsDeclined && (
|
||||
<CustomMenu.MenuItem onClick={() => setDeclineIssueModal(true)}>
|
||||
<div className="flex items-center gap-2 text-red-500">
|
||||
<CircleX size={14} strokeWidth={2} />
|
||||
Decline
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
{canDelete && !isAcceptedOrDeclined && (
|
||||
<CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
|
||||
<div className="flex items-center gap-2 text-red-500">
|
||||
<Trash2 size={14} strokeWidth={2} />
|
||||
Delete
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
@ -1,4 +1,5 @@
|
||||
export * from "./root";
|
||||
export * from "./inbox-issue-header";
|
||||
export * from "./inbox-issue-mobile-header";
|
||||
export * from "./issue-properties";
|
||||
export * from "./issue-root";
|
||||
|
@ -9,10 +9,12 @@ type TInboxContentRoot = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
inboxIssueId: string;
|
||||
toggleMobileSidebar: boolean;
|
||||
setToggleMobileSidebar: (value: boolean) => void;
|
||||
};
|
||||
|
||||
export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
|
||||
const { workspaceSlug, projectId, inboxIssueId } = props;
|
||||
const { workspaceSlug, projectId, inboxIssueId, toggleMobileSidebar, setToggleMobileSidebar } = props;
|
||||
// states
|
||||
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
|
||||
// hooks
|
||||
@ -43,6 +45,8 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
|
||||
<div className="w-full h-full overflow-hidden relative flex flex-col">
|
||||
<div className="flex-shrink-0 min-h-[50px] border-b border-custom-border-300">
|
||||
<InboxIssueActionsHeader
|
||||
setToggleMobileSidebar={setToggleMobileSidebar}
|
||||
toggleMobileSidebar={toggleMobileSidebar}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
inboxIssue={inboxIssue}
|
||||
|
@ -1,13 +1,15 @@
|
||||
import { FC } from "react";
|
||||
import { FC, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import useSWR from "swr";
|
||||
import { Inbox } from "lucide-react";
|
||||
import { Inbox, PanelLeft } from "lucide-react";
|
||||
// components
|
||||
import { EmptyState } from "@/components/empty-state";
|
||||
import { InboxSidebar, InboxContentRoot } from "@/components/inbox";
|
||||
import { InboxLayoutLoader } from "@/components/ui";
|
||||
// constants
|
||||
import { EmptyStateType } from "@/constants/empty-state";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
// hooks
|
||||
import { useProjectInbox } from "@/hooks/store";
|
||||
|
||||
@ -20,6 +22,8 @@ type TInboxIssueRoot = {
|
||||
|
||||
export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
|
||||
const { workspaceSlug, projectId, inboxIssueId, inboxAccessible } = props;
|
||||
// states
|
||||
const [toggleMobileSidebar, setToggleMobileSidebar] = useState(false);
|
||||
// hooks
|
||||
const { loader, error, fetchInboxIssues } = useProjectInbox();
|
||||
|
||||
@ -52,11 +56,33 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex overflow-hidden">
|
||||
<InboxSidebar workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
|
||||
<>
|
||||
{!inboxIssueId && (
|
||||
<div className="flex lg:hidden items-center px-4 w-full h-12 border-b border-custom-border-200">
|
||||
<PanelLeft
|
||||
onClick={() => setToggleMobileSidebar(!toggleMobileSidebar)}
|
||||
className={cn("w-4 h-4 ", toggleMobileSidebar ? "text-custom-primary-100" : " text-custom-text-200")}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full h-full flex overflow-hidden bg-custom-background-100">
|
||||
<div
|
||||
className={cn(
|
||||
"absolute z-10 top-[50px] lg:!top-0 lg:!relative bg-custom-background-100 flex-shrink-0 w-full lg:w-2/6 bottom-0 transition-all",
|
||||
toggleMobileSidebar ? "translate-x-0" : "-translate-x-full lg:!translate-x-0",
|
||||
)}
|
||||
>
|
||||
<InboxSidebar
|
||||
setToggleMobileSidebar={setToggleMobileSidebar}
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
projectId={projectId.toString()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{inboxIssueId ? (
|
||||
<InboxContentRoot
|
||||
setToggleMobileSidebar={setToggleMobileSidebar}
|
||||
toggleMobileSidebar={toggleMobileSidebar}
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
projectId={projectId.toString()}
|
||||
inboxIssueId={inboxIssueId.toString()}
|
||||
@ -67,5 +93,6 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
@ -19,10 +19,11 @@ type InboxIssueListItemProps = {
|
||||
projectId: string;
|
||||
projectIdentifier?: string;
|
||||
inboxIssue: IInboxIssueStore;
|
||||
setToggleMobileSidebar: (value: boolean) => void;
|
||||
};
|
||||
|
||||
export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId, inboxIssue, projectIdentifier } = props;
|
||||
const { workspaceSlug, projectId, inboxIssue, projectIdentifier,setToggleMobileSidebar } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { inboxIssueId } = router.query;
|
||||
@ -34,6 +35,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
|
||||
|
||||
const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => {
|
||||
if (inboxIssueId === currentIssueId) event.preventDefault();
|
||||
setToggleMobileSidebar(false);
|
||||
};
|
||||
|
||||
if (!issue) return <></>;
|
||||
|
@ -10,16 +10,18 @@ export type InboxIssueListProps = {
|
||||
projectId: string;
|
||||
projectIdentifier?: string;
|
||||
inboxIssues: IInboxIssueStore[];
|
||||
setToggleMobileSidebar: (value: boolean) => void;
|
||||
};
|
||||
|
||||
export const InboxIssueList: FC<InboxIssueListProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId, projectIdentifier, inboxIssues } = props;
|
||||
const { workspaceSlug, projectId, projectIdentifier, inboxIssues, setToggleMobileSidebar } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
{inboxIssues.map((inboxIssue) => (
|
||||
<Fragment key={inboxIssue.id}>
|
||||
<InboxIssueListItem
|
||||
setToggleMobileSidebar={setToggleMobileSidebar}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
projectIdentifier={projectIdentifier}
|
||||
|
@ -19,6 +19,7 @@ import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
|
||||
type IInboxSidebarProps = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
setToggleMobileSidebar: (value: boolean) => void;
|
||||
};
|
||||
|
||||
const tabNavigationOptions: { key: TInboxIssueCurrentTab; label: string }[] = [
|
||||
@ -33,7 +34,7 @@ const tabNavigationOptions: { key: TInboxIssueCurrentTab; label: string }[] = [
|
||||
];
|
||||
|
||||
export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
const { workspaceSlug, projectId, setToggleMobileSidebar } = props;
|
||||
// ref
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
@ -64,7 +65,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0 w-2/6 h-full border-r border-custom-border-300">
|
||||
<div className="bg-custom-background-100 flex-shrink-0 w-full h-full border-r border-custom-border-300">
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<div className="border-b border-custom-border-300 flex-shrink-0 w-full h-[50px] relative flex items-center gap-2 pr-3 whitespace-nowrap">
|
||||
{tabNavigationOptions.map((option) => (
|
||||
@ -109,6 +110,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
|
||||
>
|
||||
{inboxIssuesArray.length > 0 ? (
|
||||
<InboxIssueList
|
||||
setToggleMobileSidebar={setToggleMobileSidebar}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
projectIdentifier={currentProjectDetails?.identifier}
|
||||
|
@ -73,7 +73,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
>
|
||||
<div className="flex max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">{children}</div>
|
||||
<div className="flex max-h-[30rem] lg:max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">{children}</div>
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
|
Loading…
Reference in New Issue
Block a user