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: issue filter design (#588)

Browse Source 
* style: redesign issue filter pill

* style: redesign issue label on the view modal
This commit is contained in:
Saheb Giri 2023-03-29 18:18:08 +05:30 committed by GitHub
parent fa9c6581fd
commit 653cc29290
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/app/components/core/issues-view.tsx
View File

@ -33,6 +33,7 @@ import {
import { ExclamationIcon, getStateGroupIcon } from "components/icons";
// helpers
import { getStatesList } from "helpers/state.helper";
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// types
import {
CycleIssueResponse,
@ -424,8 +425,13 @@ export const IssuesView: React.FC<Props> = ({
{Object.keys(filters).map((key) => {
if (filters[key as keyof typeof filters] !== null)
return (
<div key={key} className="flex items-center gap-x-2 rounded bg-white px-2 py-1">
<span className="font-medium capitalize text-gray-500">{key}:</span>
<div
key={key}
className="flex items-center gap-x-2 rounded-full border bg-white px-2 py-1"
>
<span className="font-medium capitalize text-gray-500">
{replaceUnderscoreIfSnakeCase(key)}:
</span>
{filters[key as keyof IIssueFilterOptions] === null ||
(filters[key as keyof IIssueFilterOptions]?.length ?? 0) <= 0 ? (
<span>None</span>
@ -536,7 +542,7 @@ export const IssuesView: React.FC<Props> = ({
return (
<p
key={memberId}
className="inline-flex items-center gap-x-1 rounded-full border px-2 py-0.5 font-medium capitalize"
className="inline-flex items-center gap-x-1 rounded-full px-0.5 py-0.5 font-medium capitalize"
>
<Avatar user={member} />
<span>{member?.first_name}</span>
@ -577,7 +583,7 @@ export const IssuesView: React.FC<Props> = ({
return (
<p
key={memberId}
className="inline-flex items-center gap-x-1 rounded-full border px-2 py-0.5 font-medium capitalize"
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize"
>
<Avatar user={member} />
<span>{member?.first_name}</span>
@ -621,7 +627,6 @@ export const IssuesView: React.FC<Props> = ({
);
})}
</div>
{Object.keys(filters).length > 0 &&
nullFilters.length !== Object.keys(filters).length && (
<PrimaryButton
@ -653,9 +658,10 @@ export const IssuesView: React.FC<Props> = ({
priority: null,
assignees: null,
labels: null,
created_by: null,
})
}
className="mt-2 flex items-center gap-x-1 text-xs"
className="mt-2 flex items-center gap-x-1 rounded-full border bg-white px-3 py-1.5 text-xs"
>
<span>Clear all filters</span>
<XMarkIcon className="h-4 w-4" />
@ -684,7 +690,7 @@ export const IssuesView: React.FC<Props> = ({
isNotEmpty ? (
<>
{isCompleted && (
<div className="flex items-center gap-2 text-sm mb-4 text-gray-500">
<div className="mb-4 flex items-center gap-2 text-sm text-gray-500">
<ExclamationIcon height={14} width={14} />
<span>Completed cycles are not editable.</span>
</div>

8
apps/app/components/views/form.tsx
View File

@ -153,7 +153,7 @@ export const ViewForm: React.FC<Props> = ({
/>
</div>
<div>
<div className="flex gap-4">
<div className="flex gap-4 flex-wrap items-center">
{Object.keys(filters ?? {}).map((key) => {
const queryKey = key as keyof typeof filters;
if (queryKey === "state")
@ -163,7 +163,7 @@ export const ViewForm: React.FC<Props> = ({
const state = statesList.find((state) => state.id === stateID);
if (!state) return null;
return (
<div className="flex items-center gap-2 text-xs" key={state.id}>
<div className="flex items-center gap-2 text-xs border bg-white rounded-full px-2 py-1.5" key={state.id}>
{getStateGroupIcon(state?.group, "16", "16", state?.color)}
{state?.name}
</div>
@ -175,7 +175,7 @@ export const ViewForm: React.FC<Props> = ({
return (
<div className="flex gap-3" key={key}>
{filters.priority?.map((priority) => (
<div className="flex items-center gap-2 text-xs" key={priority}>
<div className="flex items-center gap-2 text-xs border bg-white rounded-full px-2 py-1.5" key={priority}>
{getPriorityIcon(priority)}
{priority}
</div>
@ -190,7 +190,7 @@ export const ViewForm: React.FC<Props> = ({
if (!member) return null;
return (
<div className="flex items-center gap-2 text-xs" key={member.member.id}>
<div className="flex items-center gap-2 text-xs border bg-white rounded-full px-1.5 py-1" key={member.member.id}>
<Avatar user={member.member} />
{member.member.first_name && member.member.first_name !== ""
? member.member.first_name