diff --git a/lib/gui/app/app.js b/lib/gui/app/app.js index caf506fe..fd79a559 100644 --- a/lib/gui/app/app.js +++ b/lib/gui/app/app.js @@ -84,7 +84,6 @@ const app = angular.module('Etcher', [ require('angular-ui-bootstrap'), // Components - require('./components/svg-icon'), require('./components/safe-webview'), // Pages diff --git a/lib/gui/app/components/svg-icon/index.js b/lib/gui/app/components/svg-icon/index.js deleted file mode 100644 index deeac4f0..00000000 --- a/lib/gui/app/components/svg-icon/index.js +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright 2016 balena.io - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -'use strict' - -/* eslint-disable jsdoc/require-example */ - -/** - * @module Etcher.Components.SVGIcon - */ - -const angular = require('angular') -const react2angular = require('react2angular').react2angular - -const MODULE_NAME = 'Etcher.Components.SVGIcon' -const angularSVGIcon = angular.module(MODULE_NAME, []) - -angularSVGIcon.component('svgIcon', react2angular(require('./svg-icon.jsx'))) -module.exports = MODULE_NAME diff --git a/lib/gui/app/components/svg-icon/styles/_svg-icon.scss b/lib/gui/app/components/svg-icon/styles/_svg-icon.scss deleted file mode 100644 index b0d80e0f..00000000 --- a/lib/gui/app/components/svg-icon/styles/_svg-icon.scss +++ /dev/null @@ -1,9 +0,0 @@ - -svg-icon { - display: inline-block; - - img { - width: 100%; - height: 100%; - } -} diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss index 9b86d9e6..c9637376 100644 --- a/lib/gui/app/scss/main.scss +++ b/lib/gui/app/scss/main.scss @@ -32,7 +32,6 @@ $disabled-opacity: 0.2; @import "./components/button"; @import "./components/tick"; @import "../components/drive-selector/styles/drive-selector"; -@import "../components/svg-icon/styles/svg-icon"; @import "../pages/main/styles/main"; @import "../pages/finish/styles/finish"; diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css index bebfa759..16e82fed 100644 --- a/lib/gui/css/main.css +++ b/lib/gui/css/main.css @@ -6207,12 +6207,6 @@ body { .modal-drive-selector-modal .word-keep { word-break: keep-all; } -svg-icon { - display: inline-block; } - svg-icon img { - width: 100%; - height: 100%; } - /* * Copyright 2016 balena.io * diff --git a/tests/gui/components/svg-icon.spec.js b/tests/gui/components/svg-icon.spec.js deleted file mode 100644 index b838e403..00000000 --- a/tests/gui/components/svg-icon.spec.js +++ /dev/null @@ -1,141 +0,0 @@ -/* - * Copyright 2017 balena.io - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -'use strict' - -const m = require('mochainon') -const _ = require('lodash') -const fs = require('fs') -const path = require('path') -const angular = require('angular') - -describe('Browser: SVGIcon', function () { - beforeEach(angular.mock.module( - require('../../../lib/gui/app/components/svg-icon') - )) - - describe('svgIcon', function () { - let $compile - let $rootScope - - beforeEach(angular.mock.inject(function (_$compile_, _$rootScope_) { - $compile = _$compile_ - $rootScope = _$rootScope_ - - this.iconPath = '../../../lib/gui/assets/etcher.svg' - })) - - it('should inline the svg contents in the element', function () { - let iconContents = _.split(fs.readFileSync(path.join(__dirname, this.iconPath), { - encoding: 'utf8' - }), /\r?\n/) - - // Injecting XML as HTML causes the XML header to be commented out. - // Modify here to ease assertions later on. - iconContents[0] = `` - iconContents = iconContents.join('\n') - - const element = $compile(`Balena.io`)($rootScope) - $rootScope.$digest() - - // We parse the SVGs to get rid of discrepancies caused by string differences - // in the outputs; the XML trees are still equal, as proven here. - const originalSVGParser = new DOMParser() - const originalDoc = originalSVGParser.parseFromString(iconContents, 'image/svg+xml') - const compiledSVGParser = new DOMParser() - const compiledContents = decodeURIComponent(element.children()[0].src.substr(19)) - const compiledDoc = compiledSVGParser.parseFromString(compiledContents, 'image/svg+xml') - - m.chai.expect(compiledDoc.outerHTML).to.equal(originalDoc.outerHTML) - }) - - it('should try next path if previous was not found', function () { - let iconContents = _.split(fs.readFileSync(path.join(__dirname, this.iconPath), { - encoding: 'utf8' - }), /\r?\n/) - - // Injecting XML as HTML causes the XML header to be commented out. - // Modify here to ease assertions later on. - iconContents[0] = `` - iconContents = iconContents.join('\n') - - const element = $compile(`Balena.io`)($rootScope) - $rootScope.$digest() - - // We parse the SVGs to get rid of discrepancies caused by string differences - // in the outputs; the XML trees are still equal, as proven here. - const originalSVGParser = new DOMParser() - const originalDoc = originalSVGParser.parseFromString(iconContents, 'image/svg+xml') - const compiledSVGParser = new DOMParser() - const compiledContents = decodeURIComponent(element.children()[0].src.substr(19)) - const compiledDoc = compiledSVGParser.parseFromString(compiledContents, 'image/svg+xml') - - m.chai.expect(compiledDoc.outerHTML).to.equal(originalDoc.outerHTML) - }).timeout(10000) - - it('should accept an SVG in the contents attribute', function () { - const iconContents = '' - const imgData = `data:image/svg+xml,${encodeURIComponent(iconContents)}` - $rootScope.iconContents = iconContents - - const element = $compile('Balena.io')($rootScope) - $rootScope.$digest() - m.chai.expect(element.children().attr('src')).to.equal(imgData) - }) - - it('should prioritize the contents attribute over the paths attribute', function () { - const iconContents = '' - const imgData = `data:image/svg+xml,${encodeURIComponent(iconContents)}` - $rootScope.iconContents = iconContents - - const svg = `Balena.io` - const element = $compile(svg)($rootScope) - $rootScope.$digest() - m.chai.expect(element.children().attr('src')).to.equal(imgData) - }) - - it('should use an empty src if there is a parsererror', function () { - // The following is invalid, because there's no closing tag for `foreignObject` - const iconContents = '' - $rootScope.iconContents = iconContents - - const element = $compile('Balena.io')($rootScope) - $rootScope.$digest() - m.chai.expect(element.children().attr('src')).to.be.empty - }) - - it('should default the size to 40x40 pixels', function () { - const element = $compile(`Balena.io`)($rootScope) - $rootScope.$digest() - m.chai.expect(element.children().css('width')).to.equal('40px') - m.chai.expect(element.children().css('height')).to.equal('40px') - }) - - it('should be able to set a custom width', function () { - const element = $compile(`Balena.io`)($rootScope) - $rootScope.$digest() - m.chai.expect(element.children().css('width')).to.equal('20px') - m.chai.expect(element.children().css('height')).to.equal('40px') - }) - - it('should be able to set a custom height', function () { - const element = $compile(`Balena.io`)($rootScope) - $rootScope.$digest() - m.chai.expect(element.children().css('width')).to.equal('40px') - m.chai.expect(element.children().css('height')).to.equal('20px') - }) - }) -})