mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: fliter list item clear button alignment fix (#2741)
This commit is contained in:
parent
446981422e
commit
c291ff05ee
@ -36,7 +36,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<>
|
||||
{values.map((date) => (
|
||||
<div key={date} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<span className="normal-case">{getDateLabel(date)}</span>
|
||||
@ -49,6 +49,6 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
@ -50,6 +50,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
|
||||
className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
|
||||
>
|
||||
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{membersFilters.includes(filterKey) && (
|
||||
<AppliedMembersFilters
|
||||
handleRemove={(val) => handleRemoveFilter(filterKey, val)}
|
||||
@ -78,7 +79,10 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
|
||||
/>
|
||||
)}
|
||||
{filterKey === "state_group" && (
|
||||
<AppliedStateGroupFilters handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} />
|
||||
<AppliedStateGroupFilters
|
||||
handleRemove={(val) => handleRemoveFilter("state_group", val)}
|
||||
values={value}
|
||||
/>
|
||||
)}
|
||||
{filterKey === "project" && (
|
||||
<AppliedProjectFilters
|
||||
@ -95,6 +99,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
|
||||
<X size={12} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
|
@ -15,7 +15,7 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
|
||||
const { handleRemove, labels, values } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<>
|
||||
{values.map((labelId) => {
|
||||
const labelDetails = labels?.find((l) => l.id === labelId);
|
||||
|
||||
@ -40,6 +40,6 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
@ -15,7 +15,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
|
||||
const { handleRemove, members, values } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<>
|
||||
{values.map((memberId) => {
|
||||
const memberDetails = members?.find((m) => m.id === memberId);
|
||||
|
||||
@ -35,6 +35,6 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
@ -15,7 +15,7 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
|
||||
const { handleRemove, values } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<>
|
||||
{values.map((priority) => (
|
||||
<div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<PriorityIcon
|
||||
@ -42,6 +42,6 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
@ -16,7 +16,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
|
||||
const { handleRemove, projects, values } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<>
|
||||
{values.map((projectId) => {
|
||||
const projectDetails = projects?.find((p) => p.id === projectId);
|
||||
|
||||
@ -44,6 +44,6 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
@ -104,9 +104,11 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
|
||||
states={projectStateStore.states?.[projectId?.toString() ?? ""]}
|
||||
/>
|
||||
{storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
|
||||
<div className="flex items-center justify-center flex-shrink-0">
|
||||
<Button variant="primary" size="sm" onClick={handleUpdateView}>
|
||||
Update view
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
@ -14,7 +14,7 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
|
||||
const { handleRemove, values } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<>
|
||||
{values.map((stateGroup) => (
|
||||
<div key={stateGroup} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
|
||||
@ -28,6 +28,6 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
@ -16,7 +16,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
|
||||
const { handleRemove, states, values } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<>
|
||||
{values.map((stateId) => {
|
||||
const stateDetails = states?.find((s) => s.id === stateId);
|
||||
|
||||
@ -36,6 +36,6 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user