github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-1508] chore: module and cycle peek view improvement (#4758)

Browse Source 
* chore: module and cycle list layout peek view improvement

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-06-11 17:33:31 +05:30 committed by GitHub
parent cb292b010f
commit b05579d506
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
View File

@ -8,8 +8,12 @@ import { EmptyState } from "@/components/common";
import { PageHead } from "@/components/core";
import { CycleDetailsSidebar } from "@/components/cycles";
import { CycleLayoutRoot } from "@/components/issues/issue-layouts";
// constants
import { EIssuesStoreType } from "@/constants/issue";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useCycle, useProject } from "@/hooks/store";
import { useCycle, useIssues, useProject } from "@/hooks/store";
import useLocalStorage from "@/hooks/use-local-storage";
// assets
import emptyCycle from "@/public/empty-state/cycle.svg";
@ -21,6 +25,7 @@ const CycleDetailPage = observer(() => {
// store hooks
const { fetchCycleDetails, getCycleById } = useCycle();
const { getProjectById } = useProject();
const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
// hooks
const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
// fetching cycle details
@ -41,6 +46,8 @@ const CycleDetailPage = observer(() => {
*/
const toggleSidebar = () => setValue(`${!isSidebarCollapsed}`);
const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
return (
<>
<PageHead title={pageTitle} />
@ -62,7 +69,9 @@ const CycleDetailPage = observer(() => {
</div>
{cycleId && !isSidebarCollapsed && (
<div
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm"
className={cn(
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 z-10"
)}
style={{
boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",

13
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
View File

@ -8,8 +8,12 @@ import { EmptyState } from "@/components/common";
import { PageHead } from "@/components/core";
import { ModuleLayoutRoot } from "@/components/issues";
import { ModuleDetailsSidebar } from "@/components/modules";
// constants
import { EIssuesStoreType } from "@/constants/issue";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useModule, useProject } from "@/hooks/store";
import { useIssues, useModule, useProject } from "@/hooks/store";
import useLocalStorage from "@/hooks/use-local-storage";
// assets
import emptyModule from "@/public/empty-state/module.svg";
@ -21,6 +25,7 @@ const ModuleIssuesPage = observer(() => {
// store hooks
const { fetchModuleDetails, getModuleById } = useModule();
const { getProjectById } = useProject();
const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
// local storage
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
@ -42,6 +47,8 @@ const ModuleIssuesPage = observer(() => {
if (!workspaceSlug || !projectId || !moduleId) return <></>;
const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
return (
<>
<PageHead title={pageTitle} />
@ -62,7 +69,9 @@ const ModuleIssuesPage = observer(() => {
</div>
{moduleId && !isSidebarCollapsed && (
<div
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm"
className={cn(
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 z-10"
)}
style={{
boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",