binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-3751] chore: work item state icon improvement (#6960)

Browse source 
* chore: return order based on group

* chore: order for workspace stats endpoint

* chore: state response updated

* chore: state icon types updated

* chore: state icon updated

* chore: state settings new icon implementation

* chore: icon implementation

* chore: code refactor

* chore: code refactor

* chore: code refactor

* fix: order field type

---------

Co-authored-by: sangeethailango <sangeethailango21@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2025-04-29 14:33:53 +05:30 • committed by GitHub
parent baabb82669
commit f5449c8f93
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 376 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
View file

@ -4,6 +4,7 @@ import { observer } from "mobx-react";
// icons
import { X } from "lucide-react";
import { EIconSize } from "@plane/constants";
import { TStateGroups } from "@plane/types";
import { StateGroupIcon } from "@plane/ui";
@ -19,7 +20,7 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
<>
{values.map((stateGroup) => (
<div key={stateGroup} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
<StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
<StateGroupIcon stateGroup={stateGroup as TStateGroups} size={EIconSize.SM} />
{stateGroup}
<button
type="button"

8
web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
View file

@ -5,6 +5,7 @@ import { observer } from "mobx-react";
// icons
import { X } from "lucide-react";
import { IState } from "@plane/types";
import { EIconSize } from "@plane/constants";
import { StateGroupIcon } from "@plane/ui";
// types
@ -27,7 +28,12 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
return (
<div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
<StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
<StateGroupIcon
color={stateDetails.color}
stateGroup={stateDetails.group}
size={EIconSize.SM}
percentage={stateDetails?.order}
/>
{stateDetails.name}
{editable && (
<button

10
web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
View file

@ -3,6 +3,7 @@
import React, { useMemo, useState } from "react";
import sortBy from "lodash/sortBy";
import { observer } from "mobx-react";
import { EIconSize } from "@plane/constants";
import { IState } from "@plane/types";
// components
import { Loader, StateGroupIcon } from "@plane/ui";
@ -56,7 +57,14 @@ export const FilterState: React.FC<Props> = observer((props) => {
key={state.id}
isChecked={appliedFilters?.includes(state.id) ? true : false}
onClick={() => handleUpdate(state.id)}
icon={<StateGroupIcon stateGroup={state.group} color={state.color} />}
icon={
<StateGroupIcon
stateGroup={state.group}
color={state.color}
size={EIconSize.MD}
percentage={state?.order}
/>
}
title={state.name}
/>
))}

10
web/core/components/issues/issue-layouts/utils.tsx
View file

@ -11,7 +11,7 @@ import uniq from "lodash/uniq";
import scrollIntoView from "smooth-scroll-into-view-if-needed";
import { ContrastIcon } from "lucide-react";
// plane types
import { EIssuesStoreType, ISSUE_PRIORITIES, STATE_GROUPS } from "@plane/constants";
import { EIconSize, EIssuesStoreType, ISSUE_PRIORITIES, STATE_GROUPS } from "@plane/constants";
import {
GroupByColumnTypes,
IGroupByColumn,
@ -198,8 +198,8 @@ const getStateColumns = (): IGroupByColumn[] | undefined => {
id: state.id,
name: state.name,
icon: (
<div className="h-3.5 w-3.5 rounded-full">
<StateGroupIcon stateGroup={state.group} color={state.color} width="14" height="14" />
<div className="size-4 rounded-full">
<StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.LG} percentage={state.order} />
</div>
),
payload: { state_id: state.id },
@ -213,8 +213,8 @@ const getStateGroupColumns = (): IGroupByColumn[] => {
id: stateGroup.key,
name: stateGroup.label,
icon: (
<div className="h-3.5 w-3.5 rounded-full">
<StateGroupIcon stateGroup={stateGroup.key} width="14" height="14" />
<div className="size-4 rounded-full">
<StateGroupIcon stateGroup={stateGroup.key} size={EIconSize.LG} />
</div>
),
payload: {},