From d954777b89051599ef1b2722ed17a7a370e5beba Mon Sep 17 00:00:00 2001 From: garrettmills Date: Fri, 20 Nov 2020 12:35:42 -0600 Subject: [PATCH] Make back button dismiss open modal --- src/app/app.component.ts | 33 +++++++++++++++++-- .../database/columns/columns.component.html | 2 +- .../editor/database/database.component.ts | 12 ++++++- .../paragraph/paragraph-editor.component.ts | 8 +++++ .../paragraph/paragraph-modal.component.ts | 1 - .../wysiwyg/wysiwyg-editor.component.ts | 8 +++++ .../nodes/form-input/form-input.component.ts | 7 ++++ src/app/pages/editor/editor.page.ts | 7 ++++ src/global.scss | 11 +++++-- 9 files changed, 82 insertions(+), 7 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index be313ee..18f89a3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,14 +6,14 @@ import { Platform, PopoverController, LoadingController, - ToastController + ToastController, NavController } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { ApiService } from './service/api.service'; import { Router } from '@angular/router'; import {TREE_ACTIONS, TreeComponent} from '@circlon/angular-tree-component'; -import {BehaviorSubject, Observable} from 'rxjs'; +import {BehaviorSubject, fromEvent, Observable} from 'rxjs'; import {OptionPickerComponent} from './components/option-picker/option-picker.component'; import {OptionMenuComponent} from './components/option-menu/option-menu.component'; import {SelectorComponent} from './components/sharing/selector/selector.component'; @@ -83,6 +83,7 @@ export class AppComponent implements OnInit { protected versionInterval?: any; protected showedNewVersionAlert = false; protected showedOfflineAlert = false; + protected backbuttonSubscription: any; protected initialized$: BehaviorSubject = new BehaviorSubject(false); constructor( @@ -90,6 +91,7 @@ export class AppComponent implements OnInit { private splashScreen: SplashScreen, private statusBar: StatusBar, public readonly api: ApiService, + protected navCtrl: NavController, protected router: Router, protected alerts: AlertController, protected popover: PopoverController, @@ -129,6 +131,17 @@ export class AppComponent implements OnInit { this.initializeApp(); } + @HostListener('window:popstate', ['$event']) + dismissModal(event) { + const modal = this.modal.getTop(); + + if ( modal ) { + event.preventDefault(); + event.stopPropagation(); + this.modal.dismiss(); + } + } + showOptions($event) { this.popover.create({ event: $event, @@ -152,8 +165,16 @@ export class AppComponent implements OnInit { const modal = await this.modal.create({ component: SearchComponent, + cssClass: 'modal-med', }); + const modalState = { + modal : true, + desc : 'Search everything' + }; + + history.pushState(modalState, null); + this.hasSearchOpen = true; await modal.present(); @@ -208,10 +229,18 @@ export class AppComponent implements OnInit { if ( result.data === 'share' ) { this.modal.create({ component: SelectorComponent, + cssClass: 'modal-med', componentProps: { node: this.menuTarget.data, } }).then(modal => { + const modalState = { + modal : true, + desc : 'Share page' + }; + + history.pushState(modalState, null); + modal.present(); }); } else if ( result.data === 'export_html' ) { diff --git a/src/app/components/editor/database/columns/columns.component.html b/src/app/components/editor/database/columns/columns.component.html index 2e7ec1c..22ee8ed 100644 --- a/src/app/components/editor/database/columns/columns.component.html +++ b/src/app/components/editor/database/columns/columns.component.html @@ -122,7 +122,7 @@ - + Add Column Save diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts index ab28971..042dc6e 100644 --- a/src/app/components/editor/database/database.component.ts +++ b/src/app/components/editor/database/database.component.ts @@ -146,12 +146,22 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit { const modal = await this.modals.create({ component: ColumnsComponent, componentProps: {columnSets: this.columnDefs}, + cssClass: 'modal-med', }); modal.onDidDismiss().then(result => { - this.setColumns(result.data); + if ( result?.data ) { + this.setColumns(result.data); + } }); + const modalState = { + modal : true, + desc : 'Manage Columns' + }; + + history.pushState(modalState, null); + await modal.present(); } diff --git a/src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts b/src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts index a66bbd6..18d1ee9 100644 --- a/src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts +++ b/src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts @@ -50,6 +50,14 @@ export class ParagraphEditorComponent implements ICellEditorAngularComp, AfterVi this.value = String(value.data); this.finishEdit(); }); + + const modalState = { + modal : true, + desc : 'Paragraph editor' + }; + + history.pushState(modalState, null); + modal.present(); }); }); diff --git a/src/app/components/editor/database/editors/paragraph/paragraph-modal.component.ts b/src/app/components/editor/database/editors/paragraph/paragraph-modal.component.ts index d07fa06..827206c 100644 --- a/src/app/components/editor/database/editors/paragraph/paragraph-modal.component.ts +++ b/src/app/components/editor/database/editors/paragraph/paragraph-modal.component.ts @@ -15,7 +15,6 @@ export class ParagraphModalComponent { ) {} dismissModal() { - console.log(this.value); this.modals.dismiss(this.value); } } diff --git a/src/app/components/editor/database/editors/wysiwyg/wysiwyg-editor.component.ts b/src/app/components/editor/database/editors/wysiwyg/wysiwyg-editor.component.ts index 9542c68..0244ad2 100644 --- a/src/app/components/editor/database/editors/wysiwyg/wysiwyg-editor.component.ts +++ b/src/app/components/editor/database/editors/wysiwyg/wysiwyg-editor.component.ts @@ -50,6 +50,14 @@ export class WysiwygEditorComponent implements ICellEditorAngularComp, AfterView this.value = String(value.data); this.finishEdit(); }); + + const modalState = { + modal : true, + desc : 'WYSIWYG editor' + }; + + history.pushState(modalState, null); + modal.present(); }); }); diff --git a/src/app/components/nodes/form-input/form-input.component.ts b/src/app/components/nodes/form-input/form-input.component.ts index 7e044e9..c98ef43 100644 --- a/src/app/components/nodes/form-input/form-input.component.ts +++ b/src/app/components/nodes/form-input/form-input.component.ts @@ -125,6 +125,13 @@ export class FormInputComponent extends EditorNodeContract implements OnInit { } }); + const modalState = { + modal : true, + desc : 'Form input editor' + }; + + history.pushState(modalState, null); + await modal.present(); } } diff --git a/src/app/pages/editor/editor.page.ts b/src/app/pages/editor/editor.page.ts index 39d696f..fdeacb5 100644 --- a/src/app/pages/editor/editor.page.ts +++ b/src/app/pages/editor/editor.page.ts @@ -179,6 +179,13 @@ export class EditorPage implements OnInit { } }); + const modalState = { + modal : true, + desc : 'Page versions' + }; + + history.pushState(modalState, null); + await modal.present(); } } diff --git a/src/global.scss b/src/global.scss index d3a5abf..fe642d0 100644 --- a/src/global.scss +++ b/src/global.scss @@ -159,8 +159,15 @@ hr { .modal-big { .modal-wrapper { - height: calc(100vh - 30px); - width: calc(100vw - 30px); + min-height: calc(100vh - 30px); + min-width: calc(100vw - 30px); + } +} + +.modal-med { + .modal-wrapper { + min-height: calc(100vh - 100px); + min-width: calc(100vw - 200px); } }