diff --git a/platform/features/timeline/res/templates/timeline.html b/platform/features/timeline/res/templates/timeline.html index 2a87921f29..942a3f0e8f 100644 --- a/platform/features/timeline/res/templates/timeline.html +++ b/platform/features/timeline/res/templates/timeline.html @@ -77,7 +77,8 @@ <mct-splitter></mct-splitter> <!-- BOTTOM PANE RESOURCE LEGEND --> - <div mct-resource-graph-drop class="split-pane-component abs l-timeline-pane t-pane-h l-pane-btm s-timeline-resource-legend l-timeline-resource-legend" ng-class="{'drop-over': resourceGraphLegendropOver }"> + <div mct-resource-graph-drop + class="split-pane-component abs l-timeline-pane t-pane-h l-pane-btm s-timeline-resource-legend l-timeline-resource-legend"> <div class="l-title s-title">{{ngModel.title}}Resource Graph Legend</div> <div class="l-legend-items legend"> <mct-include key="'timeline-legend-item'" diff --git a/platform/features/timeline/src/directives/MCTResourceGraphDrop.js b/platform/features/timeline/src/directives/MCTResourceGraphDrop.js index 6dbb4437b7..86ccabb2e6 100644 --- a/platform/features/timeline/src/directives/MCTResourceGraphDrop.js +++ b/platform/features/timeline/src/directives/MCTResourceGraphDrop.js @@ -36,8 +36,15 @@ define( function link(scope, element, attrs) { // Handle dragover element.on('dragover', function (e) { - scope.resourceGraphLegendropOver = true; - scope.$apply(); + var swimlane = dndService.getData( + SwimlaneDragConstants.TIMELINE_SWIMLANE_DRAG_TYPE + ); + + if (typeof swimlane !== "undefined" && !swimlane.graph()) { + element.addClass('drop-over'); + scope.$apply(); + e.preventDefault(); + } }); // Handle drops element.on('drop', function (e) { @@ -45,15 +52,19 @@ define( SwimlaneDragConstants.TIMELINE_SWIMLANE_DRAG_TYPE ); + element.removeClass('drop-over'); + // Only toggle if the graph isn't already set - if (!swimlane.graph()) { + if (typeof swimlane !== "undefined" && !swimlane.graph()) { swimlane.toggleGraph(); + e.preventDefault(); } }); // Clear highlights when drag leaves this swimlane - element.on('dragleave', function () { - scope.resourceGraphLegendropOver = false; + element.on('dragleave', function (e) { + element.removeClass('drop-over'); scope.$apply(); + e.preventDefault(); }); }