From 6cd42e016d56fb8725b3ef75371f873eee9c6d7b Mon Sep 17 00:00:00 2001 From: Mithilesh Rao Date: Thu, 5 Nov 2020 13:31:42 +0000 Subject: [PATCH] [IMP] hr_holidays,web: Improve the mobile view for calendar and times off Purpose of the task is to improve mobile interface of the Time Off and calendar view. So in this commit, we have improved UI as below: hr_holidays: - Move the leave summary topbar from top to sidebar filter of calendar for small screen - Improve the kanban view of leave for mobile and added the badge for state. web: - Improve the calendar year mobile view by spliting the month view in 2 column. TaskID: 2333778 Related PR: https://github.com/odoo/enterprise/pull/13454 closes odoo/odoo#61474 Related: odoo/enterprise#13454 Signed-off-by: Yannick Tivisse (yti) --- addons/hr_holidays/models/hr_leave_type.py | 2 +- .../static/src/js/time_off_calendar.js | 18 ++++++-- .../hr_holidays/static/src/scss/time_off.scss | 10 ----- .../static/src/xml/time_off_calendar.xml | 18 ++++++++ .../views/hr_leave_allocation_views.xml | 38 ++++++++-------- addons/hr_holidays/views/hr_leave_views.xml | 45 ++++++++++--------- addons/web/static/src/scss/web_calendar.scss | 14 ++++++ 7 files changed, 92 insertions(+), 53 deletions(-) diff --git a/addons/hr_holidays/models/hr_leave_type.py b/addons/hr_holidays/models/hr_leave_type.py index 2caca086684..824e0a915d8 100644 --- a/addons/hr_holidays/models/hr_leave_type.py +++ b/addons/hr_holidays/models/hr_leave_type.py @@ -256,7 +256,7 @@ class HolidaysType(models.Model): 'leaves_taken': ('%.2f' % lt.leaves_taken).rstrip('0').rstrip('.'), 'virtual_leaves_taken': ('%.2f' % lt.virtual_leaves_taken).rstrip('0').rstrip('.'), 'request_unit': lt.request_unit, - }, lt.allocation_type, lt.validity_stop) + }, lt.allocation_type, lt.validity_stop, lt.id) for lt in leave_types] def _get_contextual_employee_id(self): diff --git a/addons/hr_holidays/static/src/js/time_off_calendar.js b/addons/hr_holidays/static/src/js/time_off_calendar.js index 3f863de98bf..3d0a7d445d3 100644 --- a/addons/hr_holidays/static/src/js/time_off_calendar.js +++ b/addons/hr_holidays/static/src/js/time_off_calendar.js @@ -2,6 +2,7 @@ odoo.define('hr_holidays.dashboard.view_custo', function(require) { 'use strict'; var core = require('web.core'); + const config = require('web.config'); var CalendarPopover = require('web.CalendarPopover'); var CalendarController = require("web.CalendarController"); var CalendarRenderer = require("web.CalendarRenderer"); @@ -171,10 +172,19 @@ odoo.define('hr_holidays.dashboard.view_custo', function(require) { // Do not display header if there is no element to display if (result.length > 0) { - var elem = QWeb.render('hr_holidays.dashboard_calendar_header', { - timeoffs: result, - }); - self.$el.before(elem); + if (config.device.isMobile) { + result.forEach((data) => { + const elem = QWeb.render('hr_holidays.dashboard_calendar_header_mobile', { + timeoff: data, + }); + self.$el.find('.o_calendar_filter_item[data-value=' + data[4] + '] .o_cw_filter_title').append(elem); + }); + } else { + const elem = QWeb.render('hr_holidays.dashboard_calendar_header', { + timeoffs: result, + }); + self.$el.before(elem); + } } }); }, diff --git a/addons/hr_holidays/static/src/scss/time_off.scss b/addons/hr_holidays/static/src/scss/time_off.scss index ffd80c80722..be5c8c0f5bd 100644 --- a/addons/hr_holidays/static/src/scss/time_off.scss +++ b/addons/hr_holidays/static/src/scss/time_off.scss @@ -11,16 +11,6 @@ height: 100%; } - @include media-breakpoint-down(sm) { - .o_timeoff_container { - height: 15%; - } - - .o_calendar_container { - height: 85%; - } - } - .o_timeoff_card { border-right: #adb5bd solid 2px; text-align: center; diff --git a/addons/hr_holidays/static/src/xml/time_off_calendar.xml b/addons/hr_holidays/static/src/xml/time_off_calendar.xml index 97397fc8d5b..6bc8a5bc115 100644 --- a/addons/hr_holidays/static/src/xml/time_off_calendar.xml +++ b/addons/hr_holidays/static/src/xml/time_off_calendar.xml @@ -30,6 +30,24 @@ + + + + + + / + HoursDaysAvailable + + + HoursDaysTaken + + + + (Expire on ) + + + + - - +
+ + + + +
+
+ + + +
diff --git a/addons/hr_holidays/views/hr_leave_views.xml b/addons/hr_holidays/views/hr_leave_views.xml index 5fc53bc682c..57dfb6d704b 100644 --- a/addons/hr_holidays/views/hr_leave_views.xml +++ b/addons/hr_holidays/views/hr_leave_views.xml @@ -108,13 +108,13 @@
-
+
+ class="o_image_64_cover float-left mr4"/>
-
+
days
@@ -129,30 +129,35 @@ Delete
-
-
-
-
-
- from - - to - +
+ from + + to + +
-
-
+
+
- + +
-
-
- - - +
+
+
+ + +
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss index 007e66d2bcd..2e4bd71596a 100644 --- a/addons/web/static/src/scss/web_calendar.scss +++ b/addons/web/static/src/scss/web_calendar.scss @@ -340,6 +340,11 @@ $o-cw-filter-avatar-size: 20px; justify-content: space-evenly; overflow-y: auto; + @include media-breakpoint-down(sm) { + padding-right: 5px; + padding-left: 5px; + } + > table { height: 100%; } @@ -369,10 +374,19 @@ $o-cw-filter-avatar-size: 20px; min-width: 25rem; box-sizing: border-box; + @include media-breakpoint-down(sm) { + width: 50%; + min-width: 12rem; + } + > .fc-month { width: 21rem; margin: auto; + @include media-breakpoint-down(sm) { + width: 95%; + } + > .fc-toolbar.fc-header-toolbar { margin-top: 10px; margin-bottom: 4px;