diff --git a/resources/frontend_client/app/icon_paths.js b/resources/frontend_client/app/icon_paths.js new file mode 100644 index 0000000000000000000000000000000000000000..4a9b3bea8b24874b431f40b38916c7e85fd76d24 --- /dev/null +++ b/resources/frontend_client/app/icon_paths.js @@ -0,0 +1,32 @@ +'use strict'; + +/* + Metabase Icon Paths + ----- + + These paths represent the current canonical icon set for Metabase.and are referenced by icons + used in both React and Angular components as a central source of truth. + + USAGE: + +*/ + +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: [ + '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', + ], + chevrondown: 'M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z ', + chevronright: 'M12 1 L26 16 L12 31 L8 27 L18 16 L8 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', +}; + +/* module.exports = ICON_PATHS */ diff --git a/resources/frontend_client/app/query_builder/icon.react.js b/resources/frontend_client/app/query_builder/icon.react.js index cf458743cd6f3b89bc52303f73963f612fb5bb36..f8e0f6c82ef5348c3b87412d334ef923f5e48ff6 100644 --- a/resources/frontend_client/app/query_builder/icon.react.js +++ b/resources/frontend_client/app/query_builder/icon.react.js @@ -2,20 +2,6 @@ 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, @@ -24,13 +10,13 @@ var Icon = React.createClass({ }; }, render: function () { - var iconPath = this.iconPaths[this.props.name], + var iconPath = ICON_PATHS[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) { + path = ICON_PATHS.map(function (path) { return (<path d={path} /> ); }); } else {