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']} className={styles['menu-item']}
onClick={this.onClickMenuItem} onClick={this.onClickMenuItem}
> >
{/* <Menu.Item key={item.key} className={styles['menu-item-no-child']}> */} <span className={styles['menu-item-title-wrapper']}>
{this.renderMenuItemIcon({ item, isSubMenu })} {/* <Menu.Item key={item.key} className={styles['menu-item-no-child']}> */}
<span {this.renderMenuItemIcon({ item, isSubMenu })}
className={ <span
item.level === 0 || (item.level === 1 && !showChildren) className={
? styles['menu-item-title'] item.level === 0 || (item.level === 1 && !showChildren)
: styles['sub-menu-item-title'] ? styles['menu-item-title']
} : styles['sub-menu-item-title']
> }
{item.name.length >= this.maxTitleLength ? ( >
<Tooltip title={item.name} placement="right"> {item.name.length >= this.maxTitleLength ? (
{item.name} <Tooltip title={item.name} placement="right">
</Tooltip> {item.name}
) : ( </Tooltip>
item.name ) : (
)} item.name
)}
</span>
</span> </span>
</Menu.Item> </Menu.Item>
); );

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

@ -390,8 +390,20 @@
.sub-menu-item-title { .sub-menu-item-title {
color: @sider-sub-menu-title-color; color: @sider-sub-menu-title-color;
font-size: @sider-sub-menu-title-font-size; 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 { .sub-menu-title {
display: flex; display: flex;
} }
.menu-item-title-wrapper {
display: flex;
}