[FIX] web: Calendar: control panel buttons in mobile

In mobile, we want a special 'Today' button to be displayed on the
bottom right corner of the control panel. Rev. ebe58d92 enforces
this by defining less layout rules on the control panel. However,
those rules apply globally, for all control panels, not only in
Calendar views. So it produces undesired behaviors in other views.

This rev. removes the undesired less rules, and instead appends
the 'Today' button in the pager area, which is in the bottom right
corner.

3 files changed, 42 insertions, 17 deletions

diff --git a/addons/web/static/src/js/views/calendar/calendar_controller.js b/addons/web/static/src/js/views/calendar/calendar_controller.js
index 73a83fd26e2..2755c4c39fd 100644
--- a/addons/web/static/src/js/views/calendar/calendar_controller.js
+++ b/addons/web/static/src/js/views/calendar/calendar_controller.js
@@ -54,6 +54,17 @@ var CalendarController = AbstractController.extend({
         // The quickCreating attribute ensures that we don't do several create
         this.quickCreating = false;
     },
+    /**
+     * Overrides to unbind handler on the control panel mobile 'Today' button.
+     *
+     * @override
+     */
+    destroy: function () {
+        this._super.apply(this, arguments);
+        if (this.$todayButton) {
+            this.$todayButton.off();
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Public
@@ -103,6 +114,25 @@ var CalendarController = AbstractController.extend({
             this.$('.o_calendar_buttons').replaceWith(this.$buttons);
         }
     },
+    /**
+     * In mobile, we want to display a special 'Today' button on the bottom
+     * right corner of the control panel. This is the pager area, and as there
+     * is no pager in Calendar views, we fool the system by defining a fake
+     * pager (which is actually our button) such that it will be inserted in the
+     * desired place.
+     *
+     * @todo get rid of this hack once the ControlPanel layout will be reworked
+     *
+     * @param {jQueryElement} $node the button should be appended to this
+     *   element to be displayed in the bottom right corner of the control panel
+     */
+    renderPager: function ($node) {
+        if (config.device.isMobile) {
+            this.$todayButton = $(QWeb.render('CalendarView.TodayButtonMobile'));
+            this.$todayButton.on('click', this._move.bind(this, 'today'));
+            $node.append(this.$todayButton);
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/web/static/src/less/web_calendar.less b/addons/web/static/src/less/web_calendar.less
index 05c9a5d6b4a..a3ead61f011 100644
--- a/addons/web/static/src/less/web_calendar.less
+++ b/addons/web/static/src/less/web_calendar.less
@@ -220,16 +220,10 @@
 }
 @media (max-width: @screen-xs-max) {
     .o_control_panel {
-        .o_cp_left {
-            width: 100%;
-            .o_cp_buttons {
-                width: 100%;
-                .o_calendar_button_today {
-                    float: right;
-                    > .o_calendar_text {
-                        margin-top: 3px;
-                    }
-                }
+        .o_calendar_button_today {
+            float: right;
+            > .o_calendar_text {
+                margin-top: 3px;
             }
         }
     }
diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index ae9250d79e9..7f65ed93a08 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -63,13 +63,7 @@
 
     <t t-name="CalendarView.buttons">
         <div class="o_calendar_buttons">
-            <t t-if="isMobile">
-                <span class="fa-stack o_calendar_button_today">
-                    <i class="fa fa-calendar-o fa-stack-2x"></i>
-                    <strong class="o_calendar_text fa-stack-1x"><t t-esc="moment().date()"/></strong>
-                </span>
-            </t>
-            <t t-else="">
+            <t t-if="!isMobile">
                 <button class="o_calendar_button_prev btn btn-sm btn-primary"><span class="fa fa-arrow-left"/></button>
                 <button class="o_calendar_button_today btn btn-sm btn-primary">Today</button>
                 <button class="o_calendar_button_next btn btn-sm btn-primary"><span class="fa fa-arrow-right"/></button>
@@ -82,6 +76,13 @@
         </div>
     </t>
 
+    <t t-name="CalendarView.TodayButtonMobile">
+        <span class="fa-stack o_calendar_button_today">
+            <i class="fa fa-calendar-o fa-stack-2x"></i>
+            <strong class="o_calendar_text fa-stack-1x"><t t-esc="moment().date()"/></strong>
+        </span>
+    </t>
+
     <div t-name="CalendarView.quick_create" class="o_calendar_quick_create">
         <div class="form-group">
             <label for='name' class='control-label'>Summary:</label>