[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
This commit is contained in:
Aaron Bohy
@@ -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($('<i>').addClass('o_calendar_sidebar_toggler fa'));
|
||||
this.toggle_sidebar((localStorage.web_calendar_full_width !== 'true'));
|
||||
}
|
||||
this.$calendar.fullCalendar(this.get_fc_init_options());
|
||||
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<div t-name="CalendarView" class="container-fluid o_calendar_container">
|
||||
<div class="row">
|
||||
<div class="o_calendar_view col-sm-9">
|
||||
<div class="o_calendar_buttons"/>
|
||||
<div class="o_calendar_widget" />
|
||||
</div>
|
||||
<div class="o_calendar_sidebar_container col-sm-3 hidden-xs"/>
|
||||
<div t-name="CalendarView" class="o_calendar_container">
|
||||
<div class="o_calendar_view">
|
||||
<div class="o_calendar_buttons"/>
|
||||
<div class="o_calendar_widget" />
|
||||
</div>
|
||||
<div class="o_calendar_sidebar_container hidden-xs"/>
|
||||
</div>
|
||||
|
||||
<t t-name="CalendarView.sidebar">
|
||||
|
||||
Reference in New Issue
Block a user