{{
- versionNumber
+
+ {{
+ versionNumber
}}
-
+
+
{{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }}
-
clear
-
-
check_circle
-
remove_circle
-
+
+ class="adf-file-uploading-row__file-version"
+ [attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_DONE_STATUS' | translate"
+ role="status"
+ >
@@ -61,34 +76,44 @@
-
+ class="adf-file-uploading-row__group"
+ title="{{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_FILE' | translate }}"
+ [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CANCEL_FILE' | translate: { file: file.name }">
schedule
remove_circle
-
+
report_problem
{{ 'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate }}
diff --git a/lib/content-services/upload/components/file-uploading-list-row.component.scss b/lib/content-services/upload/components/file-uploading-list-row.component.scss
index a3eb07584b..ff8ddd8c12 100644
--- a/lib/content-services/upload/components/file-uploading-list-row.component.scss
+++ b/lib/content-services/upload/components/file-uploading-list-row.component.scss
@@ -15,7 +15,7 @@
.adf-file-uploading-row {
display: flex;
align-items: center;
- padding: 0.5em 1em;
+ padding: 0.3em 1em;
cursor: default;
&:hover {
@@ -34,28 +34,15 @@
min-width: 100px;
display: flex;
justify-content: flex-end;
+ line-height: 40px;
}
&__group--toggle {
cursor: pointer;
-
- .adf-file-uploading-row__status {
- display: flex;
- }
-
- .adf-file-uploading-row__action {
- display: none;
- }
-
- &:hover {
- .adf-file-uploading-row__status {
- display: none;
- }
-
- .adf-file-uploading-row__action {
- display: flex;
- }
- }
+ display:flex;
+ align-items: center;
+ height: 40px;
+ line-height: 40px;
}
&__status--done {
diff --git a/lib/content-services/upload/directives/toggle-icon.directive.spec.ts b/lib/content-services/upload/directives/toggle-icon.directive.spec.ts
new file mode 100644
index 0000000000..bb6b8ccd71
--- /dev/null
+++ b/lib/content-services/upload/directives/toggle-icon.directive.spec.ts
@@ -0,0 +1,91 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * 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 { setupTestBed } from '@alfresco/adf-core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+@Component({
+ selector: 'adf-test-component',
+ template: `
+
+ `
+})
+class TestComponent {
+ @ViewChild(ToggleIconDirective) directive: ToggleIconDirective;
+}
+
+describe('ToggleIconDirective', () => {
+ let fixture: ComponentFixture;
+ let component: TestComponent;
+
+ setupTestBed({
+ declarations: [
+ TestComponent,
+ ToggleIconDirective
+ ]
+ });
+
+ beforeEach(() => {
+ 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/upload/directives/toggle-icon.directive.ts b/lib/content-services/upload/directives/toggle-icon.directive.ts
new file mode 100644
index 0000000000..c9a32891fc
--- /dev/null
+++ b/lib/content-services/upload/directives/toggle-icon.directive.ts
@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * 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/upload/public-api.ts b/lib/content-services/upload/public-api.ts
index b90cfce57a..e7010786f9 100644
--- a/lib/content-services/upload/public-api.ts
+++ b/lib/content-services/upload/public-api.ts
@@ -24,6 +24,7 @@ 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 './pipes/file-upload-error.pipe';
diff --git a/lib/content-services/upload/upload.module.ts b/lib/content-services/upload/upload.module.ts
index bed4e4ca30..75e446a5e0 100644
--- a/lib/content-services/upload/upload.module.ts
+++ b/lib/content-services/upload/upload.module.ts
@@ -27,6 +27,7 @@ import { UploadDragAreaComponent } from './components/upload-drag-area.component
import { FileUploadErrorPipe } from './pipes/file-upload-error.pipe';
import { CoreModule } from '@alfresco/adf-core';
import { FileDraggableDirective } from './directives/file-draggable.directive';
+import { ToggleIconDirective } from './directives/toggle-icon.directive';
@NgModule({
imports: [
@@ -42,7 +43,8 @@ import { FileDraggableDirective } from './directives/file-draggable.directive';
FileUploadingDialogComponent,
FileUploadingListComponent,
FileUploadingListRowComponent,
- FileUploadErrorPipe
+ FileUploadErrorPipe,
+ ToggleIconDirective
],
exports: [
FileDraggableDirective,
@@ -52,7 +54,8 @@ import { FileDraggableDirective } from './directives/file-draggable.directive';
FileUploadingDialogComponent,
FileUploadingListComponent,
FileUploadingListRowComponent,
- FileUploadErrorPipe
+ FileUploadErrorPipe,
+ ToggleIconDirective
]
})
export class UploadModule {}