inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix style dropdown breadcrumb

Browse Source
This commit is contained in:
Eugenio Romano 2019-02-08 02:08:39 +00:00
parent d884c1099b
commit 2b4a69797c
3 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/content-services/breadcrumb/breadcrumb.component.scss
View File

@ -100,12 +100,7 @@
} }
&.adf-active { &.adf-active {
flex: 1 1 auto;
color: mat-color($foreground, text, 0.87); color: mat-color($foreground, text, 0.87);
/* stylelint-disable */
min-width: initial;
/* stylelint-enable */
width: auto;
} }
&-chevron { &-chevron {

37
lib/content-services/breadcrumb/dropdown-breadcrumb.component.html
View File

@ -1,4 +1,4 @@
<ng-container *ngIf="route.length > 0"> <ng-container *ngIf="route.length > 0" class="adf-dropdown-breadcrumb-container">
<button <button
tabindex="0" tabindex="0"
@ -7,27 +7,30 @@
data-automation-id="dropdown-breadcrumb-trigger"> data-automation-id="dropdown-breadcrumb-trigger">
<mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon> <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
</button> </button>
<mat-icon class="adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon> <mat-icon class="adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
<mat-select <div class="adf-dropdown-breadcrumb-path">
#dropdown <mat-select
*ngIf="hasPreviousNodes()" #dropdown
class="adf-dropdown-breadcrumb-path" *ngIf="hasPreviousNodes()"
tabindex="0"
data-automation-id="dropdown-breadcrumb-path" >
<mat-option
*ngFor="let node of previousNodes;"
(click)="onRoutePathClick(node, $event)"
class="adf-dropdown-breadcrumb-path-option"
tabindex="0" tabindex="0"
data-automation-class="dropdown-breadcrumb-path-option"> data-automation-id="dropdown-breadcrumb-path">
{{ node.name | translate }}
</mat-option> <mat-option
</mat-select> *ngFor="let node of previousNodes;"
(click)="onRoutePathClick(node, $event)"
class="adf-dropdown-breadcrumb-path-option"
tabindex="0"
data-automation-class="dropdown-breadcrumb-path-option">
{{ node.name | translate }}
</mat-option>
</mat-select>
</div>
<span <span
class="adf-current-folder" class="adf-current-folder"
[class.adf-isRoot]="!hasPreviousNodes()" [class.adf-isRoot]="!hasPreviousNodes()"
data-automation-id="current-folder">{{ currentNode.name }}</span> data-automation-id="current-folder">{{ currentNode.name }}
</span>
</ng-container> </ng-container>

32
lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss
View File

@ -1,23 +1,42 @@
@mixin adf-breadcrumb-dropdown-theme($theme) { @mixin adf-breadcrumb-dropdown-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$dropdownHorizontalOffset: 30px; $dropdownHorizontalOffset: 30px;
$foreground: map-get($theme, foreground);
.adf { .adf {
&-dropdown-breadcrumb { &-dropdown-breadcrumb {
display: flex; display: flex;
justify-content: flex-start; flex: 1;
width: 100%; line-height: 24px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.2px;
color: mat-color($foreground, text, 0.54);
overflow: hidden;
margin-top: 10px;
.mat-icon {
height: 35px;
}
&-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: default;
display: flex;
overflow: hidden;
}
} }
&-dropdown-breadcrumb-trigger { &-dropdown-breadcrumb-trigger {
height: 0;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
border: none; border: none;
background: transparent; background: transparent;
width: 25px;
&:focus { &:focus {
color: mat-color($primary);
outline: none; outline: none;
} }
} }
@ -46,11 +65,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
width: 75%; width: 75%;
line-height: 27px;
}
&-current-folder.adf-isRoot {
margin-left: 0;
} }
&-dropdown-breadcrumb-path-option.mat-option { &-dropdown-breadcrumb-path-option.mat-option {