Merge pull request #2439 from NguyenTranHoangSym/SDA-4937

SDA-4937_4944: Adding border radius to window 11 and handle bleeding edges

src/app/display-media-request-handler.ts

@@ -1,6 +1,6 @@
 import { BrowserWindow, desktopCapturer, ipcMain, session } from 'electron';
 import { NOTIFICATION_WINDOW_TITLE } from '../common/api-interface';
-import { isDevEnv, isMac, isWindowsOS } from '../common/env';
+import { isDevEnv, isMac, isWindows11, isWindowsOS } from '../common/env';
 import { logger } from '../common/logger';
 import { windowHandler } from './window-handler';
 import { createComponentWindow, windowExists } from './window-utils';
@@ -135,6 +135,8 @@ class DisplayMediaRequestHandler {
               resizable: false,
               movable: false,
               fullscreenable: false,
+              roundedCorners: isWindows11 || isMac ? true : false,
+              thickFrame: isWindowsOS ? false : true,
             });
             this.screenPickerPlaceholderWindow.show();
             callback({ video: source });

src/app/notifications/call-notification.ts

@@ -5,7 +5,7 @@ import {
   ICallNotificationData,
   NotificationActions,
 } from '../../common/api-interface';
-import { isDevEnv, isMac } from '../../common/env';
+import { isDevEnv, isMac, isWindows11 } from '../../common/env';
 import { logger } from '../../common/logger';
 import { notification } from '../../renderer/notification';
 import {
@@ -237,6 +237,7 @@ class CallNotification {
         autoHideMenuBar: true,
         minimizable: false,
         maximizable: false,
+        transparent: isWindows11 ? true : false,
         title: 'Call Notification - Symphony Messaging',
         webPreferences: {
           sandbox: IS_SAND_BOXED,

src/app/window-handler.ts

@@ -26,7 +26,13 @@ import {
   Themes,
   WindowTypes,
 } from '../common/api-interface';
-import { isDevEnv, isLinux, isMac, isWindowsOS } from '../common/env';
+import {
+  isDevEnv,
+  isLinux,
+  isMac,
+  isWindows11,
+  isWindowsOS,
+} from '../common/env';
 import { i18n, LocaleType } from '../common/i18n';
 import { ScreenShotAnnotation } from '../common/ipcEvent';
 import { logger } from '../common/logger';
@@ -1693,6 +1699,8 @@ export class WindowHandler {
           resizable: false,
           movable: false,
           fullscreenable: false,
+          roundedCorners: isWindows11 || isMac ? true : false,
+          thickFrame: isWindowsOS ? false : true,
         });
         this.screenPickerPlaceholderWindow.show();
       }
@@ -1955,6 +1963,7 @@ export class WindowHandler {
           titleBarStyle: 'customButtonsOnHover',
           minimizable: false,
           maximizable: false,
+          transparent: isWindows11 ? true : false,
           title: 'Screen Sharing Indicator - Symphony Messaging',
           closable: false,
           useContentSize: true,

src/app/window-utils.ts

@@ -21,7 +21,13 @@ import { format, parse } from 'url';
 import { productDisplayName } from '../../package.json';
 import { apiName, EPresenceStatusGroup } from '../common/api-interface';
 
-import { isDevEnv, isLinux, isMac, isWindowsOS } from '../common/env';
+import {
+  isDevEnv,
+  isLinux,
+  isMac,
+  isWindows11,
+  isWindowsOS,
+} from '../common/env';
 import { i18n, LocaleType } from '../common/i18n';
 import { logger } from '../common/logger';
 import { getDifferenceInDays, getGuid, getRandomTime } from '../common/utils';
@@ -211,6 +217,8 @@ export const createComponentWindow = (
     show: false,
     width: 300,
     ...opts,
+    roundedCorners: isWindows11 || isMac ? true : false,
+    thickFrame: isWindowsOS ? false : true,
     webPreferences: {
       sandbox: IS_SAND_BOXED,
       nodeIntegration: IS_NODE_INTEGRATION_ENABLED,

src/common/env.ts

@@ -1,7 +1,19 @@
 import { app } from 'electron';
+import { release } from 'os';
+
+export const isWindowsOS = process.platform === 'win32';
+const isWindows11OrHigher = () => {
+  if (!isWindowsOS) {
+    return false;
+  }
+
+  const buildNumber = parseInt(release().split('.')[2], 10);
+  return buildNumber >= 22000;
+};
+export const isWindows11 = isWindows11OrHigher();
+
 export const isDevEnv = !app?.isPackaged;
 export const isElectronQA = !!process.env.ELECTRON_QA;
 
 export const isMac = process.platform === 'darwin';
-export const isWindowsOS = process.platform === 'win32';
 export const isLinux = process.platform === 'linux';

src/renderer/notification.ts

@@ -20,7 +20,7 @@ import {
   NOTIFICATION_WINDOW_TITLE,
   NotificationActions,
 } from '../common/api-interface';
-import { isMac } from '../common/env';
+import { isMac, isWindows11 } from '../common/env';
 import { logger } from '../common/logger';
 import NotificationHandler, { ICorner } from './notification-handler';
 
@@ -678,6 +678,7 @@ class Notification extends NotificationHandler {
       type: 'toolbar',
       acceptFirstMouse: true,
       title: NOTIFICATION_WINDOW_TITLE,
+      transparent: isWindows11 ? true : false,
       webPreferences: {
         sandbox: IS_SAND_BOXED,
         nodeIntegration: IS_NODE_INTEGRATION_ENABLED,