diff --git a/lib/content-services/breadcrumb/breadcrumb.component.html b/lib/content-services/breadcrumb/breadcrumb.component.html index 57b5c6833a..80b0fc20d9 100644 --- a/lib/content-services/breadcrumb/breadcrumb.component.html +++ b/lib/content-services/breadcrumb/breadcrumb.component.html @@ -1,29 +1,46 @@
-
  • - - - {{ item.name | translate }} - - -
    - {{ item.name | translate }} -
    - - - chevron_right - -
    • -
    -
    -
  • -
    - {{ root | translate }} -
    -
    • -
    + + + + + + {{ node.name }} + + + +
  • + + + {{ item.name | translate }} + + +
    + {{ item.name | translate }} +
    + + + chevron_right + +
    • + \ No newline at end of file diff --git a/lib/content-services/breadcrumb/breadcrumb.component.scss b/lib/content-services/breadcrumb/breadcrumb.component.scss index d75d520736..b8c8ee86d1 100644 --- a/lib/content-services/breadcrumb/breadcrumb.component.scss +++ b/lib/content-services/breadcrumb/breadcrumb.component.scss @@ -1,10 +1,11 @@ -$breadcrumb-chevron-spacer: 2px; - @mixin adf-breadcrumb-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); $foreground: map-get($theme, foreground); + $background: map-get($theme, background); + + $breadcrumb-chevron-spacer: 2px; .adf-breadcrumb { display: flex; @@ -23,15 +24,62 @@ $breadcrumb-chevron-spacer: 2px; cursor: default; display: flex; overflow: hidden; - height: 25px; + } + + &-dropdown { + &-path { + width: 0; + height: 0; + overflow: hidden; + margin-top: 35px; + + &.mat-select { + width: 0; + } + } + + &-trigger { + cursor: pointer; + padding: 0; + border: none; + background: transparent; + width: 30px; + margin-top: 2px; + margin-right: 5px; + + &:focus { + color: mat-color($primary); + outline: none; + } + + &-arrow { + font-size: 17px; + position: relative; + left: -28px; + top: -2px; + color: white; + z-index: 2; + } + + &-arrow.isRoot { + visibility: hidden; + } + + &-arrow.focus { + border: none; + } + } + + &-trigger.isRoot { + cursor: not-allowed; + } } &-item { padding-right: $breadcrumb-chevron-spacer; overflow: hidden; display: flex; - line-height: 24px; - + line-height: 33px; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; @@ -50,6 +98,8 @@ $breadcrumb-chevron-spacer: 2px; &-chevron { opacity: 1; + margin-top: 9px; + font-size: 17px; } &.mat-primary { @@ -77,6 +127,18 @@ $breadcrumb-chevron-spacer: 2px; &.active { display: block; } + + &-current { + text-overflow: ellipsis; + overflow: hidden; + max-width: 300px; + } + } + + &-path-option { + &.mat-option { + background-color: mat-color($background, card); + } } } -} +} \ No newline at end of file diff --git a/lib/content-services/breadcrumb/breadcrumb.component.ts b/lib/content-services/breadcrumb/breadcrumb.component.ts index 564d9197b6..d3e030baf8 100644 --- a/lib/content-services/breadcrumb/breadcrumb.component.ts +++ b/lib/content-services/breadcrumb/breadcrumb.component.ts @@ -15,16 +15,8 @@ * limitations under the License. */ -import { - Component, - EventEmitter, - Input, - OnChanges, - Output, - SimpleChanges, - ViewEncapsulation, - OnInit -} from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core'; +import { MatSelect } from '@angular/material'; import { MinimalNodeEntryEntity, PathElementEntity } from 'alfresco-js-api'; import { DocumentListComponent } from '../document-list'; @@ -70,6 +62,16 @@ export class BreadcrumbComponent implements OnInit, OnChanges { @Input() transform: (node) => any; + @ViewChild('select') selectbox: MatSelect; + + previousNodes: PathElementEntity[]; + lastNodes: PathElementEntity[]; + + /** Number of successive nodes that are going to be shown inside the + * breadcrumb + */ + SUCCESSIVE_NODES = 3; + route: PathElementEntity[] = []; get hasRoot(): boolean { @@ -95,6 +97,28 @@ export class BreadcrumbComponent implements OnInit, OnChanges { let node = this.transform ? this.transform(this.folderNode) : this.folderNode; this.route = this.parseRoute(node); } + this.recalculateNodes(); + } + + protected recalculateNodes(): void { + if (this.route.length > this.SUCCESSIVE_NODES) { + this.lastNodes = this.route.slice(this.route.length - this.SUCCESSIVE_NODES); + this.previousNodes = this.route.slice(0, this.route.length - this.SUCCESSIVE_NODES); + this.previousNodes.reverse(); + } else { + this.lastNodes = this.route; + this.previousNodes = null; + } + } + + open(): void { + if (this.selectbox) { + this.selectbox.open(); + } + } + + hasPreviousNodes(): boolean { + return this.previousNodes ? true : false; } parseRoute(node: MinimalNodeEntryEntity): PathElementEntity[] { diff --git a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss index 2a34d8dbaf..c9ada8fcb3 100644 --- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss +++ b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss @@ -1,4 +1,3 @@ - @mixin adf-breadcrumb-dropdown-theme($theme) { $primary: map-get($theme, primary); $dropdownHorizontalOffset: 30px; @@ -15,6 +14,11 @@ padding: 0; border: none; background: transparent; + + &:focus { + color: mat-color($primary); + outline: none; + } } &-dropdown-breadcrumb-item-chevron { @@ -39,7 +43,7 @@ &-current-folder { text-align: left; - line-height: 33px; + line-height: 25px; margin-left: $dropdownHorizontalOffset; white-space: nowrap; overflow: hidden; diff --git a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts index 1bc0a05664..2b59a0174d 100644 --- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts +++ b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts @@ -17,7 +17,7 @@ import { Component, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core'; import { MatSelect } from '@angular/material'; -import { PathElementEntity } from 'alfresco-js-api'; +import { PathElementEntity, MinimalNodeEntryEntity } from 'alfresco-js-api'; import { BreadcrumbComponent } from './breadcrumb.component'; @Component({ @@ -38,14 +38,23 @@ export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements previousNodes: PathElementEntity[]; ngOnChanges(changes: SimpleChanges): void { - super.ngOnChanges(changes); + if (changes.folderNode) { + let node: MinimalNodeEntryEntity = null; + node = this.transform ? this.transform(changes.folderNode.currentValue) : changes.folderNode.currentValue; + this.route = this.parseRoute(node); + } + + if (changes.transform) { + let node = this.transform ? this.transform(this.folderNode) : this.folderNode; + this.route = this.parseRoute(node); + } this.recalculateNodes(); } /** * Calculate the current and previous nodes from the route array */ - private recalculateNodes(): void { + protected recalculateNodes(): void { this.currentNode = this.route[this.route.length - 1]; this.previousNodes = this.route.slice(0, this.route.length - 1).reverse(); } diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss index 68a1e91ef1..71ef28c063 100644 --- a/lib/core/datatable/components/datatable/datatable.component.scss +++ b/lib/core/datatable/components/datatable/datatable.component.scss @@ -390,7 +390,9 @@ .ellipsis-cell { .cell-container { height: 100%; - } + display: inline-grid; + width: 100%; + } .cell-container > * { display: block;