[IMP] Improve calendar view layout and styling. Still have problem with minical overflow

bzr revid: fme@openerp.com-20120430212808-jjl7fmoddjd8pyo5
This commit is contained in:
Fabien Meghazi 2012-04-30 23:28:08 +02:00
parent 476da193cc
commit b5e98c0449
3 changed files with 46 additions and 35 deletions

View File

@ -1,5 +1,20 @@
#openerp_scheduler {
.oe_calendar_table {
border-top: 3px solid #eee;
}
.oe_calendar {
background-color:#eee;
height: 600px;
border-right: 1px solid #eee;
}
.oe_calendar_sidebar {
width: 200px;
}
.oe_calendar_mini {
background-color: #eee;
padding: 5px;
}
.oe_calendar_filter {
padding: 0 10px;
}
.openerp .dhx_mini_calendar {
-moz-box-shadow: none;

View File

@ -8,6 +8,7 @@ var _t = instance.web._t,
var QWeb = instance.web.qweb;
instance.web.views.add('calendar', 'instance.web_calendar.CalendarView');
instance.web_calendar.CalendarView = instance.web.View.extend({
template: "CalendarView",
display_name: _lt('Calendar'),
// Dhtmlx scheduler ?
init: function(parent, dataset, view_id, options) {
@ -98,13 +99,12 @@ instance.web_calendar.CalendarView = instance.web.View.extend({
for (var fld = 0; fld < this.fields_view.arch.children.length; fld++) {
this.info_fields.push(this.fields_view.arch.children[fld].attrs.name);
}
this.$element.html(QWeb.render("CalendarView", {"fields_view": this.fields_view}));
this.init_scheduler();
if (! this.sidebar && this.options.$sidebar) {
if (!this.sidebar && this.options.$sidebar) {
this.sidebar = new instance.web_calendar.Sidebar(this);
this.has_been_loaded.pipe(this.sidebar.appendTo(this.options.$sidebar));
this.has_been_loaded.pipe(this.sidebar.appendTo(this.$element.find('.oe_calendar_sidebar_container')));
}
return this.has_been_loaded.resolve();
@ -127,7 +127,7 @@ instance.web_calendar.CalendarView = instance.web.View.extend({
scheduler.config.mark_now = true;
scheduler.config.day_date = '%l %j';
scheduler.init('openerp_scheduler', null, this.mode || 'month');
scheduler.init(this.$element.find('.oe_calendar')[0], null, this.mode || 'month');
// Remove hard coded style attributes from dhtmlx scheduler
this.$element.find(".dhx_cal_navline div").removeAttr('style');
@ -143,7 +143,7 @@ instance.web_calendar.CalendarView = instance.web.View.extend({
this.refresh_scheduler();
},
on_view_changed: function(mode, date) {
this.$element.removeClass('oe_cal_day oe_cal_week oe_cal_month').addClass('oe_cal_' + mode);
this.$element.find('.oe_calendar').removeClass('oe_cal_day oe_cal_week oe_cal_month').addClass('oe_cal_' + mode);
if (!date.between(this.range_start, this.range_stop)) {
this.update_range_dates(date);
this.do_ranged_search();
@ -392,18 +392,9 @@ instance.web_calendar.CalendarView = instance.web.View.extend({
var self = this;
$.when(this.has_been_loaded).then(function() {
self.$element.show();
if (self.sidebar) {
self.sidebar.$element.show();
}
self.do_push_state({});
});
},
do_hide: function() {
this._super();
if (this.sidebar) {
this.sidebar.$element.hide();
}
},
get_selected_ids: function() {
// no way to select a record anyway
return [];

View File

@ -1,27 +1,32 @@
<template>
<t t-name="CalendarView">
<div class="oe_calendar">
<div id="openerp_scheduler" class="dhx_cal_container" style="height: 600px;">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button">&amp;nbsp;</div>
<div class="dhx_cal_next_button">&amp;nbsp;</div>
<div class="dhx_cal_today_button" t-opentag="true"></div>
<div class="dhx_cal_date" t-opentag="true"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;" t-opentag="true"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;" t-opentag="true"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;" t-opentag="true"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</div>
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="oe_calendar_table">
<tr>
<td width="100%">
<div class="oe_calendar dhx_cal_container">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button">&amp;nbsp;</div>
<div class="dhx_cal_next_button">&amp;nbsp;</div>
<div class="dhx_cal_today_button" t-opentag="true"></div>
<div class="dhx_cal_date" t-opentag="true"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;" t-opentag="true"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;" t-opentag="true"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;" t-opentag="true"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</td>
<td class="oe_calendar_sidebar_container"/>
</tr>
</table>
</t>
<t t-name="CalendarView.sidebar">
<div class="oe_calendar_sidebar" style="width: 500px">
<div class="oe_calendar_mini oe_left" style="width: 240px"/>
<div class="oe_calendar_filter oe_right" style="width: 240px">
<div class="oe_calendar_sidebar">
<div class="oe_calendar_mini"/>
<div class="oe_calendar_filter">
<h3><t t-esc="widget.getParent().color_string"/></h3>
</div>
</div>