binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-704] fix: inbox responsiveness (#4275)

Browse source 
* chore: inbox responsiveness

* fix: sidebar in full view

* style: border theme

* condition update
This commit is contained in:
Lakhan Baheti 2024-04-29 00:54:35 +05:30 • committed by GitHub
parent ea436c925a
commit 0c880bbbc8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 258 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/components/inbox/sidebar/inbox-list-item.tsx
View file

@ -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 <></>;

4
web/components/inbox/sidebar/inbox-list.tsx
View file

@ -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}

10
web/components/inbox/sidebar/root.tsx
View file

@ -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}
@ -121,8 +123,8 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
getAppliedFiltersCount > 0
? EmptyStateType.INBOX_SIDEBAR_FILTER_EMPTY_STATE
: currentTab === EInboxIssueCurrentTab.OPEN
? EmptyStateType.INBOX_SIDEBAR_OPEN_TAB
: EmptyStateType.INBOX_SIDEBAR_CLOSED_TAB
? EmptyStateType.INBOX_SIDEBAR_OPEN_TAB
: EmptyStateType.INBOX_SIDEBAR_CLOSED_TAB
}
layout="screen-simple"
/>