Node details accordion
This commit is contained in:
parent
3c8137c42a
commit
95b13f85ec
|
@ -2408,8 +2408,11 @@ h6.page-title {
|
||||||
height: 62px;
|
height: 62px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: url(../img/node_image_outline.png) no-repeat top left;
|
background: url(../img/node_image_outline.png) no-repeat top left;
|
||||||
margin-top: 10px;
|
margin-bottom: 10px;
|
||||||
margin-bottom: 20px;
|
}
|
||||||
|
|
||||||
|
.node-popup .span7 {
|
||||||
|
padding-top: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple-mode-title, .simple-type-title {
|
.simple-mode-title, .simple-type-title {
|
||||||
|
@ -2988,7 +2991,3 @@ select[name=release] option {
|
||||||
#nodeDetailsAccordion .nested-object div, #nodeDetailsAccordion .nested-object div label {
|
#nodeDetailsAccordion .nested-object div, #nodeDetailsAccordion .nested-object div label {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accordion-heading a {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
|
@ -264,6 +264,14 @@ function(models, simpleMessageTemplate, createClusterDialogTemplate, changeClust
|
||||||
|
|
||||||
views.ShowNodeInfoDialog = views.Dialog.extend({
|
views.ShowNodeInfoDialog = views.Dialog.extend({
|
||||||
template: _.template(showNodeInfoTemplate),
|
template: _.template(showNodeInfoTemplate),
|
||||||
|
events: {
|
||||||
|
'click a.accordion-toggle': 'stopHiddenEventPropagation'
|
||||||
|
},
|
||||||
|
stopHiddenEventPropagation: function(e) {
|
||||||
|
this.$(e.target).parent().siblings('.accordion-body').on('hidden', function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
},
|
||||||
initialize: function(options) {
|
initialize: function(options) {
|
||||||
_.defaults(this, options);
|
_.defaults(this, options);
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,8 +1,11 @@
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||||
|
<h3><%- node.get('name') %></h3>
|
||||||
|
</div>
|
||||||
<div class="modal-body node-popup enable-selection">
|
<div class="modal-body node-popup enable-selection">
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div class="span5"><div class="node-image-outline"></div></div>
|
<div class="span5"><div class="node-image-outline"></div></div>
|
||||||
<div class="span7">
|
<div class="span7">
|
||||||
<h4><%- node.get('name') %></h4>
|
|
||||||
<div><strong>Manufacturer: </strong><%- node.get('manufacturer') ? node.get('manufacturer') : '?' %></div>
|
<div><strong>Manufacturer: </strong><%- node.get('manufacturer') ? node.get('manufacturer') : '?' %></div>
|
||||||
<div><strong>MAC Address: </strong><%- node.get('mac') ? node.get('mac') : '?' %></div>
|
<div><strong>MAC Address: </strong><%- node.get('mac') ? node.get('mac') : '?' %></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -11,8 +14,8 @@
|
||||||
<% var meta = node.get('meta') %>
|
<% var meta = node.get('meta') %>
|
||||||
<% _.each(_.keys(meta), function(field) { %>
|
<% _.each(_.keys(meta), function(field) { %>
|
||||||
<div class="accordion-group">
|
<div class="accordion-group">
|
||||||
<div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#nodeDetailsAccordion" href="#"><%- field %></a></div>
|
<div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#nodeDetailsAccordion" href="#<%- field %>"><%- field %></a></div>
|
||||||
<div class="accordion-body collapse in" id="<%- field %>">
|
<div class="accordion-body collapse" id="<%- field %>">
|
||||||
<div class="accordion-inner">
|
<div class="accordion-inner">
|
||||||
<% if (_.isArray(meta[field])) { %>
|
<% if (_.isArray(meta[field])) { %>
|
||||||
<% if (field == 'interfaces') meta[field] = _.sortBy(meta[field], function(el) {return el.name;}) %>
|
<% if (field == 'interfaces') meta[field] = _.sortBy(meta[field], function(el) {return el.name;}) %>
|
||||||
|
|
Loading…
Reference in New Issue