Skip to content

Commit

Permalink
feat(ngTable): added setting sortingIndicator to show sorting indicat…
Browse files Browse the repository at this point in the history 
…or whether near header title or to the very right
  • Loading branch information
iyel committed Feb 26, 2015
1 parent bf71614 commit 10cdf35
Show file tree
Hide file tree
Showing 14 changed files with 53 additions and 46 deletions.
4 changes: 2 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ng-table",
"version": "0.5.1",
"version": "0.5.3",
"main": [
"./dist/ng-table.min.js",
"./dist/ng-table.min.css"
Expand All @@ -15,4 +15,4 @@
"devDependencies": {
"angular-mocks": "~1"
}
}
}
28 changes: 14 additions & 14 deletions dist/ng-table.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,32 @@
.ng-table th.sortable {
cursor: pointer;
}
.ng-table th.sortable div {
.ng-table th.sortable .sort-indicator {
padding-right: 18px;
position: relative;
}
.ng-table th.sortable div:after,
.ng-table th.sortable div:before {
.ng-table th.sortable .sort-indicator:after,
.ng-table th.sortable .sort-indicator:before {
content: "";
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: visible;
right: 8px;
right: 5px;
top: 50%;
position: absolute;
opacity: .3;
margin-top: -4px;
}
.ng-table th.sortable div:before {
.ng-table th.sortable .sort-indicator:before {
margin-top: 2px;
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
}
.ng-table th.sortable div:hover:after,
.ng-table th.sortable div:hover:before {
.ng-table th.sortable .sort-indicator:hover:after,
.ng-table th.sortable .sort-indicator:hover:before {
opacity: 1;
visibility: visible;
}
Expand All @@ -44,23 +44,23 @@
background-color: rgba(141, 192, 219, 0.25);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
.ng-table th.sortable.sort-desc div:after,
.ng-table th.sortable.sort-asc div:after {
.ng-table th.sortable.sort-desc .sort-indicator:after,
.ng-table th.sortable.sort-asc .sort-indicator:after {
margin-top: -2px;
}
.ng-table th.sortable.sort-desc div:before,
.ng-table th.sortable.sort-asc div:before {
.ng-table th.sortable.sort-desc .sort-indicator:before,
.ng-table th.sortable.sort-asc .sort-indicator:before {
visibility: hidden;
}
.ng-table th.sortable.sort-asc div:after,
.ng-table th.sortable.sort-asc div:hover:after {
.ng-table th.sortable.sort-asc .sort-indicator:after,
.ng-table th.sortable.sort-asc .sort-indicator:hover:after {
visibility: visible;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.ng-table th.sortable.sort-desc div:after {
.ng-table th.sortable.sort-desc .sort-indicator:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
Expand Down
6 changes: 5 additions & 1 deletion dist/ng-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -481,6 +481,7 @@ app.factory('NgTableParams', ['$q', '$log', 'ngTableDefaults', function($q, $log
defaultSort: 'desc',
filterDelay: 750,
counts: [10, 25, 50, 100],
sortingIndicator: 'span',
getGroups: this.getGroups,
getData: this.getData
};
Expand All @@ -501,6 +502,7 @@ app.factory('NgTableParams', ['$q', '$log', 'ngTableDefaults', function($q, $log
app.factory('ngTableParams', ['NgTableParams', function(NgTableParams) {
return NgTableParams;
}]);

/**
* ngTable: Table + Angular JS
*
Expand Down Expand Up @@ -746,6 +748,7 @@ app.factory('ngTableColumn', [function () {
buildColumn: buildColumn
};
}]);

/**
* ngTable: Table + Angular JS
*
Expand Down Expand Up @@ -912,6 +915,7 @@ app.directive('ngTableDynamic', ['$parse', function ($parse){
}
};
}]);

/**
* ngTable: Table + Angular JS
*
Expand Down Expand Up @@ -961,7 +965,7 @@ angular.module('ngTable').run(['$templateCache', function ($templateCache) {
$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>');
$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>');
$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"/>');
$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> ');
$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\': params.settings().sortingIndicator==\'div\'}"> <span ng-bind="$column.title(this)" ng-class="{\'sort-indicator\': params.settings().sortingIndicator==\'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> ');
$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> ');
}]);
return app;
Expand Down
16 changes: 8 additions & 8 deletions dist/ng-table.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
&.sortable {
cursor: pointer;

div {
.sort-indicator {
padding-right: 18px;
position: relative;

Expand All @@ -24,7 +24,7 @@
border-style: solid;
border-color: #000 transparent;
visibility: visible;
right: 8px;
right: 5px;
top: 50%;
position: absolute;
opacity: .3;
Expand All @@ -39,29 +39,29 @@
}
}

div:hover:after, div:hover:before {
.sort-indicator:hover:after, .sort-indicator:hover:before {
opacity: 1;
visibility: visible;
}
&.sort-desc, &.sort-asc {
background-color: rgba(141, 192, 219, 0.25);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

div:after {
.sort-indicator:after {
margin-top: -2px;
}
div:before {
.sort-indicator:before {
visibility: hidden;
}
}
&.sort-asc div:after, &.sort-asc div:hover:after {
&.sort-asc .sort-indicator:after, &.sort-asc .sort-indicator:hover:after {
visibility: visible;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
&.sort-desc div:after {
&.sort-desc .sort-indicator:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
Expand Down Expand Up @@ -148,4 +148,4 @@
.ng-table-pager {}
.ng-table-pagination {}
.ng-table-counts {}
}
}
4 changes: 2 additions & 2 deletions dist/ng-table.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 10cdf35

Please sign in to comment.