Skip to content

Commit

Permalink
Removed icon dependency from dropdown menu
Browse files Browse the repository at this point in the history
  • Loading branch information
Hai Nguyen committed Jan 20, 2015
1 parent 541f7b9 commit 3c752cb
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 11 deletions.
16 changes: 8 additions & 8 deletions src/js/drop-down-menu.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
var React = require('react'),
Classable = require('./mixins/classable.js'),
ClickAwayable = require('./mixins/click-awayable'),
KeyLine = require('./utils/key-line.js'),
Paper = require('./paper.jsx'),
Icon = require('./icon.jsx'),
Menu = require('./menu.jsx');
var React = require('react');
var Classable = require('./mixins/classable.js');
var ClickAwayable = require('./mixins/click-awayable');
var DropDownArrow = require('./svg-icons/drop-down-arrow.jsx');
var KeyLine = require('./utils/key-line.js');
var Paper = require('./paper.jsx');
var Menu = require('./menu.jsx');

var DropDownMenu = React.createClass({

Expand Down Expand Up @@ -55,7 +55,7 @@ var DropDownMenu = React.createClass({
<div className="mui-menu-label">
{this.props.menuItems[this.state.selectedIndex].text}
</div>
<Icon className="mui-menu-drop-down-icon" icon="navigation-arrow-drop-down" />
<DropDownArrow className="mui-menu-drop-down-icon" />
<div className="mui-menu-control-underline" />
</div>
<Menu
Expand Down
16 changes: 16 additions & 0 deletions src/js/svg-icons/drop-down-arrow.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
var React = require('react');
var SvgIcon = require('./svg-icon.jsx');

var DropDownArrow = React.createClass({

render: function() {
return (
<SvgIcon {...this.props}>
<polygon points="7,9.5 12,14.5 17,9.5 "/>
</SvgIcon>
);
}

});

module.exports = DropDownArrow;
23 changes: 23 additions & 0 deletions src/js/svg-icons/svg-icon.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
var React = require('react');
var Classable = require('../mixins/classable.js');

var SvgIcon = React.createClass({

mixins: [Classable],

render: function() {
var classes = this.getClasses('mui-svg-icon');

return (
<svg
{...this.props}
className={classes}
viewBox="0 0 24 24">
{this.props.children}
</svg>
);
}

});

module.exports = SvgIcon;
1 change: 1 addition & 0 deletions src/less/components/components.less
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
@import "slider.less";
@import "snackbar.less";
@import "subheader.less";
@import "svg-icon.less";
@import "table.less";
@import "tabs.less";
@import "toggle.less";
Expand Down
7 changes: 4 additions & 3 deletions src/less/components/drop-down-menu.less
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@
}

.mui-menu-drop-down-icon {
line-height: @desktop-toolbar-height;
position: absolute;
top: 0;
top: ((@desktop-toolbar-height - 24px) / 2);
right: @desktop-gutter-less;
color: @drop-down-menu-icon-color;
* {
fill: @drop-down-menu-icon-color;
}
}

.mui-menu-control-underline {
Expand Down
11 changes: 11 additions & 0 deletions src/less/components/svg-icon.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.mui-svg-icon {
position: relative;
height: @icon-size;
width: @icon-size;
display: inline-block;
user-select: none;

* {
fill: @body-text-color;
}
}

0 comments on commit 3c752cb

Please sign in to comment.