From 27dcb4e40ad29d648e71292d7c271dc9668debc5 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Sat, 16 Sep 2017 20:50:19 +0800 Subject: [PATCH] Menu: add chalk theme --- examples/docs/en-US/menu.md | 86 +++++++++++------- examples/docs/zh-CN/menu.md | 90 ++++++++++++------- packages/menu/src/menu-item-group.vue | 3 +- packages/menu/src/menu-item.vue | 41 ++++++++- packages/menu/src/menu.vue | 52 +++++++++-- packages/menu/src/submenu.vue | 86 +++++++++++++----- packages/theme-chalk/src/aside.scss | 6 ++ packages/theme-chalk/src/common/var.scss | 10 +-- packages/theme-chalk/src/menu.scss | 107 +++++++++-------------- test/unit/specs/menu.spec.js | 19 +--- 10 files changed, 315 insertions(+), 185 deletions(-) diff --git a/examples/docs/en-US/menu.md b/examples/docs/en-US/menu.md index 29d8d6021..204cf42ec 100644 --- a/examples/docs/en-US/menu.md +++ b/examples/docs/en-US/menu.md @@ -4,7 +4,7 @@ padding-left: 55px; } .el-menu-vertical-demo:not(.el-menu--collapse) { - width: 200px; + width: 240px; min-height: 400px; } .line { @@ -59,9 +59,9 @@ Menu that provides navigation for your website. Top bar NavMenu can be used in a variety of scenarios. -::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. +::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors. ```html - + Processing Center @@ -72,7 +72,14 @@ Top bar NavMenu can be used in a variety of scenarios. Orders
- + Processing Center @@ -108,11 +115,18 @@ Vertical NavMenu with sub-menus. ::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot. ```html - -
With icons
- + +
Default colors
+ - + item one item one @@ -125,18 +139,34 @@ Vertical NavMenu with sub-menus. item one - Navigator Two - Navigator Three + + + Navigator Two + + + + Navigator Three + - -
Without icons
- + +
Custom colors
+ - + item one - item two + item one item three @@ -146,21 +176,14 @@ Vertical NavMenu with sub-menus. item one - Navigator Two - Navigator Three - - - -
Groups
- - - Navigator One - Navigator Two - - - Navigator Three - Navigator Four - + + + Navigator Two + + + + Navigator Three + @@ -251,6 +274,9 @@ Vertical NavMenu could be collapsed. |---------- |-------- |---------- |------------- |-------- | | mode | menu display mode | string | horizontal/vertical | vertical | | collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false | +| background-color | background color of Menu (hex format) | string | — | #ffffff | +| text-color | text color of Menu (hex format) | string | — | #2d2f33 | +| active-text-color | text color of currently active menu item (hex format) | string | — | #1989fa | | theme | theme color | string | light/dark | light | | default-active | index of currently active menu | string | — | — | | default-openeds | array that contains keys of currently active sub-menus | Array | — | — | diff --git a/examples/docs/zh-CN/menu.md b/examples/docs/zh-CN/menu.md index 1e162844a..11faf15e4 100644 --- a/examples/docs/zh-CN/menu.md +++ b/examples/docs/zh-CN/menu.md @@ -4,7 +4,7 @@ padding-left: 55px; } .el-menu-vertical-demo:not(.el-menu--collapse) { - width: 200px; + width: 240px; min-height: 400px; } .line { @@ -59,10 +59,10 @@ 适用广泛的基础用法。 -::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。 +::: demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 ```html - + 处理中心 @@ -73,7 +73,14 @@ 订单管理
- + 处理中心 @@ -106,14 +113,21 @@ 垂直菜单，可内嵌子菜单。 -::: demo 通过 `el-menu-item-group` 组件可以实现菜单进行分组，分组名可以通过 `title` 属性直接设定也可以通过具名 slot 来设定。 +::: demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。 ```html - -
带 icon
- + +
默认颜色
+ - + 选项1 @@ -127,16 +141,33 @@ 选项1 - 导航二 - 导航三 + + + 导航二 + + + + 导航三 + - -
不带 icon
- + +
自定义颜色
+ - - + + + 选项1 选项2 @@ -148,21 +179,14 @@ 选项1 - 导航二 - 导航三 - - - -
分组
- - - 导航一 - 导航二 - - - 导航三 - 导航四 - + + + 导航二 + + + + 导航三 + @@ -251,7 +275,9 @@ |---------- |-------- |---------- |------------- |-------- | | mode | 模式 | string | horizontal,vertical | vertical | | collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false | -| theme | 主题色 | string | light,dark | light | +| background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff | +| text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #2d2f33 | +| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #1989fa | | default-active | 当前激活菜单的 index | string | — | — | | default-openeds | 当前打开的submenu的 key 数组 | Array | — | — | | unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false | diff --git a/packages/menu/src/menu-item-group.vue b/packages/menu/src/menu-item-group.vue index 617a63601..772faea95 100644 --- a/packages/menu/src/menu-item-group.vue +++ b/packages/menu/src/menu-item-group.vue @@ -28,7 +28,7 @@ }, computed: { levelPadding() { - let padding = 10; + let padding = 20; let parent = this.$parent; if (this.rootMenu.collapse) return 20; while (parent && parent.$options.componentName !== 'ElMenu') { @@ -37,7 +37,6 @@ } parent = parent.$parent; } - padding === 10 && (padding = 20); return padding; } } diff --git a/packages/menu/src/menu-item.vue b/packages/menu/src/menu-item.vue index 66b61f61c..4be4e12e5 100644 --- a/packages/menu/src/menu-item.vue +++ b/packages/menu/src/menu-item.vue @@ -1,7 +1,9 @@ @@ -63,27 +68,54 @@ opened() { return this.rootMenu.openedMenus.indexOf(this.index) > -1; }, - active: { - cache: false, - get() { - let isActive = false; - const submenus = this.submenus; - const items = this.items; + active() { + let isActive = false; + const submenus = this.submenus; + const items = this.items; - Object.keys(items).forEach(index => { - if (items[index].active) { - isActive = true; - } - }); + Object.keys(items).forEach(index => { + if (items[index].active) { + isActive = true; + } + }); - Object.keys(submenus).forEach(index => { - if (submenus[index].active) { - isActive = true; - } - }); + Object.keys(submenus).forEach(index => { + if (submenus[index].active) { + isActive = true; + } + }); - return isActive; + return isActive; + }, + hoverBackground() { + return this.rootMenu.hoverBackground; + }, + backgroundColor() { + return this.rootMenu.backgroundColor || ''; + }, + activeTextColor() { + return this.rootMenu.activeTextColor || ''; + }, + textColor() { + return this.rootMenu.textColor || ''; + }, + mode() { + return this.rootMenu.mode; + }, + titleStyle() { + if (this.mode !== 'horizontal') { + return { + color: this.textColor + }; } + return { + borderBottomColor: this.active + ? (this.rootMenu.activeTextColor ? this.activeTextColor : '') + : 'transparent', + color: this.active + ? this.activeTextColor + : this.textColor + }; } }, methods: { @@ -134,6 +166,14 @@ this.timeout = setTimeout(() => { this.rootMenu.closeMenu(this.index); }, 300); + }, + handleTitleMouseenter() { + if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return; + this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.hoverBackground; + }, + handleTitleMouseleave() { + if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return; + this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.backgroundColor || ''; } }, created() { diff --git a/packages/theme-chalk/src/aside.scss b/packages/theme-chalk/src/aside.scss index e69de29bb..9a110b776 100644 --- a/packages/theme-chalk/src/aside.scss +++ b/packages/theme-chalk/src/aside.scss @@ -0,0 +1,6 @@ +@import "mixins/mixins"; + +@include b(aside) { + overflow: auto; + box-sizing: border-box; +} diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 5fdd49789..102ab22aa 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -584,13 +584,9 @@ $--steps-padding: 20px; /* Menu --------------------------*/ -$--menu-item-color: $--link-color; -$--menu-item-fill: $--color-text-placeholder; -$--menu-item-hover-fill: $--disabled-border-base; - -$--dark-menu-item-color: $--link-color; -$--dark-menu-item-fill: $--color-text-secondary; -$--dark-menu-item-hover-fill: $--link-color; +$--menu-item-color: $--color-text-primary; +$--menu-item-fill: $--color-white; +$--menu-item-hover-fill: $--color-primary-light-9; /* Rate --------------------------*/ diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss index 185292179..4af3dc8e6 100644 --- a/packages/theme-chalk/src/menu.scss +++ b/packages/theme-chalk/src/menu.scss @@ -16,7 +16,7 @@ } @include b(menu) { - border-radius: 2px; + border-right: solid 1px #e6e6e6; list-style: none; position: relative; margin: 0; @@ -28,27 +28,9 @@ list-style: none; } - @include m(dark) { - background-color: $--dark-menu-item-fill; - - & .el-menu-item, - & .el-submenu__title { - color: $--color-black; - - &:hover { - background-color: $--color-black; - } - } - - & .el-submenu .el-menu { - background-color: $--color-black; - - & .el-menu-item:hover { - background-color: $--color-black; - } - } - } @include m(horizontal) { + border-right: none; + border-bottom: solid 1px #e6e6e6; & .el-menu-item { float: left; height: 60px; @@ -57,7 +39,8 @@ cursor: pointer; position: relative; box-sizing: border-box; - border-bottom: 5px solid transparent; + border-bottom: 2px solid transparent; + color: $--color-text-secondary; a, a:hover { @@ -65,7 +48,7 @@ } &:hover { - background-color: $--menu-item-hover-fill; + background-color: #fff; } } & .el-submenu { @@ -76,18 +59,23 @@ position: absolute; top: 65px; left: 0; - border:1px solid $--color-black; + border: none; padding: 5px 0; background-color: $--color-white; z-index: 100; min-width: 100%; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04); + box-shadow: $--box-shadow-light; } & .el-submenu__title { height: 60px; line-height: 60px; - border-bottom: 5px solid transparent; + border-bottom: 2px solid transparent; + color: $--color-text-secondary; + } + + .el-submenu__title:hover { + background-color: #fff; } & .el-menu-item { @@ -101,40 +89,18 @@ & .el-submenu__icon-arrow { position: static; vertical-align: middle; - margin-left: 5px; - color: $--color-black; + margin-left: 8px; margin-top: -3px; } } & .el-menu-item:hover, & .el-submenu__title:hover { - background-color: $--menu-item-fill; + color: $--color-text-primary; } - & > .el-menu-item:hover, - & > .el-submenu:hover .el-submenu__title, + & > .el-menu-item.is-active, & > .el-submenu.is-active .el-submenu__title { - border-bottom: 5px solid $--color-primary; - } - - &.el-menu--dark { - & .el-menu-item:hover, - & .el-submenu__title:hover { - background-color: $--dark-menu-item-fill; - } - - & .el-submenu { - .el-menu-item, - .el-submenu-title { - color: $--color-black; - - &:hover { - background-color: $--color-black; - } - } - .el-menu-item.is-active { - color: $--color-primary; - } - } + border-bottom: 2px solid $--color-primary; + color: $--color-text-primary; } } @include m(collapse) { @@ -160,6 +126,10 @@ } } + > .el-menu-item.is-active i { + color: inherit; + } + .el-submenu { position: relative; & .el-menu { @@ -168,6 +138,7 @@ top: 0; left: 100%; z-index: 10; + box-shadow: $--box-shadow-light; } &.is-opened { @@ -196,7 +167,10 @@ margin-right: 0; } &:hover { - background-color: $--color-black; + background-color: $--menu-item-hover-fill; + } + i { + color: $--color-text-secondary; } @include when(active) { color: $--color-primary; @@ -208,26 +182,26 @@ position: relative; @include menu-item; - &:hover { - background-color: $--color-black; - } - & * { vertical-align: middle; } + + i { + color: $--color-text-secondary; + } + + &:hover { + background-color: $--menu-item-hover-fill; + } } & .el-menu { - background-color: $--color-black; + border: none; } & .el-menu-item { height: 50px; line-height: 50px; padding: 0 45px; min-width: 200px; - - &:hover { - background-color: $--color-black; - } } @include e(icon-arrow) { position: absolute; @@ -260,11 +234,10 @@ padding: 0; } @include e(title) { - padding-top: 15px; + padding: 7px 0 7px 20px; line-height: normal; - font-size: 14px; - padding-left: 20px; - color: $--color-black; + font-size: 12px; + color: $--color-text-secondary; } } diff --git a/test/unit/specs/menu.spec.js b/test/unit/specs/menu.spec.js index 2c801af2f..4b5cb1463 100644 --- a/test/unit/specs/menu.spec.js +++ b/test/unit/specs/menu.spec.js @@ -185,7 +185,7 @@ describe('Menu', () => { it('default opened', done => { vm = createVue({ template: ` - + default opened处理中心 @@ -217,25 +217,10 @@ describe('Menu', () => { }); }); }); - it('theme', () => { - vm = createVue({ - template: ` - - 处理中心 - 订单管理 - - `, - data() { - return { - }; - } - }, true); - expect(vm.$el.classList.contains('el-menu--dark')).to.be.true; - }); it('unique-opened', done => { vm = createVue({ template: ` - + 处理中心