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

refactor modal component and remove perfect scrollbar

pull/1737/head
TheDiaval 7 years ago
parent
c4bd02f75f
commit
296045c954
8 changed files with 151 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
Split 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. 5
      npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
  8. 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 #abpBody>
<perfect-scrollbar class="ps-show-always" style="max-height: 70vh;">
<form [formGroup]="form" (ngSubmit)="save()">
<ngb-tabset>
<ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
<ng-template ngbTabContent>
<div class="mt-2 fade-in-top">
<div class="form-group">
<label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
><span> * </span>
<input type="text" id="user-name" class="form-control" formControlName="userName" autofocus />
</div>
<form [formGroup]="form" (ngSubmit)="save()">
<ngb-tabset>
<ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
<ng-template ngbTabContent>
<div class="mt-2 fade-in-top">
<div class="form-group">
<label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
><span> * </span>
<input type="text" id="user-name" class="form-control" formControlName="userName" autofocus />
</div>
<div class="form-group">
<label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label>
<input type="text" id="name" class="form-control" formControlName="name" />
</div>
<div class="form-group">
<label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label>
<input type="text" id="name" class="form-control" formControlName="name" />
</div>
<div class="form-group">
<label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label>
<input type="text" id="surname" class="form-control" formControlName="surname" />
</div>
<div class="form-group">
<label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label>
<input type="text" id="surname" class="form-control" formControlName="surname" />
</div>
<div *ngIf="!selected.userName" class="form-group">
<label for="password">{{ 'AbpIdentity::Password' | abpLocalization }}</label
><span> * </span>
<input
type="password"
id="password"
autocomplete="new-password"
class="form-control"
formControlName="password"
/>
</div>
<div *ngIf="!selected.userName" class="form-group">
<label for="password">{{ 'AbpIdentity::Password' | abpLocalization }}</label
><span> * </span>
<input
type="password"
id="password"
autocomplete="new-password"
class="form-control"
formControlName="password"
/>
</div>
<div class="form-group">
<label for="email">{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</label
><span> * </span>
<input type="text" id="email" class="form-control" formControlName="email" />
</div>
<div class="form-group">
<label for="email">{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</label
><span> * </span>
<input type="text" id="email" class="form-control" formControlName="email" />
</div>
<div class="form-group">
<label for="phone-number">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</label>
<input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
</div>
<div class="form-group">
<label for="phone-number">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</label>
<input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
</div>
<div class="custom-checkbox custom-control mb-2">
<input
type="checkbox"
id="lockout-checkbox"
class="custom-control-input"
formControlName="lockoutEnabled"
/>
<label class="custom-control-label" for="lockout-checkbox">{{
'AbpIdentity::DisplayName:LockoutEnabled' | abpLocalization
}}</label>
</div>
<div class="custom-checkbox custom-control mb-2">
<input
type="checkbox"
id="lockout-checkbox"
class="custom-control-input"
formControlName="lockoutEnabled"
/>
<label class="custom-control-label" for="lockout-checkbox">{{
'AbpIdentity::DisplayName:LockoutEnabled' | abpLocalization
}}</label>
</div>
<div class="custom-checkbox custom-control mb-2">
<input
type="checkbox"
id="two-factor-checkbox"
class="custom-control-input"
formControlName="twoFactorEnabled"
/>
<label class="custom-control-label" for="two-factor-checkbox">{{
'AbpIdentity::DisplayName:TwoFactorEnabled' | abpLocalization
}}</label>
</div>
<div class="custom-checkbox custom-control mb-2">
<input
type="checkbox"
id="two-factor-checkbox"
class="custom-control-input"
formControlName="twoFactorEnabled"
/>
<label class="custom-control-label" for="two-factor-checkbox">{{
'AbpIdentity::DisplayName:TwoFactorEnabled' | abpLocalization
}}</label>
</div>
</ng-template>
</ngb-tab>
<ngb-tab [title]="'AbpIdentity::Roles' | abpLocalization">
<ng-template ngbTabContent>
<div class="mt-2 fade-in-top">
<div
*ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
class="custom-checkbox custom-control mb-2"
>
<input
type="checkbox"
name="Roles[0].IsAssigned"
value="true"
class="custom-control-input"
[attr.id]="'roles-' + i"
[formControl]="roleGroup.controls[roles[i].name]"
/>
<label class="custom-control-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
</div>
</div>
</ng-template>
</ngb-tab>
<ngb-tab [title]="'AbpIdentity::Roles' | abpLocalization">
<ng-template ngbTabContent>
<div class="mt-2 fade-in-top">
<div
*ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
class="custom-checkbox custom-control mb-2"
>
<input
type="checkbox"
name="Roles[0].IsAssigned"
value="true"
class="custom-control-input"
[attr.id]="'roles-' + i"
[formControl]="roleGroup.controls[roles[i].name]"
/>
<label class="custom-control-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</form>
</perfect-scrollbar>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</form>
</ng-template>
<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 { TableModule } from 'primeng/table';
import { NgxValidateCoreModule } from '@ngx-validate/core';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@NgModule({
declarations: [RolesComponent, UsersComponent],
@ -24,7 +23,6 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
NgbDropdownModule,
PermissionManagementModule,
NgxValidateCoreModule,
PerfectScrollbarModule,
],
})
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="col-4">
<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">
<a
class="nav-link pointer"
[class.active]="selectedGroup?.name === group?.name"
(click)="onChangeGroup(group)"
>{{ group?.displayName }}</a
>
</li>
</perfect-scrollbar>
<li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item">
<a
class="nav-link pointer"
[class.active]="selectedGroup?.name === group?.name"
(click)="onChangeGroup(group)"
>{{ group?.displayName }}</a
>
</li>
</ul>
</div>
<div class="col-8">
@ -52,32 +50,30 @@
}}</label>
</div>
<hr class="mb-3" />
<perfect-scrollbar class="ps-show-always" style="max-height: 60vh;">
<div
*ngFor="let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn"
[style.margin-left]="permission.margin + 'px'"
class="custom-checkbox custom-control mb-2"
<div
*ngFor="let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn"
[style.margin-left]="permission.margin + 'px'"
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
#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>

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 { PermissionManagementComponent } from './components/permission-management.component';
import { PermissionManagementState } from './states/permission-management.state';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@NgModule({
declarations: [PermissionManagementComponent],
imports: [CoreModule, ThemeSharedModule, NgxsModule.forFeature([PermissionManagementState]), PerfectScrollbarModule],
imports: [CoreModule, ThemeSharedModule, NgxsModule.forFeature([PermissionManagementState])],
exports: [PermissionManagementComponent],
})
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"
>
<ng-container *ngTemplateOutlet="abpBody"></ng-container>
<div id="abp-modal-footer" class="modal-footer">
<ng-container *ngTemplateOutlet="abpFooter"></ng-container>
</div>
</div>
<div id="abp-modal-footer" class="modal-footer">
<ng-container *ngTemplateOutlet="abpFooter"></ng-container>
</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.showModal = value;
value
? timer(ANIMATION_TIMEOUT + 100)
.pipe(take(1))
.subscribe(_ => (this.closable = true))
: (this.closable = false);
if (value) {
timer(ANIMATION_TIMEOUT + 100)
.pipe(take(1))
.subscribe(_ => (this.closable = true));
this.renderer.addClass(document.body, 'modal-open');
} else {
this.closable = false;
this.renderer.removeClass(document.body, 'modal-open');
}
}
listen() {

5
npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
View File

@ -32,6 +32,11 @@ export default `
background-color: rgba(0, 0, 0, .6);
}
.modal.show {
overflow-x: hidden !important;
overflow-y: auto !important;
}
.abp-ellipsis-inline {
display: inline-block;
overflow: hidden;

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

Write Preview
Loading…
Cancel
Save