Merge pull request #12 from BUPTlhuanyu/restructure

fix(menu & background): menu & background

Author: BUPTlhuanyu

doc/home.png

@@ -1,4 +1,5 @@
 .pandora-home-content {
+    z-index: 1;
     flex: 1;
     width: 100%;
     padding: 40px 8vw 0;

packages/views/src/assets/img/sky.jpeg

@@ -1,6 +1,7 @@
 .pandora-home-header {
+    z-index: 1;
     -webkit-app-region: drag;
-    background-color: #231F20;
+    background-color: rgba(35, 31, 32, 0.65);
     width: 100%;
     height: 30px;
     padding: 0 8vw;

packages/views/src/pages/home/container/content/index.scss

@@ -3,10 +3,23 @@ body, html, #root, .pandora-home {
   margin: 0;
   height: 100%;
   font-size: 18px;
+  background: url('../../assets/img/sky.jpeg');
+  background-size: cover;
 }
 
 .pandora-home {
     display: flex;
     align-items: center;
     flex-direction: column;
+    &::before {
+        content: '';
+        background: inherit; 
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0; 
+        bottom: 0;
+        box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
+        filter: blur(1px);
+    }
 }

packages/views/src/pages/home/container/header/index.scss

@@ -1,7 +1,7 @@
 /**
  * @file
  */
-import {Menubar} from '../menu/menubar';
+import {Menubar, HomeMenubar} from '../menu/menubar';
 import {registerContextMenuListener} from '../contextmenu/electron-main/contextmenu';
 
 import path from 'path';
@@ -61,22 +61,16 @@ function createWindow(dispose: Function) {
 }
 
 export class CodeMain {
-    private oldMenus: Menu | null;
     constructor() {
         this.initServices();
-        const oldMenu = Menu.getApplicationMenu();
-        this.oldMenus = null;
-		if (oldMenu) {
-			this.oldMenus = oldMenu;
-		}
     }
     async startUp(): Promise<void> {
         createWindow(this.resetMenu.bind(this));
         registerContextMenuListener();
     }
 
     private resetMenu () {
-        this.oldMenus && Menu.setApplicationMenu(this.oldMenus);
+        new HomeMenubar();
     }
 
     private initServices() {

packages/views/src/pages/home/index.scss

@@ -2,7 +2,8 @@
  * @file app
  */
 import path from 'path';
-import {app, BrowserWindow, ipcMain, Menu} from 'electron';
+import {app, BrowserWindow, ipcMain} from 'electron';
+import {HomeMenubar} from './menu/menubar';
 import {DEVELOP_PORT} from 'shared/common/constant';
 
 import {registerContextMenuListener} from './contextmenu/electron-main/contextmenu';
@@ -51,6 +52,7 @@ function createHome() {
 
 class Home {
     constructor () {
+        new HomeMenubar();
         this.registerListeners();
     }
     private registerListeners () {

packages/workbench-electron/main/editor/editorMain.ts

@@ -5,6 +5,9 @@
  * src/vs/platform/actions/common/actions.ts
  * vscode 对 menu 的实现都归于 action，非常复杂
  */
+// TODO: 
+// 1. 复用
+// 2. 设置 settings 方案
 import {Menu, MenuItem} from 'electron';
 import {camelToWords} from '../../lib/utils';
 import {ICommandService} from 'services/command';
@@ -269,3 +272,116 @@ export class Menubar {
         this.appendRoleMenu(windowMenu, roles);
     }
 }
+
+export class HomeMenubar {
+    constructor(
+        // @ICommandService private readonly commandService: ICommandService
+    ) {
+        this.install();
+    }
+
+    // private addFallbackHandlers(): void {}
+
+    private install(): void {
+        // Menus
+        const menubar = new Menu();
+
+        // app
+        const applicationMenu = new Menu();
+        this.setMacApplicationMenu(applicationMenu);
+        const macApplicationMenuItem = new MenuItem({label: 'Pandora', submenu: applicationMenu});
+        menubar.append(macApplicationMenuItem);
+
+        // Window
+        const windowMenu = new Menu();
+        this.setWindowMenu(windowMenu);
+        const windowItem = new MenuItem({label: 'Window', submenu: windowMenu});
+        menubar.append(windowItem);
+
+        // Help
+        const helpMenu = new Menu();
+        this.setHelpMenu(helpMenu);
+        const helpMenuItem = new MenuItem({label: 'Help', submenu: helpMenu, role: 'help'});
+        menubar.append(helpMenuItem);
+
+        // 设置成窗口顶部菜单
+        if (menubar.items && menubar.items.length > 0) {
+            Menu.setApplicationMenu(menubar);
+        } else {
+            Menu.setApplicationMenu(null);
+        }
+    }
+
+    private setMacApplicationMenu(macApplicationMenu: Menu): void {
+        // const preferences = new MenuItem({
+        //     label: 'preferences',
+        //     click() {}
+        // });
+
+        const services = new MenuItem({
+            label: 'services',
+            role: 'services'
+        });
+
+        const quit = new MenuItem({
+            label: 'quit',
+            role: 'quit'
+        });
+
+        const actions = [
+            // about,
+            // __separator__(),
+            // preferences,
+            // update,
+            __separator__(),
+            services,
+            __separator__(),
+            quit
+        ];
+        actions.forEach(i => macApplicationMenu.append(i));
+    }
+
+    private setHelpMenu(helpMenu: Menu): void {
+        // Toggle Developer Tools
+        const toggleDevtools = new MenuItem({
+            label: 'Toggle Developer Tools',
+            role: 'toggleDevTools'
+        });
+        const actions = [__separator__(), toggleDevtools];
+        actions.forEach(i => helpMenu.append(i));
+    }
+
+    private appendRoleMenu(menu: Menu, roles: Role[]) {
+        roles.forEach(role => {
+            if (role === '|') {
+                menu.append(__separator__());
+            } else {
+                menu.append(
+                    new MenuItem({
+                        label: camelToWords(role),
+                        role
+                    })
+                );
+            }
+        });
+    }
+
+    private setWindowMenu(windowMenu: Menu): void {
+        const roles: Role[] = [
+            'reload',
+            'forceReload',
+            '|',
+            'resetZoom',
+            'zoomIn',
+            'zoomOut',
+            'togglefullscreen',
+            'minimize',
+            '|',
+            'close',
+            'hide',
+            'hideOthers',
+            'unhide'
+        ];
+        this.appendRoleMenu(windowMenu, roles);
+    }
+}

packages/workbench-electron/main/main.ts

@@ -1,6 +1,6 @@
 {
   "name": "workbench-electron",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Pandora Workbench",
   "productName": "Pandora Workbench",
   "private": true,