Skip to content

Commit c28fcec

Browse files
author
iyel
committed
feat(ngTable): add position for sorting indicator via attribute
sort-inicator="'span'" to position sorting inicator near table header
1 parent bf71614 commit c28fcec

13 files changed

+63
-47
lines changed

bower.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-table",
3-
"version": "0.5.1",
3+
"version": "0.5.3",
44
"main": [
55
"./dist/ng-table.min.js",
66
"./dist/ng-table.min.css"
@@ -15,4 +15,4 @@
1515
"devDependencies": {
1616
"angular-mocks": "~1"
1717
}
18-
}
18+
}

dist/ng-table.css

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,32 +10,32 @@
1010
.ng-table th.sortable {
1111
cursor: pointer;
1212
}
13-
.ng-table th.sortable div {
13+
.ng-table th.sortable .sort-indicator {
1414
padding-right: 18px;
1515
position: relative;
1616
}
17-
.ng-table th.sortable div:after,
18-
.ng-table th.sortable div:before {
17+
.ng-table th.sortable .sort-indicator:after,
18+
.ng-table th.sortable .sort-indicator:before {
1919
content: "";
2020
border-width: 0 4px 4px;
2121
border-style: solid;
2222
border-color: #000 transparent;
2323
visibility: visible;
24-
right: 8px;
24+
right: 5px;
2525
top: 50%;
2626
position: absolute;
2727
opacity: .3;
2828
margin-top: -4px;
2929
}
30-
.ng-table th.sortable div:before {
30+
.ng-table th.sortable .sort-indicator:before {
3131
margin-top: 2px;
3232
border-bottom: none;
3333
border-left: 4px solid transparent;
3434
border-right: 4px solid transparent;
3535
border-top: 4px solid #000;
3636
}
37-
.ng-table th.sortable div:hover:after,
38-
.ng-table th.sortable div:hover:before {
37+
.ng-table th.sortable .sort-indicator:hover:after,
38+
.ng-table th.sortable .sort-indicator:hover:before {
3939
opacity: 1;
4040
visibility: visible;
4141
}
@@ -44,23 +44,23 @@
4444
background-color: rgba(141, 192, 219, 0.25);
4545
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
4646
}
47-
.ng-table th.sortable.sort-desc div:after,
48-
.ng-table th.sortable.sort-asc div:after {
47+
.ng-table th.sortable.sort-desc .sort-indicator:after,
48+
.ng-table th.sortable.sort-asc .sort-indicator:after {
4949
margin-top: -2px;
5050
}
51-
.ng-table th.sortable.sort-desc div:before,
52-
.ng-table th.sortable.sort-asc div:before {
51+
.ng-table th.sortable.sort-desc .sort-indicator:before,
52+
.ng-table th.sortable.sort-asc .sort-indicator:before {
5353
visibility: hidden;
5454
}
55-
.ng-table th.sortable.sort-asc div:after,
56-
.ng-table th.sortable.sort-asc div:hover:after {
55+
.ng-table th.sortable.sort-asc .sort-indicator:after,
56+
.ng-table th.sortable.sort-asc .sort-indicator:hover:after {
5757
visibility: visible;
5858
filter: alpha(opacity=60);
5959
-khtml-opacity: 0.6;
6060
-moz-opacity: 0.6;
6161
opacity: 0.6;
6262
}
63-
.ng-table th.sortable.sort-desc div:after {
63+
.ng-table th.sortable.sort-desc .sort-indicator:after {
6464
border-bottom: none;
6565
border-left: 4px solid transparent;
6666
border-right: 4px solid transparent;

dist/ng-table.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -692,10 +692,11 @@ app.factory('ngTableColumn', [function () {
692692
filter: function(){ return false; },
693693
filterData: angular.noop,
694694
headerTemplateURL: function(){ return false; },
695-
headerTitle: function(){ return ' '; },
695+
headerTitle: function(){ return ''; },
696+
sortIndicator: function(){ return 'div'; },
696697
sortable: function(){ return false; },
697698
show: function(){ return true; },
698-
title: function(){ return ' '; },
699+
title: function(){ return ''; },
699700
titleAlt: function(){ return ''; }
700701
};
701702

@@ -746,6 +747,7 @@ app.factory('ngTableColumn', [function () {
746747
buildColumn: buildColumn
747748
};
748749
}]);
750+
749751
/**
750752
* ngTable: Table + Angular JS
751753
*
@@ -798,6 +800,7 @@ app.directive('ngTable', ['$q', '$parse',
798800

799801
var parsedAttribute = function(attr) {
800802
var expr = getAttrValue(attr);
803+
console.log(expr);
801804
if (!expr){
802805
return undefined;
803806
}
@@ -814,11 +817,14 @@ app.directive('ngTable', ['$q', '$parse',
814817
}
815818
// NOTE TO MAINTAINERS: if you add extra fields to a $column be sure to extend ngTableColumn with
816819
// a corresponding "safe" default
820+
821+
817822
columns.push({
818823
id: i++,
819824
title: parsedAttribute('title'),
820825
titleAlt: parsedAttribute('title-alt'),
821826
headerTitle: parsedAttribute('header-title'),
827+
sortIndicator: parsedAttribute('sort-indicator'),
822828
sortable: parsedAttribute('sortable'),
823829
'class': parsedAttribute('header-class'),
824830
filter: parsedAttribute('filter'),
@@ -828,6 +834,7 @@ app.directive('ngTable', ['$q', '$parse',
828834
return $parse(el.attr("ng-show"))(scope);
829835
} : undefined)
830836
});
837+
831838
});
832839
return function(scope, element, attrs, controller) {
833840
scope.$columns = columns = controller.buildColumns(columns);
@@ -912,6 +919,7 @@ app.directive('ngTableDynamic', ['$parse', function ($parse){
912919
}
913920
};
914921
}]);
922+
915923
/**
916924
* ngTable: Table + Angular JS
917925
*
@@ -961,7 +969,7 @@ angular.module('ngTable').run(['$templateCache', function ($templateCache) {
961969
$templateCache.put('ng-table/filters/select-multiple.html', '<select ng-options="data.id as data.title for data in $column.data" ng-disabled="$filterRow.disabled" multiple ng-multiple="true" ng-model="params.filter()[name]" ng-show="filter==\'select-multiple\'" class="filter filter-select-multiple form-control" name="{{name}}"> </select>');
962970
$templateCache.put('ng-table/filters/select.html', '<select ng-options="data.id as data.title for data in $column.data" ng-disabled="$filterRow.disabled" ng-model="params.filter()[name]" ng-show="filter==\'select\'" class="filter filter-select form-control" name="{{name}}"> </select>');
963971
$templateCache.put('ng-table/filters/text.html', '<input type="text" name="{{name}}" ng-disabled="$filterRow.disabled" ng-model="params.filter()[name]" ng-if="filter==\'text\'" class="input-filter form-control"/>');
964-
$templateCache.put('ng-table/header.html', '<tr> <th title="{{$column.headerTitle(this)}}" ng-repeat="$column in $columns" ng-class="{ \'sortable\': $column.sortable(this), \'sort-asc\': params.sorting()[$column.sortable(this)]==\'asc\', \'sort-desc\': params.sorting()[$column.sortable(this)]==\'desc\' }" ng-click="sortBy($column, $event)" ng-show="$column.show(this)" ng-init="template=$column.headerTemplateURL(this)" class="header {{$column.class(this)}}"> <div ng-if="!template" ng-show="!template" ng-bind="$column.title(this)"></div> <div ng-if="template" ng-show="template" ng-include="template"></div> </th> </tr> <tr ng-show="show_filter" class="ng-table-filters"> <th data-title-text="{{$column.titleAlt(this) || $column.title(this)}}" ng-repeat="$column in $columns" ng-show="$column.show(this)" class="filter"> <div ng-repeat="(name, filter) in $column.filter(this)"> <div ng-if="filter.indexOf(\'/\') !==-1" ng-include="filter"></div> <div ng-if="filter.indexOf(\'/\')===-1" ng-include="\'ng-table/filters/\' + filter + \'.html\'"></div> </div> </th> </tr> ');
972+
$templateCache.put('ng-table/header.html', '<tr> <th title="{{$column.headerTitle(this)}}" ng-repeat="$column in $columns" ng-class="{ \'sortable\': $column.sortable(this), \'sort-asc\': params.sorting()[$column.sortable(this)]==\'asc\', \'sort-desc\': params.sorting()[$column.sortable(this)]==\'desc\' }" ng-click="sortBy($column, $event)" ng-show="$column.show(this)" ng-init="template=$column.headerTemplateURL(this)" class="header {{$column.class(this)}}"> <div ng-if="!template" ng-show="!template" class="ng-table-header" ng-class="{\'sort-indicator\': $column.sortIndicator(this)==\'div\'}"> <span ng-bind="$column.title(this)" ng-class="{\'sort-indicator\': $column.sortIndicator(this)==\'span\'}"></span> </div> <div ng-if="template" ng-show="template" ng-include="template"></div> </th> </tr> <tr ng-show="show_filter" class="ng-table-filters"> <th data-title-text="{{$column.titleAlt(this) || $column.title(this)}}" ng-repeat="$column in $columns" ng-show="$column.show(this)" class="filter"> <div ng-repeat="(name, filter) in $column.filter(this)"> <div ng-if="filter.indexOf(\'/\') !==-1" ng-include="filter"></div> <div ng-if="filter.indexOf(\'/\')===-1" ng-include="\'ng-table/filters/\' + filter + \'.html\'"></div> </div> </th> </tr> ');
965973
$templateCache.put('ng-table/pager.html', '<div class="ng-cloak ng-table-pager" ng-if="params.data.length"> <div ng-if="params.settings().counts.length" class="ng-table-counts btn-group pull-right"> <button ng-repeat="count in params.settings().counts" type="button" ng-class="{\'active\':params.count()==count}" ng-click="params.count(count)" class="btn btn-default"> <span ng-bind="count"></span> </button> </div> <ul class="pagination ng-table-pagination"> <li ng-class="{\'disabled\': !page.active && !page.current, \'active\': page.current}" ng-repeat="page in pages" ng-switch="page.type"> <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo;</a> <a ng-switch-when="first" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a ng-switch-when="page" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a> <a ng-switch-when="last" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a ng-switch-when="next" ng-click="params.page(page.number)" href="">&raquo;</a> </li> </ul> </div> ');
966974
}]);
967975
return app;

dist/ng-table.less

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
&.sortable {
1515
cursor: pointer;
1616

17-
div {
17+
.sort-indicator {
1818
padding-right: 18px;
1919
position: relative;
2020

@@ -24,7 +24,7 @@
2424
border-style: solid;
2525
border-color: #000 transparent;
2626
visibility: visible;
27-
right: 8px;
27+
right: 5px;
2828
top: 50%;
2929
position: absolute;
3030
opacity: .3;
@@ -39,29 +39,29 @@
3939
}
4040
}
4141

42-
div:hover:after, div:hover:before {
42+
.sort-indicator:hover:after, .sort-indicator:hover:before {
4343
opacity: 1;
4444
visibility: visible;
4545
}
4646
&.sort-desc, &.sort-asc {
4747
background-color: rgba(141, 192, 219, 0.25);
4848
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
4949

50-
div:after {
50+
.sort-indicator:after {
5151
margin-top: -2px;
5252
}
53-
div:before {
53+
.sort-indicator:before {
5454
visibility: hidden;
5555
}
5656
}
57-
&.sort-asc div:after, &.sort-asc div:hover:after {
57+
&.sort-asc .sort-indicator:after, &.sort-asc .sort-indicator:hover:after {
5858
visibility: visible;
5959
filter: alpha(opacity=60);
6060
-khtml-opacity: 0.6;
6161
-moz-opacity: 0.6;
6262
opacity: 0.6;
6363
}
64-
&.sort-desc div:after {
64+
&.sort-desc .sort-indicator:after {
6565
border-bottom: none;
6666
border-left: 4px solid transparent;
6767
border-right: 4px solid transparent;
@@ -148,4 +148,4 @@
148148
.ng-table-pager {}
149149
.ng-table-pagination {}
150150
.ng-table-counts {}
151-
}
151+
}

dist/ng-table.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)