Skip to content

Commit 204bd03

Browse files
driver-deploy-2driver-deploy-2
committed
Some improvements to datatable: align headers right when property is of type 'number' and alignment fixes.
1 parent 5016d10 commit 204bd03

File tree

5 files changed

+58
-26
lines changed

5 files changed

+58
-26
lines changed

‎csComp/directives/DashboardDirectives/Dashboard/Dashboard.tpl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<li ng-repeat="widget in dashboard.widgets | filter:{position:'dashboard'}" id="{{widget.elementId}}-container" when-ready="vm.isReady(widget)" class="widget-parent"
2727
ng-class="{widgethover : widget.hover}" ng-show="!(!vm.$mapService.isAdminExpert && widget.hideIfLeftPanel && vm.$layerService.visual.leftPanelVisible)">
2828
<div class="widget-container widget-entrance" id="{{widget.elementId}}-parent" ng-class="{widgetShadow : widget.effectiveStyle.shadow === true}"
29-
ng-hide="widget.collapse" style="position:absolute" " ng-style="{ 'background' : widget.effectiveStyle.background,
29+
ng-hide="widget.collapse" style="position:absolute" ng-style="{ 'background' : widget.effectiveStyle.background,
3030
'border-color':widget.effectiveStyle.borderColor, 'top':widget._top, 'bottom':widget._bottom, 'left':widget._left, 'z-index' : widget._zindex,
3131
'right':widget._right, 'border-width':widget.effectiveStyle.borderWidth, 'border-radius':widget.effectiveStyle.borderRadius,
3232
'width':widget._width, 'height':widget._height, 'opacity' : widget.effectiveStyle.opacity, 'padding':widget.padding} ">

‎csComp/directives/DataTable/DataTable.tpl.html

+9-12
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="data-table">
2-
<div class="table-return" ng-click="vm.returnToMap()">
3-
<div style="float:right" ng-click="vm.returnToMap()">
2+
<div class="table-return">
3+
<div class="pointer" style="float:right" ng-click="vm.returnToMap()">
44
<!--<i class="fa fa-times pointer-cursor"></i>-->
55
<i class="wodk-ico-kruis"></i>
66
</div>
@@ -27,7 +27,7 @@ <h2 style="margin: 0px 16px 16px">
2727
</span>
2828
</div>
2929
</div>
30-
<div class="col-xs-7 col-sm-8 col-md-9">
30+
<div class="col-xs-7 col-sm-8 col-md-9" style="padding-right: 0px;">
3131
<!--Download to CSV option-->
3232
<div class="datatable-top-row-height datatable-download datatable-download-large">
3333
<div class="datatable-download-text">
@@ -58,14 +58,11 @@ <h2 style="margin: 0px 16px 16px">
5858
</li>
5959
</ul>
6060
<!-- List of headers -->
61-
<ul class="form-group datatable-grey datatable-padding-left" style="overflow-y: auto; overflow-x: hidden;" resize resize-y="220" ng-show="vm.selectedLayerId != vm.mapLabel">
61+
<ul class="form-group datatable-grey datatable-padding-left" style="overflow-y: auto; overflow-x: hidden;" resize resize-y="236" ng-show="vm.selectedLayerId != vm.mapLabel">
6262
<!-- PropertyTypes -->
6363
<li ng-repeat="mi in vm.propertyTypes" class="list-unstyled wodk-checkbox" style="white-space: nowrap; text-overflow: ellipsis">
64-
<!--<label ng-class="{'datatable-propertytype-admin': !mi.visibleInCallOut}">
65-
<input type="checkbox" name="vm.selectedTitles[]" value="{{mi.title}}" data-ng-checked="vm.headers.indexOf(mi.title) > -1" data-ng-click="vm.toggleSelection(mi.title)">&nbsp;&nbsp;{{mi.title}}
66-
</label>-->
67-
<input type="checkbox" id="checkbox-{{$index}}" name="vm.selectedTitles[]" value="{{mi.title}}" data-ng-checked="vm.headers.indexOf(mi.title) > -1"
68-
data-ng-click="vm.toggleSelection(mi.title)" />
64+
<input type="checkbox" id="checkbox-{{$index}}" name="vm.selectedTitles[]" value="{{mi.title}}" data-ng-checked="vm.isHeaderSelected(mi.title)"
65+
data-ng-click="vm.toggleSelection(mi.title, mi.type)" />
6966
<label for="checkbox-{{$index}}" ng-class="{'datatable-propertytype-admin': !mi.visibleInCallOut}"></label>
7067
<div style="display: inline;padding: 0px 10px;">{{mi.title}}</div>
7168
</li>
@@ -77,10 +74,10 @@ <h2 style="margin: 0px 16px 16px">
7774
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10">
7875

7976
<!-- Data table -->
80-
<table class="table table-striped table-condensed">
77+
<table class="table table-condensed table-horiz-scroll">
8178
<tr>
82-
<th data-ng-repeat="header in vm.headers track by $index">
83-
{{header}}&nbsp;
79+
<th class="no-border" data-ng-repeat="header in vm.headers track by $index" data-ng-class="{'text-right': header.type == 'number'}">
80+
{{header.value}}&nbsp;
8481
<a class="black" data-ng-click="reverseSort = !reverseSort; vm.orderBy($index, reverseSort);"><i data-ng-class="vm.sortOrderClass($index, reverseSort)">&nbsp;&nbsp;</i></a>
8582
</th>
8683
</tr>

‎csComp/directives/DataTable/DataTableCtrl.ts

+17-10
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ module DataTable {
2929
public selectedLayerId: string;
3030
public layerOptions: Array<any> = [];
3131
public propertyTypes: Array<IPropertyType> = [];
32-
public headers: Array<string> = [];
32+
public headers: {value: string, type: 'number'|'other'}[];
3333
public sortingColumn: number;
3434
public rows: Array<Array<TableField>> = [];
3535
private mapFeatureTitle: string;
@@ -287,19 +287,22 @@ module DataTable {
287287
this.propertyTypes.push(csComp.Helpers.GeoExtensions.createPropertyType('Lon'));
288288

289289
// Select the first couple of headers
290-
const nmbrOfDefaultSelectedHeaders = 3;
290+
const nmbrOfDefaultSelectedHeaders = 4;
291291
for (var i = 0; i < nmbrOfDefaultSelectedHeaders; i++) {
292-
this.headers.push(titles[i]);
292+
if (titles.length > i) {
293+
let pt = _.findWhere(this.propertyTypes, {'title': titles[i]});
294+
this.headers.push({value: titles[i], type: (pt.type === 'number' ? 'number' : 'other')});
295+
}
293296
}
294297
this.rows = this.getRows();
295298
}
296299

297-
public toggleSelection(propertyTypeTitle: string) {
298-
var idx = this.headers.indexOf(propertyTypeTitle);
300+
public toggleSelection(propertyTypeTitle: string, propertyTypeType: string) {
301+
var idx = _.pluck(this.headers, 'value').indexOf(propertyTypeTitle);
299302
if (idx > -1) { // is currently selected
300303
this.headers.splice(idx, 1);
301304
} else { // is newly selected
302-
this.headers.push(propertyTypeTitle);
305+
this.headers.push({value: propertyTypeTitle, type: (propertyTypeType === 'number' ? 'number' : 'other')});
303306
}
304307
this.rows = this.getRows();
305308
}
@@ -323,7 +326,7 @@ module DataTable {
323326
var meta: Array<IPropertyType> = [this.headers.length];
324327
this.propertyTypes.forEach((mi: IPropertyType) => {
325328
// Keep headers and mi in the right order
326-
var index = this.headers.indexOf(mi.title);
329+
var index = _.pluck(this.headers, 'value').indexOf(mi.title);
327330
if (index >= 0) meta[index] = mi;
328331
});
329332
var props: Array<Array<TableField>> = [];
@@ -491,7 +494,7 @@ module DataTable {
491494
this.selectAllText = translation;
492495
});
493496
this.propertyTypes.forEach((mi) => {
494-
var idx = this.headers.indexOf(mi.title);
497+
var idx = _.pluck(this.headers, 'value').indexOf(mi.title);
495498
if (idx > -1) {
496499
this.headers.splice(idx, 1);
497500
}
@@ -502,15 +505,19 @@ module DataTable {
502505
this.selectAllText = translation;
503506
});
504507
this.propertyTypes.forEach((mi) => {
505-
if (this.headers.indexOf(mi.title) <= -1) {
506-
this.headers.push(mi.title);
508+
if (_.pluck(this.headers, 'value').indexOf(mi.title) <= -1) {
509+
this.headers.push({value: mi.title, type: (mi.type === 'number' ? 'number' : 'other')});
507510
}
508511
});
509512
this.rows = this.getRows();
510513
}
511514
this.selectAllBool = !this.selectAllBool;
512515
}
513516

517+
private isHeaderSelected(title: string) {
518+
return _.pluck(this.headers, 'value').indexOf(title) > -1;
519+
}
520+
514521
private returnToMap() {
515522
let dashboard = this.$layerService.project.dashboards[0];
516523
this.$messageBusService.publish('dashboard-main', 'activated', dashboard);

‎csComp/includes/css/csStyles.scss

+27-3
Original file line numberDiff line numberDiff line change
@@ -902,7 +902,7 @@ body,
902902
padding-left: 15px;
903903
}
904904

905-
@media (min-width: 992px ) {
905+
@media (min-width: 768px ) {
906906
.datatable-download-large {
907907
display: inline-block!important;
908908
}
@@ -911,7 +911,7 @@ body,
911911
}
912912
}
913913

914-
@media (max-width: 992px ) {
914+
@media (max-width: 768px ) {
915915
.datatable-download-large {
916916
display: none!important;
917917
}
@@ -954,7 +954,7 @@ body,
954954
}
955955
.table-return {
956956
width: 100%;
957-
height: 50px;
957+
height: 30px;
958958
padding: 0px 20px;
959959
}
960960
.legendTable {
@@ -3117,8 +3117,32 @@ input[type="checkbox"] {
31173117
.csweb-tooltip-padding {
31183118
padding: 8px;
31193119
background: white;
3120+
box-shadow: 0px 0px 8px 0px rgba(16, 16, 16, 0.5);
3121+
}
3122+
3123+
.no-padding {
3124+
padding: 0;
31203125
}
31213126

3127+
.no-border {
3128+
border: none;
3129+
}
3130+
3131+
.table-condensed > tbody > tr > th {
3132+
padding: 8px 5px 16px;
3133+
border: none;
3134+
white-space: nowrap;
3135+
}
3136+
3137+
.table-condensed > tbody > tr > td {
3138+
border-bottom: 1px solid #ccc;
3139+
}
3140+
3141+
.table-horiz-scroll {
3142+
overflow-x: auto;
3143+
display: block;
3144+
width: 100%;
3145+
}
31223146

31233147
/* Overrule icons in menu */
31243148
.mapIcon {

‎csComp/services/layer/LayerService.ts

+4
Original file line numberDiff line numberDiff line change
@@ -2027,6 +2027,10 @@ module csComp.Services {
20272027
gs.colorScales[ptd.title] = ['purple', 'purple'];
20282028
}
20292029

2030+
if (ptd && ptd.title) {
2031+
gs.title = ptd.title;
2032+
}
2033+
20302034
if (ft.style && ft.style.fillColor) {
20312035
gs.colors = ['white', '#FF5500'];
20322036
} else {

0 commit comments

Comments
 (0)