only supporting svg icons

mansona · Nov 11, 2019 · 9d75398 · 9d75398
1 parent d31259a
commit 9d75398
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 315 deletions.
diff --git a/addon/components/notification-message.js b/addon/components/notification-message.js
@@ -1,7 +1,6 @@
 import { htmlSafe } from '@ember/string';
 import Component from '@ember/component';
-import { computed, get } from '@ember/object';
-import { equal } from '@ember/object/computed';
+import { computed } from '@ember/object';
 import Ember from 'ember';
 import layout from '../templates/components/notification-message';
 
@@ -32,45 +31,15 @@ export default Component.extend({
     return false;
   }),
 
-  canShowSVG: equal('icons', 'svg'),
-
-  closeIcon: computed('icons', function() {
-    const icons = this.get('icons');
-    if (icons === 'bootstrap') return 'glyphicon glyphicon-remove';
-
-    if(icons === 'svg') return 'close';
-
-    return 'fa fa-times';
-  }),
-
-  // Set icon depending on notification type
-  notificationIcon: computed('notification.type', 'icons', function() {
-    const icons = this.get('icons');
-    const notificationType = this.get('notification.type');
-
-    if(icons == 'svg') return get(this.get('svgs'), notificationType);
-
-    if (icons === 'bootstrap') {
-      switch (notificationType){
-        case "info":
-          return 'glyphicon glyphicon-info-sign';
-        case "success":
-          return 'glyphicon glyphicon-ok-sign';
-        case "warning":
-        case "error":
-          return 'glyphicon glyphicon-exclamation-sign';
-      }
-    }
-
-    switch (notificationType){
+  notificationSVGPath: computed('notification.type', function() {
+    switch(this.get('notification.type')) {
+      case "error":
       case "info":
-        return 'fa fa-info-circle';
+        return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';
       case "success":
-        return 'fa fa-check';
+        return 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z';
       case "warning":
-        return 'fa fa-warning';
-      case "error":
-        return 'fa fa-exclamation-circle';
+        return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';
     }
 
     return '';

diff --git a/addon/templates/components/notification-message.hbs b/addon/templates/components/notification-message.hbs
@@ -1,18 +1,8 @@
 <div class="c-notification__icon">
-  {{#if canShowSVG}}
+  {{#if notificationSVGPath}}
     <svg class="c-notification__svg" fill="#FFFFFF" viewBox="0 0 24 24" height="48" width="48" xmlns="http://www.w3.org/2000/svg">
-      {{#if (equal notificationIcon 'success')}}
-        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-      {{else if (equal notificationIcon 'warning')}}
-        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-      {{else if (equal notificationIcon 'info')}}
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-      {{else if (equal notificationIcon 'error')}}
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-      {{/if}}
+      <path d={{notificationSVGPath}}></path>
     </svg>
-  {{else}}
-    <i class={{notificationIcon}}></i>
   {{/if}}
 </div>
 <div class="c-notification__content">
@@ -22,11 +12,7 @@
     {{notification.message}}
   {{/if}}
   <div class="c-notification__close" {{action "removeNotification"}} title="Dismiss this notification">
-    {{#if canShowSVG}}
-      <svg class="c-notification__svg" name="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="1024" height="1024" fill="#FFF"><path d="M21.734 19.64l-2.097 2.094a.983.983 0 0 1-1.395 0L13 16.496l-5.238 5.238a.988.988 0 0 1-1.399 0l-2.097-2.093a.988.988 0 0 1 0-1.399L9.504 13 4.266 7.762a.995.995 0 0 1 0-1.399l2.097-2.097a.988.988 0 0 1 1.399 0L13 9.508l5.242-5.242a.983.983 0 0 1 1.395 0l2.097 2.093a.996.996 0 0 1 .004 1.403L16.496 13l5.238 5.242a.988.988 0 0 1 0 1.399z"/></svg>
-    {{else}}
-      <i class={{closeIcon}}></i>
-    {{/if}}
+    <svg class="c-notification__svg" name="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="1024" height="1024" fill="#FFF"><path d="M21.734 19.64l-2.097 2.094a.983.983 0 0 1-1.395 0L13 16.496l-5.238 5.238a.988.988 0 0 1-1.399 0l-2.097-2.093a.988.988 0 0 1 0-1.399L9.504 13 4.266 7.762a.995.995 0 0 1 0-1.399l2.097-2.097a.988.988 0 0 1 1.399 0L13 9.508l5.242-5.242a.983.983 0 0 1 1.395 0l2.097 2.093a.996.996 0 0 1 .004 1.403L16.496 13l5.238 5.242a.988.988 0 0 1 0 1.399z"/></svg>
   </div>
 </div>
 

diff --git a/index.js b/index.js
@@ -1,12 +1,7 @@
 'use strict';
 
-const Funnel = require('broccoli-funnel');
-const path = require('path');
-const fs = require('fs');
-
 const PresetEnv = require('postcss-preset-env');
 
-const faPath = path.dirname(require.resolve('font-awesome/package.json'));
 
 module.exports = {
   name: require('./package').name,
@@ -27,48 +22,4 @@ module.exports = {
       }
     }
   },
-
-  treeForVendor() {
-    return new Funnel(faPath, {
-      destDir: 'font-awesome',
-      include: ['css/*', `fonts/*`]
-    });
-  },
-
-  included(app) {
-    const projectConfig = this.project.config(app.env);
-    const config = projectConfig['ember-cli-notifications'];
-
-    this._super.included.apply(this, arguments);
-
-    // see: https://github.com/ember-cli/ember-cli/issues/3718
-    if (typeof app.import !== 'function' && app.app) {
-      app = app.app;
-    }
-
-    this.app = app;
-
-    // Don't import Font Awesome assets if specified in consuming app
-    if (config && config.includeFontAwesome && config.includeFontAwesome !== false) {
-      this.importFontAwesome(app);
-    }
-  },
-
-  importFontAwesome(app) {
-    const cssPath = 'vendor/font-awesome/css';
-    const fontsPath = 'vendor/font-awesome/fonts';
-    const absoluteFontsPath = path.join(faPath, 'fonts');
-    const fontsToImport = fs.readdirSync(absoluteFontsPath);
-
-    fontsToImport.forEach((fontFilename) => {
-      app.import(
-        path.join(fontsPath, fontFilename),
-        { destDir: '/fonts' }
-      );
-    });
-    app.import({
-      development: path.join(cssPath, 'font-awesome.css'),
-      production: path.join(cssPath, 'font-awesome.min.css')
-    });
-  }
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,12 +29,10 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
-    "broccoli-funnel": "^2.0.1",
     "ember-cli-babel": "^7.11.1",
     "ember-cli-htmlbars": "^4.0.0",
     "ember-cli-postcss": "^5.0.0",
     "ember-get-config": "^0.2.4",
-    "font-awesome": "^4.7.0",
     "postcss-preset-env": "^6.7.0"
   },
   "devDependencies": {