[ACA-2350] fix ellipsis on DL and the context-menu issue (#1070)

* add adf-no-grow-cell & min-width on columns

* [ACA-2350] fix ellipsis on DL and the context-menu issue

- issues were caused by nested items with the same classname: 'adf-datatable-cell'

* [ACA-2350] fix unit test

* [ACA-2350] remove deprecated classname

- mention 'adf-datatable-cell--text' example container class for elements that have context menu

* [ACA-2350] small fixes on search-results display

* [ACA-2350] fix location check

* [ACA-2350] should clean-up code once [ADF-4401] issue is fixed

* [ACA-2350] change e2e expect to check match

* [plint] fix code formatting

* [plint] fix code formatting
This commit is contained in:
Suzana Dirla
2019-04-17 10:01:43 +01:00
committed by Denys Vuika
parent b2b234c3cb
commit 91eaa3c305
9 changed files with 174 additions and 58 deletions
@@ -43,13 +43,18 @@ import { TranslationService } from '@alfresco/adf-core';
@Component({
selector: 'aca-location-link',
template: `
<a href="" [title]="nodeLocation$ | async" (click)="goToLocation()">
<a
href=""
[title]="nodeLocation$ | async"
(click)="goToLocation()"
class="adf-datatable-cell-value"
>
{{ displayText | async | translate }}
</a>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: { class: 'aca-location-link adf-location-cell' }
host: { class: 'aca-location-link adf-location-cell aca-column-content' }
})
export class LocationLinkComponent implements OnInit {
private _path: PathInfo;
@@ -100,7 +100,8 @@ export class ContextActionsDirective implements OnInit, OnDestroy {
}
private getTarget(event: MouseEvent): Element {
return this.findAncestor(<Element>event.target, 'adf-datatable-cell');
// change back to 'adf-datatable-cell' once the [ADF-4401] issue is fixed
return this.findAncestor(<Element>event.target, 'adf-datatable-cell--');
}
private isSelected(target: Element): boolean {
@@ -113,12 +114,15 @@ export class ContextActionsDirective implements OnInit, OnDestroy {
);
}
private findAncestor(el: Element, className: string): Element {
if (el.classList.contains(className)) {
private findAncestor(el: Element, classNameString: string): Element {
if (el.classList.value.includes(classNameString)) {
return el;
}
// tslint:disable-next-line:curly
while ((el = el.parentElement) && !el.classList.contains(className));
while (
(el = el.parentElement) &&
!el.classList.value.includes(classNameString)
);
return el;
}
}
@@ -45,7 +45,8 @@ describe('ContextActionsDirective', () => {
it('should call service to render context menu', fakeAsync(() => {
const el = document.createElement('div');
el.className = 'adf-data-table-cell adf-datatable-cell adf-datatable-row';
el.className =
'adf-datatable-cell adf-datatable-cell--text adf-datatable-row';
const fragment = document.createDocumentFragment();
fragment.appendChild(el);
@@ -1,8 +1,8 @@
.aca-name-column-container {
aca-locked-by {
position: absolute;
top: 35px;
left: 13px;
top: 17px;
left: 7px;
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.54);
@@ -36,7 +36,7 @@ import { isLocked } from '../../../utils/node.utils';
templateUrl: './name-column.component.html',
styleUrls: ['name-column.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
host: { class: ' aca-column-content adf-datatable-link adf-name-column' }
})
export class CustomNameColumnComponent extends NameColumnComponent
implements OnInit, OnDestroy {
@@ -31,6 +31,7 @@
.adf-search-filter {
min-width: 260px;
max-width: 320px;
padding: 5px;
height: 100%;
overflow: scroll;
@@ -15,23 +15,42 @@
.adf-datatable-list {
border: none;
.adf-datatable-link {
&.adf-name-column,
&.adf-library-name-column {
color: $document-list-name-text-color;
.adf-datatable-cell-container {
.aca-column-content,
.adf-name-column,
.adf-library-name-column,
.adf-trashcan-name-column {
position: absolute;
max-width: calc(100% - 0px);
&:hover {
color: $document-list-selection-color;
// remove this style once the [ADF-4401] issue is fixed:
&.adf-datatable-cell {
.adf-datatable-cell-value {
position: static;
width: auto;
}
}
}
.adf-datatable-cell-value {
position: static;
max-width: 35vw;
.adf-library-name-column {
// same as on top comment
&.adf-datatable-cell {
color: $document-list-name-text-color;
&:hover {
color: $document-list-selection-color;
}
}
}
}
.adf-datatable-cell-value {
display: block;
}
.adf-datatable-cell--image {
min-width: $document-list-thumbnail-width;
width: $document-list-thumbnail-width;
max-width: $document-list-thumbnail-width;
}
}
@@ -53,14 +72,19 @@
.adf-datatable-cell {
padding: 0 2px;
box-sizing: border-box;
min-width: 100px;
&.adf-no-grow-cell {
min-width: 120px;
}
&:first-child {
min-width: $document-list-thumbnail-width;
}
&:focus {
outline: none !important;
}
.adf-datatable-cell-value {
width: 100% !important;
}
}
.adf-datatable-cell {
@@ -88,4 +112,9 @@
}
}
}
.adf-search-results .adf-datatable .adf-datatable-cell {
padding-top: 12px;
padding-bottom: 12px;
}
}
+28 -8
View File
@@ -452,10 +452,10 @@
"icon": "history",
"actions": {
"click": "MANAGE_VERSIONS"
},
"rules": {
"visible": "canManageFileVersions"
}
},
"rules": {
"visible": "canManageFileVersions"
}
},
{
"id": "app.toolbar.permissions",
@@ -1080,6 +1080,7 @@
"key": "content.sizeInBytes",
"title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
"type": "fileSize",
"class": "adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
},
@@ -1089,6 +1090,7 @@
"title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON",
"type": "date",
"format": "timeAgo",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
},
@@ -1097,7 +1099,7 @@
"key": "modifiedByUser.displayName",
"title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY",
"type": "text",
"class": "adf-ellipsis-cell",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
}
@@ -1125,6 +1127,7 @@
"key": "role",
"title": "APP.DOCUMENT_LIST.COLUMNS.ROLE",
"type": "text",
"class": "adf-no-grow-cell",
"sortable": true,
"template": "app.columns.libraryRole",
"desktopOnly": false
@@ -1134,6 +1137,7 @@
"key": "visibility",
"title": "APP.DOCUMENT_LIST.COLUMNS.VISIBILITY",
"type": "text",
"class": "adf-no-grow-cell",
"sortable": true,
"template": "app.columns.libraryStatus",
"desktopOnly": true
@@ -1162,6 +1166,7 @@
"key": "role",
"title": "APP.DOCUMENT_LIST.COLUMNS.ROLE",
"type": "text",
"class": "adf-no-grow-cell",
"sortable": true,
"template": "app.columns.libraryRole",
"desktopOnly": false
@@ -1171,6 +1176,7 @@
"key": "visibility",
"title": "APP.DOCUMENT_LIST.COLUMNS.VISIBILITY",
"type": "text",
"class": "adf-no-grow-cell",
"sortable": true,
"template": "app.columns.libraryStatus",
"desktopOnly": true
@@ -1199,6 +1205,7 @@
"key": "path.name",
"title": "APP.DOCUMENT_LIST.COLUMNS.LOCATION",
"type": "text",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"template": "app.columns.location",
"desktopOnly": true
@@ -1208,6 +1215,7 @@
"key": "content.sizeInBytes",
"title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
"type": "fileSize",
"class": "adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
},
@@ -1216,6 +1224,7 @@
"key": "modifiedAt",
"title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON",
"type": "date",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"format": "timeAgo",
"sortable": true,
"desktopOnly": true
@@ -1225,7 +1234,7 @@
"key": "modifiedByUser.displayName",
"title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY",
"type": "text",
"class": "adf-ellipsis-cell",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
},
@@ -1234,7 +1243,7 @@
"key": "sharedByUser.displayName",
"title": "APP.DOCUMENT_LIST.COLUMNS.SHARED_BY",
"type": "text",
"class": "adf-ellipsis-cell",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
}
@@ -1262,6 +1271,7 @@
"key": "path.name",
"title": "APP.DOCUMENT_LIST.COLUMNS.LOCATION",
"type": "text",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"template": "app.columns.location",
"desktopOnly": true
@@ -1271,6 +1281,7 @@
"key": "content.sizeInBytes",
"title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
"type": "fileSize",
"class": "adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
},
@@ -1280,6 +1291,7 @@
"title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON",
"type": "date",
"format": "timeAgo",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
}
@@ -1307,6 +1319,7 @@
"key": "path.name",
"title": "APP.DOCUMENT_LIST.COLUMNS.LOCATION",
"type": "text",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"template": "app.columns.location",
"desktopOnly": true
@@ -1316,6 +1329,7 @@
"key": "sizeInBytes",
"title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
"type": "fileSize",
"class": "adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
},
@@ -1325,6 +1339,7 @@
"title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON",
"type": "date",
"format": "timeAgo",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
},
@@ -1333,7 +1348,7 @@
"key": "modifiedByUser.displayName",
"title": "APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY",
"type": "text",
"class": "adf-ellipsis-cell",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
}
@@ -1361,6 +1376,7 @@
"key": "path.name",
"title": "APP.DOCUMENT_LIST.COLUMNS.LOCATION",
"type": "text",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"template": "app.columns.location",
"desktopOnly": true
@@ -1370,6 +1386,7 @@
"key": "content.sizeInBytes",
"title": "APP.DOCUMENT_LIST.COLUMNS.SIZE",
"type": "fileSize",
"class": "adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
},
@@ -1379,6 +1396,7 @@
"title": "APP.DOCUMENT_LIST.COLUMNS.DELETED_ON",
"type": "date",
"format": "timeAgo",
"class": "adf-ellipsis-cell adf-no-grow-cell",
"sortable": true,
"desktopOnly": true
}
@@ -1406,6 +1424,7 @@
"key": "role",
"title": "APP.DOCUMENT_LIST.COLUMNS.ROLE",
"type": "text",
"class": "adf-no-grow-cell",
"sortable": true,
"template": "app.columns.libraryRole",
"desktopOnly": false
@@ -1415,6 +1434,7 @@
"key": "visibility",
"title": "APP.DOCUMENT_LIST.COLUMNS.VISIBILITY",
"type": "text",
"class": "adf-no-grow-cell",
"sortable": true,
"template": "app.columns.libraryStatus",
"desktopOnly": true