diff --git a/app/modules/main/directives/header/mdtColumnDirective.js b/app/modules/main/directives/header/mdtColumnDirective.js index 413ca08..91d21aa 100644 --- a/app/modules/main/directives/header/mdtColumnDirective.js +++ b/app/modules/main/directives/header/mdtColumnDirective.js @@ -16,6 +16,7 @@ * Assignable values: * - 'left' * - 'right' + * - 'center' * * @param {boolean=|object=} columnSort sort data and display a sorted state in the header. Clicking on a column * which is already sorted will reverse the sort order and rotate the sort icon. diff --git a/app/modules/main/helpers/ColumnAlignmentHelper.js b/app/modules/main/helpers/ColumnAlignmentHelper.js index aea1245..8e07128 100644 --- a/app/modules/main/helpers/ColumnAlignmentHelper.js +++ b/app/modules/main/helpers/ColumnAlignmentHelper.js @@ -6,10 +6,14 @@ service.getColumnAlignClass = getColumnAlignClass; function getColumnAlignClass(alignRule) { - if (alignRule === ColumnOptionProvider.ALIGN_RULE.ALIGN_RIGHT) { - return 'rightAlignedColumn'; - } else { - return 'leftAlignedColumn'; + switch (alignRule) { + case ColumnOptionProvider.ALIGN_RULE.ALIGN_RIGHT: + return 'rightAlignedColumn'; + case ColumnOptionProvider.ALIGN_RULE.ALIGN_CENTER: + return 'centerAlignedColumn'; + case ColumnOptionProvider.ALIGN_RULE.ALIGN_LEFT: + default: + return 'leftAlignedColumn'; } } } diff --git a/app/modules/main/providers/ColumnOptionsProvider.js b/app/modules/main/providers/ColumnOptionsProvider.js index e7efe31..ccb0b7d 100644 --- a/app/modules/main/providers/ColumnOptionsProvider.js +++ b/app/modules/main/providers/ColumnOptionsProvider.js @@ -10,7 +10,8 @@ var ColumnOptionProvider = { ALIGN_RULE : { ALIGN_LEFT: 'left', - ALIGN_RIGHT: 'right' + ALIGN_RIGHT: 'right', + ALIGN_CENTER: 'center' } }; diff --git a/app/scss/main.scss b/app/scss/main.scss index e0c2885..b6a8908 100644 --- a/app/scss/main.scss +++ b/app/scss/main.scss @@ -221,6 +221,10 @@ $grey: #757575; text-align: right; } + .centerAlignedColumn{ + text-align: center; + } + /* border separation color */ tr th{ border-bottom: solid 1px #DDDDDD; diff --git a/demo/developmentArea.html b/demo/developmentArea.html index 8a95f9c..ef156e3 100644 --- a/demo/developmentArea.html +++ b/demo/developmentArea.html @@ -55,7 +55,7 @@ >Carbs (g) Protein (g) Sodium (mg) - Calcium (%) + Calcium (%) Iron (%) diff --git a/docs/js/docs-setup.js b/docs/js/docs-setup.js index ff2308b..df2f895 100644 --- a/docs/js/docs-setup.js +++ b/docs/js/docs-setup.js @@ -19,7 +19,7 @@ NG_DOCS={ "type": "directive", "moduleName": "mdtColumn", "shortDescription": "Representing a header column cell which should be placed inside mdt-header-row element directive.", - "keywords": "activate affect align align-rule alignrule api applied array assignable cell cells checkbox chips clicking column column-definition columndefinition columnfilter columnsort comparator compare compared content ctrl data default defines directive disables display displays don dropdown element excludefromcolumnselector false feature filter filtertype function gross header hover icon inside left mdt-header-row mdtcolumn mdttable ng-repeat object objects optional options order parameters passed placeholder placeholdertext price product products promise properties provided representing required resolves result return reverse rotate row select selected selection settings sort sorted sorting strings text tooltip transforms true type types user values valuesprovidercallback valuestransformercallback visually" + "keywords": "activate affect align align-rule alignrule api applied array assignable cell cells center checkbox chips clicking column column-definition columndefinition columnfilter columnsort comparator compare compared content ctrl data default defines directive disables display displays don dropdown element excludefromcolumnselector false feature filter filtertype function gross header hover icon inside left mdt-header-row mdtcolumn mdttable ng-repeat object objects optional options order parameters passed placeholder placeholdertext price product products promise properties provided representing required resolves result return reverse rotate row select selected selection settings sort sorted sorting strings text tooltip transforms true type types user values valuesprovidercallback valuestransformercallback visually" }, { "section": "api", diff --git a/docs/partials/api/mdtColumn.html b/docs/partials/api/mdtColumn.html index b3bb61b..452cf40 100644 --- a/docs/partials/api/mdtColumn.html +++ b/docs/partials/api/mdtColumn.html @@ -23,6 +23,7 @@

Parameters

boolean=object

sort data and display a sorted state in the header. Clicking on a column which is already sorted will reverse the sort order and rotate the sort icon.

diff --git a/test/unit/modules/directives/header/mdDataTableColumnDirectiveTest.js b/test/unit/modules/directives/header/mdDataTableColumnDirectiveTest.js index 9747e74..5e95f65 100644 --- a/test/unit/modules/directives/header/mdDataTableColumnDirectiveTest.js +++ b/test/unit/modules/directives/header/mdDataTableColumnDirectiveTest.js @@ -8,6 +8,7 @@ xdescribe('mdtColumnDirective', function(){ var DIRECTIVE_DEFAULT_CASE = 'DIRECTIVE_DEFAULT_CASE'; var DIRECTIVE_LEFT_ALIGNED = 'DIRECTIVE_LEFT_ALIGNED'; var DIRECTIVE_RIGHT_ALIGNED = 'DIRECTIVE_RIGHT_ALIGNED'; + var DIRECTIVE_CENTER_ALIGNED = 'DIRECTIVE_CENTER_ALIGNED'; var DIRECTIVE_MULTI_COLUMN = 'DIRECTIVE_MULTI_COLUMN'; beforeEach(module('mdtTemplates')); @@ -33,6 +34,7 @@ xdescribe('mdtColumnDirective', function(){ expect(elementScope.clickHandler).toBeDefined(); expect(elementScope.isColumnLeftAligned).toBeDefined(); expect(elementScope.isColumnRightAligned).toBeDefined(); + expect(elementScope.isColumnCenterAligned).toBeDefined(); expect(elementScope.isSortingEnabled).toBeDefined(); expect(elementScope.columnAlignClass).toBeDefined(); }); @@ -171,6 +173,10 @@ xdescribe('mdtColumnDirective', function(){ it('THEN `isColumnRightAligned` should return false', function(){ expect(elementScope.isColumnRightAligned()).toBe(false); }); + + it('THEN `isColumnCenterAligned` should return false', function(){ + expect(elementScope.isColumnCenterAligned()).toBe(false); + }); }); describe('WHEN directive is right aligned', function(){ @@ -185,6 +191,28 @@ xdescribe('mdtColumnDirective', function(){ it('THEN `isColumnRightAligned` should return true', function(){ expect(elementScope.isColumnRightAligned()).toBe(true); }); + + it('THEN `isColumnCenterAligned` should return false', function(){ + expect(elementScope.isColumnCenterAligned()).toBe(false); + }); + }); + + describe('WHEN directive is center aligned', function(){ + beforeEach(function(){ + compileDirective(DIRECTIVE_CENTER_ALIGNED); + }); + + it('THEN `isColumnLeftAligned` should return false', function(){ + expect(elementScope.isColumnLeftAligned()).toBe(false); + }); + + it('THEN `isColumnRightAligned` should return false', function(){ + expect(elementScope.isColumnRightAligned()).toBe(false); + }); + + it('THEN `isColumnCenterAligned` should return true', function(){ + expect(elementScope.isColumnCenterAligned()).toBe(true); + }); }); function compileDirective(status){ @@ -209,6 +237,15 @@ xdescribe('mdtColumnDirective', function(){ '')($scope); break; + case DIRECTIVE_CENTER_ALIGNED: + mainElement = $compile('' + + '' + + ' ' + + ' A Column' + + ' ' + + '')($scope); + break; + case DIRECTIVE_MULTI_COLUMN: mainElement = $compile('' + '' +