From 3a4c89336834f440887deed74a3da48bcdb60b0c Mon Sep 17 00:00:00 2001 From: Ramesh Kumar Chandra <31303617+rameshkumarchandra@users.noreply.github.com> Date: Wed, 31 Jan 2024 15:42:20 +0530 Subject: [PATCH] Style/workspace project settings layout (#3520) * style: project settings layout for mobile screens * style: workspace settings layout for mobile screens --- .../account/o-auth/google-sign-in.tsx | 1 - .../widgets/issue-panels/issues-list.tsx | 2 +- .../widgets/issues-by-state-group.tsx | 26 ++++---- web/components/headers/project-settings.tsx | 65 ++++++++++++------- web/components/headers/workspace-settings.tsx | 24 ++++++- web/components/project/form.tsx | 4 +- web/components/workspace/sidebar-dropdown.tsx | 59 ++++++++++------- .../settings-layout/project/layout.tsx | 8 ++- .../settings-layout/workspace/layout.tsx | 8 ++- 9 files changed, 126 insertions(+), 71 deletions(-) diff --git a/web/components/account/o-auth/google-sign-in.tsx b/web/components/account/o-auth/google-sign-in.tsx index 93958bbd2..c1c57baa0 100644 --- a/web/components/account/o-auth/google-sign-in.tsx +++ b/web/components/account/o-auth/google-sign-in.tsx @@ -31,7 +31,6 @@ export const GoogleSignInButton: FC = (props) => { size: "large", logo_alignment: "center", text: type === "sign_in" ? "signin_with" : "signup_with", - width: 384, } as GsiButtonConfiguration // customization attributes ); } catch (err) { diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx index 2076de7fb..af2c11660 100644 --- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx +++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx @@ -77,7 +77,7 @@ export const WidgetIssuesList: React.FC = (props) => { })} > Issues - + {totalIssues} diff --git a/web/components/dashboard/widgets/issues-by-state-group.tsx b/web/components/dashboard/widgets/issues-by-state-group.tsx index f8cd2d50a..bd4171cfa 100644 --- a/web/components/dashboard/widgets/issues-by-state-group.tsx +++ b/web/components/dashboard/widgets/issues-by-state-group.tsx @@ -72,14 +72,14 @@ export const IssuesByStateGroupWidget: React.FC = observer((props) startedCount > 0 ? "started" : unStartedCount > 0 - ? "unstarted" - : backlogCount > 0 - ? "backlog" - : completedCount > 0 - ? "completed" - : canceledCount > 0 - ? "cancelled" - : null; + ? "unstarted" + : backlogCount > 0 + ? "backlog" + : completedCount > 0 + ? "completed" + : canceledCount > 0 + ? "cancelled" + : null; setActiveStateGroup(stateGroup); setDefaultStateGroup(stateGroup); @@ -151,13 +151,13 @@ export const IssuesByStateGroupWidget: React.FC = observer((props) /> {totalCount > 0 ? ( -
-
-
+
+
+
datum.data.color} @@ -189,7 +189,7 @@ export const IssuesByStateGroupWidget: React.FC = observer((props) layers={["arcs", CenteredMetric]} />
-
+
{chartData.map((item) => (
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx index c15a33f8b..eff05aba5 100644 --- a/web/components/headers/project-settings.tsx +++ b/web/components/headers/project-settings.tsx @@ -2,13 +2,13 @@ import { FC } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // ui -import { Breadcrumbs } from "@plane/ui"; +import { Breadcrumbs, CustomMenu } from "@plane/ui"; // helper import { renderEmoji } from "helpers/emoji.helper"; // hooks import { useProject, useUser } from "hooks/store"; // constants -import { EUserProjectRoles } from "constants/project"; +import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project"; // components import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle"; @@ -20,7 +20,7 @@ export const ProjectSettingHeader: FC = observer((props) const { title } = props; // router const router = useRouter(); - const { workspaceSlug } = router.query; + const { workspaceSlug, projectId } = router.query; // store hooks const { membership: { currentProjectRole }, @@ -31,29 +31,48 @@ export const ProjectSettingHeader: FC = observer((props) return (
+
-
- - - {currentProjectDetails?.name.charAt(0)} - - ) - } - link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} - /> - - +
+ + + {currentProjectDetails?.name.charAt(0)} + + ) + } + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} + /> +
+ +
+ +
+ {title} + } + placement="bottom-start" + closeOnSelect + > + {PROJECT_SETTINGS_LINKS.map((item) => ( + router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}> + {item.label} + + ))} +
); diff --git a/web/components/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx index 0086f17fe..625b7991c 100644 --- a/web/components/headers/workspace-settings.tsx +++ b/web/components/headers/workspace-settings.tsx @@ -1,12 +1,13 @@ import { FC } from "react"; import { useRouter } from "next/router"; // ui -import { Breadcrumbs } from "@plane/ui"; +import { Breadcrumbs, CustomMenu } from "@plane/ui"; import { Settings } from "lucide-react"; // hooks import { observer } from "mobx-react-lite"; // components import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle"; +import { WORKSPACE_SETTINGS_LINKS } from "constants/workspace"; export interface IWorkspaceSettingHeader { title: string; @@ -21,7 +22,7 @@ export const WorkspaceSettingHeader: FC = observer((pro return (
- +
= observer((pro icon={} link={`/${workspaceSlug}/settings`} /> - +
+ +
+ {title} + } + placement="bottom-start" + closeOnSelect + > + {WORKSPACE_SETTINGS_LINKS.map((item) => ( + router.push(`/${workspaceSlug}${item.href}`)}> + {item.label} + + ))} +
); diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx index 3badbb8bf..f4ab3e846 100644 --- a/web/components/project/form.tsx +++ b/web/components/project/form.tsx @@ -147,10 +147,10 @@ export const ProjectDetailsForm: FC = (props) => { return (
-
+
{watch("cover_image")!} -
+
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx index 202eec6b4..0dfcfb803 100644 --- a/web/components/workspace/sidebar-dropdown.tsx +++ b/web/components/workspace/sidebar-dropdown.tsx @@ -1,4 +1,4 @@ -import { Fragment } from "react"; +import { Fragment, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import Link from "next/link"; @@ -6,6 +6,7 @@ import { useTheme } from "next-themes"; import { Menu, Transition } from "@headlessui/react"; import { mutate } from "swr"; import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react"; +import { usePopper } from "react-popper"; // hooks import { useApplication, useUser, useWorkspace } from "hooks/store"; // hooks @@ -14,7 +15,6 @@ import useToast from "hooks/use-toast"; import { Avatar, Loader } from "@plane/ui"; // types import { IWorkspace } from "@plane/types"; - // Static Data const userLinks = (workspaceSlug: string, userId: string) => [ { @@ -36,7 +36,6 @@ const userLinks = (workspaceSlug: string, userId: string) => [ icon: Settings, }, ]; - const profileLinks = (workspaceSlug: string, userId: string) => [ { name: "View profile", @@ -49,7 +48,6 @@ const profileLinks = (workspaceSlug: string, userId: string) => [ link: "/profile", }, ]; - export const WorkspaceSidebarDropdown = observer(() => { // router const router = useRouter(); @@ -64,12 +62,25 @@ export const WorkspaceSidebarDropdown = observer(() => { // hooks const { setToastAlert } = useToast(); const { setTheme } = useTheme(); - + // popper-js refs + const [referenceElement, setReferenceElement] = useState(null); + const [popperElement, setPopperElement] = useState(null); + // popper-js init + const { styles, attributes } = usePopper(referenceElement, popperElement, { + placement: "right", + modifiers: [ + { + name: "preventOverflow", + options: { + padding: 12, + }, + }, + ], + }); const handleWorkspaceNavigation = (workspace: IWorkspace) => updateCurrentUser({ last_workspace_id: workspace?.id, }); - const handleSignOut = async () => { await signOut() .then(() => { @@ -85,16 +96,12 @@ export const WorkspaceSidebarDropdown = observer(() => { }) ); }; - const handleItemClick = () => { - console.log('CLICKED') if (window.innerWidth < 768) { toggleSidebar(); } }; - const workspacesList = Object.values(workspaces ?? {}); - // TODO: fix workspaces list scroll return (
@@ -121,14 +128,12 @@ export const WorkspaceSidebarDropdown = observer(() => { activeWorkspace?.name?.charAt(0) ?? "..." )}
- {!sidebarCollapsed && (

{activeWorkspace?.name ? activeWorkspace.name : "Loading..."}

)}
- {!sidebarCollapsed && (
- { workspace?.name?.charAt(0) ?? "..." )} -
{ {userLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => ( - { - if (index > 0) handleItemClick(); - }}> + { + if (index > 0) handleItemClick(); + }} + > { )} - {!sidebarCollapsed && ( - + { className="!text-base" /> - {
{currentUser?.email} {profileLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => ( - { if (index == 0) handleItemClick(); }}> + { + if (index == 0) handleItemClick(); + }} + > @@ -323,4 +338,4 @@ export const WorkspaceSidebarDropdown = observer(() => { )}
); -}); +}); \ No newline at end of file diff --git a/web/layouts/settings-layout/project/layout.tsx b/web/layouts/settings-layout/project/layout.tsx index c029643bf..f5f131269 100644 --- a/web/layouts/settings-layout/project/layout.tsx +++ b/web/layouts/settings-layout/project/layout.tsx @@ -41,11 +41,13 @@ export const ProjectSettingLayout: FC = observer((props) } /> ) : ( -
-
+
+
- {children} +
+ {children} +
); }); diff --git a/web/layouts/settings-layout/workspace/layout.tsx b/web/layouts/settings-layout/workspace/layout.tsx index fac64bf2e..4ee0f1e33 100644 --- a/web/layouts/settings-layout/workspace/layout.tsx +++ b/web/layouts/settings-layout/workspace/layout.tsx @@ -10,11 +10,13 @@ export const WorkspaceSettingLayout: FC = (props) => { const { children } = props; return ( -
-
+
+
- {children} +
+ {children} +
); };