[FIX] (web_)calendar: Refresh code + Filters

- Contact filters were dropped with the new design
- The 'me' filter was not working correctly (wrong colors)
- Remove some useless/unnecessary code
- Use new API confirm dialogs
- Convert CSS to LESS

addons/calendar/static/src/css/calendar.css

@@ -1,89 +0,0 @@
-.openerp .oe_invitation , .text-core .text-tag .oe_invitation{
-    width : 13px;
-    height : 13px;
-    margin-bottom : -4px;
-    display : inline-block;    
-}
-.openerp .needsAction , .tentative,.text-core .text-tag .custom-edit, .text-core .text-tag .tentative {
-    background : url(/web/static/src/img/icons/gtk-normal.png) no-repeat;
-    background-size : 11px 11px;    
-}
-.openerp .accepted , .text-core .text-tag .accepted {
-    background : url(/web/static/src/img/icons/gtk-yes.png) no-repeat;
-    background-size : 11px 11px;    
-}
-.openerp .declined , .text-core .text-tag .declined {
-    background : url(/web/static/src/img/icons/gtk-no.png) no-repeat;
-    background-size : 11px 11px;    
-}
-.openerp a.oe_invitation {
-	cursor:default !important;
-}
-.cal_meeting {
-    font-size : 24px;
-    font-style: bold;
-    text-align : justify;
-    color : #8A89BA;
-}
-.cal_lable {
-    width: 50px;
-    color : #808080;
-}
-.invitation_block {
-    padding : 50px 0 0 30px;
-    font-size : 14px;
-    background : #f9f9f9;
-}
-.attendee_accepted {
-    background : url(/web/static/src/img/icons/gtk-apply.png) no-repeat;
-    background-size : 15px 15px;
-    padding-left: 20px;
-}
-.attendee_declined {
-    background : url(/web/static/src/img/icons/gtk-cancel.png) no-repeat;
-    background-size : 15px 15px;
-    padding-left: 20px;
-}
-.event_status {
-    border : 1px solid;
-    height : 20px;
-    width : auto;
-    background: #808080;
-    color : #FFFFFF;
-    padding: 5px 10px;
-    width: 400px;
-}
-.cal_inline {
-    display: inline;
-}
-.cal_tag {
-    padding-right : 10px;
-    font-style : italic;
-    font-size : 17px;
-    vertical-align:bottom;
-}
-.cal_image {
-    height: 30px;
-    width : 100px;
-}
-span.no-wrap {
-	white-space:nowrap
-}
-.cal_tab {
-    margin: 20 0 20 0;
-}
-.openerp .oe_remove_follower {
-    cursor: pointer;
-    position: absolute;
-    right: 0px;
-    line-height: 20px;
-    color: #D3D3D3;
-}
-.openerp .oe_add_input_box > div > input{
-    width: 200px;
-}
-.openerp .oe_add_input_box > div > .oe_m2o_drop_down_button {
-    position: relative;
-    top: 0px;
-    right: 20px;
-}

addons/calendar/static/src/js/base_calendar.js

@@ -4,6 +4,7 @@ odoo.define('base_calendar.base_calendar', function (require) {
 var core = require('web.core');
 var CalendarView = require('web_calendar.CalendarView');
 var data = require('web.data');
+var Dialog = require('web.Dialog');
 var form_common = require('web.form_common');
 var Model = require('web.DataModel');
 var Notification = require('web.notification').Notification;
@@ -23,7 +24,7 @@ function reload_favorite_list(result) {
     }
     new Model("res.users")
     .query(["partner_id"])
-    .filter([["id", "=",self.dataset.context.uid]])
+    .filter([["id", "=", self.dataset.context.uid]])
     .first()
     .done(function(result) {
         var sidebar_items = {};
@@ -36,8 +37,8 @@ function reload_favorite_list(result) {
             is_checked: true,
             is_remove: false,
         };
-
-        sidebar_items[0] = filter_item ;
+        sidebar_items[filter_value] = filter_item ;
+        
         filter_item = {
                 value: -1,
                 label: _lt("Everybody's calendars"),
@@ -64,8 +65,7 @@ function reload_favorite_list(result) {
             
             self.sidebar.filter.events_loaded(self.all_filters);
             self.sidebar.filter.set_filters();
-            self.sidebar.filter.set_distroy_filters();
-            self.sidebar.filter.addInputBox();
+            self.sidebar.filter.add_favorite_calendar();
             self.sidebar.filter.destroy_filter();
         }).done(function () {
             self.$calendar.fullCalendar('refetchEvents');
@@ -77,25 +77,16 @@ function reload_favorite_list(result) {
 }
 
 CalendarView.include({
-    extraSideBar: function(){
+    extraSideBar: function() {
         this._super();
-        if (this.useContacts){
-            new reload_favorite_list(this);
+        if (this.useContacts) {
+            reload_favorite_list(this);
         }
     }
 });
 
 widgets.SidebarFilter.include({
-    set_distroy_filters: function() {
-        var self = this;
-        // When mouse-enter the favorite list it will show the 'X' for removing partner from the favorite list.
-        if (self.view.useContacts){
-            self.$('.oe_calendar_all_responsibles').on('mouseenter mouseleave', function(e) {
-                self.$('.oe_remove_follower').toggleClass('hidden', e.type == 'mouseleave');
-            });
-        }
-    },
-    addInputBox: function() {
+    add_favorite_calendar: function() {
         var self = this;
         if (this.dfm)
             return;
@@ -108,14 +99,14 @@ widgets.SidebarFilter.include({
         var FieldMany2One = core.form_widget_registry.get('many2one');
         this.ir_model_m2o = new FieldMany2One(self.dfm, {
             attrs: {
-                class: 'oe_add_input_box',
+                class: 'o_add_favorite_calendar',
                 name: "partner_id",
                 type: "many2one",
                 options: '{"no_open": True}',
                 placeholder: _t("Add Favorite Calendar"),
             },
         });
-        this.ir_model_m2o.insertAfter($('div.oe_calendar_filter'));
+        this.ir_model_m2o.appendTo(this.$el);
         this.ir_model_m2o.on('change:value', self, function() { 
             self.add_filter();
         });
@@ -134,18 +125,22 @@ widgets.SidebarFilter.include({
                 }
             });
         });
-        new reload_favorite_list(this);
+        reload_favorite_list(this);
     },
     destroy_filter: function(e) {
-        var self= this;
+        var self = this;
         this.$(".oe_remove_follower").on('click', function(e) {
             self.ds_message = new data.DataSetSearch(self, 'calendar.contacts');
-            if (! confirm(_t("Do you really want to delete this filter from favorite?"))) { return false; }
             var id = $(e.currentTarget)[0].dataset.id;
-            self.ds_message.call('search', [[['partner_id', '=', parseInt(id)]]]).then(function(record){
-                return self.ds_message.unlink(record);
-            }).done(function() {
-                new reload_favorite_list(self);
+
+            Dialog.confirm(self, _t("Do you really want to delete this filter from favorite?"), {
+                confirm_callback: function() {
+                    self.ds_message.call('search', [[['partner_id', '=', parseInt(id)]]]).then(function(record) {
+                        return self.ds_message.unlink(record);
+                    }).done(function() {
+                        reload_favorite_list(self);
+                    });
+                },
             });
         });
     },

addons/calendar/static/src/less/calendar.less

@@ -0,0 +1,62 @@
+.openerp {
+    .oe_invitation {
+        width : 13px;
+        height : 13px;
+        margin-bottom : -4px;
+        display : inline-block;    
+    }
+    a.oe_invitation {
+       cursor: default!important;
+    }
+    .needsAction {
+        background : url(/web/static/src/img/icons/gtk-normal.png) no-repeat;
+        background-size : 11px 11px;    
+    }
+    .accepted {
+        background : url(/web/static/src/img/icons/gtk-yes.png) no-repeat;
+        background-size : 11px 11px;    
+    }
+    .declined {
+        background : url(/web/static/src/img/icons/gtk-no.png) no-repeat;
+        background-size : 11px 11px;    
+    }
+}
+
+.o_calendar_invitation {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+
+    &.accepted {
+        background-color: @brand-success;
+    }
+
+    &.needsAction {
+        background-color: @odoo-brand-secondary;
+    }
+}
+
+.o_calendar_all_responsibles {
+    .o_calendar_responsible {
+        margin-top: 10px;
+    }
+
+    .oe_remove_follower {
+        display: none;
+        cursor: pointer;
+    }
+    &:hover .oe_remove_follower {
+        display: inline-block;
+    }
+}
+
+.o_cal_avatar {
+    height: 24px;
+    width: 24px;
+}
+
+.o_add_favorite_calendar {
+    margin-top: 10px;
+    position: relative;
+}

addons/calendar/static/src/xml/base_calendar.xml

@@ -20,55 +20,11 @@
         </t>
     </t>
 
-    <t t-name="invitation_view">
-        <div class='invitation_block well' style='width:50%; margin:auto; margin-top : 30px;'>
-            <div class="oe_right" style="margin-left:0px"><b><t t-esc="invitation['current_attendee'].cn"/> (<t t-esc="invitation['current_attendee'].email"/>)</b></div>
-            <div class="oe_left">
-                <img class="cal_inline cal_image" src='/web/binary/company_logo' />
-            </div>
-            <div>               
-                <div class="invitation_block cal_meeting">
-                    <h2 class="cal_inline">Calendar Invitation</h2>                                
-                    <t t-if="invitation['current_attendee'].state != 'needsAction'">
-                        <a t-attf-class="attendee_#{invitation['current_attendee'].state}">
-                            <b t-if="invitation['current_attendee'].state == 'accepted'">Yes I'm going.</b>
-                            <b t-if="invitation['current_attendee'].state == 'declined'">No I'm not going.</b>
-                        </a>                        
-                    </t>
-                    <br/><br/>
-                    <div class="cal_meeting"><t t-esc="invitation['meeting'].event"/></div>
-                    <br/>
-                    <table class="">
-                        <tr>
-                            <td class="cal_lable">When</td>
-                            <td> <t t-esc="invitation['meeting'].when"/></td>
-                        </tr>
-                        <tr>
-                            <td class="cal_lable">Where</td>
-                            <td> <t t-esc="invitation['meeting'].where or '-'"/></td>
-                        </tr>
-                        <tr>
-                            <td class="cal_lable">Who</td>
-                            <td>
-                                <t t-foreach="invitation['attendee']" t-as="att">
-                                    <br/>
-                                    <span class="cal_status"><a t-attf-class="oe_invitation #{att.status}"/><t t-esc="att.name"/></span>
-                                </t>
-                            </td>
-                        </tr>
-                    </table>
-                    <br/>
-                </div>
-            </div>
-        </div>
-     </t>
-
     <t t-extend="CalendarView.sidebar.responsible">
         <t t-jquery="span[t-attf-class*='color_filter']" t-operation="after">
             <t t-if="(filters_value.value != -1) &amp;&amp; (filters_value.is_remove != false)">
-                <i class="oe_remove_follower fa fa-times hidden" title="Remove this favorite from the list" t-att-data-id="filters_value.value"/>
+                <span class="oe_remove_follower fa fa-times" title="Remove this favorite from the list" t-att-data-id="filters_value.value"/>
            </t>
         </t>
     </t>
-
 </template>

addons/calendar/views/calendar.xml

@@ -1,11 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-    <data>
-        <template id="assets_backend" name="calendar assets" inherit_id="web.assets_backend">
-            <xpath expr="." position="inside">
-                <link rel="stylesheet" href="/calendar/static/src/css/calendar.css"/>
-                <script type="text/javascript" src="/calendar/static/src/js/base_calendar.js"></script>
-            </xpath>
-        </template>
-    </data>
-</openerp>
+<odoo>
+    <template id="assets_backend" name="calendar assets" inherit_id="web.assets_backend">
+        <xpath expr="." position="inside">
+            <link rel="stylesheet" href="/calendar/static/src/less/calendar.less"/>
+            <script type="text/javascript" src="/calendar/static/src/js/base_calendar.js"></script>
+        </xpath>
+    </template>
+</odoo>

addons/web_calendar/static/src/js/web_calendar.js

@@ -155,14 +155,14 @@ var CalendarView = View.extend({
             this.open_popup_action = attrs.event_open_popup;
         }
         // If this field is set to true, we will use the calendar_friends model as filter and not the color field.
-        this.useContacts = (!isNullOrUndef(attrs.use_contacts) && _.str.toBool(attrs.use_contacts)) && (!isNullOrUndef(self.options.$sidebar));
+        this.useContacts = !isNullOrUndef(attrs.use_contacts) && _.str.toBool(attrs.use_contacts);
 
         // If this field is set ot true, we don't add itself as an attendee when we use attendee_people to add each attendee icon on an event
         // The color is the color of the attendee, so don't need to show again that it will be present
-        this.colorIsAttendee = (!(isNullOrUndef(attrs.color_is_attendee) || !_.str.toBoolElse(attrs.color_is_attendee, true))) && (!isNullOrUndef(self.options.$sidebar));
+        this.colorIsAttendee = !(isNullOrUndef(attrs.color_is_attendee) || !_.str.toBoolElse(attrs.color_is_attendee, true));
 
         // if we have not sidebar, (eg: Dashboard), we don't use the filter "coworkers"
-        if (isNullOrUndef(self.options.$sidebar)) {
+        if (isNullOrUndef(self.options.sidebar)) {
             this.useContacts = false;
             this.colorIsAttendee = false;
             this.attendee_people = undefined;
@@ -509,8 +509,7 @@ var CalendarView = View.extend({
         if (!all_day) {
             date_start = time.auto_str_to_date(evt[this.date_start]);
             date_stop = this.date_stop ? time.auto_str_to_date(evt[this.date_stop]) : null;
-        }
-        else {
+        } else {
             date_start = time.auto_str_to_date(evt[this.date_start].split(' ')[0],'start');
             date_stop = this.date_stop ? time.auto_str_to_date(evt[this.date_stop].split(' ')[0],'start') : null;
         }
@@ -613,17 +612,17 @@ var CalendarView = View.extend({
             'id': evt.id,
             'attendees':attendees
         };
-        if (!self.useContacts || self.all_filters[evt[this.color_field]] !== undefined) {
-            if (this.color_field && evt[this.color_field]) {
-                var color_key = evt[this.color_field];
+
+        var color_key = evt[this.color_field];
+        if (!self.useContacts || self.all_filters[color_key] !== undefined) {
+            if (color_key) {
                 if (typeof color_key === "object") {
                     color_key = color_key[0];
                 }
                 r.className = 'o_calendar_color_'+ this.get_color(color_key);
             }
-        }
-        else  { // if form all, get color -1
-              r.className = 'o_calendar_color_'+ self.all_filters[-1].color;
+        } else { // if form all, get color -1
+            r.className = 'o_calendar_color_'+ self.all_filters[-1].color;
         }
         return r;
     },

addons/web_calendar/static/src/js/widgets.js

@@ -199,6 +199,7 @@ var Sidebar = Widget.extend({
     }
 });
 var SidebarFilter = Widget.extend({
+    className: 'o_calendar_all_responsibles',
     events: {
         'change input:checkbox': 'filter_click',
         'click span.color_filter': 'select_previous',

addons/web_calendar/static/src/less/web_calendar.less

@@ -115,25 +115,7 @@
             padding: 8px;
             background: @odoo-view-background-color;
         }
-        .o_cal_avatar {
-            height: 24px;
-            width: 24px;
-        }
-    }
-}
-
-.o_calendar_invitation {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
-
-    &.accepted {
-        background-color: @brand-success; // FIXME brand-success in green badge ...
-    }
-
-    &.needsAction {
-        background-color: @odoo-brand-secondary;
+        
     }
 }
 

addons/web_calendar/static/src/xml/web_fullcalendar.xml

@@ -13,25 +13,25 @@
         <div class="o_calendar_sidebar">
             <div class="o_calendar_mini"/>
             <div class="o_calendar_filter">
-                <h3><t t-esc="widget.getParent().color_string"/></h3>
+                <h3 t-if="widget.getParent().color_string"><t t-esc="widget.getParent().color_string"/></h3>
             </div>           
         </div>
      </t>
 
      <t t-name="CalendarView.sidebar.responsible">
-        <div class="o_calendar_all_responsibles"> 
-            <div t-foreach="filters" class="o_calendar_responsible" > 
-                <t t-if="filters_value.value"><!-- don't display if no value given (or undefined) -->
-                    <input type="checkbox" name="selection" t-att-value="filters_value.value" checked="checked" />
-                    <t t-if="filters_value.value == -1">
-                        <span><i t-attf-class="fa fa-users fa-fw o_cal_avatar"></i></span>
-                    </t>
-                    <t t-if="(filters_value.value != -1) &amp;&amp; filters_value.avatar_model ">
-                        <img t-att-src="'/web/binary/image?model=' + filters_value.avatar_model + '&amp;field=image_small&amp;id=' + filters_value.value"  class="o_cal_avatar"/>     
-                    </t>
-                    <span t-attf-class="color_filter o_underline_color_#{filters_value.color}" ><t t-esc="filters_value.label" /></span>
+        <div t-foreach="filters" class="o_calendar_responsible" > 
+            <t t-if="filters_value.value"><!-- don't display if no value given (or undefined) -->
+                <div class="o_checkbox">
+                    <input type="checkbox" name="selection" t-att-value="filters_value.value" checked="checked" /><span/>
+                </div>
+                <t t-if="filters_value.value == -1">
+                    <span><i t-attf-class="fa fa-users fa-fw o_cal_avatar"></i></span>
                 </t>
-            </div>
+                <t t-if="(filters_value.value != -1) &amp;&amp; filters_value.avatar_model ">
+                    <img t-att-src="'/web/binary/image?model=' + filters_value.avatar_model + '&amp;field=image_small&amp;id=' + filters_value.value"  class="o_cal_avatar"/>     
+                </t>
+                <span t-attf-class="color_filter o_underline_color_#{filters_value.color}" ><t t-esc="filters_value.label" /></span>
+            </t>
         </div>
      </t>