[FIX] Fixed kanban fold/unfold

bzr revid: fme@openerp.com-20120816105017-mh75kqg4xogtwh2k
This commit is contained in:
Fabien Meghazi 2012-08-16 12:50:17 +02:00
parent b7ca37a215
commit 313cf9475a
4 changed files with 57 additions and 58 deletions

View File

@ -45,11 +45,17 @@
.openerp .oe_kanban_view.oe_kanban_ungrouped .oe_kanban_groups { .openerp .oe_kanban_view.oe_kanban_ungrouped .oe_kanban_groups {
width: 100%; width: 100%;
} }
.openerp .oe_kanban_view.oe_kanban_sortable_groups .oe_kanban_group_title { .openerp .oe_kanban_view.oe_kanban_grouped_by_m2o .oe_kanban_group_title {
cursor: move; cursor: move;
} }
.openerp .oe_kanban_view .oe_kanban_header:hover .oe_dropdown_kanban { .openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_kanban {
display: inline-block; float: right;
}
.openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_kanban > span {
visibility: hidden;
}
.openerp .oe_kanban_view .oe_kanban_header:hover .oe_dropdown_kanban > span {
visibility: visible;
} }
.openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_menu { .openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_menu {
font-weight: normal; font-weight: normal;
@ -97,6 +103,9 @@
.openerp .oe_kanban_view .oe_kanban_group_folded .oe_kanban_group_title_vertical { .openerp .oe_kanban_view .oe_kanban_group_folded .oe_kanban_group_title_vertical {
display: block; display: block;
} }
.openerp .oe_kanban_view .oe_kanban_group_folded .oe_dropdown_kanban {
left: -5px;
}
.openerp .oe_kanban_view .oe_kanban_group_title_undefined { .openerp .oe_kanban_view .oe_kanban_group_title_undefined {
color: #666666; color: #666666;
} }
@ -108,20 +117,11 @@
-ms-transform: rotate(90deg); -ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
width: 30px; width: 30px;
height: 20px;
font-size: 24px; font-size: 24px;
white-space: nowrap; white-space: nowrap;
display: none; display: none;
position: absolute; position: relative;
top: 10px; top: 5px;
}
.openerp .oe_kanban_view .oe_kanban_fold_icon {
cursor: pointer;
float: left;
padding: 2px;
width: 16px;
height: 16px;
background: url(/web_kanban/static/src/img/minus-icon.png) no-repeat;
} }
.openerp .oe_kanban_view .oe_kanban_add, .openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_toggle { .openerp .oe_kanban_view .oe_kanban_add, .openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_toggle {
margin-left: 4px; margin-left: 4px;
@ -466,13 +466,10 @@
top: 28px; top: 28px;
min-width: 160px; min-width: 160px;
} }
.openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_kanban { .openerp .oe_kanban_view .oe_dropdown_kanban.oe_opened > span {
display: none;
}
.openerp .oe_kanban_view .oe_kanban_column .oe_dropdown_kanban.oe_opened > span {
visibility: visible; visibility: visible;
} }
.openerp .oe_kanban_view .oe_kanban_column .oe_dropdown_kanban > span { .openerp .oe_kanban_view .oe_dropdown_kanban > span {
visibility: hidden; visibility: hidden;
} }
.openerp .oe_kanban_view .oe_kanban_colorpicker { .openerp .oe_kanban_view .oe_kanban_colorpicker {

View File

@ -66,12 +66,16 @@
height: inherit height: inherit
&.oe_kanban_ungrouped .oe_kanban_groups &.oe_kanban_ungrouped .oe_kanban_groups
width: 100% width: 100%
&.oe_kanban_sortable_groups .oe_kanban_group_title &.oe_kanban_grouped_by_m2o .oe_kanban_group_title
cursor: move cursor: move
.oe_kanban_header .oe_kanban_header
.oe_dropdown_kanban
float: right
.oe_dropdown_kanban > span
visibility: hidden
&:hover &:hover
.oe_dropdown_kanban .oe_dropdown_kanban > span
display: inline-block visibility: visible
.oe_dropdown_menu .oe_dropdown_menu
font-weight: normal font-weight: normal
font-size: 13px font-size: 13px
@ -113,6 +117,8 @@
display: none display: none
.oe_kanban_group_title_vertical .oe_kanban_group_title_vertical
display: block display: block
.oe_dropdown_kanban
left: -5px
.oe_kanban_group_title_undefined .oe_kanban_group_title_undefined
color: #666666 color: #666666
.oe_kanban_group_title_vertical .oe_kanban_group_title_vertical
@ -123,19 +129,11 @@
-ms-transform: rotate(90deg) -ms-transform: rotate(90deg)
transform: rotate(90deg) transform: rotate(90deg)
width: 30px width: 30px
height: 20px
font-size: 24px font-size: 24px
white-space: nowrap white-space: nowrap
display: none display: none
position: absolute position: relative
top: 10px top: 5px
.oe_kanban_fold_icon
cursor: pointer
float: left
padding: 2px
width: 16px
height: 16px
background: url(/web_kanban/static/src/img/minus-icon.png) no-repeat
// }}} // }}}
// KanbanQuickCreate {{{ // KanbanQuickCreate {{{
.oe_kanban_add, .oe_kanban_header .oe_dropdown_toggle .oe_kanban_add, .oe_kanban_header .oe_dropdown_toggle
@ -390,15 +388,11 @@
left: 0 left: 0
top: 28px top: 28px
min-width: 160px min-width: 160px
.oe_kanban_header .oe_dropdown_kanban
.oe_dropdown_kanban &.oe_opened > span
display: none visibility: visible
.oe_kanban_column > span
.oe_dropdown_kanban visibility: hidden
&.oe_opened > span
visibility: visible
> span
visibility: hidden
// }}} // }}}
// KanbanColorPicker {{{ // KanbanColorPicker {{{
.oe_kanban_colorpicker .oe_kanban_colorpicker

View File

@ -191,7 +191,7 @@ instance.web_kanban.KanbanView = instance.web.View.extend({
self.group_by_field = self.fields_view.fields[self.group_by] || {}; self.group_by_field = self.fields_view.fields[self.group_by] || {};
self.grouped_by_m2o = (self.group_by_field.type === 'many2one'); self.grouped_by_m2o = (self.group_by_field.type === 'many2one');
self.$buttons.find('.oe_alternative').toggle(self.grouped_by_m2o); self.$buttons.find('.oe_alternative').toggle(self.grouped_by_m2o);
self.$element.toggleClass('oe_kanban_sortable_groups', self.grouped_by_m2o); self.$element.toggleClass('oe_kanban_grouped_by_m2o', self.grouped_by_m2o);
self.datagroup = new instance.web.DataGroup(self, self.dataset.model, domain, context, self.group_by ? [self.group_by] : []); self.datagroup = new instance.web.DataGroup(self, self.dataset.model, domain, context, self.group_by ? [self.group_by] : []);
self.datagroup.list(self.fields_keys, self.do_process_groups, self.do_process_dataset); self.datagroup.list(self.fields_keys, self.do_process_groups, self.do_process_dataset);
}); });
@ -349,7 +349,7 @@ instance.web_kanban.KanbanView = instance.web.View.extend({
var self = this; var self = this;
_.each(this.groups, function(group) { _.each(this.groups, function(group) {
unfolded += group.state.folded ? 0 : 1; unfolded += group.state.folded ? 0 : 1;
group.$element.css('width', ''); group.$element.children(':first').css('width', '');
}); });
_.each(this.groups, function(group) { _.each(this.groups, function(group) {
if (!group.state.folded) { if (!group.state.folded) {
@ -462,11 +462,14 @@ instance.web_kanban.KanbanGroup = instance.web.Widget.extend({
} }
this.$records = $(QWeb.render('KanbanView.group_records_container', { widget : this})); this.$records = $(QWeb.render('KanbanView.group_records_container', { widget : this}));
this.$records.insertBefore(this.view.$element.find('.oe_kanban_groups_records td:last')); this.$records.insertBefore(this.view.$element.find('.oe_kanban_groups_records td:last'));
this.$element.find(".oe_kanban_fold_icon").click(function() {
self.do_toggle_fold(); this.$element.on('click', '.oe_kanban_group_dropdown li a', function(ev) {
self.view.compute_groups_width(); var fn = 'do_action_' + $(ev.target).data().action;
return false; if (typeof(self[fn]) === 'function') {
self[fn]($(ev.target));
}
}); });
this.$element.find('.oe_kanban_add').click(function () { this.$element.find('.oe_kanban_add').click(function () {
if (self.quick) { return; } if (self.quick) { return; }
var ctx = {}; var ctx = {};
@ -493,8 +496,8 @@ instance.web_kanban.KanbanGroup = instance.web.Widget.extend({
this.$records.click(function (ev) { this.$records.click(function (ev) {
if (ev.target == ev.currentTarget) { if (ev.target == ev.currentTarget) {
if (!self.state.folded) { if (!self.state.folded) {
add_btn.effect('bounce', {distance: 18, times: 5}, 150) add_btn.effect('bounce', {distance: 18, times: 5}, 150);
} }
} }
}); });
return def; return def;
@ -553,6 +556,11 @@ instance.web_kanban.KanbanGroup = instance.web.Widget.extend({
do_toggle_fold: function(compute_width) { do_toggle_fold: function(compute_width) {
this.$element.add(this.$records).toggleClass('oe_kanban_group_folded'); this.$element.add(this.$records).toggleClass('oe_kanban_group_folded');
this.state.folded = this.$element.is('.oe_kanban_group_folded'); this.state.folded = this.$element.is('.oe_kanban_group_folded');
this.$("ul.oe_kanban_group_dropdown li a[data-action=toggle_fold]").text((this.state.folded) ? _t("Unfold") : _t("Fold"));
},
do_action_toggle_fold: function() {
this.do_toggle_fold();
this.view.compute_groups_width();
}, },
do_save_sequences: function() { do_save_sequences: function() {
var self = this; var self = this;

View File

@ -32,18 +32,18 @@
<t t-if="widget.view._is_quick_create_enabled()"> <t t-if="widget.view._is_quick_create_enabled()">
<div class="oe_kanban_add oe_e">]</div> <div class="oe_kanban_add oe_e">]</div>
</t> </t>
<div class="oe_dropdown_toggle oe_dropdown_kanban">
<span class="oe_e">í</span>
<ul class="oe_dropdown_menu oe_kanban_group_dropdown">
<li><a data-action="toggle_fold" href="#">Fold</a></li>
<li t-if="widget.view.grouped_by_m2o"><a data-action="edit" href="#">Edit</a></li>
<li t-if="widget.view.grouped_by_m2o"><a data-action="delete" href="#">Delete</a></li>
</ul>
</div>
<div class="oe_fold_column"> <div class="oe_fold_column">
<div t-attf-class="oe_kanban_group_title #{widget.undefined_title ? 'oe_kanban_group_title_undefined' : ''}"> <div t-attf-class="oe_kanban_group_title #{widget.undefined_title ? 'oe_kanban_group_title_undefined' : ''}">
<span><t t-esc="widget.title"/></span> <span><t t-esc="widget.title"/></span>
<span class="oe_kanban_group_length">(<t t-esc="widget.group.length"/>)</span> <span class="oe_kanban_group_length">(<t t-esc="widget.group.length"/>)</span>
<div class="oe_dropdown_toggle oe_dropdown_kanban">
<span class="oe_e">í</span>
<ul class="oe_dropdown_menu">
<li><a data-type="fold" href="#" class="">Fold</a></li>
<li><a data-type="edit" href="#" class="">Edit</a></li>
<li><a data-type="delete" href="#" class="">Delete</a></li>
</ul>
</div>
</div> </div>
<div class="oe_clear"/> <div class="oe_clear"/>
<ul class="oe_kanban_aggregates"> <ul class="oe_kanban_aggregates">
@ -52,7 +52,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<p t-if="widget.title" class="oe_kanban_group_title_vertical"><t t-esc="widget.title"/></p> <span t-if="widget.title" class="oe_kanban_group_title_vertical"><t t-esc="widget.title"/></span>
</div> </div>
</t> </t>
<t t-if="! widget.view.group_by &amp;&amp; widget.view._is_quick_create_enabled()"> <t t-if="! widget.view.group_by &amp;&amp; widget.view._is_quick_create_enabled()">