fix: (Core) fix grid list (#4610)

* fix: (core) fix grid list * fix: (core) fix after review
SAP · Feb 11, 2021 · a8c4bf1 · a8c4bf1
1 parent 3a6241c
commit a8c4bf1
Show file tree

Hide file tree

Showing 17 changed files with 149 additions and 53 deletions.
diff --git a/...ocs/src/app/core/component-docs/grid-list/examples/default/grid-list-example.component.ts b/...ocs/src/app/core/component-docs/grid-list/examples/default/grid-list-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { GridListItemOutputEvent } from '@fundamental-ngx/core';
 
 interface GridListItem {
@@ -13,7 +13,8 @@ interface GridListItem {
     selector: 'fd-grid-list-default-example',
     templateUrl: './grid-list-example.component.html',
     styleUrls: ['./grid-list-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListDefaultExampleComponent {
     list: GridListItem[] = [

diff --git a/...c/app/core/component-docs/grid-list/examples/delete/grid-list-delete-example.component.ts b/...c/app/core/component-docs/grid-list/examples/delete/grid-list-delete-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { GridListItemOutputEvent } from '@fundamental-ngx/core';
 
 interface GridListItem {
@@ -11,7 +11,8 @@ interface GridListItem {
     selector: 'fd-grid-list-delete-example',
     templateUrl: './grid-list-delete-example.component.html',
     styleUrls: ['./grid-list-delete-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListDeleteExampleComponent {
     list: GridListItem[] = [

diff --git a/...ocs/src/app/core/component-docs/grid-list/examples/dnd/grid-list-dnd-example.component.ts b/...ocs/src/app/core/component-docs/grid-list/examples/dnd/grid-list-dnd-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { FdDropEvent } from '@fundamental-ngx/core';
 
 interface GridListItem {
@@ -11,7 +11,8 @@ interface GridListItem {
     selector: 'fd-grid-list-dnd-example',
     templateUrl: './grid-list-dnd-example.component.html',
     styleUrls: ['./grid-list-dnd-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListDndExampleComponent {
     list: GridListItem[] = [

diff --git a/...c/app/core/component-docs/grid-list/examples/footer/grid-list-footer-example.component.ts b/...c/app/core/component-docs/grid-list/examples/footer/grid-list-footer-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 interface GridListItem {
     title: string;
@@ -9,7 +9,8 @@ interface GridListItem {
     selector: 'fd-grid-list-footer-example',
     templateUrl: './grid-list-footer-example.component.html',
     styleUrls: ['./grid-list-footer-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListFooterExampleComponent {
     list: GridListItem[] = Array(5).fill({

diff --git a/apps/docs/src/app/core/component-docs/grid-list/examples/grid-list.component.scss b/apps/docs/src/app/core/component-docs/grid-list/examples/grid-list.component.scss
@@ -5,6 +5,13 @@
 
         fd-avatar {
             margin-right: 1rem;
+
+            @at-root {
+                [dir='rtl'] & {
+                    margin-right: 0;
+                    margin-left: 1rem;
+                }
+            }
         }
     }
 

diff --git a/...src/app/core/component-docs/grid-list/examples/group/grid-list-group-example.component.ts b/...src/app/core/component-docs/grid-list/examples/group/grid-list-group-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 interface GridListItem {
     id: number;
@@ -10,7 +10,8 @@ interface GridListItem {
     selector: 'fd-grid-list-group-example',
     templateUrl: './grid-list-group-example.component.html',
     styleUrls: ['./grid-list-group-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListGroupExampleComponent {
     group1: GridListItem[] = [

diff --git a/...c/app/core/component-docs/grid-list/examples/layout/grid-list-layout-example.component.ts b/...c/app/core/component-docs/grid-list/examples/layout/grid-list-layout-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 interface GridListItem {
     id: number;
@@ -11,7 +11,8 @@ interface GridListItem {
     selector: 'fd-grid-list-layout-example',
     templateUrl: './grid-list-layout-example.component.html',
     styleUrls: ['./grid-list-layout-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListLayoutExampleComponent {
     layoutPattern = 'XL4-L3-M2-S1';

diff --git a/...s/src/app/core/component-docs/grid-list/examples/more/grid-list-more-example.component.ts b/...s/src/app/core/component-docs/grid-list/examples/more/grid-list-more-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 interface GridListItem {
     title: string;
@@ -9,7 +9,8 @@ interface GridListItem {
     selector: 'fd-grid-list-more-example',
     templateUrl: './grid-list-more-example.component.html',
     styleUrls: ['./grid-list-more-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListMoreExampleComponent {
     totalItems = 50;

diff --git a/...omponent-docs/grid-list/examples/multi-select/grid-list-multi-select-example.component.ts b/...omponent-docs/grid-list/examples/multi-select/grid-list-multi-select-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { GridListItemOutputEvent } from '@fundamental-ngx/core';
 
 interface GridListItem {
@@ -14,7 +14,8 @@ interface GridListItem {
     selector: 'fd-grid-list-multi-select-example',
     templateUrl: './grid-list-multi-select-example.component.html',
     styleUrls: ['./grid-list-multi-select-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListMultiSelectExampleComponent {
     list: GridListItem[] = [

diff --git a/...s/grid-list/examples/single-select-left/grid-list-single-select-left-example.component.ts b/...s/grid-list/examples/single-select-left/grid-list-single-select-left-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { GridListItemOutputEvent } from '@fundamental-ngx/core';
 
 interface GridListItem {
@@ -14,7 +14,8 @@ interface GridListItem {
     selector: 'fd-grid-list-single-select-left-example',
     templateUrl: './grid-list-single-select-left-example.component.html',
     styleUrls: ['./grid-list-single-select-left-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListSingleSelectLeftExampleComponent {
     list: GridListItem[] = [

diff --git a/...grid-list/examples/single-select-right/grid-list-single-select-right-example.component.ts b/...grid-list/examples/single-select-right/grid-list-single-select-right-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { GridListItemOutputEvent } from '@fundamental-ngx/core';
 
 interface GridListItem {
@@ -14,7 +14,8 @@ interface GridListItem {
     selector: 'fd-grid-list-single-select-right-example',
     templateUrl: './grid-list-single-select-right-example.component.html',
     styleUrls: ['./grid-list-single-select-right-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListSingleSelectRightExampleComponent {
     list: GridListItem[] = [

diff --git a/...ponent-docs/grid-list/examples/single-select/grid-list-single-select-example.component.ts b/...ponent-docs/grid-list/examples/single-select/grid-list-single-select-example.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { GridListItemOutputEvent } from '@fundamental-ngx/core';
 
 interface GridListItem {
@@ -14,7 +14,8 @@ interface GridListItem {
     selector: 'fd-grid-list-single-select-example',
     templateUrl: './grid-list-single-select-example.component.html',
     styleUrls: ['./grid-list-single-select-example.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class GridListSingleSelectExampleComponent {
     list: GridListItem[] = [

diff --git a/libs/core/src/lib/grid-list/components/grid-list-item/grid-list-item.component.html b/libs/core/src/lib/grid-list/components/grid-list-item/grid-list-item.component.html
@@ -9,6 +9,7 @@
     [class.fd-grid-list__item--locked]="state === 'locked'"
     [class.fd-grid-list__item--draft]="state === 'draft'"
     [class.fd-grid-list__item--error]="state === 'error'"
+    (keydown)="_onKeyDown($event)"
     (click)="selectionMode === 'singleSelect' && _singleSelect($event); _onClick()"
     [attr.aria-label]="ariaLabel"
 >
@@ -60,7 +61,6 @@
                 class="fd-grid-list__item-counter"
                 i18n-aria-label="@@coreGridList.Item.Counter"
                 [attr.aria-label]="'Item has ' + counter + ' children'"
-                tabindex="0"
                 [innerText]="counter"
             ></span>
 
@@ -99,6 +99,7 @@
                 aria-label="Navigation"
                 i18n-title="@@coreGridList.Item.Btn.Navigation"
                 title="Navigation"
+                class="fd-grid-list__btn-navigation"
                 [compact]="true"
                 (click)="_onNavigate($event)"
             ></button>

diff --git a/libs/core/src/lib/grid-list/components/grid-list-item/grid-list-item.component.scss b/libs/core/src/lib/grid-list/components/grid-list-item/grid-list-item.component.scss
@@ -1,13 +1,28 @@
-:host {
-    position: relative;
+@mixin fd-rtl {
+    @at-root {
+        [dir='rtl'] &,
+        &[dir='rtl'] {
+            @content;
+        }
+    }
+}
+
+@mixin grabbing-cursor {
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: -o-grabbing;
+    cursor: -ms-grabbing;
+    cursor: grabbing;
+}
+
+.fd-grid-list {
+    .fd-dnd-item.fd-dnd-on-drag {
+        @include grabbing-cursor;
 
-    &.fd-dnd-on-drag {
         background-color: transparent;
     }
-}
 
-.fd-grid-list__item {
-    &::ng-deep {
+    &__item {
         .drop-area__line--vertical {
             height: 100%;
 
@@ -19,23 +34,39 @@
                 right: -0.55rem;
             }
         }
-    }
 
-    .fd-toolbar {
-        &--actions {
-            margin-left: auto !important;
+        .fd-toolbar {
+            &--actions {
+                margin-left: auto;
+
+                > * {
+                    margin-left: 0.5rem;
 
-            > * {
-                margin-left: 0.5rem;
+                    @include fd-rtl() {
+                        margin-left: 0;
+                        margin-right: 0.5rem;
+                    }
+                }
+
+                @include fd-rtl() {
+                    margin-left: 0;
+                    margin-right: auto;
+                }
+            }
+
+            .fd-grid-list__item-input,
+            &--actions,
+            &--extra-content {
+                display: flex;
+                align-items: center;
+                height: 100%;
             }
         }
+    }
 
-        .fd-grid-list__item-input,
-        &--actions,
-        &--extra-content {
-            display: flex;
-            align-items: center;
-            height: 100%;
+    &__btn-navigation {
+        @include fd-rtl() {
+            transform: rotate(180deg);
         }
     }
 }