[WEB-711] style: profile and its settings pages responsiveness (#4022)

* [WEB-711] style: profile and its settings pages responsiveness * chore: linting issues fix * fix: mobile-view padding --------- Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
2024-06-14 14:31:34 +00:00 · 2024-04-29 12:59:49 +05:30 · 2024-04-29 12:59:49 +05:30 · 709d3a115b
commit 709d3a115b
parent 9c8b4afc20
11 changed files with 248 additions and 72 deletions
--- a/web/components/profile/preferences/preferences-mobile-header.tsx
+++ b/web/components/profile/preferences/preferences-mobile-header.tsx
@ -0,0 +1,38 @@
+import Link from "next/link";
+import router from "next/router";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export const PreferencesMobileHeader = () => {
+  const profilePreferenceLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "Theme",
+      href: `/profile/preferences/theme`,
+    },
+    {
+      label: "Email",
+      href: `/profile/preferences/email`,
+    },
+  ];
+
+  return (
+    <div className={cn("sticky top-0 flex md:hidden w-full border-b border-custom-border-200")}>
+      {profilePreferenceLinks.map((link, index) => (
+        <Link
+          key={index}
+          href={link.href}
+          onClick={() => console.log(router.asPath)}
+          className={cn(
+            "flex justify-around py-2 w-full",
+            router.asPath.includes(link.label.toLowerCase()) ? "border-b-2 border-custom-primary-100" : ""
+          )}
+        >
+          <div className="text-sm text-custom-text-200">{link.label}</div>
+        </Link>
+      ))}
+    </div>
+  );
+};
--- a/web/components/profile/profile-issues-mobile-header.tsx
+++ b/web/components/profile/profile-issues-mobile-header.tsx
@ -0,0 +1,177 @@
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+// icons
+import { ChevronDown } from "lucide-react";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// components
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
+// constants
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "@/constants/issue";
+// hooks
+import { useIssues, useLabel } from "@/hooks/store";
+
+
+const ProfileIssuesMobileHeader = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+  // store hook
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.PROFILE);
+
+  const { workspaceLabels } = useLabel();
+  // derived values
+  const states = undefined;
+  // const members = undefined;
+  // const activeLayout = issueFilters?.displayFilters?.layout;
+  // const states = undefined;
+  const members = undefined;
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        { layout: layout },
+        userId.toString()
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !userId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.FILTERS,
+        { [key]: newValues },
+        userId.toString()
+      );
+    },
+    [workspaceSlug, issueFilters, updateFilters, userId]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        updatedDisplayFilter,
+        userId.toString()
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_PROPERTIES,
+        property,
+        userId.toString()
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+  return (
+    <div className="flex justify-evenly border-b border-custom-border-200 py-2 md:hidden">
+      <CustomMenu
+        maxHeight={"md"}
+        className="flex flex-grow justify-center text-sm text-custom-text-200"
+        placement="bottom-start"
+        customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
+        customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+        closeOnSelect
+      >
+        {ISSUE_LAYOUTS.map((layout, index) => {
+          if (layout.key === "spreadsheet" || layout.key === "gantt_chart" || layout.key === "calendar") return;
+          return (
+            <CustomMenu.MenuItem
+              key={index}
+              onClick={() => {
+                handleLayoutChange(ISSUE_LAYOUTS[index].key);
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="h-3 w-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <FiltersDropdown
+          title="Filters"
+          placement="bottom-end"
+          menuButton={
+            <span className="flex items-center text-sm text-custom-text-200">
+              Filters
+              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" />
+            </span>
+          }
+        >
+          <FilterSelection
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+            }
+            filters={issueFilters?.filters ?? {}}
+            handleFiltersUpdate={handleFiltersUpdate}
+            states={states}
+            labels={workspaceLabels}
+            memberIds={members}
+          />
+        </FiltersDropdown>
+      </div>
+      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <FiltersDropdown
+          title="Display"
+          placement="bottom-end"
+          menuButton={
+            <span className="flex items-center text-sm text-custom-text-200">
+              Display
+              <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
+            </span>
+          }
+        >
+          <DisplayFiltersSelection
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+            }
+            displayFilters={issueFilters?.displayFilters ?? {}}
+            handleDisplayFiltersUpdate={handleDisplayFilters}
+            displayProperties={issueFilters?.displayProperties ?? {}}
+            handleDisplayPropertiesUpdate={handleDisplayProperties}
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
+
+export default ProfileIssuesMobileHeader;
--- a/web/layouts/settings-layout/profile/preferences/layout.tsx
+++ b/web/layouts/settings-layout/profile/preferences/layout.tsx
@ -1,10 +1,7 @@
 import { FC, ReactNode } from "react";
 // layout
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { ChevronDown } from "lucide-react";
-import { CustomMenu } from "@plane/ui";
 import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { PreferencesMobileHeader } from "@/components/profile/preferences/preferences-mobile-header";
 import { useApplication } from "@/hooks/store";
 import { ProfileSettingsLayout } from "@/layouts/settings-layout";
 import { ProfilePreferenceSettingsSidebar } from "./sidebar";
@ -16,66 +13,27 @@ interface IProfilePreferenceSettingsLayout {

 export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
  const { children, header } = props;
-  const router = useRouter();
  const { theme: themeStore } = useApplication();

-  const showMenuItem = () => {
-    const item = router.asPath.split("/");
-    let splittedItem = item[item.length - 1];
-    splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase());
-    return splittedItem;
-  };
-
-  const profilePreferenceLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "Theme",
-      href: `/profile/preferences/theme`,
-    },
-    {
-      label: "Email",
-      href: `/profile/preferences/email`,
-    },
-  ];

  return (
    <ProfileSettingsLayout
      header={
        <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
          <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
-          <CustomMenu
-            maxHeight={"md"}
-            className="flex flex-grow justify-center text-custom-text-200 text-sm"
-            placement="bottom-start"
-            customButton={
-              <div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400">
-                <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{showMenuItem()}</span>
-                <ChevronDown className="w-4 h-4 text-custom-text-400" />
-              </div>
-            }
-            customButtonClassName="flex flex-grow justify-start text-custom-text-200 text-sm"
-          >
-            <></>
-            {profilePreferenceLinks.map((link) => (
-              <CustomMenu.MenuItem className="flex items-center gap-2">
-                <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">
-                  {link.label}
-                </Link>
-              </CustomMenu.MenuItem>
-            ))}
-          </CustomMenu>
        </div>
      }
    >
-      <div className="relative flex h-screen w-full overflow-hidden">
+      <div className="h-full">
+        <PreferencesMobileHeader />
+        <div className="relative flex h-full w-full overflow-hidden">
          <ProfilePreferenceSettingsSidebar />
          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
            {header}
-          <div className="h-full w-full overflow-hidden">{children}</div>
+            <div className="h-full w-full">{children}</div>
          </main>
        </div>
+      </div>
    </ProfileSettingsLayout>
  );
 };
--- a/web/layouts/user-profile-layout/layout.tsx
+++ b/web/layouts/user-profile-layout/layout.tsx
@ -2,10 +2,10 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // components
 import { ProfileNavbar, ProfileSidebar } from "@/components/profile";
-// hooks
-import { useUser } from "@/hooks/store";
 // constants
 import { EUserWorkspaceRoles } from "@/constants/workspace";
+// hooks
+import { useUser } from "@/hooks/store";

 type Props = {
  children: React.ReactNode;
@ -28,8 +28,7 @@ export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
  const isAuthorizedPath = router.pathname.includes("assigned" || "created" || "subscribed");

  return (
-    <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
-      <ProfileSidebar />
+    <div className="h-full w-full flex md:overflow-hidden">
      <div className="flex w-full flex-col md:h-full md:overflow-hidden">
        <ProfileNavbar isAuthorized={!!isAuthorized} showProfileIssuesFilter={showProfileIssuesFilter} />
        {isAuthorized || !isAuthorizedPath ? (
@ -40,6 +39,7 @@ export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
          </div>
        )}
      </div>
+        <ProfileSidebar />
    </div>
  );
 });
--- a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
@ -1,11 +1,12 @@
 import React, { ReactElement } from "react";
-// layouts
+// components
 import { PageHead } from "@/components/core";
 import { UserProfileHeader } from "@/components/headers";
 import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+import ProfileIssuesMobileHeader from "@/components/profile/profile-issues-mobile-header";
+// layouts
 import { AppLayout } from "@/layouts/app-layout";
 import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
-// components
 // types
 import { NextPageWithLayout } from "@/lib/types";

@ -18,7 +19,7 @@ const ProfileAssignedIssuesPage: NextPageWithLayout = () => (

 ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
  return (
-    <AppLayout header={<UserProfileHeader type="Assigned" />}>
+    <AppLayout header={<UserProfileHeader type="Assigned" />} mobileHeader={<ProfileIssuesMobileHeader />}>
      <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
    </AppLayout>
  );
--- a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
@ -1,13 +1,14 @@
 import { ReactElement } from "react";
 // store
 import { observer } from "mobx-react-lite";
-// layouts
+// components
 import { PageHead } from "@/components/core";
 import { UserProfileHeader } from "@/components/headers";
 import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+import ProfileIssuesMobileHeader from "@/components/profile/profile-issues-mobile-header";
+// layouts
 import { AppLayout } from "@/layouts/app-layout";
 import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
-// components
 // types
 import { NextPageWithLayout } from "@/lib/types";

@ -20,7 +21,7 @@ const ProfileCreatedIssuesPage: NextPageWithLayout = () => (

 ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
  return (
-    <AppLayout header={<UserProfileHeader type="Created" />}>
+    <AppLayout header={<UserProfileHeader type="Created" />} mobileHeader={<ProfileIssuesMobileHeader />}>
      <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
    </AppLayout>
  );
--- a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
@ -1,13 +1,14 @@
 import { ReactElement } from "react";
 // store
 import { observer } from "mobx-react-lite";
-// layouts
+// components
 import { PageHead } from "@/components/core";
 import { UserProfileHeader } from "@/components/headers";
 import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+import ProfileIssuesMobileHeader from "@/components/profile/profile-issues-mobile-header";
+// layouts
 import { AppLayout } from "@/layouts/app-layout";
 import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
-// components
 // types
 import { NextPageWithLayout } from "@/lib/types";

@ -20,7 +21,7 @@ const ProfileSubscribedIssuesPage: NextPageWithLayout = () => (

 ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
  return (
-    <AppLayout header={<UserProfileHeader type="Subscribed" />}>
+    <AppLayout header={<UserProfileHeader type="Subscribed" />} mobileHeader={<ProfileIssuesMobileHeader />}>
      <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
    </AppLayout>
  );
--- a/web/pages/profile/change-password.tsx
+++ b/web/pages/profile/change-password.tsx
@ -91,7 +91,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
        </div>
        <form
          onSubmit={handleSubmit(handleChangePassword)}
-          className="mx-auto mt-16 flex h-full w-full flex-col gap-8 px-8 pb-8 lg:w-3/5"
+          className="mx-auto md:mt-16 mt-10 flex h-full w-full flex-col gap-8 px-4 md:px-8 pb-8 lg:w-3/5"
        >
          <h3 className="text-xl font-medium">Change password</h3>
          <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-10 xl:grid-cols-2 2xl:grid-cols-3">
--- a/web/pages/profile/index.tsx
+++ b/web/pages/profile/index.tsx
@ -172,7 +172,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
            )}
          />
          <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
-          <div className="vertical-scrollbar scrollbar-md mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto px-8 pb-8 pt-10 md:pt-16 lg:w-3/5">
+          <div className="vertical-scrollbar scrollbar-md mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto px-4 md:px-8 pb-8 pt-10 md:pt-16 lg:w-3/5">
            <form onSubmit={handleSubmit(onSubmit)}>
              <div className="flex w-full flex-col gap-8">
                <div className="relative h-44 w-full">
@ -222,7 +222,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                  </div>
                </div>

-                <div className="item-center mt-4 flex justify-between px-8">
+                <div className="item-center mt-4 flex justify-between md:px-8">
                  <div className="flex flex-col">
                    <div className="item-center flex text-lg font-semibold text-custom-text-100">
                      <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
@ -238,7 +238,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
            </Link> */}
                </div>

-                <div className="grid grid-cols-1 gap-6 px-8 lg:grid-cols-2 2xl:grid-cols-3">
+                <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3">
                  <div className="flex flex-col gap-1">
                    <h4 className="text-sm">
                      First name<span className="text-red-500">*</span>
@ -423,7 +423,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                </div>
              </div>
            </form>
-            <Disclosure as="div" className="border-t border-custom-border-100 px-8">
+            <Disclosure as="div" className="border-t border-custom-border-100 md:px-8">
              {({ open }) => (
                <>
                  <Disclosure.Button
--- a/web/pages/profile/preferences/email.tsx
+++ b/web/pages/profile/preferences/email.tsx
@ -28,7 +28,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = () => {
  return (
    <>
      <PageHead title="Profile - Email Preference" />
-      <div className="mx-auto mt-8 h-full w-full px-6 lg:px-20 pb-8 vertical-scrollbar scrollbar-md">
+      <div className="mx-auto mt-8 h-full w-full md:px-6 px-4 lg:px-20 pb-8 vertical-scrollbar scrollbar-md">
        <EmailNotificationForm data={data} />
      </div>
    </>
--- a/web/pages/profile/preferences/theme.tsx
+++ b/web/pages/profile/preferences/theme.tsx
@ -54,7 +54,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
    <>
      <PageHead title="Profile - Theme Prefrence" />
      {currentUser ? (
-        <div className="mx-auto mt-10 h-full w-full overflow-y-auto px-6 pb-8 md:mt-14 lg:px-20 vertical-scrollbar scrollbar-md">
+        <div className="mx-auto mt-10 h-full w-full overflow-y-auto md:px-6 px-4 pb-8 md:mt-14 lg:px-20 vertical-scrollbar scrollbar-md">
          <div className="flex items-center border-b border-custom-border-100 pb-3.5">
            <h3 className="text-xl font-medium">Preferences</h3>
          </div>