diff --git a/bower.json b/bower.json index ea145423..e738d362 100644 --- a/bower.json +++ b/bower.json @@ -15,7 +15,6 @@ "tests" ], "dependencies": { - "polymer": "Polymer/polymer#^1.1.0", "angular-mixpanel": "~1.1.2" } } diff --git a/build/css/main.css b/build/css/main.css index 42e44393..df0a136a 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -4405,7 +4405,7 @@ a.badge:hover, a.badge:focus { height: auto; margin-left: auto; margin-right: auto; } - .thumbnail .caption { + .thumbnail .caption, .thumbnail .icon-caption { padding: 9px; color: white; } @@ -5681,7 +5681,7 @@ button.close { .clearfix:after { clear: both; } -.center-block { +.center-block, .icon-caption { display: block; margin-left: auto; margin-right: auto; } @@ -5997,7 +5997,7 @@ html { * See the License for the specific language governing permissions and * limitations under the License. */ -.caption { +.caption, .icon-caption { font-weight: bold; font-size: 11px; margin-bottom: 0; @@ -6199,6 +6199,24 @@ button.btn:focus, button.progress-button:focus { 100% { background-position: 20px 20px; } } +/* + * Copyright 2016 Resin.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. + */ +.svg-icon[disabled] path { + fill: #787c7f; } + /* * Copyright 2016 Resin.io * @@ -6310,11 +6328,10 @@ button.btn:focus, button.progress-button:focus { .alert-ribbon--open { top: 0; } -hero-icon[disabled] .caption { - color: #787c7f; } - -hero-icon[disabled] path { - fill: #787c7f; } +.icon-caption { + margin-top: 10px; } + .icon-caption[disabled] { + color: #787c7f; } .block { display: block; } @@ -6345,7 +6362,7 @@ body { border-top: 2px solid #64686a; } .section-footer .col-xs { padding: 0; } - .section-footer hero-icon .icon { + .section-footer .svg-icon { margin: 0 13px; } .section-footer [os-open-external]:hover { color: #85898c; diff --git a/lib/browser/app.js b/lib/browser/app.js index 5ff89f99..66f42cc7 100644 --- a/lib/browser/app.js +++ b/lib/browser/app.js @@ -40,6 +40,7 @@ const app = angular.module('Etcher', [ // Components require('./browser/components/progress-button/progress-button'), require('./browser/components/drive-selector/drive-selector'), + require('./browser/components/svg-icon/svg-icon'), // Pages require('./browser/pages/finish/finish'), diff --git a/lib/browser/components/svg-icon/directives/svg-icon.js b/lib/browser/components/svg-icon/directives/svg-icon.js new file mode 100644 index 00000000..2ec96d0c --- /dev/null +++ b/lib/browser/components/svg-icon/directives/svg-icon.js @@ -0,0 +1,63 @@ +/* + * Copyright 2016 Resin.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 path = require('path'); +const fs = require('fs'); + +/** + * @summary SVGIcon directive + * @function + * @public + * + * @description + * This directive provides an easy way to load SVG icons + * by embedding the SVG contents inside the element, making + * it possible to style icons with CSS. + * + * @example + * + */ +module.exports = function() { + return { + templateUrl: './browser/components/svg-icon/templates/svg-icon.tpl.html', + replace: true, + restrict: 'E', + scope: { + path: '@', + width: '@', + height: '@' + }, + link: function(scope, element) { + + // This means the path to the icon should be + // relative to *this directory*. + // TODO: There might be a way to compute the path + // relatively to the `index.html`. + const imagePath = path.join(__dirname, scope.path); + + const contents = fs.readFileSync(imagePath, { + encoding: 'utf8' + }); + + element.html(contents); + + element.css('width', scope.width || '40px'); + element.css('height', scope.height || '40px'); + } + }; +}; diff --git a/lib/browser/components/svg-icon/styles/_svg-icon.scss b/lib/browser/components/svg-icon/styles/_svg-icon.scss new file mode 100644 index 00000000..5ffe5c8f --- /dev/null +++ b/lib/browser/components/svg-icon/styles/_svg-icon.scss @@ -0,0 +1,19 @@ +/* + * Copyright 2016 Resin.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. + */ + +.svg-icon[disabled] path { + fill: $color-disabled; +} diff --git a/lib/browser/components/svg-icon/svg-icon.js b/lib/browser/components/svg-icon/svg-icon.js new file mode 100644 index 00000000..13989c12 --- /dev/null +++ b/lib/browser/components/svg-icon/svg-icon.js @@ -0,0 +1,28 @@ +/* + * Copyright 2016 Resin.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'; + +/** + * @module Etcher.Components.SVGIcon + */ + +const angular = require('angular'); +const MODULE_NAME = 'Etcher.Components.SVGIcon'; +const SVGIcon = angular.module(MODULE_NAME, []); +SVGIcon.directive('svgIcon', require('./directives/svg-icon')); + +module.exports = MODULE_NAME; diff --git a/lib/browser/components/svg-icon/templates/svg-icon.tpl.html b/lib/browser/components/svg-icon/templates/svg-icon.tpl.html new file mode 100644 index 00000000..9d8dbeeb --- /dev/null +++ b/lib/browser/components/svg-icon/templates/svg-icon.tpl.html @@ -0,0 +1 @@ +
diff --git a/lib/browser/os/open-external/directives/open-external.js b/lib/browser/os/open-external/directives/open-external.js index 2cf841f3..6b591803 100644 --- a/lib/browser/os/open-external/directives/open-external.js +++ b/lib/browser/os/open-external/directives/open-external.js @@ -38,10 +38,8 @@ const nodeOpen = require('open'); module.exports = function() { return { restrict: 'A', - scope: { - osOpenExternal: '@' - }, - link: function(scope, element) { + scope: false, + link: function(scope, element, attributes) { // This directive might be added to elements // other than buttons. @@ -64,10 +62,10 @@ module.exports = function() { // // See https://github.com/electron/electron/issues/5039 if (os.platform() === 'linux') { - return nodeOpen(scope.osOpenExternal); + return nodeOpen(attributes.osOpenExternal); } - shell.openExternal(scope.osOpenExternal); + shell.openExternal(attributes.osOpenExternal); }); } }; diff --git a/lib/components/hero-icon.html b/lib/components/hero-icon.html deleted file mode 100644 index 25437cc6..00000000 --- a/lib/components/hero-icon.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - diff --git a/lib/index.html b/lib/index.html index 1ecd95ab..9fdf4d24 100644 --- a/lib/index.html +++ b/lib/index.html @@ -7,8 +7,6 @@ - -