From 89db167d72594002b91f3f7ffa2e34aafff4d03f Mon Sep 17 00:00:00 2001 From: Roman Roelofsen Date: Mon, 6 Feb 2017 17:04:15 +0100 Subject: [PATCH] Timeline, changed header look --- .../wp-table/timeline/wp-timeline.header.ts | 39 ++++++++++++++----- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/frontend/app/components/wp-table/timeline/wp-timeline.header.ts b/frontend/app/components/wp-table/timeline/wp-timeline.header.ts index 3fe6be1ee9..99124c2aa1 100644 --- a/frontend/app/components/wp-table/timeline/wp-timeline.header.ts +++ b/frontend/app/components/wp-table/timeline/wp-timeline.header.ts @@ -25,7 +25,6 @@ // // See doc/COPYRIGHT.rdoc for more details. // ++ - import { TimelineViewParameters, timelineElementCssClass, @@ -240,6 +239,7 @@ export class WpTimelineHeader { cell.style.borderTop = `1px solid ${colorGrey1}`; cell.style.fontWeight = "bold"; cell.style.fontSize = "10px"; + cell.style.height = "13px"; }); this.renderTimeSlices(vp, "week", 13, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { @@ -269,9 +269,12 @@ export class WpTimelineHeader { this.renderTimeSlices(vp, "month", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.style.borderTop = `1px solid ${colorGrey1}`; cell.innerHTML = start.format("MMM YYYY"); + cell.style.fontWeight = "bold"; + cell.style.fontSize = "12px"; + cell.style.height = "15px"; }); - this.renderTimeSlices(vp, "week", 10, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + this.renderTimeSlices(vp, "week", 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.innerHTML = start.format("ww"); cell.style.borderColor = `${colorGrey1}`; cell.style.borderTop = `1px solid ${colorGrey1}`; @@ -279,11 +282,12 @@ export class WpTimelineHeader { cell.style.zIndex = "2"; }); - this.renderTimeSlices(vp, "day", 20, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + this.renderTimeSlices(vp, "day", 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.innerHTML = start.format("D"); cell.style.borderColor = `${colorGrey1}`; cell.style.borderTop = `1px solid ${colorGrey1}`; - cell.style.height = "25px"; + cell.style.paddingTop = "5px"; + cell.style.height = "20px"; }); } @@ -291,21 +295,26 @@ export class WpTimelineHeader { this.renderTimeSlices(vp, "year", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.style.borderTop = `1px solid ${colorGrey1}`; cell.innerHTML = start.format("YYYY"); + cell.style.fontWeight = "bold"; + cell.style.fontSize = "12px"; + cell.style.height = "15px"; }); - this.renderTimeSlices(vp, "month", 10, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + this.renderTimeSlices(vp, "month", 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.innerHTML = start.format("MMM"); cell.style.borderColor = `${colorGrey2}`; cell.style.borderTop = `1px solid ${colorGrey1}`; cell.style.height = (this.globalHeight - 10) + "px"; }); - this.renderTimeSlices(vp, "week", 20, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + this.renderTimeSlices(vp, "week", 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.innerHTML = start.format("ww"); cell.style.borderColor = `${colorGrey1}`; cell.style.borderTop = `1px solid ${colorGrey1}`; cell.style.height = "25px"; cell.style.backgroundColor = "white"; + cell.style.paddingTop = "5px"; + cell.style.height = "20px"; }); } @@ -313,21 +322,26 @@ export class WpTimelineHeader { this.renderTimeSlices(vp, "year", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.style.borderTop = `1px solid ${colorGrey1}`; cell.innerHTML = start.format("YYYY"); + cell.style.fontWeight = "bold"; + cell.style.fontSize = "12px"; + cell.style.height = "15px"; }); - this.renderTimeSlices(vp, "quarter", 10, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + this.renderTimeSlices(vp, "quarter", 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.innerHTML = "Q" + start.format("Q"); cell.style.borderColor = `${colorGrey2}`; cell.style.borderTop = `1px solid ${colorGrey1}`; cell.style.height = (this.globalHeight - 10) + "px"; }); - this.renderTimeSlices(vp, "month", 20, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + this.renderTimeSlices(vp, "month", 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.innerHTML = start.format("MMM"); cell.style.height = "25px"; cell.style.borderColor = `${colorGrey2}`; cell.style.borderTop = `1px solid ${colorGrey1}`; cell.style.backgroundColor = "white"; + cell.style.paddingTop = "5px"; + cell.style.height = "20px"; }); } @@ -337,21 +351,26 @@ export class WpTimelineHeader { cell.style.borderTop = `1px solid ${colorGrey1}`; cell.style.borderColor = `${colorGrey1}`; cell.style.backgroundColor = "white"; + cell.style.fontWeight = "bold"; + cell.style.fontSize = "12px"; + cell.style.height = "15px"; }); - this.renderTimeSlices(vp, "quarter", 10, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + this.renderTimeSlices(vp, "quarter", 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.innerHTML = "Q" + start.format("Q"); cell.style.borderColor = `${colorGrey2}`; cell.style.borderTop = `1px solid ${colorGrey1}`; cell.style.height = (this.globalHeight - 10) + "px"; }); - this.renderTimeSlices(vp, "month", 20, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + this.renderTimeSlices(vp, "month", 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { cell.innerHTML = start.format("M"); cell.style.borderColor = `${colorGrey2}`; cell.style.borderTop = `1px solid ${colorGrey1}`; cell.style.height = "25px"; cell.style.backgroundColor = "white"; + cell.style.paddingTop = "5px"; + cell.style.height = "20px"; }); }