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

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

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

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

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

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

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

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

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

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

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

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

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