-
Notifications
You must be signed in to change notification settings - Fork 125
/
shellbar-actions.component.html
126 lines (126 loc) · 6.18 KB
/
shellbar-actions.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<div class="fd-shellbar__actions">
<div *ngIf="searchInputComponent" class="fd-shellbar__action fd-shellbar__action--collapsible">
<div class="fd-search-input fd-search-input--closed">
<ng-content select="fd-search-input"></ng-content>
</div>
</div>
<div *ngIf="actionsCollapsed && shellbarActions.length"
class="fd-shellbar__action fd-shellbar__action--collapse">
<div class="fd-shellbar-collapse">
<fd-popover [options]="{placement: 'bottom-end'}"
[focusTrapped]="false">
<fd-popover-control>
<div class="fd-shellbar-collapse--control">
<button class="fd-button--shell sap-icon--overflow"
[attr.aria-label]="collapsedItemMenuLabel">
<span *ngIf="totalNotifications"
class="fd-counter fd-counter--notification">{{totalNotifications}}</span>
</button>
</div>
</fd-popover-control>
<fd-popover-body>
<fd-menu>
<ul fd-menu-list
*ngIf="!showCollapsedProducts">
<div *ngFor="let action of shellbarActions"
class="fd-menu__addon-before">
<span [ngClass]="'sap-icon--' + action.glyph"></span>
</div>
<li fd-menu-item
*ngFor="let action of shellbarActions"
(click)="action.callback($event)">
{{action.label}}
</li>
<div *ngIf="productSwitcher"
class="fd-menu__addon-before">
<span [ngClass]="'sap-icon--grid'"></span>
</div>
<li fd-menu-item
*ngIf="productSwitcher"
(click)="toggleCollapsedProducts($event);">
Product Switcher
</li>
</ul>
<ul fd-menu-list
*ngIf="showCollapsedProducts">
<li fd-menu-item
(click)="toggleCollapsedProducts($event)">
<span class="fd-menu__item sap-icon--nav-back"></span>
</li>
<hr>
<li fd-menu-item
*ngFor="let product of productSwitcher"
(click)="product.callback($event)">
{{product.title}}
</li>
</ul>
</fd-menu>
</fd-popover-body>
</fd-popover>
</div>
</div>
<ng-content></ng-content>
<ng-content select="fd-shellbar-action"></ng-content>
<ng-container *ngIf="user">
<div class="fd-shellbar__action fd-shellbar__action--show-always">
<div class="fd-user-menu">
<fd-popover [options]="{placement: 'bottom-end'}"
[focusTrapped]="false">
<fd-popover-control>
<div class="fd-user-menu__control">
<span *ngIf="!user.image"
class="fd-identifier fd-identifier--xs fd-identifier--circle"
[ngClass]="(user.colorAccent ? 'fd-has-background-color-accent-' + user.colorAccent : '')">
{{user.initials}}
</span>
<span *ngIf="user.image"
class="fd-identifier fd-identifier--xs fd-identifier--circle fd-identifier--thumbnail"
[ngStyle]="{'background-image': 'url(' + user.image + ')'}">
</span>
</div>
</fd-popover-control>
<fd-popover-body>
<fd-menu>
<ul fd-menu-list>
<li fd-menu-item
*ngFor="let item of userMenu"
(click)="item.callback($event)">
{{item.text}}
</li>
</ul>
</fd-menu>
</fd-popover-body>
</fd-popover>
</div>
</div>
</ng-container>
<ng-container *ngIf="productSwitcher">
<div class="fd-shellbar__action fd-shellbar__action--collapsible">
<div class="fd-product-switcher">
<fd-popover [options]="{placement: 'bottom-end'}"
[focusTrapped]="false">
<fd-popover-control>
<button class="fd-button--shell sap-icon--grid"></button>
</fd-popover-control>
<fd-popover-body>
<div class="fd-product-switcher__body">
<nav>
<ul>
<li *ngFor="let product of productSwitcher"
(click)="product.callback($event)">
<span class="fd-product-switcher__product-icon">
<img [src]="product.image">
</span>
<span class="fd-product-switcher__product-title">
{{product.title}}
</span>
</li>
</ul>
</nav>
</div>
</fd-popover-body>
</fd-popover>
</div>
</div>
</ng-container>
</div>