Commit 989665a6 authored by Fernando D'agostino's avatar Fernando D'agostino
Browse files

Merge pull request #339 from ninjaconcept/339-compact-collectionlabelview-and-popup-details

Compact CollectionLabelView + Popup Details
parents cfb61bb4 d450e523
import React from 'react';
import {Label} from 'react-bootstrap';
import {Label, OverlayTrigger, Popover} from 'react-bootstrap';
export default class ElementCollectionLabels extends React.Component {
constructor(props) {
......@@ -11,31 +11,60 @@ export default class ElementCollectionLabels extends React.Component {
render() {
return (
<div>
{this.collectionLabels(this.state.element)}
</div>
this.collectionLabels(this.state.element)
);
}
labelStyle(label) {
if(label.is_shared == false) {
return "info";
} else {
return "warning";
}
return label.is_shared ? "warning" : "info";
}
collectionLabels(element) {
if(element.collection_labels) {
return element.collection_labels.map((label, index) => {
return (
<span className="collection-label" key={index}>
<Label bsStyle={this.labelStyle(label)}>{label.name}</Label>
formatLabels(labels) {
return labels.map((label, index) => {
return (
<span className="collection-label" key={index}>
<Label bsStyle={this.labelStyle(label)}>{label.name}</Label>
&nbsp;
</span>
)
});
}
labelWithPopover(title, labels) {
let {element} = this.state;
let label_popover = <Popover title={title}>{this.formatLabels(labels)}</Popover>
return (
labels.length > 0 ?
<OverlayTrigger trigger="click" rootClose placement="left" overlay={label_popover}>
<span className="collection-label" key={element.id}>
<Label bsStyle={this.labelStyle(labels[0])}>In {labels.length} {title}</Label>
&nbsp;
</span>
)
</OverlayTrigger> : undefined
);
}
collectionLabels(element) {
if(element.collection_labels) {
let shared_labels = [];
let labels = [];
element.collection_labels.map((label, index) => {
if (label.is_shared) {
shared_labels.push(label)
} else {
labels.push(label)
}
});
}
let unsharedTitle = labels.length > 1 ? 'Collections' : 'Collection';
let sharedTitle = shared_labels.length > 1 ? 'Shared Collections' : 'Shared Collection';
return (
<div>
{this.labelWithPopover(unsharedTitle, labels)}
{this.labelWithPopover(sharedTitle, shared_labels)}
</div>
)
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment