Skip to content
Snippets Groups Projects
Commit ee8b084a authored by Kyle Doherty's avatar Kyle Doherty
Browse files

Merge pull request #425 from metabase/react_icon_component 

icon component
parents d699a545 5deebc07
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 71 additions and 135 deletions
resources/frontend_client/app/query_builder/action_button.react.js
+ 2
− 2
View file @ ee8b084a
'use strict';
/*global cx, setTimeout, clearTimeout, OnClickOutside, SelectionModule, CheckIcon*/
/*global cx, setTimeout, clearTimeout, OnClickOutside, SelectionModule, Icon*/
var ActionButton = React.createClass({
displayName: 'ActionButton',
......@@ -69,7 +69,7 @@ var ActionButton = React.createClass({
} else if (this.state.result === "success") {
return (
<span>
<CheckIcon width="12px" height="12px" />
<Icon name='check' width="12px" height="12px" />
{this.props.successText}
</span>
);
......
resources/frontend_client/app/query_builder/add_to_dash_icon.react.js deleted 100644 → 0
+ 0
− 22
View file @ d699a545
'use strict';
var AddToDashIcon = React.createClass({
getDefaultProps: function() {
return {
width: '32',
height: '32',
className: 'Icon-addToDash',
id: 'add-to-dash',
fill: 'currentcolor'
};
},
render: function() {
return (
<svg className={this.props.className} id={this.props.id} viewBox="0 0 32 32" fill={this.props.fill} width={this.props.width} height={this.props.height}>
<path d="M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z"></path>
<path d="M17,15.5 L17,10 L15,10 L15,15.5 L9.5,15.5 L9.5,17.5 L15,17.5 L15,23 L17,23 L17,17.5 L22.5,17.5 L22.5,15.5 L17,15.5 Z"></path>
</svg>
);
}
});
resources/frontend_client/app/query_builder/add_to_dashboard.react.js
+ 2
− 2
View file @ ee8b084a
'use strict';
/*global cx, OnClickOutside, Popover, AddToDashboardPopover, SelectionModule, AddToDashIcon, ReactCSSTransitionGroup*/
/*global cx, OnClickOutside, Popover, AddToDashboardPopover, SelectionModule, Icon, ReactCSSTransitionGroup*/
var AddToDashboard = React.createClass({
displayName: 'AddToDashboard',
......@@ -52,7 +52,7 @@ var AddToDashboard = React.createClass({
return (
<span>
<a className="mx1" href="#" title="Add this data to a dashboard" onClick={this.toggleModal}>
<AddToDashIcon />
<Icon name='addtodash' />
</a>
<ReactCSSTransitionGroup transitionName="Transition-popover">
{this.addToDash()}
......
resources/frontend_client/app/query_builder/add_to_dashboard_popover.react.js
+ 4
− 4
View file @ ee8b084a
'use strict';
/*global cx, ReactCSSTransitionGroup, OnClickOutside, FormField, SelectionModule, CheckIcon, CloseIcon*/
/*global cx, ReactCSSTransitionGroup, OnClickOutside, FormField, SelectionModule, Icon */
var AddToDashboardPopover = React.createClass({
displayName: 'AddToDashboardPopover',
......@@ -111,7 +111,7 @@ var AddToDashboardPopover = React.createClass({
dashboardsList.push(
(
<li className="SelectionItem" onClick={this.addToExistingDash.bind(null, dash, false)}>
<CheckIcon width="12px" height="12px" />
<Icon name='check' width="12px" height="12px" />
<span className="SelectionModule-display">{dash.name}</span>
</li>
)
......@@ -186,7 +186,7 @@ var AddToDashboardPopover = React.createClass({
<div className="Form-offset flex align-center mr4">
<h3 className="flex-full">Create a new dashboard</h3>
<a className="text-grey-3" onClick={this.toggleCreate}>
<CloseIcon width="12px" height="12px"/>
<Icon name='close' width="12px" height="12px"/>
</a>
</div>
......@@ -229,7 +229,7 @@ var AddToDashboardPopover = React.createClass({
renderSuccess: function(message, link) {
return (
<div className="Success py4 flex flex-column align-center text-success">
<CheckIcon width="64px" height="64px" />
<Icon name='check' width="64px" height="64px" />
<div className="AddToDashSuccess ">{message}</div>
<a href={link}>Let me check it out.</a>
</div>
......
resources/frontend_client/app/query_builder/aggregation_widget.react.js
+ 1
− 1
View file @ ee8b084a
'use strict';
/*global _, DateFilter, SelectionModule, CloseIcon*/
/*global _, DateFilter, SelectionModule, Icon */
var AggregationWidget = React.createClass({
displayName: 'AggregationWidget',
......
resources/frontend_client/app/query_builder/check_icon.react.js deleted 100644 → 0
+ 0
− 22
View file @ d699a545
'use strict';
var CheckIcon = React.createClass({
getDefaultProps: function() {
return {
width: '32',
height: '32',
className: 'Icon-check',
id: 'check',
fill: 'currentcolor'
};
},
render: function() {
return (
<svg className={this.props.className} id={this.props.id} viewBox="0 0 32 32" fill={this.props.fill} width={this.props.width} height={this.props.height}>
<path d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z "></path>
</svg>
);
}
});
resources/frontend_client/app/query_builder/close_icon.react.js deleted 100644 → 0
+ 0
− 21
View file @ d699a545
'use strict';
var CloseIcon = React.createClass({
getDefaultProps: function() {
return {
width: '32',
height: '32',
className: 'Icon-close',
id: 'check',
fill: 'currentcolor'
};
},
render: function() {
return (
<svg className={this.props.className} id={this.props.id} viewBox="0 0 32 32" fill={this.props.fill} width={this.props.width} height={this.props.height}>
<path d="M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z "></path>
</svg>
);
}
});
resources/frontend_client/app/query_builder/download_icon.react.js deleted 100644 → 0
+ 0
− 22
View file @ d699a545
'use strict';
var DownloadIcon = React.createClass({
getDefaultProps: function() {
return {
width: '32',
height: '32',
className: 'Icon-download',
id: 'download',
fill: 'currentcolor'
};
},
render: function() {
return (
<svg className={this.props.className} id={this.props.id} viewBox="0 0 32 32" fill={this.props.fill} width={this.props.width} height={this.props.height}>
<path d="M17,16.5 L17,8 L15,8 L15,16.5 L11,16.5 L9.93247919,16.5 L10.6158894,17.3200922 L15.6158894,23.3200922 L16,23.781025 L16.3841106,23.3200922 L21.3841106,17.3200922 L22.0675208,16.5 L21,16.5 L17,16.5 L17,16.5 Z"></path>
<path d="M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z"></path>
</svg>
);
}
});
resources/frontend_client/app/query_builder/expand_icon.react.js deleted 100644 → 0
+ 0
− 21
View file @ d699a545
'use strict';
var ExpandIcon = React.createClass({
getDefaultProps: function() {
return {
width: '32',
height: '32',
className: 'Icon-expand',
id: 'expand',
fill: 'currentcolor'
};
},
render: function() {
return (
<svg {... this.props} viewBox="0 0 32 32">
<path d="M16 4 L28 4 L28 16 L24 12 L20 16 L16 12 L20 8z M4 16 L8 20 L12 16 L16 20 L12 24 L16 28 L4 28z "></path>
</svg>
);
}
});
resources/frontend_client/app/query_builder/filter_widget.react.js
+ 2
− 2
View file @ ee8b084a
'use strict';
/*global DateFilter, SelectionModule, CloseIcon*/
/*global DateFilter, SelectionModule, Icon */
var FilterWidget = React.createClass({
displayName: 'FilterWidget',
......@@ -280,7 +280,7 @@ var FilterWidget = React.createClass({
{this.renderOperatorList()}
{this.renderFilterValue()}
<a onClick={this.props.removeFilter.bind(null, this.props.index)}>
<CloseIcon width="12px" height="12px" />
<Icon name='close' width="12px" height="12px" />
</a>
</div>
);
......
resources/frontend_client/app/query_builder/gui_query_editor.react.js
+ 4
− 6
View file @ ee8b084a
'use strict';
/*global _, cx, AggregationWidget, FilterWidget, LimitWidget, SortWidget, RunButton, SelectionModule, DatabaseSelector, ExpandIcon*/
/*global _, cx, AggregationWidget, FilterWidget, LimitWidget, SortWidget, RunButton, SelectionModule, DatabaseSelector, Icon*/
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
......@@ -467,9 +467,7 @@ var GuiQueryEditor = React.createClass({
this.state.options.fields.length > 0) {
return (
<a className="ml2" onClick={this.addFilter}>
<svg className="icon" width="16px" height="16px" viewBox="0 0 16 16" fill="currentColor">
<path d="M6.57883011,7.57952565 L1.18660637e-12,-4.86721774e-13 L16,-4.92050845e-13 L9.42116989,7.57952565 L9.42116989,13.5542169 L6.57883011,15 L6.57883011,7.57952565 Z"></path>
</svg>
<Icon name='filter' width={16} height={ 16} viewBox='0 0 16 16' />
Filter {(this.state.options) ? this.state.options.name : ""}
</a>
);
......@@ -710,11 +708,11 @@ var GuiQueryEditor = React.createClass({
toggleIcon: function () {
if(this.state.isOpen) {
return (
<ExpandIcon width="16px" height="16px" />
<Icon name='expand' width="16px" height="16px" />
);
} else {
return (
<ExpandIcon width="16px" height="16px" />
<Icon name='expand' width="16px" height="16px" />
);
}
},
......
resources/frontend_client/app/query_builder/header.react.js
+ 3
− 3
View file @ ee8b084a
'use strict';
/*global setTimeout, clearTimeout, Saver, ActionButton, Popover, DownloadIcon, QueryModeToggle, AddToDashboard*/
/*global setTimeout, clearTimeout, Saver, ActionButton, Popover, Icon, QueryModeToggle, AddToDashboard*/
var cx = React.addons.classSet,
ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
......@@ -171,11 +171,11 @@ var QueryHeader = React.createClass({
if (this.props.downloadLink) {
downloadButton = (
<a className="mx1" href={this.props.downloadLink} title="Download this data" target="_blank">
<DownloadIcon>
<Icon name='download'>
<Popover>
<span>Download data</span>
</Popover>
</DownloadIcon>
</Icon>
</a>
);
}
......
resources/frontend_client/app/query_builder/icon.react.js 0 → 100644
+ 46
− 0
View file @ ee8b084a
'use strict';
var Icon = React.createClass({
displayName: 'Icon',
iconPaths: {
addtodash: [
'M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z',
'M17,15.5 L17,10 L15,10 L15,15.5 L9.5,15.5 L9.5,17.5 L15,17.5 L15,23 L17,23 L17,17.5 L22.5,17.5 L22.5,15.5 L17,15.5 Z',
],
check: 'M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z ',
close: 'M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z ',
download: [
'M17,16.5 L17,8 L15,8 L15,16.5 L11,16.5 L9.93247919,16.5 L10.6158894,17.3200922 L15.6158894,23.3200922 L16,23.781025 L16.3841106,23.3200922 L21.3841106,17.3200922 L22.0675208,16.5 L21,16.5 L17,16.5 L17,16.5 Z',
'M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z'
],
expand: 'M16 4 L28 4 L28 16 L24 12 L20 16 L16 12 L20 8z M4 16 L8 20 L12 16 L16 20 L12 24 L16 28 L4 28z ',
filter: 'M6.57883011,7.57952565 L1.18660637e-12,-4.86721774e-13 L16,-4.92050845e-13 L9.42116989,7.57952565 L9.42116989,13.5542169 L6.57883011,15 L6.57883011,7.57952565 Z',
},
getDefaultProps: function () {
return {
width: 32,
height: 32,
fill: 'currentcolor'
};
},
render: function () {
var iconPath = this.iconPaths[this.props.name],
path;
// handle multi path icons which appear as non strings
if(typeof(iconPath) != 'string') {
// create a path for each path present
path = iconPath.map(function (path) {
return (<path d={path} /> );
});
} else {
path = (<path d={iconPath} />);
}
return (
<svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name}>
{path}
</svg>
);
}
});
resources/frontend_client/app/query_builder/limit_widget.react.js
+ 2
− 2
View file @ ee8b084a
'use strict';
/*global DateFilter, SelectionModule, CloseIcon*/
/*global DateFilter, SelectionModule, Icon */
var LimitWidget = React.createClass({
displayName: 'LimitWidget',
......@@ -46,7 +46,7 @@ var LimitWidget = React.createClass({
</div>
<a onClick={this.props.removeLimit}>
<CloseIcon width="12px" height="12px" />
<Icon name='close' width="12px" height="12px" />
</a>
</div>
);
......
resources/frontend_client/app/query_builder/selection_module.react.js
+ 3
− 3
View file @ ee8b084a
'use strict';
/*global cx, OnClickOutside, SearchBar, CloseIcon, CheckIcon*/
/*global cx, OnClickOutside, SearchBar, Icon*/
var SelectionModule = React.createClass({
displayName:'SelectionModule',
......@@ -77,7 +77,7 @@ var SelectionModule = React.createClass({
// if children are provided, use the custom layout display
return (
<li className={itemClassName} onClick={this._select.bind(null, item)} key={index}>
<CheckIcon width="12px" height="12px" />
<Icon name='check' width="12px" height="12px" />
<span className="SelectionModule-display">
{display}
</span>
......@@ -143,7 +143,7 @@ var SelectionModule = React.createClass({
if(this.props.remove) {
remove = (
<div onClick={this.props.remove.bind(null, this.props.index)}>
<CloseIcon className="ml2" width="12px" height="12px" />
<Icon name='close' className="ml2" width="12px" height="12px" />
</div>
);
}
......
resources/frontend_client/app/query_builder/sort_widget.react.js
+ 2
− 2
View file @ ee8b084a
'use strict';
/*global DateFilter, SelectionModule, CloseIcon*/
/*global DateFilter, SelectionModule, Icon */
var SortWidget = React.createClass({
displayName: 'SortWidget',
......@@ -75,7 +75,7 @@ var SortWidget = React.createClass({
</div>
<a onClick={this.props.removeSort.bind(null, this.props.index)}>
<CloseIcon width="12px" height="12px" />
<Icon name='close' width="12px" height="12px" />
</a>
</div>
);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment