Skip to content

unified arrow #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 12, 2017
Merged

unified arrow #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
163dfeb
unified arrow
jljsj33 Sep 11, 2017
e120b75
update arrow name
jljsj33 Sep 11, 2017
a99aa8c
update arrow name
jljsj33 Sep 11, 2017
b7c3f3c
fix tests
jljsj33 Sep 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions assets/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
@menuPrefixCls: rc-menu;

@font-face {
font-family: 'FontAwesome';
src: url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Copy link
Member

@afc163 afc163 Sep 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段也可以删了。


.@{menuPrefixCls} {
outline: none;
margin-bottom: 0;
Expand Down Expand Up @@ -142,6 +150,32 @@
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
padding: 12px 8px 12px 24px;
}
.@{menuPrefixCls}-submenu-arrow {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
vertical-align: baseline;
text-align: center;
text-transform: none;
text-rendering: auto;
position: absolute;
right: 16px;
line-height: 1.5em;
&:before {
content: "\f0da";
Copy link
Member

@afc163 afc163 Sep 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个不需要了吧。

Copy link
Member Author

@jljsj33 jljsj33 Sep 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

他三角用什么？？？这里就用图标吧。。。

}
}
}
&-inline {
.@{menuPrefixCls}-submenu-arrow {
transform: rotate(90deg);
transition: transform .3s;
}
& .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title {
.@{menuPrefixCls}-submenu-arrow {
transform: rotate(-90deg);
}
}
}

&-vertical&-sub {
Expand All @@ -168,6 +202,7 @@
}

&-open {

&-slide-up-enter, &-slide-up-appear {
.effect();
opacity: 0;
Expand Down
3 changes: 1 addition & 2 deletions examples/keyPath.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@ import React from 'react';
import ReactDOM from 'react-dom';
import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
import createReactClass from 'create-react-class';
React.createClass = createReactClass;

import 'rc-menu/assets/index.less';

const Test = React.createClass({
const Test = createReactClass({
onClick(info) {
console.log('click ', info);
},
Expand Down
8 changes: 1 addition & 7 deletions examples/multiple.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,12 @@ function handleDeselect(info) {
console.log('deselect ', info);
}

const titleRight = (<span>sub menu
<i className="fa fa-caret-right pull-right"></i>
</span>);
const titleRight = (<span>sub menu</span>);
const titleRight1 = (<span>sub menu 1
<i className="fa fa-caret-right pull-right"></i>
</span>);
const titleRight2 = (<span>sub menu 2
<i className="fa fa-caret-right pull-right"></i>
</span>);
const titleRight3 = (<span>sub menu 3
<i className="fa fa-caret-right pull-right"></i>
</span>);

function render(container) {
Expand Down Expand Up @@ -64,7 +59,6 @@ function render(container) {
</Menu>
);
ReactDOM.render(<div>
<link href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
<h2>multiple selectable menu</h2>

<p>
Expand Down
3 changes: 1 addition & 2 deletions examples/openKeys.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@ import React from 'react';
import ReactDOM from 'react-dom';
import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
import createReactClass from 'create-react-class';
React.createClass = createReactClass;

import 'rc-menu/assets/index.less';

const Test = React.createClass({
const Test = createReactClass({
getInitialState() {
return {
openKeys: [],
Expand Down
3 changes: 0 additions & 3 deletions examples/scrollable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Menu, { Item as MenuItem } from 'rc-menu';
import createReactClass from 'create-react-class';
React.createClass = createReactClass;

import 'rc-menu/assets/index.less';

Expand All @@ -19,7 +17,6 @@ const menuStyle = {
overflow: 'auto',
};
ReactDOM.render(<div>
<link href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
<h2>keyboard scrollable menu</h2>
<Menu style={menuStyle}>{children}</Menu>
</div>, document.getElementById('__react-content'));
5 changes: 2 additions & 3 deletions examples/selectedKeys.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import React from 'react';
import ReactDOM from 'react-dom';
import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
import createReactClass from 'create-react-class';
React.createClass = createReactClass;

import 'rc-menu/assets/index.less';

const Test = React.createClass({
const Test = createReactClass({
getInitialState() {
return {
destroyed: false,
Expand Down Expand Up @@ -109,7 +109,6 @@ const Test = React.createClass({
const openKeys = this.state.openKeys;

return (<div>
<link href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
<h2>multiple selectable menu</h2>

<p>
Expand Down
17 changes: 4 additions & 13 deletions examples/single.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,10 @@ function handleClick(info) {
console.log('click ', info);
}

const titleRight = (<span>sub menu
<i className="fa fa-caret-right pull-right"></i>
</span>);
const titleRight1 = (<span>sub menu 1
<i className="fa fa-caret-right pull-right"></i>
</span>);
const titleRight2 = (<span>sub menu 2
<i className="fa fa-caret-right pull-right"></i>
</span>);
const titleRight3 = (<span>sub menu 3
<i className="fa fa-caret-right pull-right"></i>
</span>);
const titleRight = (<span>sub menu</span>);
const titleRight1 = (<span>sub menu 1</span>);
const titleRight2 = (<span>sub menu 2</span>);
const titleRight3 = (<span>sub menu 3</span>);

function render(container) {
function destroy() {
Expand Down Expand Up @@ -64,7 +56,6 @@ function render(container) {
</Menu>
);
ReactDOM.render(<div>
<link href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
<h2>single selectable menu</h2>

<p>
Expand Down
1 change: 1 addition & 0 deletions src/SubMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,7 @@ const SubMenu = createReactClass({
aria-haspopup="true"
>
{props.title}
<i className={`${prefixCls}-arrow`} />
</div>
{this.renderChildren(props.children)}
</li>
Expand Down
6 changes: 6 additions & 0 deletions tests/__snapshots__/Menu.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ exports[`Menu render renders horizontal menu correctly 1`] = `
aria-owns="item_3$Menu"
class="rc-menu-submenu-title">
submenu
<i
class="rc-menu-submenu-arrow" />
</div>
</li>
</ul>
Expand Down Expand Up @@ -137,6 +139,8 @@ exports[`Menu render renders inline menu correctly 1`] = `
aria-owns="item_3$Menu"
class="rc-menu-submenu-title">
submenu
<i
class="rc-menu-submenu-arrow" />
</div>
</li>
</ul>
Expand Down Expand Up @@ -209,6 +213,8 @@ exports[`Menu render renders vertical menu correctly 1`] = `
aria-owns="item_3$Menu"
class="rc-menu-submenu-title">
submenu
<i
class="rc-menu-submenu-arrow" />
</div>
</li>
</ul>
Expand Down