tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #1737 from abpframework/refactor/abp-modal 

refactor modal component and remove perfect scrollbar
pull/1746/head
Yasin Aydın 7 years ago
committed by GitHub
parent
c4bd02f75f 70ec0b3a63
commit
3757d8ded6
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 146 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 168
      npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
  2. 2
      npm/ng-packs/packages/identity/src/lib/identity.module.ts
  3. 66
      npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
  4. 3
      npm/ng-packs/packages/permission-management/src/lib/permission-management.module.ts
  5. 7
      npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
  6. 15
      npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
  7. 32
      npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

168
npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
View File

@ -83,100 +83,98 @@
</ng-template> </ng-template>
<ng-template #abpBody> <ng-template #abpBody>
<perfect-scrollbar class="ps-show-always" style="max-height: 70vh;"> <form [formGroup]="form" (ngSubmit)="save()">
<form [formGroup]="form" (ngSubmit)="save()"> <ngb-tabset>
<ngb-tabset> <ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
<ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization"> <ng-template ngbTabContent>
<ng-template ngbTabContent> <div class="mt-2 fade-in-top">
<div class="mt-2 fade-in-top"> <div class="form-group">
<div class="form-group"> <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
<label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label ><span> * </span>
><span> * </span> <input type="text" id="user-name" class="form-control" formControlName="userName" autofocus />
<input type="text" id="user-name" class="form-control" formControlName="userName" autofocus /> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label> <label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label>
<input type="text" id="name" class="form-control" formControlName="name" /> <input type="text" id="name" class="form-control" formControlName="name" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label> <label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label>
<input type="text" id="surname" class="form-control" formControlName="surname" /> <input type="text" id="surname" class="form-control" formControlName="surname" />
</div> </div>
<div *ngIf="!selected.userName" class="form-group"> <div *ngIf="!selected.userName" class="form-group">
<label for="password">{{ 'AbpIdentity::Password' | abpLocalization }}</label <label for="password">{{ 'AbpIdentity::Password' | abpLocalization }}</label
><span> * </span> ><span> * </span>
<input <input
type="password" type="password"
id="password" id="password"
autocomplete="new-password" autocomplete="new-password"
class="form-control" class="form-control"
formControlName="password" formControlName="password"
/> />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="email">{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</label <label for="email">{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</label
><span> * </span> ><span> * </span>
<input type="text" id="email" class="form-control" formControlName="email" /> <input type="text" id="email" class="form-control" formControlName="email" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="phone-number">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</label> <label for="phone-number">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</label>
<input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" /> <input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
</div> </div>
<div class="custom-checkbox custom-control mb-2"> <div class="custom-checkbox custom-control mb-2">
<input <input
type="checkbox" type="checkbox"
id="lockout-checkbox" id="lockout-checkbox"
class="custom-control-input" class="custom-control-input"
formControlName="lockoutEnabled" formControlName="lockoutEnabled"
/> />
<label class="custom-control-label" for="lockout-checkbox">{{ <label class="custom-control-label" for="lockout-checkbox">{{
'AbpIdentity::DisplayName:LockoutEnabled' | abpLocalization 'AbpIdentity::DisplayName:LockoutEnabled' | abpLocalization
}}</label> }}</label>
</div> </div>
<div class="custom-checkbox custom-control mb-2"> <div class="custom-checkbox custom-control mb-2">
<input <input
type="checkbox" type="checkbox"
id="two-factor-checkbox" id="two-factor-checkbox"
class="custom-control-input" class="custom-control-input"
formControlName="twoFactorEnabled" formControlName="twoFactorEnabled"
/> />
<label class="custom-control-label" for="two-factor-checkbox">{{ <label class="custom-control-label" for="two-factor-checkbox">{{
'AbpIdentity::DisplayName:TwoFactorEnabled' | abpLocalization 'AbpIdentity::DisplayName:TwoFactorEnabled' | abpLocalization
}}</label> }}</label>
</div>
</div> </div>
</ng-template> </div>
</ngb-tab> </ng-template>
<ngb-tab [title]="'AbpIdentity::Roles' | abpLocalization"> </ngb-tab>
<ng-template ngbTabContent> <ngb-tab [title]="'AbpIdentity::Roles' | abpLocalization">
<div class="mt-2 fade-in-top"> <ng-template ngbTabContent>
<div <div class="mt-2 fade-in-top">
*ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn" <div
class="custom-checkbox custom-control mb-2" *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
> class="custom-checkbox custom-control mb-2"
<input >
type="checkbox" <input
name="Roles[0].IsAssigned" type="checkbox"
value="true" name="Roles[0].IsAssigned"
class="custom-control-input" value="true"
[attr.id]="'roles-' + i" class="custom-control-input"
[formControl]="roleGroup.controls[roles[i].name]" [attr.id]="'roles-' + i"
/> [formControl]="roleGroup.controls[roles[i].name]"
<label class="custom-control-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label> />
</div> <label class="custom-control-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
</div> </div>
</ng-template> </div>
</ngb-tab> </ng-template>
</ngb-tabset> </ngb-tab>
</form> </ngb-tabset>
</perfect-scrollbar> </form>
</ng-template> </ng-template>
<ng-template #abpFooter> <ng-template #abpFooter>

2
npm/ng-packs/packages/identity/src/lib/identity.module.ts
View File

@ -10,7 +10,6 @@ import { UsersComponent } from './components/users/users.component';
import { PermissionManagementModule } from '@abp/ng.permission-management'; import { PermissionManagementModule } from '@abp/ng.permission-management';
import { TableModule } from 'primeng/table'; import { TableModule } from 'primeng/table';
import { NgxValidateCoreModule } from '@ngx-validate/core'; import { NgxValidateCoreModule } from '@ngx-validate/core';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@NgModule({ @NgModule({
declarations: [RolesComponent, UsersComponent], declarations: [RolesComponent, UsersComponent],
@ -24,7 +23,6 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
NgbDropdownModule, NgbDropdownModule,
PermissionManagementModule, PermissionManagementModule,
NgxValidateCoreModule, NgxValidateCoreModule,
PerfectScrollbarModule,
], ],
}) })
export class IdentityModule {} export class IdentityModule {}

66
npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
View File

@ -22,16 +22,14 @@
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<ul class="nav nav-pills flex-column"> <ul class="nav nav-pills flex-column">
<perfect-scrollbar class="ps-show-always" style="max-height: 70vh;"> <li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item">
<li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item"> <a
<a class="nav-link pointer"
class="nav-link pointer" [class.active]="selectedGroup?.name === group?.name"
[class.active]="selectedGroup?.name === group?.name" (click)="onChangeGroup(group)"
(click)="onChangeGroup(group)" >{{ group?.displayName }}</a
>{{ group?.displayName }}</a >
> </li>
</li>
</perfect-scrollbar>
</ul> </ul>
</div> </div>
<div class="col-8"> <div class="col-8">
@ -52,32 +50,30 @@
}}</label> }}</label>
</div> </div>
<hr class="mb-3" /> <hr class="mb-3" />
<perfect-scrollbar class="ps-show-always" style="max-height: 60vh;"> <div
<div *ngFor="let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn"
*ngFor="let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn" [style.margin-left]="permission.margin + 'px'"
[style.margin-left]="permission.margin + 'px'" class="custom-checkbox custom-control mb-2"
class="custom-checkbox custom-control mb-2" >
<input
#permissionCheckbox
type="checkbox"
[checked]="getChecked(permission.name)"
[value]="getChecked(permission.name)"
[attr.id]="permission.name"
class="custom-control-input"
[disabled]="isGrantedByRole(permission.grantedProviders)"
/>
<label
class="custom-control-label"
[attr.for]="permission.name"
(click)="onClickCheckbox(permission, permissionCheckbox.value)"
>{{ permission.displayName }}
<span *ngFor="let provider of permission.grantedProviders" class="badge badge-light"
>{{ provider.providerName }}: {{ provider.providerKey }}</span
></label
> >
<input </div>
#permissionCheckbox
type="checkbox"
[checked]="getChecked(permission.name)"
[value]="getChecked(permission.name)"
[attr.id]="permission.name"
class="custom-control-input"
[disabled]="isGrantedByRole(permission.grantedProviders)"
/>
<label
class="custom-control-label"
[attr.for]="permission.name"
(click)="onClickCheckbox(permission, permissionCheckbox.value)"
>{{ permission.displayName }}
<span *ngFor="let provider of permission.grantedProviders" class="badge badge-light"
>{{ provider.providerName }}: {{ provider.providerKey }}</span
></label
>
</div>
</perfect-scrollbar>
</div> </div>
</div> </div>
</div> </div>

3
npm/ng-packs/packages/permission-management/src/lib/permission-management.module.ts
View File

@ -4,11 +4,10 @@ import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store'; import { NgxsModule } from '@ngxs/store';
import { PermissionManagementComponent } from './components/permission-management.component'; import { PermissionManagementComponent } from './components/permission-management.component';
import { PermissionManagementState } from './states/permission-management.state'; import { PermissionManagementState } from './states/permission-management.state';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@NgModule({ @NgModule({
declarations: [PermissionManagementComponent], declarations: [PermissionManagementComponent],
imports: [CoreModule, ThemeSharedModule, NgxsModule.forFeature([PermissionManagementState]), PerfectScrollbarModule], imports: [CoreModule, ThemeSharedModule, NgxsModule.forFeature([PermissionManagementState])],
exports: [PermissionManagementComponent], exports: [PermissionManagementComponent],
}) })
export class PermissionManagementModule {} export class PermissionManagementModule {}

7
npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
View File

@ -27,10 +27,9 @@
[style.minHeight]="minHeight || undefined" [style.minHeight]="minHeight || undefined"
> >
<ng-container *ngTemplateOutlet="abpBody"></ng-container> <ng-container *ngTemplateOutlet="abpBody"></ng-container>
</div>
<div id="abp-modal-footer" class="modal-footer"> <div id="abp-modal-footer" class="modal-footer">
<ng-container *ngTemplateOutlet="abpFooter"></ng-container> <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
</div>
</div> </div>
</div> </div>
</div> </div>

15
npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
View File

@ -119,11 +119,16 @@ export class ModalComponent implements OnDestroy {
this.visibleChange.emit(value); this.visibleChange.emit(value);
this.showModal = value; this.showModal = value;
value if (value) {
? timer(ANIMATION_TIMEOUT + 100) timer(ANIMATION_TIMEOUT + 100)
.pipe(take(1)) .pipe(take(1))
.subscribe(_ => (this.closable = true)) .subscribe(_ => (this.closable = true));
: (this.closable = false);
this.renderer.addClass(document.body, 'modal-open');
} else {
this.closable = false;
this.renderer.removeClass(document.body, 'modal-open');
}
} }
listen() { listen() {

32
npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
View File

@ -18,22 +18,26 @@ import { ChangePasswordComponent } from './components/change-password/change-pas
import { ProfileComponent } from './components/profile/profile.component'; import { ProfileComponent } from './components/profile/profile.component';
import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component'; import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
export function appendScript(injector: Injector) { export function appendScript(styles) {
const fn = function() { const higher = (injector: Injector) => {
const lazyLoadService: LazyLoadService = injector.get(LazyLoadService); const fn = function() {
const lazyLoadService: LazyLoadService = injector.get(LazyLoadService);
return forkJoin( return forkJoin(
lazyLoadService.load( lazyLoadService.load(
null, null,
'style', 'style',
styles, styles,
'head', 'head',
'afterbegin', 'afterbegin',
) /* lazyLoadService.load(null, 'script', scripts) */, ) /* lazyLoadService.load(null, 'script', scripts) */,
).pipe(take(1)); ).pipe(take(1));
};
return fn;
}; };
return fn; return higher;
} }
@NgModule({ @NgModule({
@ -87,7 +91,7 @@ export class ThemeSharedModule {
provide: APP_INITIALIZER, provide: APP_INITIALIZER,
multi: true, multi: true,
deps: [Injector, ErrorHandler], deps: [Injector, ErrorHandler],
useFactory: appendScript, useFactory: appendScript(styles),
}, },
{ provide: MessageService, useClass: MessageService }, { provide: MessageService, useClass: MessageService },
], ],

Write Preview
Loading…
Cancel
Save