feat: add workbench mask

Postcatlab · Apr 20, 2022 · 1aeed32 · 1aeed32
1 parent 9df818f
commit 1aeed32
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/src/app/electron-main/main.ts b/src/app/electron-main/main.ts
@@ -222,8 +222,21 @@ try {
     } else if (arg.action === 'autoResize') {
       resize(arg.data.sideWidth);
     } else if (arg.action === 'openModal') {
-      console.log('openModal');
-      subView.mainView.view.webContents.send('connect-main', { action: 'openModal' });
+      const background = arg.data.background || '#00000073';
+      subView.mainView.view.webContents.executeJavaScript(`
+        var mask = document.querySelector('#mask');
+        if (mask) {
+          mask.style.background = '${background}';
+          mask.style.display = 'block';
+        }
+      `);
+    } else if (arg.action === 'closeModal') {
+      subView.mainView.view.webContents.executeJavaScript(`
+        var mask = document.querySelector('#mask');
+        if (mask) {
+          mask.style.display = 'none';
+        }
+      `);
     } else {
       returnValue = 'Invalid data';
     }

diff --git a/src/core/api-manager/browser/src/app/shared/services/modal.service.ts b/src/core/api-manager/browser/src/app/shared/services/modal.service.ts
@@ -33,15 +33,15 @@ export class ModalService {
         {
           label: '取消',
           onClick: () =>{
-            window.eo.closeModal();
             modal.destroy();
           } 
         },
       ],
     };
     Object.assign(modalOpts, inOpts);
     const modal = this.modalService.create(modalOpts);
-    window.eo.openModal();
+    modal.afterOpen.subscribe(() => window.eo.openModal());
+    modal.afterClose.subscribe(() => window.eo.closeModal());
     return modal;
   }
 }
diff --git a/src/platform/electron-browser/preload.ts b/src/platform/electron-browser/preload.ts
@@ -46,8 +46,9 @@ if (apiAccessRules.includes('hook')) {
 window.eo.tempApi = (params) => {
   return ipcRenderer.sendSync('eo-sync', params);
 };
-window.eo.openModal = () => {
-  return ipcRenderer.sendSync('eo-sync', { action: 'openModal' });
+window.eo.openModal = (background) => {
+  background = background || '#00000073';
+  return ipcRenderer.sendSync('eo-sync', { action: 'openModal', data: { background: background } });
 };
 window.eo.closeModal = () => {
   return ipcRenderer.sendSync('eo-sync', { action: 'closeModal' });

diff --git a/src/workbench/browser/src/index.html b/src/workbench/browser/src/index.html
@@ -30,8 +30,18 @@
         </div>
       </div>
     </eo-root>
+    <div id="mask"></div>
   </body>
   <style>
+    #mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 99999;
+      display: none;
+    }
     .loading_container {
       position: absolute;
       top: 40%;