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 {
flex: 1 1 auto;
color: mat-color($foreground, text, 0.87);
/* stylelint-disable */
min-width: initial;
/* stylelint-enable */
width: auto;
}
&-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
tabindex="0"
@ -7,27 +7,30 @@
data-automation-id="dropdown-breadcrumb-trigger">
<mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
</button>
<mat-icon class="adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
<mat-select
#dropdown
*ngIf="hasPreviousNodes()"
class="adf-dropdown-breadcrumb-path"
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"
<div class="adf-dropdown-breadcrumb-path">
<mat-select
#dropdown
*ngIf="hasPreviousNodes()"
tabindex="0"
data-automation-class="dropdown-breadcrumb-path-option">
{{ node.name | translate }}
</mat-option>
</mat-select>
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"
data-automation-class="dropdown-breadcrumb-path-option">
{{ node.name | translate }}
</mat-option>
</mat-select>
</div>
<span
class="adf-current-folder"
[class.adf-isRoot]="!hasPreviousNodes()"
data-automation-id="current-folder">{{ currentNode.name }}</span>
data-automation-id="current-folder">{{ currentNode.name }}
</span>
</ng-container>

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

@ -1,23 +1,42 @@
@mixin adf-breadcrumb-dropdown-theme($theme) {
$primary: map-get($theme, primary);
$dropdownHorizontalOffset: 30px;
$foreground: map-get($theme, foreground);
.adf {
&-dropdown-breadcrumb {
display: flex;
justify-content: flex-start;
width: 100%;
flex: 1;
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 {
height: 0;
cursor: pointer;
padding: 0;
border: none;
background: transparent;
width: 25px;
&:focus {
color: mat-color($primary);
outline: none;
}
}
@ -46,11 +65,6 @@
text-overflow: ellipsis;
display: inline-block;
width: 75%;
line-height: 27px;
}
&-current-folder.adf-isRoot {
margin-left: 0;
}
&-dropdown-breadcrumb-path-option.mat-option {