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

fix: sidebar collapse state not working (#2452)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-10-17 12:18:36 +05:30 committed by GitHub
parent 8cd13e94d5
commit fc99615875
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/components/project/sidebar-list-item.tsx
View File

@ -26,7 +26,6 @@ import { renderEmoji } from "helpers/emoji.helper";
import { IProject } from "types"; import { IProject } from "types";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// components // components
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
import { LeaveProjectModal, DeleteProjectModal } from "components/project"; import { LeaveProjectModal, DeleteProjectModal } from "components/project";
@ -34,7 +33,6 @@ import { PublishProjectModal } from "components/project/publish-project";
type Props = { type Props = {
project: IProject; project: IProject;
sidebarCollapse: boolean;
provided?: DraggableProvided; provided?: DraggableProvided;
snapshot?: DraggableStateSnapshot; snapshot?: DraggableStateSnapshot;
handleCopyText: () => void; handleCopyText: () => void;
@ -75,9 +73,9 @@ const navigation = (workspaceSlug: string, projectId: string) => [
]; ];
export const ProjectSidebarListItem: React.FC<Props> = observer((props) => { export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
const { project, sidebarCollapse, provided, snapshot, handleCopyText, shortContextMenu = false } = props; const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
// store // store
const { projectPublish, project: projectStore }: RootStore = useMobxStore(); const { projectPublish, project: projectStore, theme: themeStore } = useMobxStore();
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -90,6 +88,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
const isAdmin = project.member_role === 20; const isAdmin = project.member_role === 20;
const isViewerOrGuest = project.member_role === 10 || project.member_role === 5; const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
const isCollapsed = themeStore.sidebarCollapsed;
const handleAddToFavorites = () => { const handleAddToFavorites = () => {
if (!workspaceSlug) return; if (!workspaceSlug) return;
@ -152,7 +152,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
<button <button
type="button" type="button"
className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${ className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
sidebarCollapse ? "" : "group-hover:!flex" isCollapsed ? "" : "group-hover:!flex"
} ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`} } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
{...provided?.dragHandleProps} {...provided?.dragHandleProps}
> >
@ -161,16 +161,16 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
</button> </button>
</Tooltip> </Tooltip>
)} )}
<Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!sidebarCollapse}> <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
<Disclosure.Button <Disclosure.Button
as="div" as="div"
className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${ className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
sidebarCollapse ? "justify-center" : `justify-between` isCollapsed ? "justify-center" : `justify-between`
}`} }`}
> >
<div <div
className={`flex items-center flex-grow w-full truncate gap-x-2 ${ className={`flex items-center flex-grow w-full truncate gap-x-2 ${
sidebarCollapse ? "justify-center" : "" isCollapsed ? "justify-center" : ""
}`} }`}
> >
{project.emoji ? ( {project.emoji ? (
@ -187,11 +187,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
</span> </span>
)} )}
{!sidebarCollapse && ( {!isCollapsed && (
<p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p> <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p>
)} )}
</div> </div>
{!sidebarCollapse && ( {!isCollapsed && (
<ChevronDown <ChevronDown
className={`h-4 w-4 flex-shrink-0 ${ className={`h-4 w-4 flex-shrink-0 ${
open ? "rotate-180" : "" open ? "rotate-180" : ""
@ -201,7 +201,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
</Disclosure.Button> </Disclosure.Button>
</Tooltip> </Tooltip>
{!sidebarCollapse && ( {!isCollapsed && (
<CustomMenu <CustomMenu
className="hidden group-hover:block flex-shrink-0" className="hidden group-hover:block flex-shrink-0"
buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400" buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
@ -298,7 +298,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
leaveFrom="transform scale-100 opacity-100" leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0" leaveTo="transform scale-95 opacity-0"
> >
<Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}> <Disclosure.Panel className={`space-y-2 mt-1 ${isCollapsed ? "" : "ml-[2.25rem]"}`}>
{navigation(workspaceSlug as string, project?.id).map((item) => { {navigation(workspaceSlug as string, project?.id).map((item) => {
if ( if (
(item.name === "Cycles" && !project.cycle_view) || (item.name === "Cycles" && !project.cycle_view) ||
@ -315,17 +315,17 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
tooltipContent={`${project?.name}: ${item.name}`} tooltipContent={`${project?.name}: ${item.name}`}
position="right" position="right"
className="ml-2" className="ml-2"
disabled={!sidebarCollapse} disabled={!isCollapsed}
> >
<div <div
className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${ className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
router.asPath.includes(item.href) router.asPath.includes(item.href)
? "bg-custom-primary-100/10 text-custom-primary-100" ? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80" : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${sidebarCollapse ? "justify-center" : ""}`} } ${isCollapsed ? "justify-center" : ""}`}
> >
<item.Icon className="h-4 w-4" /> <item.Icon className="h-4 w-4" />
{!sidebarCollapse && item.name} {!isCollapsed && item.name}
</div> </div>
</Tooltip> </Tooltip>
</a> </a>

10
web/components/project/sidebar-list.tsx
View File

@ -83,6 +83,8 @@ export const ProjectSidebarList: FC = observer(() => {
}); });
}; };
const isCollapsed = themeStore.sidebarCollapsed || false;
/** /**
* Implementing scroll animation styles based on the scroll length of the container * Implementing scroll animation styles based on the scroll length of the container
*/ */
@ -126,7 +128,7 @@ export const ProjectSidebarList: FC = observer(() => {
<Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}> <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
{({ open }) => ( {({ open }) => (
<> <>
{!themeStore?.sidebarCollapsed && ( {!isCollapsed && (
<div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full"> <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
<Disclosure.Button <Disclosure.Button
as="button" as="button"
@ -164,7 +166,6 @@ export const ProjectSidebarList: FC = observer(() => {
<ProjectSidebarListItem <ProjectSidebarListItem
key={project.id} key={project.id}
project={project} project={project}
sidebarCollapse={themeStore?.sidebarCollapsed || false}
provided={provided} provided={provided}
snapshot={snapshot} snapshot={snapshot}
handleCopyText={() => handleCopyText(project.id)} handleCopyText={() => handleCopyText(project.id)}
@ -192,7 +193,7 @@ export const ProjectSidebarList: FC = observer(() => {
<Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}> <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
{({ open }) => ( {({ open }) => (
<> <>
{!themeStore?.sidebarCollapsed && ( {!isCollapsed && (
<div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full"> <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
<Disclosure.Button <Disclosure.Button
as="button" as="button"
@ -233,7 +234,6 @@ export const ProjectSidebarList: FC = observer(() => {
<ProjectSidebarListItem <ProjectSidebarListItem
key={project.id} key={project.id}
project={project} project={project}
sidebarCollapse={themeStore?.sidebarCollapsed || false}
provided={provided} provided={provided}
snapshot={snapshot} snapshot={snapshot}
handleCopyText={() => handleCopyText(project.id)} handleCopyText={() => handleCopyText(project.id)}
@ -266,7 +266,7 @@ export const ProjectSidebarList: FC = observer(() => {
}} }}
> >
<Plus className="h-5 w-5" /> <Plus className="h-5 w-5" />
{!themeStore?.sidebarCollapsed && "Add Project"} {!isCollapsed && "Add Project"}
</button> </button>
)} )}
</div> </div>

26
web/components/workspace/help-section.tsx
View File

@ -51,27 +51,25 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false)); useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
const isCollapsed = themeStore.sidebarCollapsed || false;
return ( return (
<> <>
<div <div
className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${ className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${
themeStore?.sidebarCollapsed ? "flex-col" : "" isCollapsed ? "flex-col" : ""
}`} }`}
> >
{!themeStore?.sidebarCollapsed && ( {!isCollapsed && (
<div className="w-1/2 text-center cursor-default rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500"> <div className="w-1/2 text-center cursor-default rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500">
Free Plan Free Plan
</div> </div>
)} )}
<div <div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"}`}>
className={`flex items-center gap-1 ${
themeStore?.sidebarCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"
}`}
>
<button <button
type="button" type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${ className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
themeStore?.sidebarCollapsed ? "w-full" : "" isCollapsed ? "w-full" : ""
}`} }`}
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
@ -85,7 +83,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<button <button
type="button" type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${ className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
themeStore?.sidebarCollapsed ? "w-full" : "" isCollapsed ? "w-full" : ""
}`} }`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)} onClick={() => setIsNeedHelpOpen((prev) => !prev)}
> >
@ -94,18 +92,18 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<button <button
type="button" type="button"
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden" className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)} onClick={() => themeStore.setSidebarCollapsed(!isCollapsed)}
> >
<MoveLeft className="h-3.5 w-3.5" /> <MoveLeft className="h-3.5 w-3.5" />
</button> </button>
<button <button
type="button" type="button"
className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${ className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
themeStore?.sidebarCollapsed ? "w-full" : "" isCollapsed ? "w-full" : ""
}`} }`}
onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)} onClick={() => themeStore.setSidebarCollapsed(!isCollapsed)}
> >
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${themeStore?.sidebarCollapsed ? "rotate-180" : ""}`} /> <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
</button> </button>
</div> </div>
@ -121,7 +119,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
> >
<div <div
className={`absolute bottom-2 min-w-[10rem] ${ className={`absolute bottom-2 min-w-[10rem] ${
themeStore?.sidebarCollapsed ? "left-full" : "-left-[75px]" isCollapsed ? "left-full" : "-left-[75px]"
} rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs whitespace-nowrap divide-y divide-custom-border-200`} } rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs whitespace-nowrap divide-y divide-custom-border-200`}
ref={helpOptionsRef} ref={helpOptionsRef}
> >