VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(react): Replace the flag number with a colored badge

Browse source
This commit is contained in:
Jonathan Haas 2025-05-22 19:31:50 +02:00 • committed by Joost De Cock
parent 743314062d
commit c66c9e0a93
1 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
packages/react/components/Editor/components/HeaderMenu.mjs
View file

@ -242,7 +242,8 @@ export const HeaderMenuDraftViewUiPreferences = (props) => {
}
export const HeaderMenuDraftViewFlags = (props) => {
const count = Object.keys(flattenFlags(props.flags)).length
const flatFlags = flattenFlags(props.flags)
const count = Object.keys(flatFlags).length
return (
<HeaderMenuDropdown
@ -254,7 +255,12 @@ export const HeaderMenuDraftViewFlags = (props) => {
<HeaderMenuIcon name="flag" extraClasses="tw:text-secondary" />
<span className="tw:hidden tw:lg:inline">
Flags
<span>({count})</span>
<NumberBadge
value={count}
color={
Object.values(flatFlags).some((it) => it.type === 'error') ? 'error' : 'secondary'
}
/>
</span>
</>
}
@ -264,6 +270,17 @@ export const HeaderMenuDraftViewFlags = (props) => {
)
}
const NumberBadge = ({ value, color = 'secondary', className = '' }) => {
return (
<div
className={`tw:ml-2 tw:inline-flex tw:items-center tw:justify-center tw:rounded-full tw:bg-${color} tw:text-${color}-content tw:text-xs tw:w-5 tw:h-5 tw:leading-none tw:font-semibold ${className}`}
style={{ lineHeight: '1rem' }}
>
{value}
</div>
)
}
export const HeaderMenuDraftViewIcons = (props) => {
const { update, state } = props
const { settings = {} } = state // Guard against undefined settings