From 9f3122770b06ea6b726ee17c7d63e1f52cefb31a Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kyle.l.doherty@gmail.com>
Date: Tue, 2 Jun 2015 15:33:23 -0700
Subject: [PATCH] new angular icon directive
---
.../app/components/icons/icons.js | 72 ++++++-------------
1 file changed, 21 insertions(+), 51 deletions(-)
diff --git a/resources/frontend_client/app/components/icons/icons.js b/resources/frontend_client/app/components/icons/icons.js
index d6a62ef98bb..56d27863b32 100644
--- a/resources/frontend_client/app/components/icons/icons.js
+++ b/resources/frontend_client/app/components/icons/icons.js
@@ -1,56 +1,26 @@
'use strict';
-// wrap in a closure so we don't expose any of these functions to the outside world
-(function() {
- // define our icons. currently uppercase to handle directive names properly
- var icons = [
- 'Add',
- 'Cards',
- 'Close',
- 'ChevronDown',
- 'ChevronRight',
- 'Check',
- 'Dashboards',
- 'Explore',
- 'Gear',
- 'Grid',
- 'List',
- 'Loading',
- 'Logo',
- 'Search',
- 'Star'
- ];
+/* global ICON_PATHS */
- // ensure icons have proper defaults during the compile step if none are supplied
- function iconCompile (element, attrs) {
- var defaultWidth = '32px',
- defaultHeight = '32px';
+angular.module('corvus.components')
+ .directive('mbIcon', function () {
- attrs.width = attrs.width || defaultWidth;
- attrs.height = attrs.height || defaultHeight;
- }
+ return {
+ restrict: 'E',
+ template: '<svg viewBox="0 0 32 32" ng-attr-width="{{width}}" ng-attr-height="{{height}}" fill="currentcolor"><path ng-attr-d="{{path}}" /></svg>',
+ scope: {
+ 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: '@'
+ },
+ compile: function (element, attrs) {
+ var icon = ICON_PATHS[attrs.name];
- // generate the directive
- function generateIconDirective (name) {
- var templatePrefix = '/app/components/icons/';
-
- return angular.module('corvus.components')
- .directive('cv' + name + 'Icon', function () {
- return {
- restrict: 'E',
- templateUrl: templatePrefix + name.toLowerCase() + '.html',
- scope: {
- width: '@?', // a value in PX to define the width of the icon
- height: '@?' // a value in PX to define the height of the icon
- },
- compile: iconCompile
- };
- });
- }
-
- // for every defined icon, generate a directive
- for(var icon in icons) {
- generateIconDirective(icons[icon]);
- }
-
-}());
+ // 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;
+ }
+ };
+ });
--
GitLab