fix(fxLayoutGap): add proper gaps for reverse dir

angular · Mar 20, 2018 · 3a8041d · 3a8041d
1 parent 0562fcc
commit 3a8041d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/lib/flex/layout-gap/layout-gap.spec.ts b/src/lib/flex/layout-gap/layout-gap.spec.ts
@@ -208,12 +208,12 @@ describe('layout-gap directive', () => {
       verifyCorrectMargin('column', 'margin-bottom');
     });
 
-    it('should apply margin-right for row-reverse layouts', () => {
-      verifyCorrectMargin('row-reverse', 'margin-right');
+    it('should apply margin-left for row-reverse layouts', () => {
+      verifyCorrectMargin('row-reverse', 'margin-left');
     });
 
-    it('should apply margin-bottom for column-reverse layouts', () => {
-      verifyCorrectMargin('column-reverse', 'margin-bottom');
+    it('should apply margin-top for column-reverse layouts', () => {
+      verifyCorrectMargin('column-reverse', 'margin-top');
     });
 
     it('should remove obsolete margin and apply valid margin for layout changes', () => {
@@ -241,7 +241,7 @@ describe('layout-gap directive', () => {
       nodes = queryFor(fixture, 'span');
 
       expectEl(nodes[0]).not.toHaveStyle({'margin-right': '8px'}, styler);
-      expectEl(nodes[0]).toHaveStyle({'margin-bottom': '8px'}, styler);
+      expectEl(nodes[0]).toHaveStyle({'margin-top': '8px'}, styler);
 
 
       // layout = row-reverse, use margin-right
@@ -250,7 +250,7 @@ describe('layout-gap directive', () => {
       nodes = queryFor(fixture, 'span');
 
       expectEl(nodes[0]).not.toHaveStyle({'margin-bottom': '8px'}, styler);
-      expectEl(nodes[0]).toHaveStyle({'margin-right': '8px'}, styler);
+      expectEl(nodes[0]).toHaveStyle({'margin-left': '8px'}, styler);
     });
 
     it('should recognize hidden elements when applying gaps', () => {

diff --git a/src/lib/flex/layout-gap/layout-gap.ts b/src/lib/flex/layout-gap/layout-gap.ts
@@ -246,11 +246,17 @@ export class LayoutGapDirective extends BaseFxDirective
 
     switch (this._layout) {
       case 'column':
-      case 'column-reverse':
         key = 'margin-bottom';
         break;
-      case 'row' :
+      case 'column-reverse':
+        key = 'margin-top';
+        break;
+      case 'row':
+        key = this._directionality.value === 'rtl' ? 'margin-left' : 'margin-right';
+        break;
       case 'row-reverse':
+        key = this._directionality.value === 'rtl' ? 'margin-right' : 'margin-left';
+        break;
       default :
         key = this._directionality.value === 'rtl' ? 'margin-left' : 'margin-right';
         break;