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

feat: list and kanban view group by header icon (#665)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-31 21:20:23 +05:30 committed by GitHub
parent c940641ba1
commit 9f34f41982
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/app/components/core/board-view/board-header.tsx
View File

@ -9,9 +9,11 @@ import issuesService from "services/issues.service";
import projectService from "services/project.service";
// hooks
import useIssuesView from "hooks/use-issues-view";
// component
import { Avatar } from "components/ui";
// icons
import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
import { getStateGroupIcon } from "components/icons";
import { getPriorityIcon, getStateGroupIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
// types
@ -89,9 +91,39 @@ export const BoardHeader: React.FC<Props> = ({
return title;
};
const getGroupIcon = () => {
let icon;
switch (selectedGroup) {
case "state":
icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
break;
case "priority":
icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
break;
case "labels":
const labelColor =
issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
icon = (
<span
className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
style={{ backgroundColor: labelColor }}
/>
);
break;
case "created_by":
const member = members?.find((member) => member.member.id === groupTitle)?.member;
icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
break;
}
return icon;
};
return (
<div
className={`flex justify-between px-1 ${
className={`flex justify-between items-center px-1 ${
!isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
}`}
>
@ -101,7 +133,7 @@ export const BoardHeader: React.FC<Props> = ({
!isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
}`}
>
{currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor)}
<span className="flex items-center">{getGroupIcon()}</span>
<h2
className="text-lg font-semibold capitalize"
style={{

42
apps/app/components/core/list-view/single-list.tsx
View File

@ -12,10 +12,10 @@ import useIssuesProperties from "hooks/use-issue-properties";
// components
import { SingleListIssue } from "components/core";
// ui
import { CustomMenu } from "components/ui";
import { Avatar, CustomMenu } from "components/ui";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
import { getStateGroupIcon } from "components/icons";
import { getPriorityIcon, getStateGroupIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
// types
@ -99,6 +99,36 @@ export const SingleList: React.FC<Props> = ({
return title;
};
const getGroupIcon = () => {
let icon;
switch (selectedGroup) {
case "state":
icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
break;
case "priority":
icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
break;
case "labels":
const labelColor =
issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
icon = (
<span
className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
style={{ backgroundColor: labelColor }}
/>
);
break;
case "created_by":
const member = members?.find((member) => member.member.id === groupTitle)?.member;
icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
break;
}
return icon;
};
return (
<Disclosure key={groupTitle} as="div" defaultOpen>
{({ open }) => (
@ -110,12 +140,8 @@ export const SingleList: React.FC<Props> = ({
>
<Disclosure.Button>
<div className="flex items-center gap-x-3">
{selectedGroup !== null && selectedGroup === "state" ? (
<span>
{currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor)}
</span>
) : (
""
{selectedGroup !== null && (
<span className="flex items-center">{getGroupIcon()}</span>
)}
{selectedGroup !== null ? (
<h2 className="text-base font-semibold capitalize leading-6 text-gray-800">