From 6412697d969fac9f220ffae9cf51d861781eca97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Baptiste=20Mah=C3=A9?= Date: Mon, 8 Jun 2020 10:46:45 +0200 Subject: [PATCH] [ACA-3407] New component : Filter Menu created and implemented inside the Document List (#5748) * [ACA-3407] New component : Filter Menu, implemented inside the Document List * [ACA-3407] Refactor click method * [ACA-3407] Update Filter Icon style * [ACA-3407] Add filter icon and update tooltip with column name --- .../components/document-list.component.html | 2 +- .../components/document-list.component.scss | 7 ++++ .../filter-menu/filter-menu.component.html | 16 +++++++++ .../filter-menu/filter-menu.component.ts | 33 +++++++++++++++++++ .../lib/document-list/document-list.module.ts | 4 ++- lib/content-services/src/lib/i18n/en.json | 5 +++ lib/core/assets/images/ft_ic_filter.svg | 6 ++++ .../datatable/datatable.component.scss | 2 +- lib/core/services/thumbnail.service.ts | 3 +- 9 files changed, 74 insertions(+), 4 deletions(-) create mode 100644 lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.html create mode 100644 lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.ts create mode 100644 lib/core/assets/images/ft_ic_filter.svg diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.html b/lib/content-services/src/lib/document-list/components/document-list.component.html index 4b9b7bfe59..cc38bf6588 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.html +++ b/lib/content-services/src/lib/document-list/components/document-list.component.html @@ -25,7 +25,7 @@ [class.adf-datatable-gallery-thumbnails]="data.thumbnails"> - + diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.scss b/lib/content-services/src/lib/document-list/components/document-list.component.scss index aae8c1b5af..a180a03c15 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.scss +++ b/lib/content-services/src/lib/document-list/components/document-list.component.scss @@ -207,4 +207,11 @@ } } } + + .adf-filter-button { + mat-icon { + height: 18px; + width: 18px; + } + } } diff --git a/lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.html b/lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.html new file mode 100644 index 0000000000..c161f11f68 --- /dev/null +++ b/lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.html @@ -0,0 +1,16 @@ + + + +
{{col.title}}
+ + + + + diff --git a/lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.ts b/lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.ts new file mode 100644 index 0000000000..1624476db1 --- /dev/null +++ b/lib/content-services/src/lib/document-list/components/filter-menu/filter-menu.component.ts @@ -0,0 +1,33 @@ +/*! + * @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, Input } from '@angular/core'; +import { DataColumn } from '@alfresco/adf-core'; + +@Component({ + selector: 'adf-filter-menu', + templateUrl: './filter-menu.component.html' +}) +export class FilterMenuComponent { + + @Input() + col: DataColumn; + + onMenuButtonClick(event: Event) { + event.stopPropagation(); + } +} diff --git a/lib/content-services/src/lib/document-list/document-list.module.ts b/lib/content-services/src/lib/document-list/document-list.module.ts index c68b545bd5..0f37fa5629 100644 --- a/lib/content-services/src/lib/document-list/document-list.module.ts +++ b/lib/content-services/src/lib/document-list/document-list.module.ts @@ -32,6 +32,7 @@ import { LibraryStatusColumnComponent } from './components/library-status-column import { LibraryRoleColumnComponent } from './components/library-role-column/library-role-column.component'; import { LibraryNameColumnComponent } from './components/library-name-column/library-name-column.component'; import { NameColumnComponent } from './components/name-column/name-column.component'; +import { FilterMenuComponent } from './components/filter-menu/filter-menu.component'; @NgModule({ imports: [ @@ -50,7 +51,8 @@ import { NameColumnComponent } from './components/name-column/name-column.compon LibraryNameColumnComponent, NameColumnComponent, ContentActionComponent, - ContentActionListComponent + ContentActionListComponent, + FilterMenuComponent ], exports: [ DocumentListComponent, diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json index 15c1d0d326..594ef711a7 100644 --- a/lib/content-services/src/lib/i18n/en.json +++ b/lib/content-services/src/lib/i18n/en.json @@ -62,6 +62,11 @@ "VIEW": "View", "REMOVE": "Remove", "DOWNLOAD": "Download" + }, + "FILTER_MENU" : { + "FILTER_BY": "Filter by {{ category }}", + "CLEAR": "Clear", + "APPLY": "Apply" } }, "ALFRESCO_DOCUMENT_LIST": { diff --git a/lib/core/assets/images/ft_ic_filter.svg b/lib/core/assets/images/ft_ic_filter.svg new file mode 100644 index 0000000000..f354e8aceb --- /dev/null +++ b/lib/core/assets/images/ft_ic_filter.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss index cd60570ceb..7809237694 100644 --- a/lib/core/datatable/components/datatable/datatable.component.scss +++ b/lib/core/datatable/components/datatable/datatable.component.scss @@ -424,7 +424,7 @@ } } &--fileSize .adf-datatable-cell-value { - padding: 0; + padding: 0 10px 0 0; } } diff --git a/lib/core/services/thumbnail.service.ts b/lib/core/services/thumbnail.service.ts index 771a980d95..32709d1861 100644 --- a/lib/core/services/thumbnail.service.ts +++ b/lib/core/services/thumbnail.service.ts @@ -157,7 +157,8 @@ export class ThumbnailService { 'disable/folder': './assets/images/ft_ic_folder_disable.svg', 'selected': './assets/images/ft_ic_selected.svg', 'dynamic-feed': './assets/images/dynamic_feed-24px.svg', - 'ic-process': './assets/images/ic-process.svg' + 'ic-process': './assets/images/ic-process.svg', + 'filter': './assets/images/ft_ic_filter.svg' }; constructor(protected apiService: AlfrescoApiService, matIconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {