feat(4ps): support modal interact-able

mixcore · Dec 30, 2023 · 3707e04 · 3707e04 · vercel · Dec 30, 2023
1 parent de98d01
commit 3707e04
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/libs/mix-share/src/components/record-form/record-form.component.ts b/libs/mix-share/src/components/record-form/record-form.component.ts
@@ -17,7 +17,7 @@ import { MixDefaultSkeletonComponent } from '@mixcore/ui/skeleton';
 import { DialogRef } from '@ngneat/dialog';
 import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { TuiFileLike } from '@taiga-ui/kit';
-import { delay, of } from 'rxjs';
+import { delay, of, take } from 'rxjs';
 import { DatabaseDataStore } from '../../modules/database/store/database-data.store';
 
 @Component({
@@ -37,7 +37,8 @@ import { DatabaseDataStore } from '../../modules/database/store/database-data.st
   encapsulation: ViewEncapsulation.None,
 })
 export class RecordFormComponent extends BaseComponent implements OnInit {
-  public static windowClass = 'mix-record-form-dialog top-align-modal';
+  public static windowClass =
+    'mix-record-form-dialog top-align-modal interact-modal';
   public static minWidth = '800px';
   public static maxWidth = '95vw';
 
@@ -71,7 +72,7 @@ export class RecordFormComponent extends BaseComponent implements OnInit {
 
   ngOnInit() {
     of(this.ref.data.mixDatabase)
-      .pipe(delay(200), this.observerLoadingStateSignal())
+      .pipe(delay(200), this.observerLoadingStateSignal(), take(1))
       .subscribe(() => {
         const db = this.ref.data.mixDatabase;
         this.mode = this.ref.data.data ? 'update' : 'create';

diff --git a/libs/mix-share/src/modules/database/database-data/database-data.component.ts b/libs/mix-share/src/modules/database/database-data/database-data.component.ts
@@ -332,6 +332,7 @@ export class DatabaseDataComponent
         windowClass: RecordFormComponent.windowClass,
         minWidth: RecordFormComponent.minWidth,
         maxWidth: RecordFormComponent.maxWidth,
+        dragConstraint: 'bounce',
         draggable: true,
         enableClose: {
           escape: true,

diff --git a/libs/share-styles/src/styles/dialog.scss b/libs/share-styles/src/styles/dialog.scss
@@ -63,8 +63,18 @@ ngneat-dialog {
   }
 }
 
+.interact-modal {
+  .ngneat-dialog-backdrop {
+    pointer-events: none;
+  }
+
+  .ngneat-dialog-content {
+    pointer-events: all;
+  }
+}
+
 .top-align-modal {
-  .ngneat-dialog-backdrop.ngneat-dialog-backdrop {
+  .ngneat-dialog-backdrop {
     align-items: flex-start;
     padding: 48px;
   }