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
*.pid
*.gz
*.sublime-project
*.sublime-workspace
pids
logs

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

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

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

@ -264,10 +264,16 @@ let EditionSummary = React.createClass({
render() {
return (
<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} />
<EditionDetailProperty label={getLangText('ID')} value={ this.props.edition.bitcoin_id } />
<EditionDetailProperty label={getLangText('OWNER')} value={ this.props.edition.owner } />
<EditionDetailProperty
label={getLangText('ID')}
value={ this.props.edition.bitcoin_id }
ellipsis={true} />
<EditionDetailProperty
label={getLangText('OWNER')}
value={ this.props.edition.owner } />
{this.getStatus()}
{this.getActions()}
<hr/>