Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-01-31 18:14:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: add ellipsis for menu items with long words

Browse Source
This commit is contained in:
Roman Hotsiy 2017-11-24 11:47:57 +02:00
parent 335deb983e
commit 3421be2ea3
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
2 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/SideMenu/MenuItem.tsx
View File

@ -26,7 +26,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
<OperationMenuItemContent item={item as OperationModel} /> <OperationMenuItemContent item={item as OperationModel} />
) : ( ) : (
<MenuItemLabel depth={item.depth} active={item.active}> <MenuItemLabel depth={item.depth} active={item.active}>
<MenuItemTitle>{item.name}</MenuItemTitle> <MenuItemTitle title={item.name}>{item.name}</MenuItemTitle>
{(item.depth > 0 && {(item.depth > 0 &&
item.items.length > 0 && ( item.items.length > 0 && (
<ShelfIcon float={'right'} direction={item.active ? 'down' : 'right'} /> <ShelfIcon float={'right'} direction={item.active ? 'down' : 'right'} />

2
src/components/SideMenu/styled.elements.ts
View File

@ -136,4 +136,6 @@ export const MenuItemTitle = withProps<{ width?: string }>(styled.span).attrs({
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: ${props => (props.width ? props.width : 'auto')}; width: ${props => (props.width ? props.width : 'auto')};
overflow: hidden;
text-overflow: ellipsis;
`; `;