mirror of
https://github.com/bitwarden/desktop.git
synced 2024-11-28 12:35:40 +01:00
move modal to jslib
This commit is contained in:
parent
c8fbcf3b81
commit
54f534529a
2
jslib
2
jslib
@ -1 +1 @@
|
|||||||
Subproject commit 5d3b99ce6f93c3c43adc9e3eb784bc00b728a7f2
|
Subproject commit 8469d18f47f0dbfc1677f98323169a93c7b1e193
|
@ -9,7 +9,6 @@ import { Router } from '@angular/router';
|
|||||||
import { ToasterService } from 'angular2-toaster';
|
import { ToasterService } from 'angular2-toaster';
|
||||||
import { Angulartics2 } from 'angulartics2';
|
import { Angulartics2 } from 'angulartics2';
|
||||||
|
|
||||||
import { ModalComponent } from '../modal.component';
|
|
||||||
import { EnvironmentComponent } from './environment.component';
|
import { EnvironmentComponent } from './environment.component';
|
||||||
|
|
||||||
import { AuthService } from 'jslib/abstractions/auth.service';
|
import { AuthService } from 'jslib/abstractions/auth.service';
|
||||||
@ -17,6 +16,7 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
|
|||||||
import { SyncService } from 'jslib/abstractions/sync.service';
|
import { SyncService } from 'jslib/abstractions/sync.service';
|
||||||
|
|
||||||
import { LoginComponent as BaseLoginComponent } from 'jslib/angular/components/login.component';
|
import { LoginComponent as BaseLoginComponent } from 'jslib/angular/components/login.component';
|
||||||
|
import { ModalComponent } from 'jslib/angular/components/modal.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-login',
|
selector: 'app-login',
|
||||||
|
@ -10,8 +10,6 @@ import { Router } from '@angular/router';
|
|||||||
import { ToasterService } from 'angular2-toaster';
|
import { ToasterService } from 'angular2-toaster';
|
||||||
import { Angulartics2 } from 'angulartics2';
|
import { Angulartics2 } from 'angulartics2';
|
||||||
|
|
||||||
import { ModalComponent } from '../modal.component';
|
|
||||||
|
|
||||||
import { TwoFactorOptionsComponent } from './two-factor-options.component';
|
import { TwoFactorOptionsComponent } from './two-factor-options.component';
|
||||||
|
|
||||||
import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
|
import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
|
||||||
@ -23,6 +21,7 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
|
|||||||
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
||||||
import { SyncService } from 'jslib/abstractions/sync.service';
|
import { SyncService } from 'jslib/abstractions/sync.service';
|
||||||
|
|
||||||
|
import { ModalComponent } from 'jslib/angular/components/modal.component';
|
||||||
import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/components/two-factor.component';
|
import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/components/two-factor.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -16,8 +16,6 @@ import {
|
|||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
|
|
||||||
import { ModalComponent } from './modal.component';
|
|
||||||
|
|
||||||
import { PremiumComponent } from './accounts/premium.component';
|
import { PremiumComponent } from './accounts/premium.component';
|
||||||
import { SettingsComponent } from './accounts/settings.component';
|
import { SettingsComponent } from './accounts/settings.component';
|
||||||
import { PasswordGeneratorHistoryComponent } from './vault/password-generator-history.component';
|
import { PasswordGeneratorHistoryComponent } from './vault/password-generator-history.component';
|
||||||
@ -25,6 +23,8 @@ import { PasswordGeneratorHistoryComponent } from './vault/password-generator-hi
|
|||||||
import { ToasterService } from 'angular2-toaster';
|
import { ToasterService } from 'angular2-toaster';
|
||||||
import { Angulartics2 } from 'angulartics2';
|
import { Angulartics2 } from 'angulartics2';
|
||||||
|
|
||||||
|
import { ModalComponent } from 'jslib/angular/components/modal.component';
|
||||||
|
|
||||||
import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
|
import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
|
||||||
|
|
||||||
import { AuthService } from 'jslib/abstractions/auth.service';
|
import { AuthService } from 'jslib/abstractions/auth.service';
|
||||||
|
@ -6,7 +6,7 @@ import { Angulartics2Module } from 'angulartics2';
|
|||||||
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
|
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
|
||||||
|
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { ServicesModule } from './services/services.module';
|
import { ServicesModule } from './services.module';
|
||||||
|
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
@ -14,7 +14,6 @@ import { BrowserModule } from '@angular/platform-browser';
|
|||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { ModalComponent } from './modal.component';
|
|
||||||
|
|
||||||
import { EnvironmentComponent } from './accounts/environment.component';
|
import { EnvironmentComponent } from './accounts/environment.component';
|
||||||
import { HintComponent } from './accounts/hint.component';
|
import { HintComponent } from './accounts/hint.component';
|
||||||
@ -27,6 +26,7 @@ import { TwoFactorOptionsComponent } from './accounts/two-factor-options.compone
|
|||||||
import { TwoFactorComponent } from './accounts/two-factor.component';
|
import { TwoFactorComponent } from './accounts/two-factor.component';
|
||||||
|
|
||||||
import { IconComponent } from 'jslib/angular/components/icon.component';
|
import { IconComponent } from 'jslib/angular/components/icon.component';
|
||||||
|
import { ModalComponent } from 'jslib/angular/components/modal.component';
|
||||||
|
|
||||||
import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
|
import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
|
||||||
import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive';
|
import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive';
|
||||||
|
@ -1,66 +0,0 @@
|
|||||||
import {
|
|
||||||
Component,
|
|
||||||
ComponentFactoryResolver,
|
|
||||||
EventEmitter,
|
|
||||||
OnDestroy,
|
|
||||||
Output,
|
|
||||||
Type,
|
|
||||||
ViewChild,
|
|
||||||
ViewContainerRef,
|
|
||||||
} from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-modal',
|
|
||||||
template: `<ng-template #container></ng-template>`,
|
|
||||||
})
|
|
||||||
export class ModalComponent implements OnDestroy {
|
|
||||||
@Output() onClose = new EventEmitter();
|
|
||||||
@Output() onClosed = new EventEmitter();
|
|
||||||
@Output() onShow = new EventEmitter();
|
|
||||||
@Output() onShown = new EventEmitter();
|
|
||||||
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
|
|
||||||
parentContainer: ViewContainerRef = null;
|
|
||||||
fade: boolean = true;
|
|
||||||
|
|
||||||
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
|
|
||||||
|
|
||||||
ngOnDestroy() {
|
|
||||||
document.body.classList.remove('modal-open');
|
|
||||||
document.body.removeChild(document.querySelector('.modal-backdrop'));
|
|
||||||
}
|
|
||||||
|
|
||||||
show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true): T {
|
|
||||||
this.onShow.emit();
|
|
||||||
this.parentContainer = parentContainer;
|
|
||||||
this.fade = fade;
|
|
||||||
|
|
||||||
document.body.classList.add('modal-open');
|
|
||||||
const backdrop = document.createElement('div');
|
|
||||||
backdrop.className = 'modal-backdrop' + (this.fade ? ' fade' : '');
|
|
||||||
document.body.appendChild(backdrop);
|
|
||||||
|
|
||||||
const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
|
|
||||||
const componentRef = this.container.createComponent<T>(factory);
|
|
||||||
|
|
||||||
document.querySelector('.modal-dialog').addEventListener('click', (e: Event) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
});
|
|
||||||
|
|
||||||
for (const closeElement of document.querySelectorAll('.modal, .modal *[data-dismiss="modal"]')) {
|
|
||||||
closeElement.addEventListener('click', (event) => {
|
|
||||||
this.close();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.onShown.emit();
|
|
||||||
return componentRef.instance;
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
this.onClose.emit();
|
|
||||||
this.onClosed.emit();
|
|
||||||
if (this.parentContainer != null) {
|
|
||||||
this.parentContainer.clear();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -11,8 +11,8 @@ import { ElectronRendererSecureStorageService } from 'jslib/electron/services/el
|
|||||||
import { ElectronStorageService } from 'jslib/electron/services/electronStorage.service';
|
import { ElectronStorageService } from 'jslib/electron/services/electronStorage.service';
|
||||||
import { isDev } from 'jslib/electron/utils';
|
import { isDev } from 'jslib/electron/utils';
|
||||||
|
|
||||||
import { DesktopRendererMessagingService } from '../../services/desktopRendererMessaging.service';
|
import { DesktopRendererMessagingService } from '../services/desktopRendererMessaging.service';
|
||||||
import { I18nService } from '../../services/i18n.service';
|
import { I18nService } from '../services/i18n.service';
|
||||||
|
|
||||||
import { AuthGuardService } from 'jslib/angular/services/auth-guard.service';
|
import { AuthGuardService } from 'jslib/angular/services/auth-guard.service';
|
||||||
import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
|
import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
|
@ -19,10 +19,10 @@ import {
|
|||||||
import { ToasterService } from 'angular2-toaster';
|
import { ToasterService } from 'angular2-toaster';
|
||||||
import { Angulartics2 } from 'angulartics2';
|
import { Angulartics2 } from 'angulartics2';
|
||||||
|
|
||||||
import { ModalComponent } from '../modal.component';
|
|
||||||
|
|
||||||
import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
|
import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
|
||||||
|
|
||||||
|
import { ModalComponent } from 'jslib/angular/components/modal.component';
|
||||||
|
|
||||||
import { AddEditComponent } from './add-edit.component';
|
import { AddEditComponent } from './add-edit.component';
|
||||||
import { AttachmentsComponent } from './attachments.component';
|
import { AttachmentsComponent } from './attachments.component';
|
||||||
import { CiphersComponent } from './ciphers.component';
|
import { CiphersComponent } from './ciphers.component';
|
||||||
|
Loading…
Reference in New Issue
Block a user