Skip to content
Snippets Groups Projects
Commit 18b3da7f authored by Tom Robinson's avatar Tom Robinson
Browse files

Refactor icon code to share more code between Angular/React and support... 

Refactor icon code to share more code between Angular/React and support setting attributes in the definition file

Conflicts:
	resources/frontend_client/app/components/icons/icons.js
	resources/frontend_client/app/icon_paths.js
	resources/frontend_client/app/query_builder/card_favorite_button.react.js
	resources/frontend_client/app/query_builder/header.react.js
	resources/frontend_client/app/query_builder/icon.react.js
parent 9561fb36
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/frontend_client/app/components/icons/icons.js
+ 17
− 7
View file @ 18b3da7f
'use strict';
import ICON_PATHS from 'metabase/icon_paths';
import { loadIcon } from 'metabase/icon_paths';
/*
GENERIC ICONS
......@@ -20,15 +20,25 @@ angular.module('corvus.components')
width: '@?', // a value in PX to define the width of the icon
height: '@?', // a value in PX to define the height of the icon
name: '@', // the name of the icon to be referended from the ICON_PATHS object
path: '@'
path: '@',
'class': '@',
viewBox: '@',
fill: '@'
},
compile: function (element, attrs) {
var icon = ICON_PATHS[attrs.name];
var icon = loadIcon(attrs.name);
// set defaults for width/height in case no width or height are specified
attrs.width = attrs.width || '32px';
attrs.height = attrs.height || '32px';
attrs.path = icon;
if (icon.svg) {
console.warn("mbIcon does not yet support raw SVG");
} else if (icon.path) {
attrs.path = attrs.path || icon.path;
}
for (var attr in icon.attrs) {
if (attrs[attr] == undefined) {
attrs[attr] = icon.attrs[attr];
}
}
}
};
});
......
resources/frontend_client/app/icon_paths.js
+ 33
− 1
View file @ 18b3da7f
......@@ -11,7 +11,7 @@
*/
export default {
export var ICON_PATHS = {
add: 'M19,13 L19,2 L14,2 L14,13 L2,13 L2,18 L14,18 L14,30 L19,30 L19,18 L30,18 L30,13 L19,13 Z',
addtodash: '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',
area: 'M25.4980562,23.9977382 L26.0040287,23.9999997 L26.0040283,22.4903505 L26.0040283,14 L26.0040287,12 L25.3213548,13.2692765 C25.3213548,13.2692765 22.6224921,15.7906709 21.2730607,17.0513681 C21.1953121,17.1240042 15.841225,18.0149981 15.841225,18.0149981 L15.5173319,18.0717346 L15.2903187,18.3096229 L10.5815987,23.2439142 L9.978413,23.9239006 L11.3005782,23.9342813 L25.4980562,23.9977382 L11.3050484,23.9342913 L16.0137684,19 L21.7224883,18 L26.0040283,14 L26.0040283,23.4903505 C26.0040283,23.7718221 25.7731425,23.9989679 25.4980562,23.9977382 Z M7,23.9342913 L14,16 L21,14 L25.6441509,9.35958767 C25.8429057,9.16099288 26.0040283,9.22974944 26.0040283,9.49379817 L26.0040283,13 L26.0040283,24 L7,23.9342913 Z',
......@@ -47,3 +47,35 @@ export default {
statemap: 'M19.4375,6.97396734 L27,8.34417492 L27,25.5316749 L18.7837192,23.3765689 L11.875,25.3366259 L11.875,25.3366259 L11.875,11.0941749 L11.1875,11.0941749 L11.1875,25.5316749 L5,24.1566749 L5,7.65667492 L11.1875,9.03167492 L18.75,6.90135976 L18.75,22.0941749 L19.4375,22.0941749 L19.4375,6.97396734 Z',
table: 'M13.6373197,13.6373197 L18.3626803,13.6373197 L18.3626803,18.3626803 L13.6373197,18.3626803 L13.6373197,13.6373197 Z M18.9533504,18.9533504 L23.6787109,18.9533504 L23.6787109,23.6787109 L18.9533504,23.6787109 L18.9533504,18.9533504 Z M13.6373197,18.9533504 L18.3626803,18.9533504 L18.3626803,23.6787109 L13.6373197,23.6787109 L13.6373197,18.9533504 Z M8.32128906,18.9533504 L13.0466496,18.9533504 L13.0466496,23.6787109 L8.32128906,23.6787109 L8.32128906,18.9533504 Z M8.32128906,8.32128906 L13.0466496,8.32128906 L13.0466496,13.0466496 L8.32128906,13.0466496 L8.32128906,8.32128906 Z M8.32128906,13.6373197 L13.0466496,13.6373197 L13.0466496,18.3626803 L8.32128906,18.3626803 L8.32128906,13.6373197 Z M18.9533504,8.32128906 L23.6787109,8.32128906 L23.6787109,13.0466496 L18.9533504,13.0466496 L18.9533504,8.32128906 Z M18.9533504,13.6373197 L23.6787109,13.6373197 L23.6787109,18.3626803 L18.9533504,18.3626803 L18.9533504,13.6373197 Z M13.6373197,8.32128906 L18.3626803,8.32128906 L18.3626803,13.0466496 L13.6373197,13.0466496 L13.6373197,8.32128906 Z',
};
export function loadIcon(name) {
var def = ICON_PATHS[name];
if (name && def == undefined) {
console.warn('Icon "' + name + '" does not exist.');
}
var icon = {
attrs: {
'class': 'Icon Icon-' + name,
'width': '32px',
'height': '32px',
'viewBox': '0 0 32 32',
'fill': 'currentcolor'
},
svg: undefined,
path: undefined
};
if (typeof def === 'string') {
icon.path = def;
} else if (def != null) {
var { svg, path, attrs } = def;
for (var attr in attrs) {
icon.attrs[attr] = attrs[attr];
}
icon.path = path;
icon.svg = svg;
}
return icon;
}
resources/frontend_client/app/query_builder/icon.react.js
+ 9
− 21
View file @ 18b3da7f
'use strict';
import ICON_PATHS from 'metabase/icon_paths';
import { loadIcon } from 'metabase/icon_paths';
export default React.createClass({
displayName: 'Icon',
getDefaultProps: function () {
return {
width: '32px',
height: '32px',
fill: 'currentcolor',
};
},
render: function () {
var path;
var iconPath = ICON_PATHS[this.props.name];
var icon = loadIcon(this.props.name);
if(typeof(iconPath) != 'string') {
// create a path for each path present
path = iconPath.map(function (path) {
return (<path d={path} /> );
});
// react uses "className" instead of "class"
icon.attrs.className = icon.attrs['class'];
delete icon.attrs['class'];
if (icon.svg) {
return (<svg {... icon.attrs} {... this.props} dangerouslySetInnerHTML={{__html: icon.svg}}></svg>);
} else {
path = (<path d={iconPath} />);
return (<svg {... icon.attrs} {... this.props}><path d={icon.path} /></svg>);
}
return (
<svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name}>
{path}
</svg>
);
}
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment