LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-29 08:21:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #165 from lbryio/fix-clamp-js-firefox

Browse source 
Fix line clamping on Firefox
This commit is contained in:
Jeremy Kauffman 2017-02-10 12:13:07 -05:00 • committed by GitHub
commit 227e23653d
3 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
js/component/common.js
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import lbry from '../lbry.js'; import lbry from '../lbry.js';
import $clamp from 'clamp-js'; import $clamp from 'clamp-js-main';
//component/icon.js //component/icon.js
export let Icon = React.createClass({ export let Icon = React.createClass({
@ -31,13 +31,17 @@ export let TruncatedText = React.createClass({
} }
}, },
componentDidMount: function() { componentDidMount: function() {
// Manually round up the line height, because clamp.js doesn't like fractional-pixel line heights.
// Need to work directly on the style object because setting the style prop doesn't update internal styles right away.
this.refs.span.style.lineHeight = Math.ceil(parseFloat(getComputedStyle(this.refs.span).lineHeight)) + 'px';
$clamp(this.refs.span, { $clamp(this.refs.span, {
clamp: this.props.lines || this.props.height || 'auto', clamp: this.props.lines || this.props.height || 'auto',
}); });
}, },
render: function() { render: function() {
var text = this.props.children; return <span ref="span" className="truncated-text">{this.props.children}</span>;
return <span ref="span">{text}</span>;
} }
}); });

2
package.json
View file

@ -22,7 +22,7 @@
"babel-cli": "^6.11.4", "babel-cli": "^6.11.4",
"babel-preset-es2015": "^6.13.2", "babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1", "babel-preset-react": "^6.11.1",
"clamp-js": "^0.7.0", "clamp-js-main": "^0.11.1",
"mediaelement": "^2.23.4", "mediaelement": "^2.23.4",
"node-sass": "^3.8.0", "node-sass": "^3.8.0",
"react": "^15.4.0", "react": "^15.4.0",

4
scss/_gui.scss
View file

@ -121,6 +121,10 @@ input[type="text"], input[type="search"]
height: $spacing-vertical * 1.5; height: $spacing-vertical * 1.5;
} }
.truncated-text {
display: inline-block;
}
.busy-indicator .busy-indicator
{ {
background: url('../img/busy.gif') no-repeat center center; background: url('../img/busy.gif') no-repeat center center;