-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[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>
- Loading branch information
1 parent
9c8b4af
commit 709d3a1
Showing
11 changed files
with
248 additions
and
72 deletions.
There are no files selected for viewing
38 changes: 38 additions & 0 deletions
38
web/components/profile/preferences/preferences-mobile-header.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
177 changes: 177 additions & 0 deletions
177
web/components/profile/profile-issues-mobile-header.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.