[IMP] calendar: improve day/year/month/year view selection

Instead of having 4 buttons to select a view in calendar, we start using a
dropdown button with the framework data-hotkey approach.

task-2704432

closes odoo/odoo#81705

Related: odoo/enterprise#23131
Signed-off-by: Arnaud Joset <arj@odoo.com>

addons/web/static/src/legacy/js/views/calendar/calendar_controller.js

@@ -526,6 +526,10 @@ var CalendarController = AbstractController.extend({
         this.mode = event.data.mode;
         if (this.$buttons) {
             this.$buttons.find('.active').removeClass('active');
+            const scaleSelection = this.$buttons.find('.scale_button_selection')[0];
+            if (scaleSelection) {
+                scaleSelection.innerText = this.mode;
+            }
             this.$buttons.find('.o_calendar_button_' + this.mode).addClass('active');
         }
         const title = `${this.displayName} (${event.data.title})`;

addons/web/static/src/legacy/xml/web_calendar.xml

@@ -126,11 +126,15 @@
     </t>
 
     <t t-name="CalendarView.scale_buttons">
-        <div class="btn-group">
-            <button type="button" t-if="scales.includes('day')" class="o_calendar_button_day btn btn-secondary" data-hotkey="d">Day</button>
-            <button type="button" t-if="scales.includes('week')" class="o_calendar_button_week btn btn-secondary" data-hotkey="w">Week</button>
-            <button type="button" t-if="scales.includes('month')" class="o_calendar_button_month btn btn-secondary" data-hotkey="m">Month</button>
-            <button type="button" t-if="scales.includes('year')" class="o_calendar_button_year btn btn-secondary" data-hotkey="y">Year</button>
+        <div class="btn-group dropdown">
+            <button class="btn btn-secondary dropdown-toggle scale_button_selection text-uppercase" data-hotkey="v" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <button type="button" t-if="scales.includes('day')" class="dropdown-item o_calendar_button_day btn btn-secondary text-uppercase" data-hotkey="d">Day</button>
+                <button type="button" t-if="scales.includes('week')" class="dropdown-item o_calendar_button_week btn btn-secondary text-uppercase" data-hotkey="w">Week</button>
+                <button type="button" t-if="scales.includes('month')" class="dropdown-item o_calendar_button_month btn btn-secondary text-uppercase" data-hotkey="m">Month</button>
+                <button type="button" t-if="scales.includes('year')" class="dropdown-item o_calendar_button_year btn btn-secondary text-uppercase" data-hotkey="y">Year</button>
+            </div>
         </div>
     </t>
 

addons/web/static/tests/legacy/views/calendar_tests.js

@@ -217,11 +217,13 @@ QUnit.module('Views', {
         assert.containsN($sidebar, 'tr:has(.ui-state-active) td', 7,
             "week scale should highlight 7 days in mini calendar");
 
+        await testUtils.dom.click(calendar.$buttons.find('.scale_button_selection'));
         await testUtils.dom.click(calendar.$buttons.find('.o_calendar_button_day')); // display only one day
         assert.containsN(calendar, '.fc-event', 2, "should display 2 events on the day");
         assert.containsOnce($sidebar, '.o_selected_range',
             "should highlight the target day in mini calendar");
 
+        await testUtils.dom.click(calendar.$buttons.find('.scale_button_selection'));
         await testUtils.dom.click(calendar.$buttons.find('.o_calendar_button_month')); // display all the month
 
         // We display the events or partner 1 2 and 4. Partner 2 has nothing and Event 6 is for partner 6 (not displayed)
@@ -330,16 +332,19 @@ QUnit.module('Views', {
             'Meetings Test (Dec 11 – 17, 2016)', "should display the current week");
 
         // switch to day mode
+        await testUtils.dom.click($('.o_control_panel .scale_button_selection'));
         await testUtils.dom.click($('.o_control_panel .o_calendar_button_day'));
         assert.strictEqual($('.o_control_panel .breadcrumb-item').text(),
             'Meetings Test (December 12, 2016)', "should display the current day");
 
         // switch to month mode
+        await testUtils.dom.click($('.o_control_panel .scale_button_selection'));
         await testUtils.dom.click($('.o_control_panel .o_calendar_button_month'));
         assert.strictEqual($('.o_control_panel .breadcrumb-item').text(),
             'Meetings Test (December 2016)', "should display the current month");
 
         // switch to year mode
+        await testUtils.dom.click($('.o_control_panel .scale_button_selection'));
         await testUtils.dom.click($('.o_control_panel .o_calendar_button_year'));
         assert.strictEqual($('.o_control_panel .breadcrumb-item').text(),
             'Meetings Test (2016)', "should display the current year");
@@ -1997,6 +2002,7 @@ QUnit.module('Views', {
         assert.strictEqual(calendar.$('.fc-event:contains(event 5) .fc-content .fc-time').text(), "",
             "should not display a time for multiple days event");
         // switch to week mode
+        await testUtils.dom.click(calendar.$buttons.find('.scale_button_selection'));
         await testUtils.dom.click(calendar.$('.o_calendar_button_week'));
         assert.strictEqual(calendar.$('.fc-event:contains(event 2) .fc-content .fc-time').text(), "",
             "should not show time in week mode as week mode already have time on y-axis");