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

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

@ -158,6 +158,7 @@ export class LayoutMenu extends Component {
className={styles['menu-item']} className={styles['menu-item']}
onClick={this.onClickMenuItem} onClick={this.onClickMenuItem}
> >
<span className={styles['menu-item-title-wrapper']}>
{/* <Menu.Item key={item.key} className={styles['menu-item-no-child']}> */} {/* <Menu.Item key={item.key} className={styles['menu-item-no-child']}> */}
{this.renderMenuItemIcon({ item, isSubMenu })} {this.renderMenuItemIcon({ item, isSubMenu })}
<span <span
@ -175,6 +176,7 @@ export class LayoutMenu extends Component {
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;
}