From 6aedf1710b2f278726cc2910290fdc0e30587722 Mon Sep 17 00:00:00 2001 From: Soroush Date: Fri, 11 Sep 2020 10:39:56 -0700 Subject: [PATCH 1/7] splash screen --- .../electron-builder-config.json | 6 +- .../electron-server/resources/ms_logo.svg | 39 ++++++++ Composer/packages/electron-server/src/main.ts | 42 ++++++--- .../src/splash/splashScreen.ts | 80 ++++++++++++++++ .../electron-server/src/splash/template.ts | 91 +++++++++++++++++++ 5 files changed, 244 insertions(+), 14 deletions(-) create mode 100644 Composer/packages/electron-server/resources/ms_logo.svg create mode 100644 Composer/packages/electron-server/src/splash/splashScreen.ts create mode 100644 Composer/packages/electron-server/src/splash/template.ts diff --git a/Composer/packages/electron-server/electron-builder-config.json b/Composer/packages/electron-server/electron-builder-config.json index bc27b1da44..dd065273b9 100644 --- a/Composer/packages/electron-server/electron-builder-config.json +++ b/Composer/packages/electron-server/electron-builder-config.json @@ -13,11 +13,13 @@ "asarUnpack": [ "build/assets", "build/templates", - "resources/composerIcon_1024x1024.png" + "resources/composerIcon_1024x1024.png", + "resources/ms_logo.svg" ], "files": [ "build", - "resources/composerIcon_1024x1024.png" + "resources/composerIcon_1024x1024.png", + "resources/ms_logo.svg" ], "extraResources": [ { diff --git a/Composer/packages/electron-server/resources/ms_logo.svg b/Composer/packages/electron-server/resources/ms_logo.svg new file mode 100644 index 0000000000..4451bcde70 --- /dev/null +++ b/Composer/packages/electron-server/resources/ms_logo.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + diff --git a/Composer/packages/electron-server/src/main.ts b/Composer/packages/electron-server/src/main.ts index 4082227967..c2ad41c044 100644 --- a/Composer/packages/electron-server/src/main.ts +++ b/Composer/packages/electron-server/src/main.ts @@ -3,21 +3,24 @@ import { join, resolve } from 'path'; -import { mkdirp } from 'fs-extra'; +import { AppUpdaterSettings, UserSettings } from '@bfc/shared'; import { app, ipcMain } from 'electron'; -import fixPath from 'fix-path'; import { UpdateInfo } from 'electron-updater'; -import { AppUpdaterSettings, UserSettings } from '@bfc/shared'; +import fixPath from 'fix-path'; +import { mkdirp } from 'fs-extra'; +import { initAppMenu } from './appMenu'; +import { AppUpdater } from './appUpdater'; +import { composerProtocol } from './constants'; +import ElectronWindow from './electronWindow'; +import { initSplashScreen } from './splash/splashScreen'; import { isDevelopment } from './utility/env'; -import { isWindows, isMac } from './utility/platform'; import { getUnpackedAsarPath } from './utility/getUnpackedAsarPath'; -import ElectronWindow from './electronWindow'; import log from './utility/logger'; -import { AppUpdater } from './appUpdater'; +import { isMac, isWindows } from './utility/platform'; import { parseDeepLinkUrl } from './utility/url'; -import { composerProtocol } from './constants'; -import { initAppMenu } from './appMenu'; + +const microsoftLogoPath = join(__dirname, '../resources/ms_logo.svg'); const error = log.extend('error'); let deeplinkUrl = ''; @@ -143,8 +146,6 @@ async function main() { } await mainWindow.webContents.loadURL(getBaseUrl() + deeplinkUrl); - mainWindow.show(); - mainWindow.on('closed', () => { ElectronWindow.destroy(); }); @@ -178,13 +179,30 @@ async function run() { app.on('ready', async () => { log('App ready'); + const getMainWindow = () => ElectronWindow.getInstance().browserWindow; + const { startApp, updateStatus } = initSplashScreen({ + getMainWindow, + color: 'rgb(0, 120, 212)', + logo: resolve(microsoftLogoPath), + productName: 'Bot Framework Composer', + productFamily: 'Microsoft Azure', + status: 'Initializing...', + website: 'www.botframework.com', + width: 500, + height: 300, + }); + + updateStatus('Starting server...'); + await loadServer(); + await main(); + + setTimeout(startApp, 500); + ipcMain.once('init-user-settings', (_ev, settings: UserSettings) => { // we can't synchronously call the main process (due to deadlocks) // so we wait for the initial settings to be loaded from the client initializeAppUpdater(settings.appUpdater); }); - await loadServer(); - await main(); }); // Quit when all windows are closed. diff --git a/Composer/packages/electron-server/src/splash/splashScreen.ts b/Composer/packages/electron-server/src/splash/splashScreen.ts new file mode 100644 index 0000000000..9610d3ca27 --- /dev/null +++ b/Composer/packages/electron-server/src/splash/splashScreen.ts @@ -0,0 +1,80 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { BrowserWindow, systemPreferences } from 'electron'; + +import { getSplashScreenContent, statusElmId } from './template'; + +export type SplashScreenProps = { + getMainWindow: () => BrowserWindow | undefined; + color?: string; + icon?: string; + width?: number; + height?: number; + productName?: string; + productFamily?: string; + logo?: string; + website?: string; + status?: string; +}; + +export const initSplashScreen = ({ + getMainWindow, + color: initColor, + icon, + width = 600, + height = 400, + productName, + productFamily, + logo, + website, + status, +}: SplashScreenProps) => { + // If no color is provided, uses OS accent color + const color = initColor || (systemPreferences.getAccentColor && `#${systemPreferences.getAccentColor()}`); + + const splashScreenWindow = new BrowserWindow({ + parent: getMainWindow(), + show: false, + width, + height, + modal: true, + transparent: true, + skipTaskbar: true, + frame: false, + autoHideMenuBar: true, + alwaysOnTop: true, + resizable: false, + movable: false, + icon, + webPreferences: { + webSecurity: false, + }, + }); + + const args = { + productName, + productFamily, + logo, + website, + color, + status, + }; + + const file = 'data:text/html;charset=UTF-8,' + encodeURIComponent(getSplashScreenContent(args)); + splashScreenWindow.loadURL(file); + splashScreenWindow.show(); + + const startApp = () => { + setTimeout(() => splashScreenWindow.destroy(), 500); + getMainWindow()?.show(); + }; + + const updateStatus = async (status: string) => { + await splashScreenWindow.webContents.executeJavaScript( + `document.querySelector('#${statusElmId}').textContent = '${status}';` + ); + }; + + return { startApp, updateStatus }; +}; diff --git a/Composer/packages/electron-server/src/splash/template.ts b/Composer/packages/electron-server/src/splash/template.ts new file mode 100644 index 0000000000..ade5ea4dae --- /dev/null +++ b/Composer/packages/electron-server/src/splash/template.ts @@ -0,0 +1,91 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +export const statusElmId = 'status-txt'; + +export const getSplashScreenContent = ({ + logo = '', + productName = 'Product', + productFamily = 'Product Family', + text = 'Loading ...', + website = 'www.website.com', + color = '#666', +}) => ` + + + + + + + +
+ +

${productName}

+ ${productFamily ? `

${productFamily}

` : ''} +

${text}

+

${website}

+
+ + +`; From 2bf3b803de3397ee0b8e869f8d1e8dbf99060fc5 Mon Sep 17 00:00:00 2001 From: Soroush Date: Fri, 11 Sep 2020 11:26:46 -0700 Subject: [PATCH 2/7] Fix css --- Composer/packages/electron-server/src/splash/template.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/electron-server/src/splash/template.ts b/Composer/packages/electron-server/src/splash/template.ts index ade5ea4dae..601b3af81c 100644 --- a/Composer/packages/electron-server/src/splash/template.ts +++ b/Composer/packages/electron-server/src/splash/template.ts @@ -17,7 +17,7 @@ export const getSplashScreenContent = ({