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