From 7f720fda3aa1a613bb6ca7781b466f388c624641 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 1 Sep 2017 15:04:06 +0100
Subject: [PATCH] fix issues with the icons column in DT/DL (#2277)

* fix issues with the icons column in DT/DL

- fix issue with screen reader label not being translated
- fix issue with column taking the width of the screen reader label

* fix custom selection icon position
---
 .../app/components/files/files.component.css  |  2 +-
 .../datatable/datatable.component.html        |  2 +-
 .../datatable/datatable.component.scss        | 49 +++++++++----------
 3 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/demo-shell-ng2/app/components/files/files.component.css b/demo-shell-ng2/app/components/files/files.component.css
index 8bacbc541a..62054c1077 100644
--- a/demo-shell-ng2/app/components/files/files.component.css
+++ b/demo-shell-ng2/app/components/files/files.component.css
@@ -45,7 +45,7 @@ adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
     top: 50%;
     left: 50%;
     margin-top: -16px;
-    margin-left: -28px;
+    margin-left: -12px;
     border-radius: 100%;
     background: #00bcd4;
 }
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index 450856e9e0..4f5779163b 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -23,7 +23,7 @@
             role="button"
             tabindex="0"
             title="{{ col.title }}">
-            <span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
+            <span *ngIf="col.srTitle" class="sr-only">{{ col.srTitle | translate }}</span>
             <span *ngIf="col.title">{{ col.title | translate}}</span>
         </th>
         <!-- Actions (right) -->
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss
index 5faea4e6d2..6385b8672b 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss
@@ -222,36 +222,35 @@
                 display: block;
             }
         }
-    }
 
-    /* Utils */
+        /* [Accessibility] For screen reader only */
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            border: 0;
+        }
 
-    /* [Accessibility] For screen reader only */
-    :host .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        border: 0;
-    }
-
-    .hidden {
-        display: none;
-    }
-
-    /* mobile phone */
-    @media all and (max-width: 768px) {
-        .desktop-only {
+        /* Utils */
+        .hidden {
             display: none;
         }
-    }
 
-    @media (max-device-width: 768px) {
-        .desktop-only {
-            display: none;
+        /* mobile phone */
+        @media all and (max-width: 768px) {
+            .desktop-only {
+                display: none;
+            }
+        }
+
+        @media (max-device-width: 768px) {
+            .desktop-only {
+                display: none;
+            }
         }
     }