jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-27 21:26:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(GUI): make disabled svgs work in img tags (#1661)

Browse Source 
SVGs are displayed through IMG tags, but these do not support CSS
`fill`, and as such we work around it with `opacity`.
This commit is contained in:
Benedict Aas 2017-08-03 17:30:00 +01:00 committed by Juan Cruz Viotti
parent 269aafd625
commit de63d534c5
5 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/gui/components/svg-icon.js
View File

@ -69,21 +69,16 @@ class SVGIcon extends react.Component {
const doc = parser.parseFromString(contents, 'image/svg+xml') const doc = parser.parseFromString(contents, 'image/svg+xml')
const svg = doc.querySelector('svg') const svg = doc.querySelector('svg')
const img = document.createElement('img') const svgData = `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
img.src = `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
return react.createElement('div', { return react.createElement('img', {
className: 'svg-icon', className: 'svg-icon',
height,
width,
style: { style: {
width, width,
height height
}, },
disabled: this.props.disabled, src: svgData,
dangerouslySetInnerHTML: { disabled: this.props.disabled
__html: img.outerHTML
}
}) })
} }

4
lib/gui/css/main.css
View File

@ -6480,8 +6480,8 @@ svg-icon {
.page-main { .page-main {
margin-top: 75px; } margin-top: 75px; }
svg-icon > div[disabled] path { svg-icon > img[disabled] {
fill: #787c7f; } opacity: 0.2; }
.page-main .step-selection-text { .page-main .step-selection-text {
color: #fff; } color: #fff; }

4
lib/gui/pages/main/styles/_main.scss
View File

@ -18,8 +18,8 @@
margin-top: 75px; margin-top: 75px;
} }
svg-icon > div[disabled] path { svg-icon > img[disabled] {
fill: $palette-theme-dark-disabled-foreground; opacity: $disabled-opacity;
} }
.page-main .step-selection-text { .page-main .step-selection-text {

1
lib/gui/scss/main.scss
View File

@ -20,6 +20,7 @@ $cursor-disabled: initial;
$link-hover-decoration: none; $link-hover-decoration: none;
$btn-min-width: 170px; $btn-min-width: 170px;
$link-color: #ddd; $link-color: #ddd;
$disabled-opacity: 0.2;
@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "./modules/theme"; @import "./modules/theme";

6
tests/gui/components/svg-icon.spec.js
View File

@ -56,7 +56,7 @@ describe('Browser: SVGIcon', function () {
const originalSVGParser = new DOMParser() const originalSVGParser = new DOMParser()
const originalDoc = originalSVGParser.parseFromString(iconContents, 'image/svg+xml') const originalDoc = originalSVGParser.parseFromString(iconContents, 'image/svg+xml')
const compiledSVGParser = new DOMParser() const compiledSVGParser = new DOMParser()
const compiledContents = decodeURIComponent(element.children()[0].children[0].src.substr(19)) const compiledContents = decodeURIComponent(element.children()[0].src.substr(19))
const compiledDoc = compiledSVGParser.parseFromString(compiledContents, 'image/svg+xml') const compiledDoc = compiledSVGParser.parseFromString(compiledContents, 'image/svg+xml')
m.chai.expect(compiledDoc.outerHTML).to.equal(originalDoc.outerHTML) m.chai.expect(compiledDoc.outerHTML).to.equal(originalDoc.outerHTML)
@ -64,12 +64,12 @@ describe('Browser: SVGIcon', function () {
it('should accept an SVG in the path attribute', function () { it('should accept an SVG in the path attribute', function () {
const iconContents = '<svg><rect x="10" y="10" height="100" width="100" style="stroke:red;fill:blue;"/></svg>' const iconContents = '<svg><rect x="10" y="10" height="100" width="100" style="stroke:red;fill:blue;"/></svg>'
const img = `<img src="data:image/svg+xml,${encodeURIComponent(iconContents)}">` const imgData = `data:image/svg+xml,${encodeURIComponent(iconContents)}`
$rootScope.iconContents = iconContents $rootScope.iconContents = iconContents
const element = $compile('<svg-icon path="iconContents">Resin.io</svg-icon>')($rootScope) const element = $compile('<svg-icon path="iconContents">Resin.io</svg-icon>')($rootScope)
$rootScope.$digest() $rootScope.$digest()
m.chai.expect(element.children().html()).to.equal(img) m.chai.expect(element.children().attr('src')).to.equal(imgData)
}) })
it('should default the size to 40x40 pixels', function () { it('should default the size to 40x40 pixels', function () {