knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#145,widget/fields][s]: ux on fields including heading, expand all and collapse all support, bugfix for weird collapsed but content not collapsed issue.

Browse Source
This commit is contained in:
Rufus Pollock 2012-06-07 19:52:20 +01:00
parent 9b583b8397
commit 20191bf9fa
2 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/multiview.css
View File

@ -119,13 +119,23 @@
padding: 0;
}
.recline-fields-view .fields-list .accordion-heading,
.recline-fields-view .fields-list h3
{
margin: 3px 0 3px 5px;
}
.recline-fields-view .fields-list .accordion-heading a,
.recline-fields-view .fields-list .accordion-heading h4 {
display: inline;
}
.recline-fields-view .fields-list .accordion-heading a {
padding: 0;
}
.recline-fields-view .fields-list .accordion-heading h4 {
margin-left: 10px;
word-wrap: break-word
}
.recline-fields-view .clear {

24
src/widget.fields.js
View File

@ -25,15 +25,16 @@ my.Fields = Backbone.View.extend({
className: 'recline-fields-view',
template: ' \
<div class="accordion fields-list well"> \
<h3>Fields <a href="#" class="js-show-hide">+</a></h3> \
{{#fields}} \
<div class="accordion-group field"> \
<div class="accordion-heading"> \
<i class="icon-file"></i> \
<h4> \
{{label}} \
<small> \
<i class="icon-file" title="Field type"></i> {{type}} \
<a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; \
</a> \
{{type}} \
<a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; </a> \
</small> \
</h4> \
</div> \
@ -57,6 +58,7 @@ my.Fields = Backbone.View.extend({
',
events: {
'click .js-show-hide': 'onShowHide'
},
initialize: function(model) {
var self = this;
@ -90,6 +92,22 @@ my.Fields = Backbone.View.extend({
var templated = Mustache.render(this.template, tmplData);
this.el.html(templated);
this.el.find('.collapse').collapse('hide');
},
onShowHide: function(e) {
e.preventDefault();
var $target = $(e.target);
// weird collapse class seems to have been removed (can watch this happen
// if you watch dom) but could not work why. Absence of collapse then meant
// we could not toggle.
// This seems to fix the problem.
this.el.find('.accordion-body').addClass('collapse');;
if ($target.text() === '+') {
this.el.find('.collapse').collapse('show');
$target.text('-');
} else {
this.el.find('.collapse').collapse('hide');
$target.text('+');
}
}
});