ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

add ellipsis functionality to detail property

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-30 11:48:47 +02:00
parent 275f6c839e
commit 79bef1e0a9
3 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -6,6 +6,9 @@ lib-cov
*.out *.out
*.pid *.pid
*.gz *.gz
*.sublime-project
*.sublime-workspace
pids pids
logs logs

20
js/components/ascribe_detail/detail_property.js
View File

@ -12,7 +12,7 @@ let DetailProperty = React.createClass({
separator: React.PropTypes.string, separator: React.PropTypes.string,
labelClassName: React.PropTypes.string, labelClassName: React.PropTypes.string,
valueClassName: React.PropTypes.string, valueClassName: React.PropTypes.string,
breakWord: React.PropTypes.bool ellipsis: React.PropTypes.bool
}, },
getDefaultProps() { getDefaultProps() {
@ -25,6 +25,16 @@ let DetailProperty = React.createClass({
render() { render() {
let value = this.props.value; let value = this.props.value;
let styles = {};
if(this.props.ellipsis) {
styles = {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
};
}
if (this.props.children){ if (this.props.children){
value = ( value = (
@ -32,7 +42,9 @@ let DetailProperty = React.createClass({
<div className="col-xs-6 col-xs-height col-bottom no-padding"> <div className="col-xs-6 col-xs-height col-bottom no-padding">
{ this.props.value } { this.props.value }
</div> </div>
<div className="col-xs-6 col-xs-height"> <div
className="col-xs-6 col-xs-height"
style={styles}>
{ this.props.children } { this.props.children }
</div> </div>
</div>); </div>);
@ -43,7 +55,9 @@ let DetailProperty = React.createClass({
<div className={this.props.labelClassName + ' col-xs-height col-bottom ascribe-detail-property-label'}> <div className={this.props.labelClassName + ' col-xs-height col-bottom ascribe-detail-property-label'}>
{ this.props.label + this.props.separator} { this.props.label + this.props.separator}
</div> </div>
<div className={this.props.valueClassName + ' col-xs-height col-bottom ascribe-detail-property-value'}> <div
className={this.props.valueClassName + ' col-xs-height col-bottom ascribe-detail-property-value'}
style={styles}>
{value} {value}
</div> </div>
</div> </div>

12
js/components/ascribe_detail/edition.js
View File

@ -264,10 +264,16 @@ let EditionSummary = React.createClass({
render() { render() {
return ( return (
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<EditionDetailProperty label={getLangText('EDITION')} <EditionDetailProperty
label={getLangText('EDITION')}
value={this.props.edition.edition_number + ' ' + getLangText('of') + ' ' + this.props.edition.num_editions} /> value={this.props.edition.edition_number + ' ' + getLangText('of') + ' ' + this.props.edition.num_editions} />
<EditionDetailProperty label={getLangText('ID')} value={ this.props.edition.bitcoin_id } /> <EditionDetailProperty
<EditionDetailProperty label={getLangText('OWNER')} value={ this.props.edition.owner } /> label={getLangText('ID')}
value={ this.props.edition.bitcoin_id }
ellipsis={true} />
<EditionDetailProperty
label={getLangText('OWNER')}
value={ this.props.edition.owner } />
{this.getStatus()} {this.getStatus()}
{this.getActions()} {this.getActions()}
<hr/> <hr/>