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

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

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