refactor: move form fill and credentials to browser view

ttuanhung · Sep 30, 2019 · 97c5af9 · 97c5af9
1 parent f636cab
commit 97c5af9
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 142 deletions.
diff --git a/src/main/dialogs/auth.ts b/src/main/dialogs/auth.ts
@@ -28,7 +28,6 @@ export class AuthDialog extends Dialog {
 
       ipcMain.once(`request-auth-result-${this.appWindow.id}`, (e, result) => {
         this.hide();
-
         resolve(result);
       });
     });

diff --git a/src/main/dialogs/credentials.ts b/src/main/dialogs/credentials.ts
@@ -0,0 +1,26 @@
+import { TOOLBAR_HEIGHT } from '~/constants/design';
+import { AppWindow } from '../windows';
+import { Dialog } from '.';
+
+const WIDTH = 350;
+const HEIGHT = 271;
+
+export class CredentialsDialog extends Dialog {
+  public constructor(appWindow: AppWindow) {
+    super(appWindow, {
+      name: 'credentials',
+      bounds: {
+        height: HEIGHT,
+        width: WIDTH,
+        y: TOOLBAR_HEIGHT,
+      },
+    });
+  }
+
+  public rearrange() {
+    const { width } = this.appWindow.getContentBounds();
+    super.rearrange({
+      x: width - WIDTH,
+    });
+  }
+}
diff --git a/src/main/dialogs/dialog.ts b/src/main/dialogs/dialog.ts
@@ -80,21 +80,21 @@ export class Dialog extends BrowserView {
   }
 
   public toggle() {
-    if (!this.visible) this.show(this.bounds);
+    if (!this.visible) this.show();
     else this.hide();
   }
 
-  public show(rect: IRectangle = {}) {
+  public show(focus = true) {
     this.visible = true;
 
     clearTimeout(this.timeout);
 
-    this.rearrange(rect);
+    this.rearrange();
 
     this.appWindow.removeBrowserView(this);
     this.appWindow.addBrowserView(this);
 
-    this.webContents.focus();
+    if (focus) this.webContents.focus();
   }
 
   private _hide() {

diff --git a/src/main/dialogs/form-fill.ts b/src/main/dialogs/form-fill.ts
@@ -0,0 +1,41 @@
+import { TOOLBAR_HEIGHT } from '~/constants/design';
+import { Dialog } from './dialog';
+import { AppWindow } from '../windows';
+
+const WIDTH = 208;
+const HEIGHT = 128;
+const MARGIN = 8;
+
+export class FormFillDialog extends Dialog {
+  public inputRect = {
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+  };
+
+  public constructor(appWindow: AppWindow) {
+    super(appWindow, {
+      name: 'form-fill',
+      bounds: {
+        height: HEIGHT,
+        width: WIDTH,
+      },
+    });
+  }
+
+  public rearrange() {
+    super.rearrange({
+      x: this.inputRect.x - 8,
+      y: this.inputRect.y + this.inputRect.height + TOOLBAR_HEIGHT - MARGIN + 2,
+    });
+  }
+
+  public resize(count: number, hasSubtext = false) {
+    const itemHeight = hasSubtext ? 56 : 32;
+    super.rearrange({
+      width: WIDTH,
+      height: count * itemHeight + MARGIN * 2 + 16,
+    });
+  }
+}
diff --git a/src/main/dialogs/index.ts b/src/main/dialogs/index.ts
@@ -4,3 +4,5 @@ export * from './find';
 export * from './search';
 export * from './auth';
 export * from './permissions';
+export * from './form-fill';
+export * from './credentials';
diff --git a/src/main/services/messaging.ts b/src/main/services/messaging.ts
@@ -47,22 +47,22 @@ export const runMessagingService = (appWindow: AppWindow) => {
     const items = await getFormFillMenuItems(name, value);
 
     if (items.length) {
-      appWindow.formFillWindow.webContents.send(`formfill-get-items`, items);
-      appWindow.formFillWindow.inputRect = rect;
+      appWindow.formFillDialog.webContents.send(`formfill-get-items`, items);
+      appWindow.formFillDialog.inputRect = rect;
 
-      appWindow.formFillWindow.resize(
+      appWindow.formFillDialog.resize(
         items.length,
         items.find(r => r.subtext) != null,
       );
-      appWindow.formFillWindow.rearrange();
-      appWindow.formFillWindow.showInactive();
+      appWindow.formFillDialog.rearrange();
+      appWindow.formFillDialog.show(false);
     } else {
-      appWindow.formFillWindow.hide();
+      appWindow.formFillDialog.hide();
     }
   });
 
   ipcMain.on(`form-fill-hide-${id}`, () => {
-    appWindow.formFillWindow.hide();
+    appWindow.formFillDialog.hide();
   });
 
   ipcMain.on(
@@ -94,13 +94,13 @@ export const runMessagingService = (appWindow: AppWindow) => {
   );
 
   ipcMain.on(`credentials-show-${id}`, (e, data) => {
-    appWindow.credentialsWindow.webContents.send('credentials-update', data);
-    appWindow.credentialsWindow.rearrange();
-    appWindow.credentialsWindow.show();
+    appWindow.credentialsDialog.webContents.send('credentials-update', data);
+    appWindow.credentialsDialog.rearrange();
+    appWindow.credentialsDialog.show();
   });
 
   ipcMain.on(`credentials-hide-${id}`, () => {
-    appWindow.credentialsWindow.hide();
+    appWindow.credentialsDialog.hide();
   });
 
   ipcMain.on(`credentials-save-${id}`, async (e, data) => {

diff --git a/src/main/windows/app.ts b/src/main/windows/app.ts
@@ -12,22 +12,22 @@ import {
   FindDialog,
   PermissionsDialog,
   AuthDialog,
+  FormFillDialog,
+  CredentialsDialog,
 } from '../dialogs';
 
 export class AppWindow extends BrowserWindow {
   public viewManager: ViewManager;
   public multrin = new Multrin(this);
 
-  // TODO:
-  //
-  // public formFillWindow = new FormFillWindow(this);
-  // public credentialsWindow = new CredentialsWindow(this);
-
   public menuDialog = new MenuDialog(this);
   public searchDialog = new SearchDialog(this);
   public findDialog = new FindDialog(this);
   public permissionsDialog = new PermissionsDialog(this);
   public authDialog = new AuthDialog(this);
+  public formFillDialog = new FormFillDialog(this);
+  public credentialsDialog = new CredentialsDialog(this);
+
   public incognito: boolean;
 
   private windowsManager: WindowsManager;
@@ -82,9 +82,8 @@ export class AppWindow extends BrowserWindow {
     }
 
     const moveAndResize = () => {
-      this.formFillWindow.rearrange();
-      this.credentialsWindow.rearrange();
-
+      this.formFillDialog.rearrange();
+      this.credentialsDialog.rearrange();
       this.authDialog.rearrange();
       this.findDialog.rearrange();
       this.menuDialog.hide();

diff --git a/src/main/windows/credentials.ts b/src/main/windows/credentials.ts
diff --git a/src/main/windows/form-fill.ts b/src/main/windows/form-fill.ts
diff --git a/src/main/windows/index.ts b/src/main/windows/index.ts
@@ -1,3 +1 @@
 export * from './app';
-export * from './form-fill';
-export * from './credentials';
diff --git a/src/main/windows/popup.ts b/src/main/windows/popup.ts
diff --git a/src/renderer/views/credentials/store/index.ts b/src/renderer/views/credentials/store/index.ts
@@ -20,9 +20,7 @@ export class Store {
 
   public oldUsername: string;
 
-  public windowId: number = ipcRenderer.sendSync(
-    `get-window-id-${getCurrentWindow().id}`,
-  );
+  public windowId: number = getCurrentWindow().id;
 
   public constructor() {
     ipcRenderer.on('credentials-update', (e, data) => {

diff --git a/src/renderer/views/form-fill/store/index.ts b/src/renderer/views/form-fill/store/index.ts
@@ -3,13 +3,12 @@ import { observable } from 'mobx';
 
 import { IFormFillMenuItem } from '~/interfaces';
 import { getCurrentWindow } from '../../app/utils/windows';
+
 export class Store {
   @observable
   public items: IFormFillMenuItem[] = [];
 
-  public windowId: number = ipcRenderer.sendSync(
-    `get-window-id-${getCurrentWindow().id}`,
-  );
+  public windowId: number = getCurrentWindow().id;
 
   public constructor() {
     ipcRenderer.on(`formfill-get-items`, (e, items) => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,6 @@ export class AuthDialog extends Dialog { @@
           ipcMain.once(`request-auth-result-${this.appWindow.id}`, (e, result) => {
             this.hide();
             resolve(result);
           });
         });
@@ Expand Down @@