diff --git a/js/component/common.js b/js/component/common.js
index ca83c3dd6..24915c71f 100644
--- a/js/component/common.js
+++ b/js/component/common.js
@@ -11,19 +11,73 @@ var Icon = React.createClass({
}
});
-var Link = React.createClass({
+var toolTipStyle = {
+ position: 'absolute',
+ top: '100%',
+ left: '-120px',
+ width: '260px',
+ padding: '15px',
+ border: '1px solid #aaa',
+ fontSize: '14px',
+};
+var ToolTip = React.createClass({
+ propTypes: {
+ open: React.PropTypes.bool.isRequired,
+ onMouseOut: React.PropTypes.func
+ },
+ render: function() {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+});
+
+var linkContainerStyle = {
+ position: 'relative',
+};
+var Link = React.createClass({
+ getInitialState: function() {
+ return {
+ showTooltip: false,
+ };
+ },
+ handleClick: function() {
+ if (this.props.tooltip) {
+ this.setState({
+ showTooltip: !this.state.showTooltip,
+ });
+ }
+ if (this.props.onClick) {
+ this.props.onClick();
+ }
+ },
+ handleTooltipMouseOut: function() {
+ this.setState({
+ showTooltip: false,
+ });
+ },
render: function() {
- console.log(this.props);
var href = this.props.href ? this.props.href : 'javascript:;',
icon = this.props.icon ? : '',
className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
(this.props.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '');
+
+
return (
-
- {this.props.icon ? icon : '' }
- {this.props.label}
-
+
+
+ {this.props.icon ? icon : '' }
+ {this.props.label}
+
+ {(!this.props.tooltip ? null :
+
+ {this.props.tooltip}
+
+ )}
+
);
}
});
diff --git a/js/page/home.js b/js/page/home.js
index 2898c2ba9..f890f4845 100644
--- a/js/page/home.js
+++ b/js/page/home.js
@@ -207,27 +207,55 @@ var FeaturedContentItem = React.createClass({
var featuredContentStyle = {
width: '100%',
marginTop: '-8px',
+}, featuredContentLegendStyle = {
+ fontSize: '12px',
+ color: '#aaa',
+ verticalAlign: '15%',
};
var FeaturedContent = React.createClass({
render: function() {
return (
- Featured Content
+
+
+
Featured Content
+
+
+
Community Content
+
+
+
+
+
);
}