diff --git a/lib/content-services/content-node-selector/content-node-selector.component.html b/lib/content-services/content-node-selector/content-node-selector.component.html index 077490330d..709dbc122c 100644 --- a/lib/content-services/content-node-selector/content-node-selector.component.html +++ b/lib/content-services/content-node-selector/content-node-selector.component.html @@ -1,31 +1,31 @@
{{title}} + class="adf-content-node-selector-title" + data-automation-id="content-node-selector-title">{{title}}
+ class="adf-content-node-selector-content" + (node-select)="onNodeSelect($event)"> + id="searchInput" + [formControl]="searchInput" + type="text" + placeholder="Search" + [value]="searchTerm" + data-automation-id="content-node-selector-search-input"> clear + matSuffix (click)="clear()" + class="adf-content-node-selector-content-input-icon" + data-automation-id="content-node-selector-search-clear">clear search + matSuffix + class="adf-content-node-selector-content-input-icon" + data-automation-id="content-node-selector-search-icon">search @@ -40,20 +40,23 @@ + class="adf-content-node-selector-content-breadcrumb" + (navigate)="clear()" + [target]="documentList" + [folderNode]="breadcrumbFolderNode" + data-automation-id="content-node-selector-content-breadcrumb"> -
+
{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}
+ + + + + + + + + + + + diff --git a/lib/content-services/content-node-selector/content-node-selector.component.scss b/lib/content-services/content-node-selector/content-node-selector.component.scss index e4de262546..0d604902b0 100644 --- a/lib/content-services/content-node-selector/content-node-selector.component.scss +++ b/lib/content-services/content-node-selector/content-node-selector.component.scss @@ -62,6 +62,27 @@ .adf-toolbar .mat-toolbar { border-bottom-width: 0; font-size: 14px; + + &.mat-toolbar-single-row { + height: auto; + } + } + + &-breadcrumb { + .adf-dropdown-breadcumb-trigger { + outline: none; + .mat-icon { + color: mat-color($foreground, base, 0.45); + + &:hover { + color: mat-color($foreground, base, 0.65); + } + } + } + + .adf-dropddown-breadcrumb-item-chevron { + color: mat-color($foreground, base, 0.45); + } } &-list { @@ -87,9 +108,16 @@ .adf-data-table-cell { padding-top: 8px; padding-bottom: 8px; - border-top: none; height: 30px; + & .adf-name-location-cell-location { + display: none; + } + + & .adf-name-location-cell-name { + padding: 0; + } + &--image { padding-left: 16px; padding-right: 8px; @@ -103,6 +131,12 @@ tbody tr { height: auto !important; + &:first-child { + .adf-data-table-cell { + border-top: none; + } + } + &:last-child { .adf-data-table-cell { border-bottom: none; @@ -110,6 +144,32 @@ } } } + + &-searchLayout { + + .adf-data-table { + .adf-data-table-cell { + height: 56px; + padding-bottom: 24px; + + & .adf-name-location-cell-location { + display: block + } + + & .adf-name-location-cell-name { + padding: 18px 0 2px 0; + } + + &.adf-content-selector-modified-cell { + display: none; + } + + &.adf-content-selector-modifier-cell { + display: none; + } + } + } + } } } diff --git a/lib/content-services/content-node-selector/content-node-selector.module.ts b/lib/content-services/content-node-selector/content-node-selector.module.ts index 03a3c36c22..780775ce05 100644 --- a/lib/content-services/content-node-selector/content-node-selector.module.ts +++ b/lib/content-services/content-node-selector/content-node-selector.module.ts @@ -25,8 +25,9 @@ import { ContentNodeSelectorComponent } from './content-node-selector.component' import { ContentNodeSelectorService } from './content-node-selector.service'; import { SitesDropdownModule } from '../site-dropdown/sites-dropdown.module'; import { BreadcrumbModule } from '../breadcrumb/breadcrumb.module'; -import { PaginationModule, ToolbarModule, DirectiveModule } from '@alfresco/adf-core'; +import { PaginationModule, ToolbarModule, DirectiveModule, DataColumnModule, DataTableModule } from '@alfresco/adf-core'; import { DocumentListModule } from '../document-list/document-list.module'; +import { NameLocationCellComponent } from './name-location-cell/name-location-cell.component'; @NgModule({ imports: [ @@ -40,6 +41,8 @@ import { DocumentListModule } from '../document-list/document-list.module'; BreadcrumbModule, ToolbarModule, DocumentListModule, + DataColumnModule, + DataTableModule, PaginationModule ], exports: [ @@ -49,7 +52,8 @@ import { DocumentListModule } from '../document-list/document-list.module'; ContentNodeSelectorComponent ], declarations: [ - ContentNodeSelectorComponent + ContentNodeSelectorComponent, + NameLocationCellComponent ], providers: [ ContentNodeSelectorService diff --git a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.scss b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.scss new file mode 100644 index 0000000000..cb3aec5dd0 --- /dev/null +++ b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.scss @@ -0,0 +1,13 @@ +@mixin adf-name-location-cell-theme($theme) { + $foreground: map-get($theme, foreground); + + .adf-name-location-cell { + &-location { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: mat-color($foreground, base, 0.5); + font-size: 12px; + } + } +} diff --git a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.spec.ts b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.spec.ts new file mode 100644 index 0000000000..72376c2b35 --- /dev/null +++ b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.spec.ts @@ -0,0 +1,65 @@ +/*! + * @license + * Copyright 2016 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 { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NameLocationCellComponent } from './name-location-cell.component'; +import { By } from '@angular/platform-browser'; +import { DataRow } from '@alfresco/adf-core'; + +describe('NameLocationCellComponent', () => { + let component: NameLocationCellComponent; + let fixture: ComponentFixture; + let rowData: DataRow; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + NameLocationCellComponent + ] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NameLocationCellComponent); + component = fixture.componentInstance; + + rowData = { + getValue(key) { + if (key === 'name') { + return 'file-name'; + } else if (key === 'path') { + return { name: '/path/to/location' }; + } + } + }; + component.row = rowData; + fixture.detectChanges(); + }); + + it('should set fileName and location properly', () => { + const fileName = fixture.debugElement.query(By.css('.adf-name-location-cell-name')).nativeElement.innerText; + const location = fixture.debugElement.query(By.css('.adf-name-location-cell-location')).nativeElement.innerText; + expect(fileName).toBe('file-name'); + expect(location).toBe('/path/to/location'); + }); + + it('should set tooltip properly', () => { + const tooltip = fixture.debugElement.query(By.css('.adf-name-location-cell-location')).nativeElement.getAttribute('title'); + + expect(tooltip).toEqual('/path/to/location'); + }); +}); diff --git a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts new file mode 100644 index 0000000000..61800cbc9d --- /dev/null +++ b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts @@ -0,0 +1,43 @@ +/*! + * @license + * Copyright 2016 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 { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { DataTableCellComponent } from '@alfresco/adf-core'; + +@Component({ + selector: 'adf-name-location-cell', + template: ` +
{{ name }}
+
{{ path?.name }}
+ `, + styleUrls: ['./name-location-cell.component.scss'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'adf-name-location-cell' } +}) +export class NameLocationCellComponent extends DataTableCellComponent implements OnInit { + + path: string = ''; + name: string = ''; + + ngOnInit() { + if (this.row) { + this.path = this.row.getValue('path'); + this.name = this.row.getValue('name'); + } + } +} diff --git a/lib/content-services/styles/_index.scss b/lib/content-services/styles/_index.scss index 5bae304533..fa1d3c35bd 100644 --- a/lib/content-services/styles/_index.scss +++ b/lib/content-services/styles/_index.scss @@ -1,6 +1,7 @@ @import '../breadcrumb/breadcrumb.component'; @import '../breadcrumb/dropdown-breadcrumb.component'; @import '../content-node-selector/content-node-selector.component'; +@import '../content-node-selector/name-location-cell/name-location-cell.component'; @import '../document-list/components/document-list.component'; @import '../upload/components/file-uploading-list-row.component'; @@ -18,6 +19,7 @@ @include adf-breadcrumb-theme($theme); @include adf-breadcrumb-dropdown-theme($theme); @include adf-content-node-selector-theme($theme) ; + @include adf-name-location-cell-theme($theme); @include adf-document-list-theme($theme) ; @include adf-file-uploading-row-theme($theme); @include adf-upload-dialog-theme($theme);