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

style: my issue and profile page view dropdown (#1754)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-08-01 19:04:53 +05:30 committed by GitHub
parent 2cd431b4a4
commit d83a76a3aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 159 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
apps/app/components/issues/my-issues/my-issues-view-options.tsx
View File

@ -146,13 +146,16 @@ export const MyIssuesViewOptions: React.FC = () => {
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Group by</h4> <h4 className="text-custom-text-200">Group by</h4>
<div className="w-28">
<CustomMenu <CustomMenu
label={ label={
groupBy === "project" groupBy === "project"
? "Project" ? "Project"
: GROUP_BY_OPTIONS.find((option) => option.key === groupBy)?.name ?? : GROUP_BY_OPTIONS.find((option) => option.key === groupBy)
"Select" ?.name ?? "Select"
} }
className="!w-full"
buttonClassName="w-full"
> >
{GROUP_BY_OPTIONS.map((option) => { {GROUP_BY_OPTIONS.map((option) => {
if (issueView === "kanban" && option.key === null) return null; if (issueView === "kanban" && option.key === null) return null;
@ -170,16 +173,21 @@ export const MyIssuesViewOptions: React.FC = () => {
})} })}
</CustomMenu> </CustomMenu>
</div> </div>
</div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Order by</h4> <h4 className="text-custom-text-200">Order by</h4>
<div className="w-28">
<CustomMenu <CustomMenu
label={ label={
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ?? ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
"Select" "Select"
} }
className="!w-full"
buttonClassName="w-full"
> >
{ORDER_BY_OPTIONS.map((option) => { {ORDER_BY_OPTIONS.map((option) => {
if (groupBy === "priority" && option.key === "priority") return null; if (groupBy === "priority" && option.key === "priority")
return null;
if (option.key === "sort_order") return null; if (option.key === "sort_order") return null;
return ( return (
@ -195,15 +203,19 @@ export const MyIssuesViewOptions: React.FC = () => {
})} })}
</CustomMenu> </CustomMenu>
</div> </div>
</div>
</> </>
)} )}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Issue type</h4> <h4 className="text-custom-text-200">Issue type</h4>
<div className="w-28">
<CustomMenu <CustomMenu
label={ label={
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type) FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
?.name ?? "Select" ?.name ?? "Select"
} }
className="!w-full"
buttonClassName="w-full"
> >
{FILTER_ISSUE_OPTIONS.map((option) => ( {FILTER_ISSUE_OPTIONS.map((option) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
@ -219,32 +231,23 @@ export const MyIssuesViewOptions: React.FC = () => {
))} ))}
</CustomMenu> </CustomMenu>
</div> </div>
</div>
{issueView !== "calendar" && issueView !== "spreadsheet" && ( {issueView !== "calendar" && issueView !== "spreadsheet" && (
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Show empty states</h4> <h4 className="text-custom-text-200">Show empty states</h4>
<div className="w-28">
<ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} /> <ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
</div> </div>
{/* <div className="relative flex justify-end gap-x-3"> </div>
<button type="button" onClick={() => resetFilterToDefault()}>
Reset to default
</button>
<button
type="button"
className="font-medium text-custom-primary"
onClick={() => setNewFilterDefaultView()}
>
Set as default
</button>
</div> */}
</> </>
)} )}
</div> </div>
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<h4 className="text-sm text-custom-text-200">Display Properties</h4> <h4 className="text-sm text-custom-text-200">Display Properties</h4>
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
{Object.keys(properties).map((key) => { {Object.keys(properties).map((key) => {
if (key === "estimate" && !isEstimateActive) return null; if (key === "estimate" && !isEstimateActive) return null;

33
apps/app/components/profile/profile-issues-view-options.tsx
View File

@ -172,13 +172,17 @@ export const ProfileIssuesViewOptions: React.FC = () => {
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Group by</h4> <h4 className="text-custom-text-200">Group by</h4>
<div className="w-28">
<CustomMenu <CustomMenu
label={ label={
groupByProperty === "project" groupByProperty === "project"
? "Project" ? "Project"
: GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty) : GROUP_BY_OPTIONS.find(
?.name ?? "Select" (option) => option.key === groupByProperty
)?.name ?? "Select"
} }
className="!w-full"
buttonClassName="w-full"
> >
{GROUP_BY_OPTIONS.map((option) => { {GROUP_BY_OPTIONS.map((option) => {
if (issueView === "kanban" && option.key === null) return null; if (issueView === "kanban" && option.key === null) return null;
@ -196,13 +200,17 @@ export const ProfileIssuesViewOptions: React.FC = () => {
})} })}
</CustomMenu> </CustomMenu>
</div> </div>
</div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Order by</h4> <h4 className="text-custom-text-200">Order by</h4>
<div className="w-28">
<CustomMenu <CustomMenu
label={ label={
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ?? ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
"Select" "Select"
} }
className="!w-full"
buttonClassName="w-full"
> >
{ORDER_BY_OPTIONS.map((option) => { {ORDER_BY_OPTIONS.map((option) => {
if (groupByProperty === "priority" && option.key === "priority") if (groupByProperty === "priority" && option.key === "priority")
@ -222,15 +230,19 @@ export const ProfileIssuesViewOptions: React.FC = () => {
})} })}
</CustomMenu> </CustomMenu>
</div> </div>
</div>
</> </>
)} )}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Issue type</h4> <h4 className="text-custom-text-200">Issue type</h4>
<div className="w-28">
<CustomMenu <CustomMenu
label={ label={
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type) FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
?.name ?? "Select" ?.name ?? "Select"
} }
className="!w-full"
buttonClassName="w-full"
> >
{FILTER_ISSUE_OPTIONS.map((option) => ( {FILTER_ISSUE_OPTIONS.map((option) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
@ -246,32 +258,23 @@ export const ProfileIssuesViewOptions: React.FC = () => {
))} ))}
</CustomMenu> </CustomMenu>
</div> </div>
</div>
{issueView !== "calendar" && issueView !== "spreadsheet" && ( {issueView !== "calendar" && issueView !== "spreadsheet" && (
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Show empty states</h4> <h4 className="text-custom-text-200">Show empty states</h4>
<div className="w-28">
<ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} /> <ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
</div> </div>
{/* <div className="relative flex justify-end gap-x-3"> </div>
<button type="button" onClick={() => resetFilterToDefault()}>
Reset to default
</button>
<button
type="button"
className="font-medium text-custom-primary"
onClick={() => setNewFilterDefaultView()}
>
Set as default
</button>
</div> */}
</> </>
)} )}
</div> </div>
<div className="space-y-2 py-3"> <div className="space-y-2 py-3">
<h4 className="text-sm text-custom-text-200">Display Properties</h4> <h4 className="text-sm text-custom-text-200">Display Properties</h4>
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
{Object.keys(properties).map((key) => { {Object.keys(properties).map((key) => {
if (key === "estimate" && !isEstimateActive) return null; if (key === "estimate" && !isEstimateActive) return null;