inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-2330] fix document-list styling (#1062)

Browse Source 
* [ACA-2330] fix DL display - enable single click tests

* [ACA-2330] fix locked-by item display

* [ACA-2330] set text color and padding on DL

* [ACA-2330] fix ellipsis on name column text

* [ACA-2330] apply fix to library-name-column also

- fixes failing test on libraries DL

* [ACA-2330] set scss variables

* [ACA-2330] fix wrong variable names

* [ACA-2330] decrease thumbnail width

* [ACA-2330] enable related tests
This commit is contained in:
Suzana Dirla
2019-04-10 18:34:21 +03:00
committed by Denys Vuika
parent 35c84bdd0c
commit 8d02203a54
4 changed files with 60 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
e2e/suites/actions/single-click.test.ts
View File

@@ -101,8 +101,7 @@ describe('Single click on item name', () => {
expect(await dataTable.hasLinkOnName(file1)).toBe(true, 'Link on name is missing');
});
// TODO: investigate
xit('File preview opens when clicking the hyperlink - [C280033]', async () => {
it('File preview opens when clicking the hyperlink - [C280033]', async () => {
await dataTable.clickNameLink(file1);
expect(await viewer.isViewerOpened()).toBe(true, 'Viewer is not opened');
@@ -110,8 +109,7 @@ describe('Single click on item name', () => {
await Utils.pressEscape();
});
// TODO: investigate
xit('Navigate inside the folder when clicking the hyperlink - [C280034]', async () => {
it('Navigate inside the folder when clicking the hyperlink - [C280034]', async () => {
await dataTable.clickNameLink(folder1);
expect(await breadcrumb.getCurrentItemName()).toBe(folder1);
@@ -128,8 +126,7 @@ describe('Single click on item name', () => {
expect(await dataTable.hasLinkOnName(siteName)).toBe(true, 'Link on site name is missing');
});
// TODO: enable this when ACA-2330 is done
xit('Navigate inside the library when clicking the hyperlink - [C284902]', async () => {
it('Navigate inside the library when clicking the hyperlink - [C284902]', async () => {
await dataTable.clickNameLink(siteName);
expect(await breadcrumb.getCurrentItemName()).toBe(siteName);
@@ -147,8 +144,7 @@ describe('Single click on item name', () => {
expect(await dataTable.hasLinkOnName(file1)).toBe(true, 'Link on name is missing');
});
// TODO: enable this when ACA-2330 is done
xit('File preview opens when clicking the hyperlink - [C284906]', async () => {
it('File preview opens when clicking the hyperlink - [C284906]', async () => {
await dataTable.clickNameLink(file1);
expect(await viewer.isViewerOpened()).toBe(true, 'Viewer is not opened');
@@ -167,8 +163,7 @@ describe('Single click on item name', () => {
expect(await dataTable.hasLinkOnName(file1)).toBe(true, 'Link on name is missing');
});
// TODO: enable this when ACA-2330 is done
xit('File preview opens when clicking the hyperlink - [C284908]', async () => {
it('File preview opens when clicking the hyperlink - [C284908]', async () => {
await dataTable.clickNameLink(file1);
expect(await viewer.isViewerOpened()).toBe(true, 'Viewer is not opened');
@@ -187,8 +182,7 @@ describe('Single click on item name', () => {
expect(await dataTable.hasLinkOnName(file1)).toBe(true, 'Link on name is missing');
});
// TODO: enable this when ACA-2330 is done
xit('File preview opens when clicking the hyperlink - [C284910]', async () => {
it('File preview opens when clicking the hyperlink - [C284910]', async () => {
await dataTable.clickNameLink(file1);
expect(await viewer.isViewerOpened()).toBe(true, 'Viewer is not opened');
@@ -196,8 +190,7 @@ describe('Single click on item name', () => {
await Utils.pressEscape();
});
// TODO: enable this when ACA-2330 is done
xit('Navigate inside the folder when clicking the hyperlink - [C284911]', async () => {
it('Navigate inside the folder when clicking the hyperlink - [C284911]', async () => {
await dataTable.clickNameLink(folder1);
expect(await breadcrumb.getCurrentItemName()).toBe(folder1);

5
src/app/components/dl-custom-components/name-column/name-column.component.scss
View File

@@ -1,10 +1,11 @@
.aca-name-column-container {
aca-locked-by {
position: absolute;
top: 10px;
left: -4px;
top: 35px;
left: 13px;
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.54);
}
}

5
src/app/ui/custom-theme.scss
View File

@@ -92,3 +92,8 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
@include app-create-menu-theme($theme);
@include aca-share-dialog-theme($theme);
}
//Custom variables - ACA specific styling:
$document-list-selection-color: mat-color($alfresco-ecm-blue, 500);
$document-list-background: white;
$document-list-thumbnail-width: 35px;

48
src/app/ui/overrides/adf-document-list.theme.scss
View File

@@ -1,21 +1,48 @@
@import 'mixins';
@mixin adf-document-list-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$primary: map-get($theme, primary);
$document-list-selection-color: mat-color($primary) !default;
$document-list-selection-background: #e0f7fa !default;
$document-list-background: mat-color($background, background) !default;
$document-list-text-color: mat-color($foreground, text, 0.54) !default;
$document-list-name-text-color: mat-color($foreground, text) !default;
$document-list-thumbnail-width: 50px !default;
.adf-datatable-list {
border: none;
.adf-datatable-link {
&.adf-name-column,
&.adf-library-name-column {
color: $document-list-name-text-color;
&:hover {
color: $document-list-selection-color;
}
.adf-datatable-cell-value {
max-width: calc(100% - 2em) !important;
width: auto !important;
position: static;
max-width: 35vw;
}
}
}
.adf-datatable-cell--image {
max-width: $document-list-thumbnail-width;
}
}
.mat-icon.adf-datatable-selected > svg {
fill: #2196f3;
fill: $document-list-selection-color;
}
adf-document-list {
@include flex-column;
background-color: $document-list-background;
}
.adf-datatable {
@@ -24,20 +51,31 @@
.adf-datatable-cell-header,
.adf-datatable-cell {
padding: 0 2px;
box-sizing: border-box;
&:focus {
outline: none !important;
}
.adf-datatable-cell-value {
width: 100% !important;
}
}
.adf-datatable-cell {
color: $document-list-text-color;
}
.adf-datatable-body .adf-datatable-row {
&:hover,
&:focus {
background-color: #e0f7fa;
background-color: $document-list-selection-background;
}
&.adf-is-selected,
&.adf-is-selected:hover {
background-color: #e0f7fa;
background-color: $document-list-selection-background;
}
}