From ccb907a185b3cb21220949f8336702db2f416496 Mon Sep 17 00:00:00 2001 From: Aaron Bohy Date: Fri, 6 May 2016 16:20:38 +0200 Subject: [PATCH] [IMP] web_calendar: button to hide the mini calendar - State stored in localStorage - Mini calendar width fixed and not 25% of webclient's width - Minor ui tweaks of the mini calendar --- .../static/src/js/web_calendar.js | 24 ++++++- .../static/src/less/web_calendar.less | 71 +++++++++++++------ .../static/src/xml/web_fullcalendar.xml | 12 ++-- 3 files changed, 79 insertions(+), 28 deletions(-) diff --git a/addons/web_calendar/static/src/js/web_calendar.js b/addons/web_calendar/static/src/js/web_calendar.js index e9a9fc6ff0b..e76a2638ace 100644 --- a/addons/web_calendar/static/src/js/web_calendar.js +++ b/addons/web_calendar/static/src/js/web_calendar.js @@ -94,6 +94,9 @@ var CalendarView = View.extend({ confirm_on_delete: true, }), display_name: _lt('Calendar'), + events: { + 'click .o_calendar_sidebar_toggler': 'toggle_full_width', + }, icon: 'fa-calendar', quick_create_instance: widgets.QuickCreate, template: "CalendarView", @@ -217,6 +220,7 @@ var CalendarView = View.extend({ }, start: function () { this.$calendar = this.$(".o_calendar_widget"); + this.$sidebar_container = this.$(".o_calendar_sidebar_container"); this.$el.addClass(this.fields_view.arch.attrs.class); this.shown.done(this._do_show_init.bind(this)); return this._super(); @@ -270,6 +274,20 @@ var CalendarView = View.extend({ this.$('.o_calendar_buttons').replaceWith(this.$buttons); } }, + toggle_full_width: function () { + var full_width = (localStorage.web_calendar_full_width !== 'true'); + localStorage.web_calendar_full_width = full_width; + this.toggle_sidebar(!full_width); + this.$calendar.fullCalendar('render'); // to reposition the events + }, + toggle_sidebar: function (display) { + this.sidebar.do_toggle(display); + this.$('.o_calendar_sidebar_toggler') + .toggleClass('fa-close', display) + .toggleClass('fa-chevron-left', !display) + .attr('title', display ? _('Close Sidebar') : _('Open Sidebar')); + this.$sidebar_container.toggleClass('o_sidebar_hidden', !display); + }, get_fc_init_options: function () { //Documentation here : http://arshaw.com/fullcalendar/docs/ var self = this; @@ -358,7 +376,7 @@ var CalendarView = View.extend({ if (!this.sidebar) { var translate = get_fc_defaultOptions(); this.sidebar = new widgets.Sidebar(this); - defs.push(this.sidebar.appendTo(this.$('.o_calendar_sidebar_container'))); + defs.push(this.sidebar.appendTo(this.$sidebar_container)); this.$small_calendar = this.$(".o_calendar_mini"); this.$small_calendar.datepicker({ @@ -369,6 +387,10 @@ var CalendarView = View.extend({ }); defs.push(this.extraSideBar()); + + // Add show/hide button and possibly hide the sidebar + this.$sidebar_container.append($('').addClass('o_calendar_sidebar_toggler fa')); + this.toggle_sidebar((localStorage.web_calendar_full_width !== 'true')); } this.$calendar.fullCalendar(this.get_fc_init_options()); diff --git a/addons/web_calendar/static/src/less/web_calendar.less b/addons/web_calendar/static/src/less/web_calendar.less index dce11a19da1..9eb29fb701c 100644 --- a/addons/web_calendar/static/src/less/web_calendar.less +++ b/addons/web_calendar/static/src/less/web_calendar.less @@ -2,8 +2,8 @@ .o_calendar_container { height: 100%; - padding-top: @odoo-horizontal-padding/2; - padding-bottom: @odoo-horizontal-padding/2; + .o-webclient-padding(@top: @odoo-horizontal-padding/2, @bottom: @odoo-horizontal-padding/2); + .o-flex-display(); .calendar_color_loop(@index) when (@index < @nb-calendar-colors+1) { .o_calendar_color_@{index} { @@ -24,11 +24,9 @@ } .underline_color_loop(1); - > .row { - height: 100%; - } - .o_calendar_view { + .o-flex(1, 1, auto); + min-width: 0; height: 100%; .o_calendar_widget { @@ -52,45 +50,80 @@ } .o_calendar_sidebar_container { - padding-left: 0; + .o-flex(0, 0, @odoo-horizontal-padding); + position: relative; + + &.o_sidebar_hidden { + margin-right: -@odoo-horizontal-padding; // hack to display the toggler in the gutter + .o_calendar_sidebar_toggler { + padding: 4px; + color: darken(@odoo-webclient-background-color, 30%); + } + } + + .o_calendar_sidebar_toggler { + .o-position-absolute(@top: 0, @right: 0); + cursor: pointer; + padding: 6px; + &:hover { + color: black; + } + } + + .o_calendar_sidebar { + width: 250px; + padding-left: 8px; + } .ui-datepicker { width: 100%; font-size: 8pt; - font-family: Roboto, "Nimbus Sans L"; + border-radius: 0; + border: none; + padding: 0; .ui-widget-header { + .o-flex-display(); background: none; background-color: lighten(@odoo-brand-secondary, 30%); + border-radius: 0; - .ui-corner-all { + .ui-datepicker-prev, .ui-datepicker-next { + .o-flex(0, 0, auto); position: static; cursor: pointer; + padding: 2px; text-align: center; - &:hover { + color: @odoo-main-text-color; + &.ui-state-hover { background: none; - background-color: @odoo-brand-secondary; border: none; - text-decoration: none; + color: black; } .ui-icon { display: none; } } .ui-datepicker-prev { - float: left; - &::after { + order: 1; + &:after { font-family: FontAwesome; content: ""; } } .ui-datepicker-next { - float: right; - &::before { + order: 3; + &:before { font-family: FontAwesome; content: ""; } } + .ui-datepicker-title { + .o-flex(0, 0, auto); + order: 2; + display: inline-block; + margin: 0 10px; + } } table { td { @@ -100,6 +133,7 @@ border: none; background: none; background-color: lighten(@odoo-brand-secondary, 40%); + text-align: center; } } .ui-state-default { @@ -121,6 +155,7 @@ .o_calendar_filter { padding: 8px; background: @odoo-view-background-color; + border-top: 1px solid lightgray; } } } @@ -136,8 +171,4 @@ .o_calendar_container .o_calendar_sidebar_container { display: none; } - - .o_calendar_container .o_calendar_view { - width: 100%; - } } diff --git a/addons/web_calendar/static/src/xml/web_fullcalendar.xml b/addons/web_calendar/static/src/xml/web_fullcalendar.xml index 05cb81159b0..28b2b49a77d 100644 --- a/addons/web_calendar/static/src/xml/web_fullcalendar.xml +++ b/addons/web_calendar/static/src/xml/web_fullcalendar.xml @@ -1,12 +1,10 @@