jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-04-24 07:17:18 +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 svg = doc.querySelector('svg')
const img = document.createElement('img')
img.src = `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
const svgData = `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
return react.createElement('div', {
return react.createElement('img', {
className: 'svg-icon',
height,
width,
style: {
width,
height
},
disabled: this.props.disabled,
dangerouslySetInnerHTML: {
__html: img.outerHTML
}
src: svgData,
disabled: this.props.disabled
})
}

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

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

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

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

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

@ -20,6 +20,7 @@ $cursor-disabled: initial;
$link-hover-decoration: none;
$btn-min-width: 170px;
$link-color: #ddd;
$disabled-opacity: 0.2;
@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@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 originalDoc = originalSVGParser.parseFromString(iconContents, 'image/svg+xml')
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')
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 () {
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
const element = $compile('<svg-icon path="iconContents">Resin.io</svg-icon>')($rootScope)
$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 () {