forked from angular-gantt/angular-gantt
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gantt.tmpl.html
125 lines (120 loc) · 6.72 KB
/
gantt.tmpl.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<div class="gantt">
<div class="gantt-labels"
ng-style="(labelsWidth > 0 && {'width': labelsWidth+'px'} || {})"
gantt-label-resizable="labelsWidth" gantt-label-resize-min="50" on-label-resized="raiseLabelsResized(width)" >
<div class="gantt-labels-head"
ng-show="gantt.columns.length > 0">
<div class="gantt-labels-head-row"
ng-style="{'margin-top': ((gantt.getActiveHeadersCount()-1)*2)+'em'}">
<span>Description</span>
</div>
</div>
<div class="gantt-labels-body"
ng-style="(maxHeight > 0 && {'max-height': (maxHeight-ganttHeader.offsetHeight)+'px'} || {})"
ng-show="gantt.columns.length > 0">
<div gantt-vertical-scroll-receiver
ng-style="{'position': 'relative'}">
<div class="gantt-labels-row gantt-row-height"
ng-class-odd="'gantt-background-row'"
ng-class-even="'gantt-background-row-alt'"
ng-repeat="row in gantt.rows track by $index">
<gantt-sortable swap="swapRows(a,b)" active="allowRowSorting" ng-model="row">
<span>{{ row.description }}</span>
</gantt-sortable>
</div>
</div>
</div>
</div>
<div class="gantt-head"
ng-show="gantt.columns.length > 0">
<div gantt-horizontal-scroll-receiver
ng-style="{'position': 'relative', 'width': gantt.width+'em'}">
<div class="gantt-head-row"
ng-class="(gantt.headers.week !== undefined && 'gantt-head-row-bottom' || '')"
ng-if="gantt.headers.month !== undefined">
<span ng-style="{'width': c.width+'em', 'left': c.left+'em'}"
ng-repeat="c in gantt.headers.month | ganttColumnLimit:scroll_start:scroll_width track by $index">
{{ c.date | date:'MMMM yyyy' }}
</span>
</div>
<div class="gantt-head-row" ng-if="gantt.headers.week !== undefined">
<span ng-style="{'width': c.width+'em', 'left': c.left+'em'}"
ng-repeat="c in gantt.headers.week | ganttColumnLimit:scroll_start:scroll_width track by $index">
{{ c.week }}
</span>
</div>
<div class="gantt-head-row" ng-if="gantt.headers.day !== undefined">
<span ng-style="{'width': c.width+'em', 'left': c.left+'em'}"
ng-repeat="c in gantt.headers.day | ganttColumnLimit:scroll_start:scroll_width track by $index">
{{ viewScale === 'hour' && (c.date | date:'dd EEEE') || (c.date | date:'dd') }}
</span>
</div>
<div class="gantt-head-row" ng-if="gantt.headers.hour !== undefined">
<span ng-style="{'width': c.width+'em', 'left': c.left+'em'}"
ng-repeat="c in gantt.headers.hour | ganttColumnLimit:scroll_start:scroll_width track by $index">
{{ c.date | date:'HH' }}
</span>
</div>
</div>
</div>
<div class="gantt-scrollable"
gantt-scroll-sender
gantt-limit-updater
ng-style="(maxHeight > 0 && {'max-height': (maxHeight-ganttHeader.offsetHeight)+'px', 'overflow-y': 'scroll'} || {'overflow-y': 'hidden'})"
ng-style="{'overflow-x': (gantt.rows.length == 0 && 'hidden' || 'scroll')}">
<div class="gantt-body"
ng-style="{'width': gantt.width+'em'}">
<div class="gantt-body-background">
<div class="gantt-row-height"
ng-class-odd="'gantt-background-row'"
ng-class-even="'gantt-background-row-alt'"
ng-repeat="row in gantt.rows track by $index">
</div>
</div>
<div class="gantt-body-foreground">
<div ng-class="(viewScale === 'hour' && !c.isWorkHour && 'gantt-foreground-col-nonworkhour' || (c.isWeekend && 'gantt-foreground-col-weekend' || 'gantt-foreground-col'))"
ng-style="{'width': c.width+'em', 'left': c.left+'em'}"
ng-repeat="c in gantt.columns | ganttColumnLimit:scroll_start:scroll_width track by $index">
</div>
</div>
<div class="gantt-body-content">
<div class="gantt-row gantt-row-height"
ng-click="raiseDOMRowClickedEvent($event, row)"
ng-repeat="row in gantt.rows track by row.id">
<gantt-task ng-repeat="task in row.tasks | ganttTaskLimit:scroll_start:scroll_width track by task.id"></gantt-task>
</div>
</div>
</div>
</div>
<!--
******* Inline templates *******
You can specify your own templates by either changing the default ones below or by
adding an attribute template-url="<url to your template>" on the specific element.
-->
<!-- Task template -->
<script type="text/ng-template" id="default.task.tmpl.html">
<div ng-class="(task.isMilestone === true && ['gantt-task-milestone'] || ['gantt-task']).concat(task.classes)"
ng-style="{'left': ((task.isMilestone === true || task.width === 0) && (task.left-0.3) || task.left)+'em', 'width': task.width +'em', 'z-index': (task.isMoving === true && 1 || task.priority || ''), 'background-color': task.color}">
<gantt-bounds ng-if="task.bounds !== undefined" ng-model="task"></gantt-bounds>
<gantt-tooltip ng-if="showTooltips && (task.isMouseOver || task.isMoving)" ng-model="task"></gantt-tooltip>
<div class="gantt-task-content"><span>{{ (task.isMilestone === true && ' ' || task.subject) }}</span></div>
</div>
</script>
<!-- Task tooltip template -->
<!-- Move ng-if from parent to tooltip directive when https://github.com/angular/angular.js/issues/7183 is fixed -->
<script type="text/ng-template" id="default.tooltip.tmpl.html">
<div class="gantt-task-info" ng-style="css">
<div class="gantt-task-info-content">
{{ task.subject }}</br>
<small>
{{ task.isMilestone === true && (task.from | date:'MMM d, HH:mm') || (task.from | date:'MMM d, HH:mm') + ' - ' + (task.to | date:'MMM d, HH:mm') }}
</small>
</div>
</div>
</script>
<!-- Task bounds template -->
<!-- Replace ng-show with ng-if when https://github.com/angular/angular.js/issues/7183 is fixed -->
<script type="text/ng-template" id="default.bounds.tmpl.html">
<div ng-show='visible' class='gantt-task-bounds' ng-style='getCss()' ng-class='getClass()'></div>
</script>
</div>