Skip to content
Snippets Groups Projects
Commit b05c70c2 authored by Jorrit Schaap's avatar Jorrit Schaap
Browse files

Task #8887: major UI layout overhaul. Everything on one screen, no more tabs....

Task #8887: major UI layout overhaul. Everything on one screen, no more tabs. Needs way to switch on/of individual gantt/chart/grid
parent 47330e58
No related branches found
No related tags found
No related merge requests found
...@@ -4,7 +4,8 @@ var gridControllerMod = angular.module('GridControllerMod', ['ui.grid', ...@@ -4,7 +4,8 @@ var gridControllerMod = angular.module('GridControllerMod', ['ui.grid',
'ui.grid.edit', 'ui.grid.edit',
'ui.grid.selection', 'ui.grid.selection',
'ui.grid.cellNav', 'ui.grid.cellNav',
'ui.grid.resizeColumns']); 'ui.grid.resizeColumns',
'ui.grid.autoResize']);
gridControllerMod.controller('GridController', ['$scope', 'dataService', 'uiGridConstants', function($scope, dataService, uiGridConstants) { gridControllerMod.controller('GridController', ['$scope', 'dataService', 'uiGridConstants', function($scope, dataService, uiGridConstants) {
...@@ -77,6 +78,7 @@ gridControllerMod.controller('GridController', ['$scope', 'dataService', 'uiGrid ...@@ -77,6 +78,7 @@ gridControllerMod.controller('GridController', ['$scope', 'dataService', 'uiGrid
enableFiltering: true, enableFiltering: true,
enableCellEdit: false, enableCellEdit: false,
enableColumnResize: true, enableColumnResize: true,
enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
enableRowSelection: true, enableRowSelection: true,
enableRowHeaderSelection: true, enableRowHeaderSelection: true,
enableFullRowSelection: false, enableFullRowSelection: false,
...@@ -104,7 +106,6 @@ gridControllerMod.controller('GridController', ['$scope', 'dataService', 'uiGrid ...@@ -104,7 +106,6 @@ gridControllerMod.controller('GridController', ['$scope', 'dataService', 'uiGrid
} }
}; };
function filterTasks() { function filterTasks() {
var taskDict = $scope.dataService.taskDict; var taskDict = $scope.dataService.taskDict;
var filteredTasks = []; var filteredTasks = [];
......
...@@ -3,8 +3,13 @@ ...@@ -3,8 +3,13 @@
.grid { .grid {
min-height: 400px; min-height: 400px;
min-width: 500px; min-width: 500px;
height: auto; height: 100%;
width: auto; width: 100%;
}
.stretch {
overflow: initial;
} }
.gantt { .gantt {
...@@ -24,13 +29,13 @@ ...@@ -24,13 +29,13 @@
} }
.ui-layout-row > .ui-splitbar { .ui-layout-row > .ui-splitbar {
height: 8px; height: 6px;
background-color: #888888; background-color: #CCCCCC;
} }
.ui-layout-column > .ui-splitbar { .ui-layout-column > .ui-splitbar {
width: 8px; width: 6px;
background-color: #888888; background-color: #CCCCCC;
} }
ul.uib-datepicker-popup.dropdown-menu button.btn.btn-sm.btn-danger.uib-clear { ul.uib-datepicker-popup.dropdown-menu button.btn.btn-sm.btn-danger.uib-clear {
...@@ -52,7 +57,7 @@ table.uib-timepicker td.uib-time { ...@@ -52,7 +57,7 @@ table.uib-timepicker td.uib-time {
} }
.top-stretch { .top-stretch {
top: 60px; top: 65px;
} }
.gantt-task-content { .gantt-task-content {
......
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<script src="/static/app/controllers/ganttprojectcontroller.js"></script> <script src="/static/app/controllers/ganttprojectcontroller.js"></script>
<script src="/static/app/controllers/chartresourceusagecontroller.js"></script> <script src="/static/app/controllers/chartresourceusagecontroller.js"></script>
</head> </head>
<body> <body style="overflow:hidden;">
{% raw %} {% raw %}
<div ng-controller="DataController as dataCtrl" class="container-fluid"> <div ng-controller="DataController as dataCtrl" class="container-fluid">
<div class="row"> <div class="row">
...@@ -87,26 +87,17 @@ ...@@ -87,26 +87,17 @@
</p> </p>
</div> </div>
</div> </div>
<div ui-layout class="top-stretch" ui-layout="{flow: 'column'}">
<header>
<uib-tabset margin-top='10px'> <div class="top-stretch" ui-layout options="{flow: 'column'}">
<uib-tab heading="Tasks" index='0' active='true'> <div ng-controller="GridController as gridCtrl" style="margin-right: 4px;" >
<div ng-controller="GridController as gridCtrl"> <div id="grid"
<div id="grid" ui-grid="gridOptions" ui-grid-edit ui-grid-selection ui-grid-cellnav ui-grid-resize-columns class="grid"> ui-grid="gridOptions"
ui-grid-edit ui-grid-selection ui-grid-cellNav ui-grid-resize-columns ui-grid-auto-resize
class="grid"></div>
</div> </div>
</div> <div ui-layout options="{flow: 'row'}">
</uib-tab> <div ng-controller="GanttProjectController as ganttProjectCtrl" style="overflow:auto; margin-left:12px; margin-bottom:4px; ">
<uib-tab heading="Usages" index='1' active='false'>
<div class="tab-pane active" ng-controller="ChartResourceUsageController as chartResourceUsageCtrl">
<highchart id="chart_resource_usage" config="chartConfig" style="width: 95%; height: 40%; margin: 10px;" ></highchart>
</div>
</uib-tab>
</uib-tabset>
</header>
<header>
<uib-tabset margin-top='10px'>
<uib-tab heading="Projects" index='0' active='true'>
<div class="tab-pane active" ng-controller="GanttProjectController as ganttProjectCtrl">
<div gantt data=ganttData <div gantt data=ganttData
api=options.api api=options.api
show-side='true' show-side='true'
...@@ -126,9 +117,12 @@ ...@@ -126,9 +117,12 @@
<gantt-dependencies enabled="true"></gantt-dependencies> <gantt-dependencies enabled="true"></gantt-dependencies>
</div> </div>
</div> </div>
</uib-tab>
<uib-tab heading="Resources" index='1' active='false'> <div ng-controller="ChartResourceUsageController as chartResourceUsageCtrl">
<div class="tab-pane active" ng-controller="GanttResourceController as ganttResourceCtrl"> <highchart id="chart_resource_usage" config="chartConfig" style="width: 96%; height: 100%; margin: 12px;" ></highchart>
</div>
<div ng-controller="GanttResourceController as ganttResourceCtrl" style="overflow:auto; margin-left:12px; margin-top:12px">
<div gantt data=ganttData <div gantt data=ganttData
api=options.api api=options.api
show-side='true' show-side='true'
...@@ -146,9 +140,8 @@ ...@@ -146,9 +140,8 @@
<gantt-tooltips enabled="true" date-format="'YYYY-MM-DD HH:mm'"></gantt-tooltips> <gantt-tooltips enabled="true" date-format="'YYYY-MM-DD HH:mm'"></gantt-tooltips>
</div> </div>
</div> </div>
</uib-tab>
<uib-tabset> </div>
<header>
</div> </div>
</div> </div>
{% endraw %} {% endraw %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment