openstack/skyline-console
Code Issues Proposed changes

fix: update long title style for menu

Browse Source 
1. update long title style for the sub menu
2. update long title style for the menu which has no children

Change-Id: Id2b319e52ebf849de50af7303117868b4dd4d7d6
This commit is contained in:
zhangjingwei 2024-04-12 09:47:13 +08:00
parent 791176a485
commit 84d1e7af72
2 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/layouts/Base/Menu.jsx
View File

@ -158,22 +158,24 @@ export class LayoutMenu extends Component {
className={styles['menu-item']}
onClick={this.onClickMenuItem}
>
{/* <Menu.Item key={item.key} className={styles['menu-item-no-child']}> */}
{this.renderMenuItemIcon({ item, isSubMenu })}
<span
className={
item.level === 0 || (item.level === 1 && !showChildren)
? styles['menu-item-title']
: styles['sub-menu-item-title']
}
>
{item.name.length >= this.maxTitleLength ? (
<Tooltip title={item.name} placement="right">
{item.name}
</Tooltip>
) : (
item.name
)}
<span className={styles['menu-item-title-wrapper']}>
{/* <Menu.Item key={item.key} className={styles['menu-item-no-child']}> */}
{this.renderMenuItemIcon({ item, isSubMenu })}
<span
className={
item.level === 0 || (item.level === 1 && !showChildren)
? styles['menu-item-title']
: styles['sub-menu-item-title']
}
>
{item.name.length >= this.maxTitleLength ? (
<Tooltip title={item.name} placement="right">
{item.name}
</Tooltip>
) : (
item.name
)}
</span>
</span>
</Menu.Item>
);

12
src/layouts/Base/index.less
View File

@ -390,8 +390,20 @@
.sub-menu-item-title {
color: @sider-sub-menu-title-color;
font-size: @sider-sub-menu-title-font-size;
span {
display: inline-block;
max-width: 120px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.sub-menu-title {
display: flex;
}
.menu-item-title-wrapper {
display: flex;
}