diff --git a/docs/README.md b/docs/README.md index e7553ebe59..e3d3eedce5 100644 --- a/docs/README.md +++ b/docs/README.md @@ -323,7 +323,6 @@ for more information about installing and using the source code. | [Node Favorite directive](content-services/directives/node-favorite.directive.md) | Selectively toggles nodes as favorites. | [Source](../lib/content-services/src/lib/directives/node-favorite.directive.ts) | | [Node Lock directive](content-services/directives/node-lock.directive.md) | Locks or unlocks a node. | [Source](../lib/content-services/src/lib/directives/node-lock.directive.ts) | | [Node Restore directive](content-services/directives/node-restore.directive.md) | Restores deleted nodes to their original location. | [Source](../lib/content-services/src/lib/directives/node-restore.directive.ts) | -| [Toggle Icon directive](content-services/directives/toggle-icon.directive.md) | Toggle icon on mouse or keyboard event for a selectable element. | [Source](../lib/content-services/src/lib/upload/directives/toggle-icon.directive.ts) | | [Version Compatibility Directive](content-services/directives/version-compatibility.directive.md) | Enables/disables components based on ACS version in use. | [Source](../lib/content-services/src/lib/version-compatibility/version-compatibility.directive.ts) | ### Dialogs diff --git a/docs/content-services/directives/toggle-icon.directive.md b/docs/content-services/directives/toggle-icon.directive.md deleted file mode 100644 index 7484ebedf3..0000000000 --- a/docs/content-services/directives/toggle-icon.directive.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -Title: Toggle Icon directive -Added: v2.0.0 -Status: Active -Last reviewed: 2019-04-09 ---- - -# [Toggle Icon directive](../../../lib/content-services/src/lib/upload/directives/toggle-icon.directive.ts "Defined in toggle-icon.directive.ts") - -Toggle icon on mouse or keyboard event for a selectable element. - -## Example Usage - -```html - - -``` - -## Class members diff --git a/docs/versionIndex.md b/docs/versionIndex.md index 14e563f519..346a4308ed 100644 --- a/docs/versionIndex.md +++ b/docs/versionIndex.md @@ -663,7 +663,6 @@ backend services have been tested with each released version of ADF. - [Text mask component](core/components/text-mask.component.md) - [Thumbnail service](core/services/thumbnail.service.md) - [Time ago pipe](core/pipes/time-ago.pipe.md) -- [Toggle icon directive](content-services/directives/toggle-icon.directive.md) - [Toolbar divider component](core/components/toolbar-divider.component.md) - [Toolbar title component](core/components/toolbar-title.component.md) - [Toolbar component](core/components/toolbar.component.md) diff --git a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html index 69263fd531..99e6fb59dc 100644 --- a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html +++ b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html @@ -26,20 +26,22 @@
- @if (!toggleIcon.isToggled) { + @if (!toggleIconState.isToggled) { {{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }} } - @if (toggleIcon.isToggled) { + @if (toggleIconState.isToggled) { }
@@ -47,8 +49,10 @@ @if (isUploadComplete()) { diff --git a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts index aa28b7b0eb..3541f6652d 100644 --- a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts +++ b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts @@ -22,12 +22,16 @@ import { MatListModule } from '@angular/material/list'; import { FileSizePipe, IconModule } from '@alfresco/adf-core'; import { MatChipsModule } from '@angular/material/chips'; import { TranslatePipe } from '@ngx-translate/core'; -import { ToggleIconDirective } from '../directives/toggle-icon.directive'; import { MatButtonModule } from '@angular/material/button'; +interface ToggleIconState { + isFocused: boolean; + isToggled: boolean; +} + @Component({ selector: 'adf-file-uploading-list-row', - imports: [IconModule, MatListModule, MatChipsModule, TranslatePipe, ToggleIconDirective, FileSizePipe, MatButtonModule], + imports: [IconModule, MatListModule, MatChipsModule, TranslatePipe, FileSizePipe, MatButtonModule], templateUrl: './file-uploading-list-row.component.html', styleUrls: ['./file-uploading-list-row.component.scss'], encapsulation: ViewEncapsulation.None @@ -39,10 +43,40 @@ export class FileUploadingListRowComponent { @Output() cancel = new EventEmitter(); + toggleIconState: ToggleIconState = { isFocused: false, isToggled: false }; + toggleIconCancelState: ToggleIconState = { isFocused: false, isToggled: false }; + onCancel(file: FileModel): void { this.cancel.emit(file); } + onToggleMouseEnter(state: ToggleIconState): void { + if (!state.isFocused) { + state.isToggled = true; + } + } + + onToggleMouseLeave(state: ToggleIconState): void { + if (!state.isFocused) { + state.isToggled = false; + } + + if (state.isFocused && state.isToggled) { + state.isFocused = false; + state.isToggled = false; + } + } + + onToggleFocus(state: ToggleIconState): void { + state.isFocused = true; + state.isToggled = true; + } + + onToggleBlur(state: ToggleIconState): void { + state.isFocused = false; + state.isToggled = false; + } + showCancelledStatus(): boolean { return ( this.file.status === FileUploadStatus.Cancelled || diff --git a/lib/content-services/src/lib/upload/directives/toggle-icon.directive.spec.ts b/lib/content-services/src/lib/upload/directives/toggle-icon.directive.spec.ts deleted file mode 100644 index dd69fbc5ff..0000000000 --- a/lib/content-services/src/lib/upload/directives/toggle-icon.directive.spec.ts +++ /dev/null @@ -1,86 +0,0 @@ -/*! - * @license - * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component, ViewChild } from '@angular/core'; -import { ToggleIconDirective } from './toggle-icon.directive'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -@Component({ - selector: 'adf-test-component', - imports: [ToggleIconDirective], - template: ` ` -}) -class TestComponent { - @ViewChild(ToggleIconDirective) - directive: ToggleIconDirective; -} - -describe('ToggleIconDirective', () => { - let fixture: ComponentFixture; - let component: TestComponent; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [TestComponent] - }); - fixture = TestBed.createComponent(TestComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should set toggle to true on mouseenter', () => { - const button: HTMLElement = fixture.nativeElement.querySelector('#testButton'); - button.dispatchEvent(new MouseEvent('mouseenter')); - - expect(component.directive.isToggled).toBe(true); - }); - - it('should set toggle to false on mouseleave if element is not focused', () => { - const button: HTMLElement = fixture.nativeElement.querySelector('#testButton'); - button.dispatchEvent(new MouseEvent('mouseleave')); - - expect(component.directive.isToggled).toBe(false); - }); - - it('should set toggle and focus to false on mouseleave when element is focused', () => { - const button: HTMLElement = fixture.nativeElement.querySelector('#testButton'); - button.dispatchEvent(new Event('focus')); - expect(component.directive.isToggled).toBe(true); - - button.dispatchEvent(new MouseEvent('mouseleave')); - - expect(component.directive.isToggled).toBe(false); - expect(component.directive.isFocused).toBe(false); - }); - - it('should set toggle and focus to true when element is focused', () => { - const button: HTMLElement = fixture.nativeElement.querySelector('#testButton'); - button.dispatchEvent(new Event('focus')); - - expect(component.directive.isToggled).toBe(true); - expect(component.directive.isFocused).toBe(true); - }); - - it('should set toggle and focus to true when element blur event', () => { - const button: HTMLElement = fixture.nativeElement.querySelector('#testButton'); - button.dispatchEvent(new Event('focus')); - button.dispatchEvent(new Event('blur')); - - expect(component.directive.isToggled).toBe(false); - expect(component.directive.isFocused).toBe(false); - }); -}); diff --git a/lib/content-services/src/lib/upload/directives/toggle-icon.directive.ts b/lib/content-services/src/lib/upload/directives/toggle-icon.directive.ts deleted file mode 100644 index 349f53dc7a..0000000000 --- a/lib/content-services/src/lib/upload/directives/toggle-icon.directive.ts +++ /dev/null @@ -1,62 +0,0 @@ -/*! - * @license - * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Directive, HostListener } from '@angular/core'; - -@Directive({ - selector: '[adf-toggle-icon]', - exportAs: 'toggleIcon' -}) -export class ToggleIconDirective { - private isFocus: boolean = false; - private toggle: boolean = false; - - @HostListener('mouseenter') onMouseEnter() { - if (!this.isFocus) { - this.toggle = true; - } - } - - @HostListener('mouseleave') onMouseLeave() { - if (!this.isFocus) { - this.toggle = false; - } - - if (this.isFocus && this.toggle) { - this.isFocus = false; - this.toggle = false; - } - } - - @HostListener('focus') onFocus() { - this.isFocus = true; - this.toggle = true; - } - - @HostListener('blur') onBlur() { - this.isFocus = false; - this.toggle = false; - } - - get isToggled(): boolean { - return this.toggle; - } - - get isFocused(): boolean { - return this.isFocus; - } -} diff --git a/lib/content-services/src/lib/upload/public-api.ts b/lib/content-services/src/lib/upload/public-api.ts index d475ec8943..17b5ab3747 100644 --- a/lib/content-services/src/lib/upload/public-api.ts +++ b/lib/content-services/src/lib/upload/public-api.ts @@ -24,7 +24,6 @@ export * from './components/file-uploading-list-row.component'; export * from './components/upload-files.event'; export * from './directives/file-draggable.directive'; -export * from './directives/toggle-icon.directive'; export * from './components/base-upload/upload-base'; diff --git a/lib/content-services/src/lib/upload/upload.module.ts b/lib/content-services/src/lib/upload/upload.module.ts index af8fb63f50..0a7698e63f 100644 --- a/lib/content-services/src/lib/upload/upload.module.ts +++ b/lib/content-services/src/lib/upload/upload.module.ts @@ -23,11 +23,9 @@ import { UploadButtonComponent } from './components/upload-button.component'; import { UploadVersionButtonComponent } from './components/upload-version-button.component'; import { UploadDragAreaComponent } from './components/upload-drag-area.component'; import { FileDraggableDirective } from './directives/file-draggable.directive'; -import { ToggleIconDirective } from './directives/toggle-icon.directive'; export const CONTENT_UPLOAD_DIRECTIVES = [ FileDraggableDirective, - ToggleIconDirective, UploadDragAreaComponent, UploadButtonComponent, UploadVersionButtonComponent,