Merge pull request #351 from dano19/master

Different class for planned task

Author: mariohmol

Documentation.md

@@ -73,7 +73,7 @@ g.AddTaskItem(new JSGantt.TaskItem(1, 'Define Chart API','',          '',
 
 
 Method definition:
-**TaskItem(_pID, pName, pStart, pEnd, pClass, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend, pCaption, pNotes, pGantt_, pCost = null, pPlanStart = null, pPlanEnd = null, pDuration = null, pBarText = null, pDataObject = null)**
+**TaskItem(_pID, pName, pStart, pEnd, pClass, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend, pCaption, pNotes, pGantt_, pCost = null, pPlanStart = null, pPlanEnd = null, pDuration = null, pBarText = null, pDataObject = null, pPlanClass = null)**
 
 This method takes only the variables defined above and explained below. You can **NOT** pass custom variables this way.
 
@@ -98,7 +98,8 @@ This method takes only the variables defined above and explained below. You can
 |_pNotes:_|(optional) Detailed task information that will be displayed in tool tip for this task|
 |_pGantt:_|(required) javascript JSGantt.GanttChart object from which to take settings.  Defaults to "g" for backwards compatibility|
 |_pCost:_| cost of that task, numeric  
-|_pBarText:_|(optional) Use to include text inside a task bar|      
+|_pBarText:_|(optional) Use to include text inside a task bar|  
+|_pPlanClass:_|(optional) the css class for planned date of this task     
 
 <sup>*</sup> Combined group tasks show all sub-tasks on one row. The information displayed in the task list and row caption are taken from the parent task.  Tool tips are generated individually for each sub-task from its own information.  Milestones are not valid as sub-tasks of a combined group task and will not be displayed. No bounds checking of start and end dates of sub-tasks is performed therefore it is possible for these task bars to overlap. Dependencies can be set to and from sub-tasks only.
 
@@ -175,6 +176,7 @@ The structure of the native XML file:
 	<pDepend>2,24</pDepend>
 	<pCaption>A caption</pCaption>
 	<pNotes>Text - can include limited HTML</pNotes>
+  <pPlanClass>gtaskblue</pPlanClass>
 </task>
 </project>
 ```

dist/jsgantt.css

@@ -2,7 +2,7 @@
 
 div.gantt {
   font-family: tahoma, arial, verdana, Sans-serif;
-  font-size: 10px;
+  font-size: 12px;
   color: #656565;
 }
 
@@ -31,10 +31,9 @@ div.gantt {
   font-size: 12px;
   border: #efefef 1px solid;
   text-align: center;
-  cursor: default
+  cursor: default;
 }
 
-
 .gtasklist {
   height: 19px;
   min-width: 5px;
@@ -44,7 +43,7 @@ div.gantt {
   border-right: none;
 }
 
-.gtasknolist-label{
+.gtasknolist-label {
   padding: 10px 50px;
 }
 /* all three width values set just to make sure - helps resizing code */
@@ -56,7 +55,7 @@ div.gantt {
 .gminorheading {
   background-color: #ffffff;
   font-weight: bold;
-  font-size: 9px;
+  font-size: 11px;
   white-space: nowrap;
 }
 
@@ -154,9 +153,9 @@ td.gspanning {
 
 .gtaskname {
   min-width: 170px;
-  max-width: 170px;
-  width: 170px;
-  font-size: 9px;
+  max-width: 220px;
+  width: 220px;
+  font-size: 12px;
   border-left: none;
 }
 
@@ -246,6 +245,11 @@ span.gfoldercollapse {
   background-color: #fffde5;
 }
 
+.gitemdifferent td {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
 /* task bar caption text styles */
 
 .gmilecaption,
@@ -487,7 +491,7 @@ span.gfoldercollapse {
 div.gtaskbarcontainer {
   z-index: 1;
   position: absolute;
-  top: 0px
+  top: 0px;
 }
 
 .textbar {
@@ -510,7 +514,7 @@ div.gtaskbarcontainer {
   font-size: 10px;
   display: block;
   background: #ffffff;
-  color: #656565
+  color: #656565;
 }
 
 .gTaskInfo {
@@ -652,7 +656,7 @@ div.gtaskbarcontainer {
 /* Old Internet Explorer version hacks */
 
 .gantt {
-  _height: 100%
+  _height: 100%;
 }
 
 /* otherwise the chart disappears! */
@@ -777,7 +781,6 @@ td.gspanning div {
 }
 
 @media print {
-
   /* All your print styles go here */
   html,
   .gchartgrid {
@@ -795,8 +798,8 @@ td.gspanning div {
 
   /* Hide scrollbar for IE, Edge and Firefox */
   .gchartcontainer * {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
   }
 
   /* Hide tool-tip */
@@ -849,7 +852,8 @@ td.gspanning div {
 
 .gmainleft {
   overflow: hidden;
-  flex: 0 0 50%;
+  flex: 0 0 20%;
+  min-width: 220px;
   /* Allow side to grow and shrink */
   flex: 1 0 auto;
 }
@@ -957,25 +961,25 @@ td.gspanning div {
   }
 
   table {
-    page-break-after: auto
+    page-break-after: auto;
   }
 
   tr {
     page-break-inside: avoid;
-    page-break-after: auto
+    page-break-after: auto;
   }
 
   td {
     page-break-inside: avoid;
-    page-break-after: auto
+    page-break-after: auto;
   }
 
   thead {
-    display: table-header-group
+    display: table-header-group;
   }
 
   tfoot {
-    display: table-footer-group
+    display: table-footer-group;
   }
 }
 
@@ -996,7 +1000,7 @@ td.gspanning div {
   border-radius: 8px;
   border: 2px solid white;
   /* should match background, can't be transparent */
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .frame::-webkit-scrollbar-track {
@@ -1009,4 +1013,4 @@ td.gspanning div {
   overflow: scroll;
   -ms-overflow-style: scrollbar;
   display: block;
-}
+}