Skip to content

Commit

Permalink
[ACS-8113] UX bug - Checkbox selections checked state should be Hylan…
Browse files Browse the repository at this point in the history
…d blue not green- edit summary (#3908)
  • Loading branch information
jacekpluta authored and pmartinezga committed Jul 4, 2024
1 parent d138d35 commit ee7ab79
Show file tree
Hide file tree
Showing 18 changed files with 191 additions and 12 deletions.
3 changes: 2 additions & 1 deletion projects/aca-content/assets/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,8 @@
"CREATE_TOOLTIP": "Create content",
"UPLOAD": "Upload",
"UPLOAD_TOOLTIP": "Upload content"
}
},
"SELECTED": "Selected ({{ count }})"
},
"BROWSE": {
"FILE": {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<aca-page-layout>
<div class="aca-page-layout-header">
<h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE' | translate }}</h1>
<h1 class="aca-page-title">
{{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
</h1>
<aca-toolbar [items]="actions"></aca-toolbar>
</div>

Expand All @@ -19,6 +21,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITL
[sortingMode]="'client'"
(node-dblclick)="handleNodeClick($event)"
[imageResolver]="imageResolver"
(selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
[isResizingEnabled]="true"
[blurOnResize]="false"
(name-click)="handleNodeClick($event)"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import { RouterEffects } from '@alfresco/aca-shared/store';
import { of, throwError } from 'rxjs';
import { LibraryEffects } from '../../store/effects';
import { NodeEntry } from '@alfresco/js-api';
import { getTitleElementText } from '../../testing/test-utils';

describe('FavoriteLibrariesComponent', () => {
let fixture: ComponentFixture<FavoriteLibrariesComponent>;
Expand Down Expand Up @@ -99,6 +100,17 @@ describe('FavoriteLibrariesComponent', () => {
expect(component.pagination).toBe(null);
expect(component.isLoading).toBe(false);
});

it('should set title based on selectedRowItemsCount', () => {
fixture.detectChanges();

expect(getTitleElementText(fixture)).toBe('APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE');

component.selectedRowItemsCount = 5;
fixture.detectChanges();

expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
});
});

describe('Node navigation', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<aca-page-layout>
<div class="aca-page-layout-header">
<h1 class="aca-page-title">{{ 'APP.BROWSE.FAVORITES.TITLE' | translate }}</h1>
<h1 class="aca-page-title">
{{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.FAVORITES.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
</h1>
<aca-toolbar [items]="actions"></aca-toolbar>
</div>

Expand All @@ -17,6 +19,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.FAVORITES.TITLE' | translate }}</h1>
[sorting]="['modifiedAt', 'desc']"
[sortingMode]="'client'"
[imageResolver]="imageResolver"
(selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
[isResizingEnabled]="true"
[blurOnResize]="false"
(node-dblclick)="handleNodeClick($event)"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { BehaviorSubject, of, Subject } from 'rxjs';
import { FavoritesComponent } from './favorites.component';
import { AppTestingModule } from '../../testing/app-testing.module';
import { AppService, ContentApiService } from '@alfresco/aca-shared';
import { getTitleElementText } from '../../testing/test-utils';

describe('FavoritesComponent', () => {
let fixture: ComponentFixture<FavoritesComponent>;
Expand Down Expand Up @@ -129,4 +130,13 @@ describe('FavoritesComponent', () => {
location: 'favorites'
});
});

it('should set title based on selectedRowItemsCount', () => {
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.BROWSE.FAVORITES.TITLE');

component.selectedRowItemsCount = 5;
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
});
});
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<aca-page-layout [hasError]="!isValidPath">
<div class="aca-page-layout-header">
<adf-breadcrumb [root]="title" [folderNode]="node" [maxItems]="isSmallScreen ? 1 : 0" (navigate)="onBreadcrumbNavigate($event)"> </adf-breadcrumb>
<adf-breadcrumb [root]="title"
[folderNode]="node"
[selectedRowItemsCount]="selectedRowItemsCount"
[maxItems]="isSmallScreen ? 1 : 0"
(navigate)="onBreadcrumbNavigate($event)">
</adf-breadcrumb>
<aca-toolbar [items]="actions"></aca-toolbar>
</div>

Expand Down Expand Up @@ -31,6 +36,7 @@
[blurOnResize]="false"
(node-dblclick)="handleNodeClick($event)"
(name-click)="handleNodeClick($event)"
(selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
(filterSelection)="onFilterSelected($event)"
(error)="onError()"
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<aca-page-layout>
<div class="aca-page-layout-header">
<h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | translate }}</h1>
<h1 class="aca-page-title">
{{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
</h1>
<aca-toolbar [items]="actions"></aca-toolbar>
</div>

Expand All @@ -18,6 +20,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | t
[sortingMode]="'client'"
[imageResolver]="imageResolver"
[isResizingEnabled]="true"
(selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
[blurOnResize]="false"
(node-dblclick)="handleNodeClick($event)"
(name-click)="handleNodeClick($event)"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { AppTestingModule } from '../../testing/app-testing.module';
import { EffectsModule } from '@ngrx/effects';
import { LibraryEffects } from '../../store/effects';
import { ContentApiService } from '@alfresco/aca-shared';
import { getTitleElementText } from '../../testing/test-utils';

describe('LibrariesComponent', () => {
let fixture: ComponentFixture<LibrariesComponent>;
Expand Down Expand Up @@ -67,6 +68,17 @@ describe('LibrariesComponent', () => {
spyOn(sitesApi, 'listSiteMembershipsForPerson').and.returnValue(Promise.resolve({}));
});

describe('Initialization', () => {
it('should set title to MY_LIBRARIES.TITLE based on selectedRowItemsCount', () => {
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE');

component.selectedRowItemsCount = 2;
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
});
});

describe('Node navigation', () => {
it('does not navigate when id is not passed', () => {
spyOn(router, 'navigate').and.stub();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<aca-page-layout>
<div class="aca-page-layout-header">
<h1 class="aca-page-title">{{ 'APP.BROWSE.RECENT.TITLE' | translate }}</h1>
<h1 class="aca-page-title">
{{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.RECENT.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
</h1>
<aca-toolbar [items]="actions"></aca-toolbar>
</div>

Expand All @@ -18,6 +20,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.RECENT.TITLE' | translate }}</h1>
[sortingMode]="'client'"
[imageResolver]="imageResolver"
[isResizingEnabled]="true"
(selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
[blurOnResize]="false"
(node-dblclick)="handleNodeClick($event)"
(name-click)="handleNodeClick($event)"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { AppTestingModule } from '../../testing/app-testing.module';
import { Router } from '@angular/router';
import { NodePaging, SearchApi } from '@alfresco/js-api';
import { of } from 'rxjs';
import { getTitleElementText } from '../../testing/test-utils';

describe('RecentFilesComponent', () => {
let fixture: ComponentFixture<RecentFilesComponent>;
Expand Down Expand Up @@ -99,4 +100,13 @@ describe('RecentFilesComponent', () => {
location: 'recent-files'
});
});

it('should set title based on selectedRowItemsCount', () => {
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.BROWSE.RECENT.TITLE');

component.selectedRowItemsCount = 5;
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
});
});
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<aca-page-layout>
<div class="aca-page-layout-header">
<h1 class="aca-page-title">{{ 'APP.BROWSE.SHARED.TITLE' | translate }}</h1>
<h1 class="aca-page-title">
{{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.SHARED.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
</h1>

<aca-toolbar [items]="actions"></aca-toolbar>
</div>

Expand All @@ -17,6 +20,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.SHARED.TITLE' | translate }}</h1>
[imageResolver]="imageResolver"
[sortingMode]="'client'"
[isResizingEnabled]="true"
(selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
[blurOnResize]="false"
(node-dblclick)="handleNodeClick($event)"
(name-click)="handleNodeClick($event)"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,28 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
import { CustomResourcesService } from '@alfresco/adf-content-services';
import { SharedFilesComponent } from './shared-files.component';
import { AppTestingModule } from '../../testing/app-testing.module';
import { Router } from '@angular/router';
import { BehaviorSubject, of, Subject } from 'rxjs';
import { By } from '@angular/platform-browser';
import { SharedLinkPaging } from '@alfresco/js-api';
import { AppService } from '@alfresco/aca-shared';
import { getTitleElementText } from '../../testing/test-utils';
import { ActivatedRoute, Router } from '@angular/router';

describe('SharedFilesComponent', () => {
let fixture: ComponentFixture<SharedFilesComponent>;
let page: SharedLinkPaging;
let component: SharedFilesComponent;
const routerMock = {
routerState: { root: '' },
url: 'shared-files'
};
const route = {
snapshot: {
data: {
sortingPreferenceKey: ''
}
}
};

const appServiceMock = {
appNavNarMode$: new BehaviorSubject('collapsed'),
Expand All @@ -45,11 +58,10 @@ describe('SharedFilesComponent', () => {
TestBed.configureTestingModule({
imports: [AppTestingModule, SharedFilesComponent],
providers: [
{ provide: ActivatedRoute, useValue: route },
{
provide: Router,
useValue: {
url: 'shared-files'
}
useValue: routerMock
},
{
provide: AppService,
Expand All @@ -68,6 +80,16 @@ describe('SharedFilesComponent', () => {
const customResourcesService = TestBed.inject(CustomResourcesService);
spyOn(customResourcesService, 'loadSharedLinks').and.returnValue(of(page));
fixture = TestBed.createComponent(SharedFilesComponent);
component = fixture.componentInstance;
});

it('should set title based on selectedRowItemsCount', () => {
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.BROWSE.SHARED.TITLE');

component.selectedRowItemsCount = 5;
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
});

// TODO: needs better testing strategy
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<aca-page-layout>
<div class="aca-page-layout-header">
<h1 class="aca-page-title">{{ 'APP.BROWSE.TRASHCAN.TITLE' | translate }}</h1>
<h1 class="aca-page-title">
{{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.TRASHCAN.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
</h1>

<aca-toolbar [items]="actions"></aca-toolbar>
</div>

Expand All @@ -16,6 +19,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.TRASHCAN.TITLE' | translate }}</h1>
[navigate]="false"
[sortingMode]="'client'"
[imageResolver]="imageResolver"
(selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
[sorting]="['archivedAt', 'desc']"
[isResizingEnabled]="true"
[blurOnResize]="false"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AlfrescoApiService } from '@alfresco/adf-core';
import { TrashcanComponent } from './trashcan.component';
import { AppTestingModule } from '../../testing/app-testing.module';
import { getTitleElementText } from '../../testing/test-utils';

describe('TrashcanComponent', () => {
let fixture: ComponentFixture<TrashcanComponent>;
Expand Down Expand Up @@ -54,4 +55,13 @@ describe('TrashcanComponent', () => {
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('adf-document-list')).not.toBeNull();
});

it('should set title based on selectedRowItemsCount', () => {
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.BROWSE.TRASHCAN.TITLE');

component.selectedRowItemsCount = 5;
fixture.detectChanges();
expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
});
});
29 changes: 29 additions & 0 deletions projects/aca-content/src/lib/testing/test-utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*!
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Alfresco Example Content Application
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/

import { ComponentFixture } from '@angular/core/testing';

export const getTitleElementText = (fixture: ComponentFixture<any>): string => {
return fixture.nativeElement.querySelector('.aca-page-title').innerText.trim();
};
38 changes: 38 additions & 0 deletions projects/aca-content/src/lib/ui/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,44 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row {
}
}

.mat-checkbox-indeterminate,
.mat-checkbox-checked {
&.mat-accent {
.mat-checkbox-background {
background-color: var(--theme-blue-checkbox-color);
}
}
}

.adf-datatable-list {
.adf-datatable-row:is(adf-datatable-row) {
&:focus {
outline: 1px solid var(--theme-blue-checkbox-color);
}

.adf-cell-value:focus {
outline: 1px solid var(--theme-blue-checkbox-color);
}

.adf-datatable-cell-header:focus {
outline: 1px solid var(--theme-blue-checkbox-color);
}

.adf-datatable-link:hover {
color: var(--theme-blue-checkbox-color);
}
}

.adf-datatable-body {
.adf-datatable-row:is(adf-datatable-row) {
&.adf-is-selected,
&.adf-is-selected:hover {
background-color: var(--theme-blue-active-table-row-color);
}
}
}
}

.adf-property-field {
.adf-textitem-edit-icon.mat-icon {
color: var(--theme-secondary-text);
Expand Down
Loading

0 comments on commit ee7ab79

Please sign in to comment.