thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-1094] chore: inbox sidebar mobile responsiveness (#4309)

Browse Source 
* chore: inbox sidebar mobile responsiveness

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-04-29 19:38:46 +05:30 committed by GitHub
parent 5d3c64752c
commit 03065d2c1d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/inbox/content/inbox-issue-header.tsx
View File

@ -39,12 +39,12 @@ type TInboxIssueActionsHeader = {
projectId: string; projectId: string;
inboxIssue: IInboxIssueStore | undefined; inboxIssue: IInboxIssueStore | undefined;
isSubmitting: "submitting" | "submitted" | "saved"; isSubmitting: "submitting" | "submitted" | "saved";
toggleMobileSidebar: boolean; isMobileSidebar: boolean;
setToggleMobileSidebar: (value: boolean) => void; setIsMobileSidebar: (value: boolean) => void;
}; };
export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((props) => { export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((props) => {
const { workspaceSlug, projectId, inboxIssue, isSubmitting, toggleMobileSidebar, setToggleMobileSidebar } = props; const { workspaceSlug, projectId, inboxIssue, isSubmitting, isMobileSidebar, setIsMobileSidebar } = props;
// states // states
const [isSnoozeDateModalOpen, setIsSnoozeDateModalOpen] = useState(false); const [isSnoozeDateModalOpen, setIsSnoozeDateModalOpen] = useState(false);
const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false); const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
@ -340,8 +340,8 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
isAcceptedOrDeclined={isAcceptedOrDeclined} isAcceptedOrDeclined={isAcceptedOrDeclined}
handleInboxIssueNavigation={handleInboxIssueNavigation} handleInboxIssueNavigation={handleInboxIssueNavigation}
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
toggleMobileSidebar={toggleMobileSidebar} isMobileSidebar={isMobileSidebar}
setToggleMobileSidebar={setToggleMobileSidebar} setIsMobileSidebar={setIsMobileSidebar}
/> />
</div> </div>
</> </>

12
web/components/inbox/content/inbox-issue-mobile-header.tsx
View File

@ -38,8 +38,8 @@ type Props = {
setIsSnoozeDateModalOpen: (value: boolean) => void; setIsSnoozeDateModalOpen: (value: boolean) => void;
setSelectDuplicateIssue: (value: boolean) => void; setSelectDuplicateIssue: (value: boolean) => void;
handleCopyIssueLink: () => void; handleCopyIssueLink: () => void;
toggleMobileSidebar: boolean; isMobileSidebar: boolean;
setToggleMobileSidebar: (value: boolean) => void; setIsMobileSidebar: (value: boolean) => void;
}; };
export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) => { export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) => {
@ -59,8 +59,8 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
setIsSnoozeDateModalOpen, setIsSnoozeDateModalOpen,
setSelectDuplicateIssue, setSelectDuplicateIssue,
handleCopyIssueLink, handleCopyIssueLink,
toggleMobileSidebar, isMobileSidebar,
setToggleMobileSidebar, setIsMobileSidebar,
} = props; } = props;
const router = useRouter(); const router = useRouter();
const issue = inboxIssue?.issue; const issue = inboxIssue?.issue;
@ -71,10 +71,10 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
return ( return (
<div className="h-12 relative flex border-custom-border-200 w-full items-center gap-2 px-4"> <div className="h-12 relative flex border-custom-border-200 w-full items-center gap-2 px-4">
<PanelLeft <PanelLeft
onClick={() => setToggleMobileSidebar(!toggleMobileSidebar)} onClick={() => setIsMobileSidebar(!isMobileSidebar)}
className={cn( className={cn(
"w-4 h-4 flex-shrink-0 mr-2", "w-4 h-4 flex-shrink-0 mr-2",
toggleMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200" isMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200"
)} )}
/> />
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">

10
web/components/inbox/content/root.tsx
View File

@ -9,12 +9,12 @@ type TInboxContentRoot = {
workspaceSlug: string; workspaceSlug: string;
projectId: string; projectId: string;
inboxIssueId: string; inboxIssueId: string;
toggleMobileSidebar: boolean; isMobileSidebar: boolean;
setToggleMobileSidebar: (value: boolean) => void; setIsMobileSidebar: (value: boolean) => void;
}; };
export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => { export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
const { workspaceSlug, projectId, inboxIssueId, toggleMobileSidebar, setToggleMobileSidebar } = props; const { workspaceSlug, projectId, inboxIssueId, isMobileSidebar, setIsMobileSidebar } = props;
// states // states
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
// hooks // hooks
@ -45,8 +45,8 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
<div className="w-full h-full overflow-hidden relative flex flex-col"> <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"> <div className="flex-shrink-0 min-h-[50px] border-b border-custom-border-300">
<InboxIssueActionsHeader <InboxIssueActionsHeader
setToggleMobileSidebar={setToggleMobileSidebar} setIsMobileSidebar={setIsMobileSidebar}
toggleMobileSidebar={toggleMobileSidebar} isMobileSidebar={isMobileSidebar}
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
projectId={projectId} projectId={projectId}
inboxIssue={inboxIssue} inboxIssue={inboxIssue}

14
web/components/inbox/root.tsx
View File

@ -23,7 +23,7 @@ type TInboxIssueRoot = {
export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => { export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
const { workspaceSlug, projectId, inboxIssueId, inboxAccessible } = props; const { workspaceSlug, projectId, inboxIssueId, inboxAccessible } = props;
// states // states
const [toggleMobileSidebar, setToggleMobileSidebar] = useState(false); const [isMobileSidebar, setIsMobileSidebar] = useState(true);
// hooks // hooks
const { loader, error, fetchInboxIssues } = useProjectInbox(); const { loader, error, fetchInboxIssues } = useProjectInbox();
@ -60,8 +60,8 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
{!inboxIssueId && ( {!inboxIssueId && (
<div className="flex lg:hidden items-center px-4 w-full h-12 border-b border-custom-border-200"> <div className="flex lg:hidden items-center px-4 w-full h-12 border-b border-custom-border-200">
<PanelLeft <PanelLeft
onClick={() => setToggleMobileSidebar(!toggleMobileSidebar)} onClick={() => setIsMobileSidebar(!isMobileSidebar)}
className={cn("w-4 h-4 ", toggleMobileSidebar ? "text-custom-primary-100" : " text-custom-text-200")} className={cn("w-4 h-4 ", isMobileSidebar ? "text-custom-primary-100" : " text-custom-text-200")}
/> />
</div> </div>
)} )}
@ -69,11 +69,11 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
<div <div
className={cn( 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", "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", isMobileSidebar ? "translate-x-0" : "-translate-x-full lg:!translate-x-0"
)} )}
> >
<InboxSidebar <InboxSidebar
setToggleMobileSidebar={setToggleMobileSidebar} setIsMobileSidebar={setIsMobileSidebar}
workspaceSlug={workspaceSlug.toString()} workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()} projectId={projectId.toString()}
/> />
@ -81,8 +81,8 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
{inboxIssueId ? ( {inboxIssueId ? (
<InboxContentRoot <InboxContentRoot
setToggleMobileSidebar={setToggleMobileSidebar} setIsMobileSidebar={setIsMobileSidebar}
toggleMobileSidebar={toggleMobileSidebar} isMobileSidebar={isMobileSidebar}
workspaceSlug={workspaceSlug.toString()} workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()} projectId={projectId.toString()}
inboxIssueId={inboxIssueId.toString()} inboxIssueId={inboxIssueId.toString()}

6
web/components/inbox/sidebar/inbox-list-item.tsx
View File

@ -19,11 +19,11 @@ type InboxIssueListItemProps = {
projectId: string; projectId: string;
projectIdentifier?: string; projectIdentifier?: string;
inboxIssue: IInboxIssueStore; inboxIssue: IInboxIssueStore;
setToggleMobileSidebar: (value: boolean) => void; setIsMobileSidebar: (value: boolean) => void;
}; };
export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props) => { export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props) => {
const { workspaceSlug, projectId, inboxIssue, projectIdentifier,setToggleMobileSidebar } = props; const { workspaceSlug, projectId, inboxIssue, projectIdentifier, setIsMobileSidebar } = props;
// router // router
const router = useRouter(); const router = useRouter();
const { inboxIssueId } = router.query; const { inboxIssueId } = router.query;
@ -35,7 +35,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => { const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => {
if (inboxIssueId === currentIssueId) event.preventDefault(); if (inboxIssueId === currentIssueId) event.preventDefault();
setToggleMobileSidebar(false); setIsMobileSidebar(false);
}; };
if (!issue) return <></>; if (!issue) return <></>;

6
web/components/inbox/sidebar/inbox-list.tsx
View File

@ -10,18 +10,18 @@ export type InboxIssueListProps = {
projectId: string; projectId: string;
projectIdentifier?: string; projectIdentifier?: string;
inboxIssues: IInboxIssueStore[]; inboxIssues: IInboxIssueStore[];
setToggleMobileSidebar: (value: boolean) => void; setIsMobileSidebar: (value: boolean) => void;
}; };
export const InboxIssueList: FC<InboxIssueListProps> = observer((props) => { export const InboxIssueList: FC<InboxIssueListProps> = observer((props) => {
const { workspaceSlug, projectId, projectIdentifier, inboxIssues, setToggleMobileSidebar } = props; const { workspaceSlug, projectId, projectIdentifier, inboxIssues, setIsMobileSidebar } = props;
return ( return (
<> <>
{inboxIssues.map((inboxIssue) => ( {inboxIssues.map((inboxIssue) => (
<Fragment key={inboxIssue.id}> <Fragment key={inboxIssue.id}>
<InboxIssueListItem <InboxIssueListItem
setToggleMobileSidebar={setToggleMobileSidebar} setIsMobileSidebar={setIsMobileSidebar}
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
projectId={projectId} projectId={projectId}
projectIdentifier={projectIdentifier} projectIdentifier={projectIdentifier}

6
web/components/inbox/sidebar/root.tsx
View File

@ -19,7 +19,7 @@ import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
type IInboxSidebarProps = { type IInboxSidebarProps = {
workspaceSlug: string; workspaceSlug: string;
projectId: string; projectId: string;
setToggleMobileSidebar: (value: boolean) => void; setIsMobileSidebar: (value: boolean) => void;
}; };
const tabNavigationOptions: { key: TInboxIssueCurrentTab; label: string }[] = [ const tabNavigationOptions: { key: TInboxIssueCurrentTab; label: string }[] = [
@ -34,7 +34,7 @@ const tabNavigationOptions: { key: TInboxIssueCurrentTab; label: string }[] = [
]; ];
export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => { export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
const { workspaceSlug, projectId, setToggleMobileSidebar } = props; const { workspaceSlug, projectId, setIsMobileSidebar } = props;
// ref // ref
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const elementRef = useRef<HTMLDivElement>(null); const elementRef = useRef<HTMLDivElement>(null);
@ -110,7 +110,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
> >
{inboxIssuesArray.length > 0 ? ( {inboxIssuesArray.length > 0 ? (
<InboxIssueList <InboxIssueList
setToggleMobileSidebar={setToggleMobileSidebar} setIsMobileSidebar={setIsMobileSidebar}
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
projectId={projectId} projectId={projectId}
projectIdentifier={currentProjectDetails?.identifier} projectIdentifier={currentProjectDetails?.identifier}