[FIX] Fixed kanban fold/unfold

bzr revid: fme@openerp.com-20120816105017-mh75kqg4xogtwh2k

addons/web_kanban/static/src/css/kanban.css

@@ -45,11 +45,17 @@
 .openerp .oe_kanban_view.oe_kanban_ungrouped .oe_kanban_groups {
   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;
 }
-.openerp .oe_kanban_view .oe_kanban_header:hover .oe_dropdown_kanban {
-  display: inline-block;
+.openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_kanban {
+  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 {
   font-weight: normal;
@@ -97,6 +103,9 @@
 .openerp .oe_kanban_view .oe_kanban_group_folded .oe_kanban_group_title_vertical {
   display: block;
 }
+.openerp .oe_kanban_view .oe_kanban_group_folded .oe_dropdown_kanban {
+  left: -5px;
+}
 .openerp .oe_kanban_view .oe_kanban_group_title_undefined {
   color: #666666;
 }
@@ -108,20 +117,11 @@
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
   width: 30px;
-  height: 20px;
   font-size: 24px;
   white-space: nowrap;
   display: none;
-  position: absolute;
-  top: 10px;
-}
-.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;
+  position: relative;
+  top: 5px;
 }
 .openerp .oe_kanban_view .oe_kanban_add, .openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_toggle {
   margin-left: 4px;
@@ -466,13 +466,10 @@
   top: 28px;
   min-width: 160px;
 }
-.openerp .oe_kanban_view .oe_kanban_header .oe_dropdown_kanban {
-  display: none;
-}
-.openerp .oe_kanban_view .oe_kanban_column .oe_dropdown_kanban.oe_opened > span {
+.openerp .oe_kanban_view .oe_dropdown_kanban.oe_opened > span {
   visibility: visible;
 }
-.openerp .oe_kanban_view .oe_kanban_column .oe_dropdown_kanban > span {
+.openerp .oe_kanban_view .oe_dropdown_kanban > span {
   visibility: hidden;
 }
 .openerp .oe_kanban_view .oe_kanban_colorpicker {

addons/web_kanban/static/src/css/kanban.sass

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

addons/web_kanban/static/src/js/kanban.js

@@ -191,7 +191,7 @@ instance.web_kanban.KanbanView = instance.web.View.extend({
             self.group_by_field = self.fields_view.fields[self.group_by] || {};
             self.grouped_by_m2o = (self.group_by_field.type === 'many2one');
             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.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;
         _.each(this.groups, function(group) {
             unfolded += group.state.folded ? 0 : 1;
-            group.$element.css('width', '');
+            group.$element.children(':first').css('width', '');
         });
         _.each(this.groups, function(group) {
             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.insertBefore(this.view.$element.find('.oe_kanban_groups_records td:last'));
-        this.$element.find(".oe_kanban_fold_icon").click(function() {
-            self.do_toggle_fold();
-            self.view.compute_groups_width();
-            return false;
+
+        this.$element.on('click', '.oe_kanban_group_dropdown li a', function(ev) {
+            var fn = 'do_action_' + $(ev.target).data().action;
+            if (typeof(self[fn]) === 'function') {
+                self[fn]($(ev.target));
+            }
         });
+
         this.$element.find('.oe_kanban_add').click(function () {
             if (self.quick) { return; }
             var ctx = {};
@@ -493,8 +496,8 @@ instance.web_kanban.KanbanGroup = instance.web.Widget.extend({
         this.$records.click(function (ev) {
             if (ev.target == ev.currentTarget) {
                 if (!self.state.folded) {
-                    add_btn.effect('bounce', {distance: 18, times: 5}, 150)
-                } 
+                    add_btn.effect('bounce', {distance: 18, times: 5}, 150);
+                }
             }
         });
         return def;
@@ -553,6 +556,11 @@ instance.web_kanban.KanbanGroup = instance.web.Widget.extend({
     do_toggle_fold: function(compute_width) {
         this.$element.add(this.$records).toggleClass('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() {
         var self = this;

addons/web_kanban/static/src/xml/web_kanban.xml

@@ -32,18 +32,18 @@
                 <t t-if="widget.view._is_quick_create_enabled()">
                     <div class="oe_kanban_add oe_e">]</div>
                 </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 t-attf-class="oe_kanban_group_title #{widget.undefined_title ? 'oe_kanban_group_title_undefined' : ''}">
                         <span><t t-esc="widget.title"/></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 class="oe_clear"/>
                     <ul class="oe_kanban_aggregates">
@@ -52,7 +52,7 @@
                         </li>
                     </ul>
                 </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>
         </t>
         <t t-if="! widget.view.group_by &amp;&amp; widget.view._is_quick_create_enabled()">