yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-07-03 15:11:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: blocks ui (#23311)

Browse Source 
* fix: blocks ui

* fix: pretty

---------

Co-authored-by: Rémi de Juvigny <remi.dejuvigny@strapi.io>
This commit is contained in:
Lucas Boilly 2025-05-27 10:58:15 +02:00 committed by GitHub
parent cef4ff5f13
commit dd588fdca6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksToolbar.tsx
View File

@ -41,6 +41,8 @@ const ToolbarSeparator = styled(Toolbar.Separator)`
background: ${({ theme }) => theme.colors.neutral150}; background: ${({ theme }) => theme.colors.neutral150};
width: 1px; width: 1px;
height: 2.4rem; height: 2.4rem;
margin-left: 0.8rem;
margin-right: 0.8rem;
`; `;
const FlexButton = styled<FlexComponent<'button'>>(Flex)` const FlexButton = styled<FlexComponent<'button'>>(Flex)`
@ -331,7 +333,7 @@ const BlockOption = ({ value, icon: Icon, label, blockSelected }: BlockOptionPro
return ( return (
<SingleSelectOption <SingleSelectOption
startIcon={<Icon fill={isSelected ? 'primary600' : 'neutral600'} />} startIcon={<Icon fill={isSelected ? 'primary600' : 'neutral500'} />}
value={value} value={value}
> >
{formatMessage(label)} {formatMessage(label)}
@ -443,11 +445,11 @@ const ListButton = ({ block, format, location = 'toolbar' }: ListButtonProps) =>
return ( return (
<StyledMenuItem <StyledMenuItem
startIcon={<Icon />}
onSelect={() => toggleList(format)} onSelect={() => toggleList(format)}
isActive={isListActive()} isActive={isListActive()}
disabled={isListDisabled()} disabled={isListDisabled()}
> >
<Icon />
{formatMessage(block.label)} {formatMessage(block.label)}
</StyledMenuItem> </StyledMenuItem>
); );
@ -532,8 +534,12 @@ const LinkButton = ({
if (location === 'menu') { if (location === 'menu') {
return ( return (
<StyledMenuItem onSelect={addLink} isActive={isLinkActive()} disabled={isLinkDisabled()}> <StyledMenuItem
<Link /> startIcon={<Link />}
onSelect={addLink}
isActive={isLinkActive()}
disabled={isLinkDisabled()}
>
{formatMessage(label)} {formatMessage(label)}
</StyledMenuItem> </StyledMenuItem>
); );
@ -651,28 +657,16 @@ const MoreMenu = ({ setLastVisibleIndex, hasHiddenItems, rootRef, children }: Mo
}; };
const StyledMenuItem = styled(Menu.Item)<{ isActive: boolean }>` const StyledMenuItem = styled(Menu.Item)<{ isActive: boolean }>`
&:hover {
background-color: ${({ theme }) => theme.colors.primary100};
}
${(props) => ${(props) =>
props.isActive && props.isActive &&
css` css`
font-weight: bold;
background-color: ${({ theme }) => theme.colors.primary100};
color: ${({ theme }) => theme.colors.primary600}; color: ${({ theme }) => theme.colors.primary600};
font-weight: bold; font-weight: 600;
`} `}
> span {
display: inline-flex;
gap: ${({ theme }) => theme.spaces[2]};
align-items: center;
}
svg { svg {
fill: ${({ theme, isActive }) => fill: ${({ theme, isActive }) =>
isActive ? theme.colors.primary600 : theme.colors.neutral600}; isActive ? theme.colors.primary600 : theme.colors.neutral500};
} }
`; `;
@ -730,8 +724,7 @@ const BlocksToolbar = () => {
/> />
), ),
menu: ( menu: (
<StyledMenuItem onSelect={handleSelect} isActive={isActive}> <StyledMenuItem startIcon={<Icon />} onSelect={handleSelect} isActive={isActive}>
<Icon />
{formatMessage(modifier.label)} {formatMessage(modifier.label)}
</StyledMenuItem> </StyledMenuItem>
), ),
@ -746,8 +739,8 @@ const BlocksToolbar = () => {
{ {
// List buttons can only be rendered together when in the toolbar // List buttons can only be rendered together when in the toolbar
toolbar: ( toolbar: (
<Flex direction="row" gap={1}> <Flex direction="row">
<ToolbarSeparator /> <ToolbarSeparator style={{ marginLeft: '0.4rem' }} />
<Toolbar.ToggleGroup type="single" asChild> <Toolbar.ToggleGroup type="single" asChild>
<Flex gap={1}> <Flex gap={1}>
<ListButton block={blocks['list-unordered']} format="unordered" location="toolbar" /> <ListButton block={blocks['list-unordered']} format="unordered" location="toolbar" />
@ -769,7 +762,7 @@ const BlocksToolbar = () => {
return ( return (
<Toolbar.Root aria-disabled={disabled} asChild> <Toolbar.Root aria-disabled={disabled} asChild>
<ToolbarWrapper gap={2} padding={2} width="100%"> <ToolbarWrapper padding={2} width="100%">
<BlocksDropdown /> <BlocksDropdown />
<ToolbarSeparator /> <ToolbarSeparator />
<Toolbar.ToggleGroup type="multiple" asChild> <Toolbar.ToggleGroup type="multiple" asChild>