mirror of https://github.com/abpframework/abp
Merge pull request #1984 from abpframework/feat/ui-changes
feat: implement new html designpull/2000/head
Mehmet Erim
6 years ago
committed by
GitHub
commit
21c39fe01b
@ -1,15 +1,19 @@
|
||||
<div class="card">
|
||||
<div class="card-header">{{ '::Welcome' | abpLocalization }}</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
{{ '::LongWelcomeMessage' | abpLocalization }}
|
||||
</p>
|
||||
<p *ngIf="!hasLoggedIn">
|
||||
<a routerLink="/account/login" [state]="{ redirectUrl: '/' }" class="btn btn-primary" role="button"
|
||||
><i class="fa fa-sign-in mr-1"></i>{{ 'AbpIdentity::Login' | abpLocalization }}</a
|
||||
>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="text-right"><a href="https://abp.io?ref=tmpl" target="_blank">abp.io</a></p>
|
||||
<div id="AbpContentToolbar"></div>
|
||||
<div class="jumbotron text-center">
|
||||
<h1>{{ '::Welcome' | abpLocalization }}</h1>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mx-auto">
|
||||
<p>{{ '::LongWelcomeMessage' | abpLocalization }}</p>
|
||||
<hr class="my-4" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://abp.io?ref=tmpl" target="_blank" class="btn btn-primary px-4">abp.io</a>
|
||||
<a
|
||||
*ngIf="!hasLoggedIn"
|
||||
routerLink="/account/login"
|
||||
[state]="{ redirectUrl: '/' }"
|
||||
class="px-4 btn btn-primary ml-1"
|
||||
role="button"
|
||||
><i class="fa fa-sign-in"></i> {{ 'AbpIdentity::Login' | abpLocalization }}</a
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="row">
|
||||
<div class="mx-auto col col-md-5">
|
||||
<abp-tenant-box></abp-tenant-box>
|
||||
|
||||
<div class="abp-account-container">
|
||||
<div class="card mt-3 shadow-sm rounded">
|
||||
<div class="card-body p-5">
|
||||
<ng-content *ngTemplateOutlet="mainContentRef"></ng-content>
|
||||
</div>
|
||||
<ng-content *ngTemplateOutlet="cancelContentRef"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
import { Component, Input, TemplateRef } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'abp-auth-wrapper',
|
||||
templateUrl: './auth-wrapper.component.html',
|
||||
})
|
||||
export class AuthWrapperComponent {
|
||||
@Input()
|
||||
mainContentRef: TemplateRef<any>;
|
||||
|
||||
@Input()
|
||||
cancelContentRef: TemplateRef<any>;
|
||||
}
|
||||
@ -1,41 +1,50 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-4 offset-md-4">
|
||||
<abp-tenant-box></abp-tenant-box>
|
||||
|
||||
<div class="abp-account-container">
|
||||
<h2>{{ 'AbpAccount::Login' | abpLocalization }}</h2>
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="login-input-user-name-or-email-address">{{
|
||||
'AbpAccount::UserNameOrEmailAddress' | abpLocalization
|
||||
}}</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="login-input-user-name-or-email-address"
|
||||
formControlName="username"
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="login-input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label>
|
||||
<input class="form-control" type="password" id="login-input-password" formControlName="password" />
|
||||
</div>
|
||||
<div class="form-check" validationTarget validationStyle>
|
||||
<label class="form-check-label" for="login-input-remember-me">
|
||||
<input class="form-check-input" type="checkbox" id="login-input-remember-me" formControlName="remember" />
|
||||
{{ 'AbpAccount::RememberMe' | abpLocalization }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<abp-button [loading]="inProgress" type="submit">
|
||||
{{ 'AbpAccount::Login' | abpLocalization }}
|
||||
</abp-button>
|
||||
</div>
|
||||
</form>
|
||||
<div style="padding-top: 20px">
|
||||
<a routerLink="/account/register">{{ 'AbpAccount::Register' | abpLocalization }}</a>
|
||||
<abp-auth-wrapper [mainContentRef]="mainContentRef" [cancelContentRef]="cancelContentRef">
|
||||
<ng-template #mainContentRef>
|
||||
<h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
|
||||
<strong>
|
||||
{{ 'AbpAccount::AreYouANewUser' | abpLocalization }}
|
||||
<a class="text-decoration-none" routerLink="/account/register">{{ 'AbpAccount::Register' | abpLocalization }}</a>
|
||||
</strong>
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate class="mt-4">
|
||||
<div class="form-group">
|
||||
<label for="login-input-user-name-or-email-address">{{
|
||||
'AbpAccount::UserNameOrEmailAddress' | abpLocalization
|
||||
}}</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="login-input-user-name-or-email-address"
|
||||
formControlName="username"
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="login-input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label>
|
||||
<input class="form-control" type="password" id="login-input-password" formControlName="password" />
|
||||
</div>
|
||||
<div class="form-check" validationTarget validationStyle>
|
||||
<label class="form-check-label" for="login-input-remember-me">
|
||||
<input class="form-check-input" type="checkbox" id="login-input-remember-me" formControlName="remember" />
|
||||
{{ 'AbpAccount::RememberMe' | abpLocalization }}
|
||||
</label>
|
||||
</div>
|
||||
<abp-button
|
||||
[loading]="inProgress"
|
||||
buttonType="submit"
|
||||
name="Action"
|
||||
buttonClass="btn-block btn-lg mt-3 btn btn-primary"
|
||||
>
|
||||
{{ 'AbpAccount::Login' | abpLocalization }}
|
||||
</abp-button>
|
||||
</form>
|
||||
</ng-template>
|
||||
<ng-template #cancelContentRef>
|
||||
<div class="card-footer text-center border-0">
|
||||
<a routerLink="/">
|
||||
<button type="button" name="Action" value="Cancel" class="px-2 py-0 btn btn-link">
|
||||
{{ 'AbpAccount::Cancel' | abpLocalization }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</abp-auth-wrapper>
|
||||
|
||||
@ -1,30 +1,32 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-4 offset-md-4">
|
||||
<abp-tenant-box></abp-tenant-box>
|
||||
|
||||
<div class="abp-account-container">
|
||||
<h2>{{ 'AbpAccount::Register' | abpLocalization }}</h2>
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
|
||||
><span> * </span
|
||||
><input autofocus type="text" id="input-user-name" class="form-control" formControlName="username" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label
|
||||
><span> * </span><input type="email" id="input-email-address" class="form-control" formControlName="email" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label
|
||||
><span> * </span><input type="password" id="input-password" class="form-control" formControlName="password" />
|
||||
</div>
|
||||
<abp-button [loading]="inProgress" type="submit">
|
||||
{{ 'AbpAccount::Register' | abpLocalization }}
|
||||
</abp-button>
|
||||
</form>
|
||||
<div style="padding-top: 20px">
|
||||
<a routerLink="/account/login">{{ 'AbpAccount::Login' | abpLocalization }}</a>
|
||||
<abp-auth-wrapper [mainContentRef]="mainContentRef">
|
||||
<ng-template #mainContentRef>
|
||||
<h4>{{ 'AbpAccount::Register' | abpLocalization }}</h4>
|
||||
<strong>
|
||||
{{ 'AbpAccount::AlreadyRegistered' | abpLocalization }}
|
||||
<a class="text-decoration-none" routerLink="/account/login">{{ 'AbpAccount::Login' | abpLocalization }}</a>
|
||||
</strong>
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate class="mt-4">
|
||||
<div class="form-group">
|
||||
<label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
|
||||
><span> * </span
|
||||
><input autofocus type="text" id="input-user-name" class="form-control" formControlName="username" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label
|
||||
><span> * </span><input type="email" id="input-email-address" class="form-control" formControlName="email" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label
|
||||
><span> * </span><input type="password" id="input-password" class="form-control" formControlName="password" />
|
||||
</div>
|
||||
<abp-button
|
||||
[loading]="inProgress"
|
||||
buttonType="submit"
|
||||
name="Action"
|
||||
buttonClass="btn-block btn-lg mt-3 btn btn-primary"
|
||||
>
|
||||
{{ 'AbpAccount::Register' | abpLocalization }}
|
||||
</abp-button>
|
||||
</form>
|
||||
</ng-template>
|
||||
</abp-auth-wrapper>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@ -1,124 +1,197 @@
|
||||
<abp-layout>
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ng-container
|
||||
*ngFor="let route of visibleRoutes$ | async; trackBy: trackByFn"
|
||||
[ngTemplateOutlet]="route?.children?.length ? dropdownLink : defaultLink"
|
||||
[ngTemplateOutletContext]="{ $implicit: route }"
|
||||
<nav
|
||||
class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4"
|
||||
id="main-navbar"
|
||||
style="min-height: 4rem;"
|
||||
>
|
||||
<div class="container">
|
||||
<a class="navbar-brand" routerLink="/">
|
||||
<img *ngIf="appInfo.logoUrl; else appName" [src]="appInfo.logoUrl" [alt]="appInfo.name" />
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
[attr.aria-expanded]="!isCollapsed"
|
||||
(click)="isCollapsed = !isCollapsed"
|
||||
>
|
||||
</ng-container>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="main-navbar-collapse" [ngbCollapse]="isCollapsed">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<ng-container
|
||||
*ngFor="let route of visibleRoutes$ | async; trackBy: trackByFn"
|
||||
[ngTemplateOutlet]="route?.children?.length ? dropdownLink : defaultLink"
|
||||
[ngTemplateOutletContext]="{ $implicit: route }"
|
||||
>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #defaultLink let-route>
|
||||
<li class="nav-item" [abpPermission]="route.requiredPolicy">
|
||||
<a class="nav-link" [routerLink]="[route.url]">{{ route.name | abpLocalization }}</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
<ng-template #defaultLink let-route>
|
||||
<li class="nav-item" [abpPermission]="route.requiredPolicy">
|
||||
<a class="nav-link" [routerLink]="[route.url]">{{ route.name | abpLocalization }}</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #dropdownLink let-route>
|
||||
<li
|
||||
#navbarRootDropdown
|
||||
ngbDropdown
|
||||
[abpPermission]="route.requiredPolicy"
|
||||
[abpVisibility]="routeContainer"
|
||||
class="nav-item dropdown pointer"
|
||||
display="static"
|
||||
>
|
||||
<a ngbDropdownToggle class="nav-link dropdown-toggle pointer" data-toggle="dropdown">
|
||||
{{ route.name | abpLocalization }}
|
||||
</a>
|
||||
<div #routeContainer ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
|
||||
<ng-template #dropdownLink let-route>
|
||||
<li
|
||||
#navbarRootDropdown
|
||||
ngbDropdown
|
||||
[abpPermission]="route.requiredPolicy"
|
||||
[abpVisibility]="routeContainer"
|
||||
class="nav-item"
|
||||
display="static"
|
||||
(click)="$event.preventDefault(); $event.stopPropagation()"
|
||||
>
|
||||
<a
|
||||
ngbDropdownToggle
|
||||
class="nav-link"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
href="javascript:void(0)"
|
||||
>
|
||||
<i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i> {{ route.name | abpLocalization }}
|
||||
</a>
|
||||
<div #routeContainer ngbDropdownMenu class="dropdown-menu border-0 shadow-sm">
|
||||
<ng-template
|
||||
#forTemplate
|
||||
ngFor
|
||||
[ngForOf]="route.children"
|
||||
[ngForTrackBy]="trackByFn"
|
||||
[ngForTemplate]="childWrapper"
|
||||
></ng-template>
|
||||
</div>
|
||||
</li>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #childWrapper let-child>
|
||||
<ng-template
|
||||
#forTemplate
|
||||
ngFor
|
||||
[ngForOf]="route.children"
|
||||
[ngForTrackBy]="trackByFn"
|
||||
[ngForTemplate]="childWrapper"
|
||||
[ngTemplateOutlet]="child?.children?.length ? dropdownChild : defaultChild"
|
||||
[ngTemplateOutletContext]="{ $implicit: child }"
|
||||
></ng-template>
|
||||
</div>
|
||||
</li>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #childWrapper let-child>
|
||||
<ng-template
|
||||
[ngTemplateOutlet]="child?.children?.length ? dropdownChild : defaultChild"
|
||||
[ngTemplateOutletContext]="{ $implicit: child }"
|
||||
></ng-template>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #defaultChild let-child>
|
||||
<div class="dropdown-submenu" [abpPermission]="child.requiredPolicy">
|
||||
<a class="dropdown-item py-2 px-2" [routerLink]="[child.url]">
|
||||
<i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
|
||||
{{ child.name | abpLocalization }}</a
|
||||
>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #defaultChild let-child>
|
||||
<div class="dropdown-submenu" [abpPermission]="child.requiredPolicy">
|
||||
<a class="dropdown-item" [routerLink]="[child.url]">
|
||||
<i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
|
||||
{{ child.name | abpLocalization }}</a
|
||||
>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #dropdownChild let-child>
|
||||
<div
|
||||
[abpVisibility]="childrenContainer"
|
||||
class="dropdown-submenu pointer"
|
||||
ngbDropdown
|
||||
[display]="isDropdownChildDynamic ? 'dynamic' : 'static'"
|
||||
placement="right-top"
|
||||
[abpPermission]="child.requiredPolicy"
|
||||
>
|
||||
<div ngbDropdownToggle [class.dropdown-toggle]="false" class="pointer">
|
||||
<a
|
||||
abpEllipsis="210px"
|
||||
[abpEllipsisEnabled]="isDropdownChildDynamic"
|
||||
role="button"
|
||||
class="btn d-block text-left py-2 px-2 dropdown-toggle"
|
||||
<ng-template #dropdownChild let-child>
|
||||
<div
|
||||
[abpVisibility]="childrenContainer"
|
||||
class="dropdown-submenu"
|
||||
ngbDropdown
|
||||
[display]="isDropdownChildDynamic ? 'dynamic' : 'static'"
|
||||
placement="right-top"
|
||||
[autoClose]="true"
|
||||
[abpPermission]="child.requiredPolicy"
|
||||
(openChange)="openChange($event, childrenContainer)"
|
||||
>
|
||||
<i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
|
||||
{{ child.name | abpLocalization }}
|
||||
</a>
|
||||
</div>
|
||||
<div #childrenContainer ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
|
||||
<ng-template
|
||||
ngFor
|
||||
[ngForOf]="child.children"
|
||||
[ngForTrackBy]="trackByFn"
|
||||
[ngForTemplate]="childWrapper"
|
||||
></ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ul>
|
||||
<div ngbDropdownToggle [class.dropdown-toggle]="false">
|
||||
<a
|
||||
abpEllipsis="210px"
|
||||
[abpEllipsisEnabled]="isDropdownChildDynamic"
|
||||
role="button"
|
||||
class="btn d-block text-left dropdown-toggle"
|
||||
>
|
||||
<i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
|
||||
{{ child.name | abpLocalization }}
|
||||
</a>
|
||||
</div>
|
||||
<div #childrenContainer ngbDropdownMenu class="dropdown-menu border-0 shadow-sm">
|
||||
<ng-template
|
||||
ngFor
|
||||
[ngForOf]="child.children"
|
||||
[ngForTrackBy]="trackByFn"
|
||||
[ngForTemplate]="childWrapper"
|
||||
></ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav">
|
||||
<ng-container
|
||||
*ngFor="let element of rightPartElements; trackBy: trackElementByFn"
|
||||
[ngTemplateOutlet]="element"
|
||||
></ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<ng-container
|
||||
*ngFor="let element of rightPartElements; trackBy: trackElementByFn"
|
||||
[ngTemplateOutlet]="element"
|
||||
></ng-container>
|
||||
</ul>
|
||||
</abp-layout>
|
||||
<div [@slideFromBottom]="outlet && outlet.activatedRoute && outlet.activatedRoute.routeConfig.path" class="container">
|
||||
<router-outlet #outlet="outlet"></router-outlet>
|
||||
</div>
|
||||
|
||||
<abp-confirmation></abp-confirmation>
|
||||
<abp-toast></abp-toast>
|
||||
|
||||
<ng-template #appName>
|
||||
{{ appInfo.name }}
|
||||
</ng-template>
|
||||
|
||||
<ng-template #language>
|
||||
<li class="nav-item dropdown pointer" ngbDropdown>
|
||||
<a ngbDropdownToggle class="nav-link dropdown-toggle text-white pointer" data-toggle="dropdown">
|
||||
{{ defaultLanguage$ | async }}
|
||||
</a>
|
||||
<div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
|
||||
<li class="nav-item">
|
||||
<div ngbDropdown display="static">
|
||||
<a
|
||||
*ngFor="let lang of dropdownLanguages$ | async"
|
||||
class="dropdown-item"
|
||||
(click)="onChangeLang(lang.cultureName)"
|
||||
>{{ lang?.displayName }}</a
|
||||
ngbDropdownToggle
|
||||
class="nav-link"
|
||||
href="javascript:void(0)"
|
||||
role="button"
|
||||
id="dropdownMenuLink"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{{ defaultLanguage$ | async }}
|
||||
</a>
|
||||
<div
|
||||
ngbDropdownMenu
|
||||
class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
|
||||
aria-labelledby="dropdownMenuLink"
|
||||
>
|
||||
<a
|
||||
*ngFor="let lang of dropdownLanguages$ | async"
|
||||
href="javascript:void(0)"
|
||||
class="dropdown-item"
|
||||
(click)="onChangeLang(lang.cultureName)"
|
||||
>{{ lang?.displayName }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #currentUser>
|
||||
<li *ngIf="(currentUser$ | async)?.isAuthenticated" class="nav-item dropdown pointer" ngbDropdown>
|
||||
<a ngbDropdownToggle class="nav-link dropdown-toggle text-white pointer" data-toggle="dropdown">
|
||||
{{ (currentUser$ | async)?.userName }}
|
||||
</a>
|
||||
<div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item pointer" routerLink="/account/manage-profile">{{
|
||||
'AbpAccount::ManageYourProfile' | abpLocalization
|
||||
}}</a>
|
||||
<a class="dropdown-item pointer" (click)="logout()">{{ 'AbpUi::Logout' | abpLocalization }}</a>
|
||||
<li *ngIf="(currentUser$ | async)?.isAuthenticated" class="nav-item">
|
||||
<div 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"
|
||||
>
|
||||
{{ (currentUser$ | async)?.userName }}
|
||||
</a>
|
||||
<div
|
||||
ngbDropdownMenu
|
||||
class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
|
||||
aria-labelledby="dropdownMenuLink"
|
||||
>
|
||||
<a class="dropdown-item" routerLink="/account/manage-profile">{{
|
||||
'AbpAccount::ManageYourProfile' | abpLocalization
|
||||
}}</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)" (click)="logout()">{{
|
||||
'AbpUi::Logout' | abpLocalization
|
||||
}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ng-template>
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" id="main-navbar">
|
||||
<a class="navbar-brand" routerLink="/">
|
||||
<img *ngIf="appInfo.logoUrl; else appName" [src]="appInfo.logoUrl" [alt]="appInfo.name" />
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" [attr.aria-expanded]="!isCollapsed" (click)="isCollapsed = !isCollapsed">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="main-navbar-collapse" [ngbCollapse]="isCollapsed">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div
|
||||
[@slideFromBottom]="outlet && outlet.activatedRoute && outlet.activatedRoute.routeConfig.path"
|
||||
style="padding-top: 5rem;"
|
||||
class="container"
|
||||
>
|
||||
<router-outlet #outlet="outlet"></router-outlet>
|
||||
</div>
|
||||
|
||||
<abp-confirmation></abp-confirmation>
|
||||
<abp-toast></abp-toast>
|
||||
|
||||
<ng-template #appName>
|
||||
{{ appInfo.name }}
|
||||
</ng-template>
|
||||
@ -1,19 +0,0 @@
|
||||
import { Config, ConfigState } from '@abp/ng.core';
|
||||
import { slideFromBottom } from '@abp/ng.theme.shared';
|
||||
import { Component } from '@angular/core';
|
||||
import { Store } from '@ngxs/store';
|
||||
|
||||
@Component({
|
||||
selector: ' abp-layout',
|
||||
templateUrl: './layout.component.html',
|
||||
animations: [slideFromBottom]
|
||||
})
|
||||
export class LayoutComponent {
|
||||
isCollapsed = true;
|
||||
|
||||
get appInfo(): Config.Application {
|
||||
return this.store.selectSnapshot(ConfigState.getApplicationInfo);
|
||||
}
|
||||
|
||||
constructor(private store: Store) {}
|
||||
}
|
||||
@ -1,15 +1,19 @@
|
||||
<div class="card">
|
||||
<div class="card-header">{{ '::Welcome' | abpLocalization }}</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
{{ '::LongWelcomeMessage' | abpLocalization }}
|
||||
</p>
|
||||
<p *ngIf="!hasLoggedIn">
|
||||
<a routerLink="/account/login" [state]="{ redirectUrl: '/' }" class="btn btn-primary" role="button"
|
||||
><i class="fa fa-sign-in mr-1"></i>{{ 'AbpIdentity::Login' | abpLocalization }}</a
|
||||
>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="text-right"><a href="https://abp.io?ref=tmpl" target="_blank">abp.io</a></p>
|
||||
<div id="AbpContentToolbar"></div>
|
||||
<div class="jumbotron text-center">
|
||||
<h1>{{ '::Welcome' | abpLocalization }}</h1>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mx-auto">
|
||||
<p>{{ '::LongWelcomeMessage' | abpLocalization }}</p>
|
||||
<hr class="my-4" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://abp.io?ref=tmpl" target="_blank" class="btn btn-primary px-4">abp.io</a>
|
||||
<a
|
||||
*ngIf="!hasLoggedIn"
|
||||
routerLink="/account/login"
|
||||
[state]="{ redirectUrl: '/' }"
|
||||
class="px-4 btn btn-primary ml-1"
|
||||
role="button"
|
||||
><i class="fa fa-sign-in"></i> {{ 'AbpIdentity::Login' | abpLocalization }}</a
|
||||
>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in new issue