From 0bebc3e887139e34e9fa9651fc65a8fb79157af6 Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kyle.l.doherty@gmail.com>
Date: Tue, 2 Jun 2015 14:56:30 -0700
Subject: [PATCH] create icon paths and use in react
---
resources/frontend_client/app/icon_paths.js | 32 +++++++++++++++++++
.../app/query_builder/icon.react.js | 18 ++---------
2 files changed, 34 insertions(+), 16 deletions(-)
create mode 100644 resources/frontend_client/app/icon_paths.js
diff --git a/resources/frontend_client/app/icon_paths.js b/resources/frontend_client/app/icon_paths.js
new file mode 100644
index 00000000000..4a9b3bea8b2
--- /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 cf458743cd6..f8e0f6c82ef 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 {
--
GitLab