mirror of https://github.com/abpframework/abp.git
Sinan997
3 years ago
23 changed files with 432 additions and 391 deletions
@ -1,65 +1,65 @@ |
|||||
<ng-template #loginBtn> |
@if ((currentUser$ | async)?.isAuthenticated) { |
||||
<a role="button" class="nav-link pointer" (click)="navigateToLogin()">{{ |
|
||||
'AbpAccount::Login' | abpLocalization |
|
||||
}}</a> |
|
||||
</ng-template> |
|
||||
<div |
|
||||
*ngIf="(currentUser$ | async)?.isAuthenticated; else loginBtn" |
|
||||
ngbDropdown |
|
||||
class="dropdown" |
|
||||
#currentUserDropdown="ngbDropdown" |
|
||||
display="static" |
|
||||
> |
|
||||
<a |
|
||||
ngbDropdownToggle |
|
||||
class="nav-link" |
|
||||
href="javascript:void(0)" |
|
||||
role="button" |
|
||||
id="dropdownMenuLink" |
|
||||
data-toggle="dropdown" |
|
||||
aria-haspopup="true" |
|
||||
aria-expanded="false" |
|
||||
> |
|
||||
<small *ngIf="(selectedTenant$ | async)?.name as tenantName" |
|
||||
><i>{{ tenantName }}</i |
|
||||
>\</small |
|
||||
> |
|
||||
<strong>{{ (currentUser$ | async)?.userName }}</strong> |
|
||||
</a> |
|
||||
<div |
<div |
||||
class="dropdown-menu dropdown-menu-end border-0 shadow-sm" |
*ngIf="(currentUser$ | async)?.isAuthenticated" |
||||
aria-labelledby="dropdownMenuLink" |
ngbDropdown |
||||
[class.d-block]="smallScreen && currentUserDropdown.isOpen()" |
class="dropdown" |
||||
|
#currentUserDropdown="ngbDropdown" |
||||
|
display="static" |
||||
> |
> |
||||
<ng-container *ngFor="let item of userMenu.items$ | async; trackBy: trackByFn"> |
<a |
||||
<ng-container *abpVisible="!item.visible || item.visible(item)"> |
ngbDropdownToggle |
||||
<li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy"> |
class="nav-link" |
||||
<ng-container |
href="javascript:void(0)" |
||||
*ngIf="item.component; else htmlTemplate" |
role="button" |
||||
[ngComponentOutlet]="item.component" |
id="dropdownMenuLink" |
||||
[ngComponentOutletInjector]="item | toInjector" |
data-toggle="dropdown" |
||||
></ng-container> |
aria-haspopup="true" |
||||
|
aria-expanded="false" |
||||
<ng-template #htmlTemplate> |
> |
||||
<div |
@if ((selectedTenant$ | async)?.name; as tenantName) { |
||||
*ngIf="item.html; else textTemplate" |
<small |
||||
[innerHTML]="item.html" |
><i>{{ tenantName }}</i |
||||
(click)="item.action ? item.action() : null" |
>\</small |
||||
></div> |
> |
||||
</ng-template> |
} |
||||
|
<strong>{{ (currentUser$ | async)?.userName }}</strong> |
||||
<ng-template #textTemplate> |
</a> |
||||
<a |
<div |
||||
*ngIf="item.textTemplate" |
class="dropdown-menu dropdown-menu-end border-0 shadow-sm" |
||||
(click)="item.action ? item.action() : null" |
aria-labelledby="dropdownMenuLink" |
||||
class="dropdown-item pointer" |
[class.d-block]="smallScreen && currentUserDropdown.isOpen()" |
||||
> |
> |
||||
<i *ngIf="item.textTemplate.icon" class="me-1 {{ item.textTemplate.icon }}"></i> |
@for (item of userMenu.items$ | async; track $index) { |
||||
{{ item.textTemplate.text | abpLocalization }}</a |
<ng-container *abpVisible="!item.visible || item.visible(item)"> |
||||
> |
<li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy"> |
||||
</ng-template> |
@if (item.component) { |
||||
</li> |
<ng-container |
||||
</ng-container> |
[ngComponentOutlet]="item.component" |
||||
</ng-container> |
[ngComponentOutletInjector]="item | toInjector" |
||||
|
></ng-container> |
||||
|
} @else { |
||||
|
@if (item.html) { |
||||
|
<div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div> |
||||
|
} @else { |
||||
|
@if (item.textTemplate) { |
||||
|
<a (click)="item.action ? item.action() : null" class="dropdown-item pointer"> |
||||
|
@if (item.textTemplate.icon) { |
||||
|
<i class="me-1 {{ item.textTemplate.icon }}"></i> |
||||
|
} |
||||
|
{{ item.textTemplate.text | abpLocalization }}</a |
||||
|
> |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</li> |
||||
|
</ng-container> |
||||
|
} |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
} @else { |
||||
|
<ng-template #loginBtn> |
||||
|
<a role="button" class="nav-link pointer" (click)="navigateToLogin()">{{ |
||||
|
'AbpAccount::Login' | abpLocalization |
||||
|
}}</a> |
||||
|
</ng-template> |
||||
|
} |
||||
|
|||||
@ -1,18 +1,16 @@ |
|||||
<ul class="navbar-nav"> |
<ul class="navbar-nav"> |
||||
<ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn"> |
@for (item of navItems.items$ | async; track $index) { |
||||
<ng-container *abpVisible="!item.visible || item.visible(item)"> |
<ng-container *abpVisible="!item.visible || item.visible(item)"> |
||||
<li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy"> |
<li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy"> |
||||
<ng-container |
@if (item.component) { |
||||
|
<ng-container |
||||
*ngIf="item.component; else htmlTemplate" |
[ngComponentOutlet]="item.component" |
||||
[ngComponentOutlet]="item.component" |
[ngComponentOutletInjector]="item | toInjector" |
||||
[ngComponentOutletInjector]="item | toInjector" |
></ng-container> |
||||
></ng-container> |
} @else { |
||||
|
|
||||
<ng-template #htmlTemplate> |
|
||||
<div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div> |
<div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div> |
||||
</ng-template> |
} |
||||
</li> |
</li> |
||||
</ng-container> |
</ng-container> |
||||
</ng-container> |
} |
||||
</ul> |
</ul> |
||||
|
|||||
@ -1,24 +1,26 @@ |
|||||
<ng-container *ngFor="let alert of service.alerts$ | async; let i = index"> |
@for (alert of service.alerts$ | async; track i; let i = $index) { |
||||
<div |
<div |
||||
class="alert alert-{{ alert.type }} fade show" |
class="alert alert-{{ alert.type }} fade show" |
||||
[ngClass]="{ 'alert-dismissible fade show': alert.dismissible }" |
[ngClass]="{ 'alert-dismissible fade show': alert.dismissible }" |
||||
role="alert" |
role="alert" |
||||
> |
> |
||||
<h4 |
@if (alert.title) { |
||||
class="alert-heading" |
<h4 |
||||
*ngIf="alert.title" |
class="alert-heading" |
||||
[innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams" |
[innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams" |
||||
></h4> |
></h4> |
||||
|
} |
||||
<span |
<span |
||||
[innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams" |
[innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams" |
||||
></span> |
></span> |
||||
<button |
@if (alert.dismissible) { |
||||
*ngIf="alert.dismissible" |
<button |
||||
type="button" |
type="button" |
||||
class="btn-close" |
class="btn-close" |
||||
data-dismiss="alert" |
data-dismiss="alert" |
||||
aria-label="Close" |
aria-label="Close" |
||||
(click)="service.remove(i)" |
(click)="service.remove(i)" |
||||
></button> |
></button> |
||||
|
} |
||||
</div> |
</div> |
||||
</ng-container> |
} |
||||
|
|||||
@ -1,42 +1,51 @@ |
|||||
<div class="confirmation" *ngIf="confirmation$ | async as data"> |
@if (confirmation$ | async; as data) { |
||||
<div |
<div class="confirmation"> |
||||
class="confirmation-backdrop" |
<div |
||||
(click)="data.options?.dismissible ? close(dismiss) : null" |
class="confirmation-backdrop" |
||||
></div> |
(click)="data.options?.dismissible ? close(dismiss) : null" |
||||
<div class="confirmation-dialog"> |
></div> |
||||
<div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity || isCustomIconExists(data)"> |
<div class="confirmation-dialog"> |
||||
<div [outerHTML]="data.options.iconTemplate" *ngIf="isIconTemplateExits(data); else iconHolder" ></div> |
@if (data.severity || isCustomIconExists(data)) { |
||||
<ng-template #iconHolder> |
<div class="icon-container" [ngClass]="data.severity"> |
||||
<i class="icon" [ngClass]="getIconClass(data)"></i> |
@if (isIconTemplateExits(data)) { |
||||
</ng-template> |
<div [outerHTML]="data.options.iconTemplate"></div> |
||||
</div> |
} @else { |
||||
<div class="content"> |
<i class="icon" [ngClass]="getIconClass(data)"></i> |
||||
<h1 |
} |
||||
class="title" |
</div> |
||||
*ngIf="data.title" |
} |
||||
[innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams" |
<div class="content"> |
||||
></h1> |
@if (data.title) { |
||||
<p |
<h1 |
||||
class="message" |
class="title" |
||||
*ngIf="data.message" |
[innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams" |
||||
[innerHTML]="data.message | abpLocalization: data.options?.messageLocalizationParams" |
></h1> |
||||
></p> |
} |
||||
</div> |
@if (data.message) { |
||||
<div class="footer"> |
<p |
||||
<button |
class="message" |
||||
id="cancel" |
[innerHTML]="data.message | abpLocalization: data.options?.messageLocalizationParams" |
||||
class="btn btn-outline-primary me-2" |
></p> |
||||
[innerHTML]="data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization" |
} |
||||
*ngIf="!data?.options?.hideCancelBtn" |
</div> |
||||
(click)="close(reject)" |
<div class="footer"> |
||||
></button> |
@if (!data?.options?.hideCancelBtn) { |
||||
<button |
<button |
||||
id="confirm" |
id="cancel" |
||||
class="btn btn-primary" |
class="btn btn-outline-primary me-2" |
||||
[innerHTML]="data.options?.yesText || 'AbpUi::Yes' | abpLocalization" |
[innerHTML]="data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization" |
||||
*ngIf="!data?.options?.hideYesBtn" |
(click)="close(reject)" |
||||
(click)="close(confirm)" |
></button> |
||||
></button> |
} |
||||
|
@if (!data?.options?.hideYesBtn) { |
||||
|
<button |
||||
|
id="confirm" |
||||
|
class="btn btn-primary" |
||||
|
[innerHTML]="data.options?.yesText || 'AbpUi::Yes' | abpLocalization" |
||||
|
(click)="close(confirm)" |
||||
|
></button> |
||||
|
} |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
} |
||||
|
|||||
@ -1,21 +1,27 @@ |
|||||
<ng-content></ng-content> |
<ng-content></ng-content> |
||||
|
|
||||
<ng-template #modalContent let-modal> |
<ng-template #modalContent let-modal> |
||||
<div *ngIf="abpHeader" id="abp-modal-header" class="modal-header abp-modal-header"> |
@if (abpHeader) { |
||||
<ng-container *ngTemplateOutlet="abpHeader"></ng-container> |
<div id="abp-modal-header" class="modal-header abp-modal-header"> |
||||
|
<ng-container *ngTemplateOutlet="abpHeader"></ng-container> |
||||
<button |
|
||||
id="abp-modal-close-button" |
<button |
||||
type="button" |
id="abp-modal-close-button" |
||||
class="btn-sm btn-close" |
type="button" |
||||
aria-label="Close" |
class="btn-sm btn-close" |
||||
(click)="modal.dismiss()" |
aria-label="Close" |
||||
></button> |
(click)="modal.dismiss()" |
||||
</div> |
></button> |
||||
<div *ngIf="abpBody" id="abp-modal-body" class="modal-body"> |
</div> |
||||
<ng-container *ngTemplateOutlet="abpBody"></ng-container> |
} |
||||
</div> |
@if (abpBody) { |
||||
<div *ngIf="abpFooter" id="abp-modal-footer" class="modal-footer"> |
<div id="abp-modal-body" class="modal-body"> |
||||
<ng-container *ngTemplateOutlet="abpFooter"></ng-container> |
<ng-container *ngTemplateOutlet="abpBody"></ng-container> |
||||
</div> |
</div> |
||||
|
} |
||||
|
@if (abpFooter) { |
||||
|
<div id="abp-modal-footer" class="modal-footer"> |
||||
|
<ng-container *ngTemplateOutlet="abpFooter"></ng-container> |
||||
|
</div> |
||||
|
} |
||||
</ng-template> |
</ng-template> |
||||
|
|||||
Loading…
Reference in new issue