display and printing modification
This commit is contained in:
parent
fc3cfa5484
commit
b5319446db
|
@ -1,7 +1,6 @@
|
||||||
|
|
||||||
/****** Window & layouts ******/
|
/********** Window & layouts **********/
|
||||||
BODY
|
BODY {
|
||||||
{
|
|
||||||
top: 1em;
|
top: 1em;
|
||||||
bottom: 1em;
|
bottom: 1em;
|
||||||
right: 1em;
|
right: 1em;
|
||||||
|
@ -9,11 +8,11 @@ BODY
|
||||||
overflow:auto;
|
overflow:auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar
|
.toolbar {
|
||||||
{ display:none;}
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
DIV#leftSide
|
DIV#leftSide {
|
||||||
{
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;
|
top:0;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
|
@ -23,53 +22,32 @@ DIV#leftSide
|
||||||
overflow-y:auto;
|
overflow-y:auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
DIV.colorBox
|
DIV.colorBox {
|
||||||
{ display: inline-block; }
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
TD DIV.colorBox, TD DIV.colorBox:hover
|
TD DIV.colorBox, TD DIV.colorBox:hover {
|
||||||
{ border-color: #fff; }
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
TABLE#eventsList .colorBox
|
TABLE#eventsList .colorBox {
|
||||||
{ margin-right: 4px; }
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********** Print settings **********/
|
||||||
/******************************/
|
|
||||||
/****** Print settings *******/
|
|
||||||
|
|
||||||
INPUT#inputFieldTitle {
|
INPUT#inputFieldTitle {
|
||||||
width:120px;
|
width:120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
DIV#rightFrameTitle
|
DIV#rightFrameTitle {
|
||||||
{
|
|
||||||
font-size:20px;
|
font-size:20px;
|
||||||
|
text-decoration:underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/******************************/
|
/********** What to print **********/
|
||||||
/****** What to print ********/
|
|
||||||
|
|
||||||
#dateRangeFrom, #dateRangeTo
|
/********** Buttons **********/
|
||||||
{
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#startingDate, #endingDate
|
|
||||||
{
|
|
||||||
width:auto;
|
|
||||||
vertical-align:8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#labelFrom, #labelTo
|
|
||||||
{
|
|
||||||
vertical-align:8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
TR.todo {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/************************/
|
|
||||||
/****** Buttons ********/
|
|
||||||
|
|
||||||
#printButtons {
|
#printButtons {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
@ -77,43 +55,39 @@ TR.todo {
|
||||||
right:0;
|
right:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#printButton
|
#printButton {
|
||||||
{
|
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**************************/
|
/********** RightSide **********/
|
||||||
/****** RightSide ********/
|
|
||||||
|
|
||||||
.divEventsPreview, .divTasksPreview
|
.divEventsPreview, .divTasksPreview {
|
||||||
{
|
|
||||||
border:solid black 2px;
|
border:solid black 2px;
|
||||||
border-radius:5px;
|
border-radius:5px;
|
||||||
margin-top:4px;
|
margin-top:3px;
|
||||||
margin-bottom:4px;
|
}
|
||||||
|
|
||||||
|
.eventsTitle, .tasksTitle {
|
||||||
|
text-align:center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overdueTasks {
|
.overdueTasks {
|
||||||
color:red;
|
color:red;
|
||||||
|
text-align:center;
|
||||||
}
|
}
|
||||||
.completedTasks {
|
.completedTasks {
|
||||||
font-style:italic;
|
font-style:italic;
|
||||||
|
text-align:center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.EventsTasksDate {
|
DIV#rightSide {
|
||||||
text-indent:20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
DIV#rightSide
|
|
||||||
{
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left:230px;
|
left:230px;
|
||||||
top:0;
|
top:0;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
right:0;
|
right:0;
|
||||||
}
|
}
|
||||||
DIV#rightFrame
|
DIV#rightFrame {
|
||||||
{
|
|
||||||
position:absolute;
|
position:absolute;
|
||||||
right:0;
|
right:0;
|
||||||
left:0;
|
left:0;
|
||||||
|
@ -129,15 +103,17 @@ DIV#rightSide
|
||||||
padding-right:5px;
|
padding-right:5px;
|
||||||
overflow-y:auto;
|
overflow-y:auto;
|
||||||
}
|
}
|
||||||
#rightFrameEvents{
|
#rightFrameEvents {
|
||||||
|
width:49.5%;
|
||||||
|
float:left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#rightFrameTasks{
|
#rightFrameTasks {
|
||||||
|
width:49.5%;
|
||||||
|
float:right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/********** Overriding SchedulerUI.css **********/
|
||||||
/***********************************************/
|
|
||||||
/****** Overriding the SchedulerUI.css ********/
|
|
||||||
|
|
||||||
DIV#calendarHeader {
|
DIV#calendarHeader {
|
||||||
position:relative;
|
position:relative;
|
||||||
|
@ -182,7 +158,7 @@ DIV#daysView DIV.hour {
|
||||||
height: 25%;
|
height: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
DIV.event{
|
DIV.event {
|
||||||
z-index:1;
|
z-index:1;
|
||||||
border:solid black 1px;
|
border:solid black 1px;
|
||||||
background-color:white;
|
background-color:white;
|
||||||
|
@ -578,11 +554,9 @@ DIV#daysView DIV.event.starts96
|
||||||
DIV#daysView DIV.event.lasts96
|
DIV#daysView DIV.event.lasts96
|
||||||
{ height: 696.0px; }
|
{ height: 696.0px; }
|
||||||
|
|
||||||
|
/********** Overriding generic.css **********/
|
||||||
|
|
||||||
/*******************************************/
|
TABLE.frame {
|
||||||
/****** Overriding the general.css ********/
|
|
||||||
|
|
||||||
TABLE.frame{
|
|
||||||
width:97%;
|
width:97%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
|
@ -590,8 +564,7 @@ TABLE.frame{
|
||||||
display:table;
|
display:table;
|
||||||
}
|
}
|
||||||
|
|
||||||
SPAN.caption
|
SPAN.caption {
|
||||||
{
|
|
||||||
background: -webkit-linear-gradient(bottom, #E6E7E6, #dddddd); /* For Safari 5.1 to 6.0 */
|
background: -webkit-linear-gradient(bottom, #E6E7E6, #dddddd); /* For Safari 5.1 to 6.0 */
|
||||||
background: -o-linear-gradient(bottom, #E6E7E6, #dddddd); /* For Opera 11.1 to 12.0 */
|
background: -o-linear-gradient(bottom, #E6E7E6, #dddddd); /* For Opera 11.1 to 12.0 */
|
||||||
background: -moz-linear-gradient(bottom, #E6E7E6, #dddddd); /* For Firefox 3.6 to 15 */
|
background: -moz-linear-gradient(bottom, #E6E7E6, #dddddd); /* For Firefox 3.6 to 15 */
|
||||||
|
@ -602,32 +575,20 @@ LABEL {
|
||||||
margin-left:0;
|
margin-left:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**************************************************/
|
/********** Calling print(); from the browser **********/
|
||||||
/****** Calling print(); from the browser ********/
|
|
||||||
|
|
||||||
@media print
|
@media print{
|
||||||
{
|
.no-print, SPAN.caption, SPAN.weeksHeader, SPAN.daysHeader {
|
||||||
.no-print, SPAN.caption, SPAN.weeksHeader SPAN.week1, SPAN.daysHeader SPAN.day1
|
|
||||||
{
|
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
SPAN.weeksHeader, SPAN.daysHeader {
|
|
||||||
border:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
DIV#rightSide
|
DIV#rightSide {
|
||||||
{
|
|
||||||
position:static;
|
position:static;
|
||||||
top:5px;
|
top:5px;
|
||||||
left:5px;
|
left:5px;
|
||||||
}
|
}
|
||||||
DIV#rightFrame, DIV#rightFrameEvents, DIV#rightFrameTasks
|
|
||||||
{
|
DIV#rightFrame {
|
||||||
height:auto;
|
|
||||||
}
|
|
||||||
DIV#rightFrame
|
|
||||||
{
|
|
||||||
border:none;
|
border:none;
|
||||||
overflow:visible;
|
overflow:visible;
|
||||||
}
|
}
|
||||||
|
|
|
@ -194,10 +194,7 @@ function refreshTasksListCallback(http) {
|
||||||
var tasksBlocks = http.responseText.evalJSON(true);
|
var tasksBlocks = http.responseText.evalJSON(true);
|
||||||
$("rightFrameTasks").innerHTML = "";
|
$("rightFrameTasks").innerHTML = "";
|
||||||
var layout = $("printLayoutList").value;
|
var layout = $("printLayoutList").value;
|
||||||
if (layout == 0)
|
_drawTasksCells(tasksBlocks);
|
||||||
_drawTasksCells(tasksBlocks);
|
|
||||||
else
|
|
||||||
_drawTasksList(tasksBlocks);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
|
@ -205,36 +202,27 @@ function refreshTasksListCallback(http) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function _drawEventsCells(eventsBlocks) {
|
function _drawEventsCells(eventsBlocks) {
|
||||||
|
var events = _("Events");
|
||||||
|
$("rightFrameEvents").insert("<h3>"+events+"</h3>");
|
||||||
for(var i=0; i < eventsBlocks[0].length; i++)
|
for(var i=0; i < eventsBlocks[0].length; i++)
|
||||||
{
|
{
|
||||||
var event = _parseEvent(eventsBlocks[0][i]);
|
var event = _parseEvent(eventsBlocks[0][i]);
|
||||||
$("rightFrameEvents").innerHTML += event;
|
$("rightFrameEvents").insert(event);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function _drawTasksCells(tasksBlocks) {
|
function _drawTasksCells(tasksBlocks) {
|
||||||
|
var task = _("Tasks");
|
||||||
|
$("rightFrameTasks").insert("<h3>"+task+"</h3>");
|
||||||
for(var i=0; i < tasksBlocks.length; i++)
|
for(var i=0; i < tasksBlocks.length; i++)
|
||||||
{
|
{
|
||||||
if (!(printNoDueDateTasks == 0 && tasksBlocks[i][5] == null)) {
|
if (!(printNoDueDateTasks == 0 && tasksBlocks[i][5] == null)) {
|
||||||
var task = _parseTask(tasksBlocks[i]);
|
var task = _parseTask(tasksBlocks[i]);
|
||||||
$("rightFrameTasks").innerHTML += task;
|
$("rightFrameTasks").insert(task);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function _drawTasksList(tasksBlocks) {
|
|
||||||
var tasksList;
|
|
||||||
tasksList = "<div><ul>";
|
|
||||||
for(var i=0; i < tasksBlocks.length; i++)
|
|
||||||
{
|
|
||||||
if (!(printNoDueDateTasks == 0 && tasksBlocks[i][5] == null)) {
|
|
||||||
tasksList += "<li>" + tasksBlocks[i][4] + "</li>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tasksList += "</ul></div>";
|
|
||||||
$("rightFrameTasks").innerHTML = tasksList;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO : Maybe use the drawfunction from the schedulerUI.js
|
// TODO : Maybe use the drawfunction from the schedulerUI.js
|
||||||
|
|
||||||
function _drawEvents(events, eventsData) {
|
function _drawEvents(events, eventsData) {
|
||||||
|
@ -389,35 +377,53 @@ function newBaseEventDIV(eventRep, event, eventText) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function _parseEvent(event) {
|
function _parseEvent(event) {
|
||||||
|
// Localized strings :
|
||||||
|
var start = _("Start");
|
||||||
|
var end = _("End");
|
||||||
|
var Location = _("Location");
|
||||||
|
var Calendar = _("Calendar");
|
||||||
|
|
||||||
|
|
||||||
var parsedEvent;
|
var parsedEvent;
|
||||||
var startDate = new Date(event[5] *1000);
|
var startDate = new Date(event[5] *1000);
|
||||||
var endDate = new Date(event[6] *1000);
|
var endDate = new Date(event[6] *1000);
|
||||||
parsedEvent = "<div class=divEventsPreview><table>";
|
parsedEvent = "<div class=divEventsPreview><table>";
|
||||||
parsedEvent += "<tr><td><b>"+ event[4] +"</b></td></tr>";
|
parsedEvent += "<tr class=\"eventsTitle\"><td colspan=\"2\"><b>"+ event[4] +"</b></td></tr>";
|
||||||
parsedEvent += "<tr><td>"+ startDate.toLocaleString() + " - " + endDate.toLocaleString() + "</td></tr>";
|
parsedEvent += "<tr><td style=\"text-align:right;\"><i>" + start + ":</i></td><td>" + startDate.toLocaleString() + "</td></tr>";
|
||||||
parsedEvent += "<tr><td><var:string label:value='Calendar: ' />" + event[2] + "</td></tr>";
|
parsedEvent += "<tr><td style=\"text-align:right;\"><i>" + end + ":</i></td><td>" + endDate.toLocaleString() + "</td></tr>";
|
||||||
|
if (event[7] != "")
|
||||||
|
parsedEvent += "<tr><td style=\"text-align:right;\"><i>"+ Location +": </i></td><td>" + event[7] + "</td></tr>";
|
||||||
|
parsedEvent += "<tr><td style=\"text-align:right;\"><i>"+ Calendar +": </i></td><td>" + event[2] + "</td></tr>";
|
||||||
parsedEvent += "</table></div>";
|
parsedEvent += "</table></div>";
|
||||||
return parsedEvent;
|
return parsedEvent;
|
||||||
}
|
}
|
||||||
|
|
||||||
function _parseTask(task) {
|
function _parseTask(task) {
|
||||||
var parsedTask;
|
var parsedTask;
|
||||||
var dueDate;
|
var start = _("Start");
|
||||||
|
var end = _("End");
|
||||||
|
var Calendar = _("Calendar");
|
||||||
|
var Location = _("Location");
|
||||||
|
|
||||||
parsedTask = "<div class=divTasksPreview><table>";
|
parsedTask = "<div class=divTasksPreview><table>";
|
||||||
if (task[12] == "overdue")
|
if (task[12] == "overdue")
|
||||||
parsedTask += "<tr><td><span class=\"overdueTasks\"><b>"+ task[4] +"</b></span></td></tr>";
|
parsedTask += "<tr><td colspan=\"2\" class=\"overdueTasks\"><b>"+ task[4] +"</b></td></tr>";
|
||||||
else if (task[12] == "completed") {
|
else if (task[12] == "completed") {
|
||||||
parsedTask += "<tr><td><b><span class=\"completedTasks\">"+ task[4] +"</b></span></td></tr>";
|
parsedTask += "<tr><td colspan=\"2\" class=\"completedTasks\"><b>"+ task[4] +"</b></td></tr>";
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
parsedTask += "<tr><td><b>"+ task[4] +"</b></td></tr>";
|
parsedTask += "<tr class=\"tasksTitle\"><td colspan=\"2\"><b>"+ task[4] +"</b></td></tr>";
|
||||||
|
|
||||||
if (task[5] != null) {
|
if (task[5] != null && task[6] != null) {
|
||||||
dueDate = new Date(task[5] *1000);
|
var startDate = new Date(task[5] *1000);
|
||||||
parsedTask += "<tr><td class=\"EventsTasksDate\">"+ dueDate.toLocaleString() + "</td></tr>";
|
var endDate = new Date(task[6] *1000);
|
||||||
|
parsedTask += "<tr><td style=\"text-align:right;\"><i>"+ start +": </i></td><td>"+ startDate.toLocaleString() + "</td></tr>";
|
||||||
|
parsedTask += "<tr><td style=\"text-align:right;\"><i>"+ end +": </i></td><td>"+ endDate.toLocaleString() + "</td></tr>";
|
||||||
}
|
}
|
||||||
parsedTask += "<tr><td><var:string label:value='Calendar: ' />" + task[2] + "</td></tr>";
|
if (task[7] != "") {
|
||||||
|
parsedTask += "<tr><td style=\"text-align:right;\"><i>"+ Location +": </i></td><td>" + task[7] + "</td></tr>";
|
||||||
|
}
|
||||||
|
parsedTask += "<tr><td style=\"text-align:right;\"><i>" + Calendar + ": </i></td><td>" + task[2] + "</td></tr>";
|
||||||
parsedTask += "</table></div>";
|
parsedTask += "</table></div>";
|
||||||
|
|
||||||
return parsedTask;
|
return parsedTask;
|
||||||
|
@ -494,18 +500,21 @@ function onPrintLayoutListChange() {
|
||||||
var parentView = window.parentvar("currentView");
|
var parentView = window.parentvar("currentView");
|
||||||
switch(selectedLayout) {
|
switch(selectedLayout) {
|
||||||
case "0": // List view
|
case "0": // List view
|
||||||
window.resizeTo(660,500);
|
window.resizeTo(700,500);
|
||||||
currentView = parentView;
|
currentView = parentView;
|
||||||
|
ajustFrames();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "1": // Day view
|
case "1": // Day view
|
||||||
window.resizeTo(1010,500);
|
window.resizeTo(1010,500);
|
||||||
currentView = "dayview";
|
currentView = "dayview";
|
||||||
|
ajustFrames(currentView);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "2": // Week view
|
case "2": // Week view
|
||||||
window.resizeTo(1010,500);
|
window.resizeTo(1010,500);
|
||||||
currentView = "weekview";
|
currentView = "weekview";
|
||||||
|
ajustFrames(currentView);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
//todo : month
|
//todo : month
|
||||||
|
@ -514,11 +523,36 @@ function onPrintLayoutListChange() {
|
||||||
refreshContent();
|
refreshContent();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function ajustFrames(view) {
|
||||||
|
if (view == "dayview" || view == "weekview") {
|
||||||
|
document.getElementById("rightFrameEvents").style.width = '100%';
|
||||||
|
document.getElementById("rightFrameTasks").style.width = '100%';
|
||||||
|
document.getElementById("rightFrameTasks").style.pageBreakBefore = 'always';
|
||||||
|
document.getElementById("rightFrameTasks").style.pageBreakInside = 'avoid';
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.getElementById("rightFrameEvents").style.width = '49.5%';
|
||||||
|
document.getElementById("rightFrameTasks").style.width = '49.5%';
|
||||||
|
document.getElementById("rightFrameTasks").style.pageBreakBefore = 'auto';
|
||||||
|
document.getElementById("rightFrameTasks").style.pageBreakInside = 'auto';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
function onEventsCheck(checkBox) {
|
function onEventsCheck(checkBox) {
|
||||||
if(checkBox.checked)
|
if(checkBox.checked){
|
||||||
document.getElementById("rightFrameEvents").style.display = 'block';
|
document.getElementById("rightFrameEvents").style.display = 'block';
|
||||||
else
|
if ($("printLayoutList").value == 0){
|
||||||
|
document.getElementById("rightFrameTasks").style.width = '49.5%';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
document.getElementById("rightFrameEvents").style.display = 'none';
|
document.getElementById("rightFrameEvents").style.display = 'none';
|
||||||
|
if ($("printLayoutList").value == 0){
|
||||||
|
document.getElementById("rightFrameTasks").style.width = '100%';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onTasksCheck(checkBox) {
|
function onTasksCheck(checkBox) {
|
||||||
|
@ -526,10 +560,18 @@ function onTasksCheck(checkBox) {
|
||||||
for (var i = 0; i < printOptions.length; i++)
|
for (var i = 0; i < printOptions.length; i++)
|
||||||
printOptions[i].disabled = !checkBox.checked;
|
printOptions[i].disabled = !checkBox.checked;
|
||||||
|
|
||||||
if(checkBox.checked)
|
if(checkBox.checked) {
|
||||||
document.getElementById("rightFrameTasks").style.display = 'block';
|
document.getElementById("rightFrameTasks").style.display = 'block';
|
||||||
else
|
if ($("printLayoutList").value == 0){
|
||||||
|
document.getElementById("rightFrameEvents").style.width = '49.5%';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
document.getElementById("rightFrameTasks").style.display = 'none';
|
document.getElementById("rightFrameTasks").style.display = 'none';
|
||||||
|
if ($("printLayoutList").value == 0){
|
||||||
|
document.getElementById("rightFrameEvents").style.width = '100%';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*function onPrintDateCheck() {
|
/*function onPrintDateCheck() {
|
||||||
|
|
Loading…
Reference in a new issue