Skip to content

Commit

Permalink
SDA-4506 - Apply Zoom for notification window (#2120)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KiranNiranjan
KiranNiranjan authored Apr 4, 2024
1 parent 668e68e commit 98f638b
Show file tree
Hide file tree
Showing 7 changed files with 167 additions and 70 deletions.
2 changes: 2 additions & 0 deletions src/app/notifications/notification-helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ class NotificationHelper {
electronToast.show();
return;
}
options.zoomFactor =
windowHandler?.getMainWebContents()?.getZoomFactor() || 1;
notification.showNotification(options, this.notificationCallback);
}

Expand Down
196 changes: 130 additions & 66 deletions src/app/window-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ const TITLE_BAR_EVENTS = [
'enter-full-screen',
'leave-full-screen',
];
const ZOOM_FACTOR_CHANGE = 'zoom-factor-change';

/**
* Checks if window is valid and exists
Expand Down Expand Up @@ -857,15 +858,6 @@ export const zoomIn = () => {
return;
}

// Disable Zoom for notification windows
if (
(focusedWindow as ICustomBrowserWindow).winName &&
(focusedWindow as ICustomBrowserWindow).winName ===
apiName.notificationWindowName
) {
return;
}

let { webContents } = focusedWindow;

// If the focused window is mainWindow we should use mainWebContents
Expand All @@ -878,29 +870,66 @@ export const zoomIn = () => {
}
}

if (windowHandler.isMana) {
const setZoomFactor = (
webContents: WebContents,
notificationWebContents: any = {},
isNotificationWindow = false,
) => {
const zoomFactor = webContents.getZoomFactor();
if (zoomFactor < 1.5) {
if (zoomFactor < 0.7) {
webContents.setZoomFactor(0.7);
} else if (zoomFactor >= 0.7 && zoomFactor < 0.8) {
webContents.setZoomFactor(0.8);
} else if (zoomFactor >= 0.8 && zoomFactor < 0.9) {
webContents.setZoomFactor(0.9);
} else if (zoomFactor >= 0.9 && zoomFactor < 1.0) {
webContents.setZoomFactor(1.0);
} else if (zoomFactor >= 1.0 && zoomFactor < 1.1) {
webContents.setZoomFactor(1.1);
} else if (zoomFactor >= 1.1 && zoomFactor < 1.25) {
webContents.setZoomFactor(1.25);
} else if (zoomFactor >= 1.25 && zoomFactor < 1.5) {
webContents.setZoomFactor(1.5);
if (windowHandler.isMana) {
if (zoomFactor < 1.5) {
if (zoomFactor < 0.7) {
isNotificationWindow
? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 0.7)
: webContents.setZoomFactor(0.7);
} else if (zoomFactor >= 0.7 && zoomFactor < 0.8) {
isNotificationWindow
? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 0.8)
: webContents.setZoomFactor(0.8);
} else if (zoomFactor >= 0.8 && zoomFactor < 0.9) {
isNotificationWindow
? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 0.9)
: webContents.setZoomFactor(0.9);
} else if (zoomFactor >= 0.9 && zoomFactor < 1.0) {
isNotificationWindow
? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1.0)
: webContents.setZoomFactor(1.0);
} else if (zoomFactor >= 1.0 && zoomFactor < 1.1) {
isNotificationWindow
? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1.1)
: webContents.setZoomFactor(1.1);
} else if (zoomFactor >= 1.1 && zoomFactor < 1.25) {
isNotificationWindow
? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1.25)
: webContents.setZoomFactor(1.25);
} else if (zoomFactor >= 1.25 && zoomFactor < 1.5) {
isNotificationWindow
? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1.5)
: webContents.setZoomFactor(1.5);
}
}
} else {
const currentZoomLevel = webContents.getZoomLevel();
isNotificationWindow
? notificationWebContents.send(ZOOM_FACTOR_CHANGE, zoomFactor)
: webContents.setZoomLevel(currentZoomLevel + 0.5);
}
} else {
const currentZoomLevel = webContents.getZoomLevel();
webContents.setZoomLevel(currentZoomLevel + 0.5);
}
};

const notificationWindows = BrowserWindow.getAllWindows().filter(
(win) =>
(win as ICustomBrowserWindow).winName &&
(win as ICustomBrowserWindow).winName === apiName.notificationWindowName,
);

notificationWindows.map((notificationWindow) => {
const notificationWebContents = notificationWindow?.webContents;
if (!notificationWindow || !windowExists(notificationWindow)) {
return;
}
setZoomFactor(webContents, notificationWebContents, true);
});
setZoomFactor(webContents);
};

/**
Expand All @@ -917,15 +946,6 @@ export const zoomOut = () => {
return;
}

// Disable Zoom for notification windows
if (
(focusedWindow as ICustomBrowserWindow).winName &&
(focusedWindow as ICustomBrowserWindow).winName ===
apiName.notificationWindowName
) {
return;
}

let { webContents } = focusedWindow;

// If the focused window is mainWindow we should use mainWebContents
Expand All @@ -938,29 +958,68 @@ export const zoomOut = () => {
}
}

if (windowHandler.isMana) {
const setZoomFactor = (
webContents: WebContents,
notificationWebContents: any = {},
isNotificationWindow = false,
) => {
const zoomFactor = webContents.getZoomFactor();
if (zoomFactor > 0.7) {
if (zoomFactor > 1.5) {
webContents.setZoomFactor(1.5);
} else if (zoomFactor > 1.25 && zoomFactor <= 1.5) {
webContents.setZoomFactor(1.25);
} else if (zoomFactor > 1.1 && zoomFactor <= 1.25) {
webContents.setZoomFactor(1.1);
} else if (zoomFactor > 1.0 && zoomFactor <= 1.1) {
webContents.setZoomFactor(1.0);
} else if (zoomFactor > 0.9 && zoomFactor <= 1.0) {
webContents.setZoomFactor(0.9);
} else if (zoomFactor > 0.8 && zoomFactor <= 0.9) {
webContents.setZoomFactor(0.8);
} else if (zoomFactor > 0.7 && zoomFactor <= 0.8) {
webContents.setZoomFactor(0.7);
if (windowHandler.isMana) {
const zoomFactor = webContents.getZoomFactor();
if (zoomFactor > 0.7) {
if (zoomFactor > 1.5) {
isNotificationWindow
? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 1.5)
: webContents.setZoomFactor(1.5);
} else if (zoomFactor > 1.25 && zoomFactor <= 1.5) {
isNotificationWindow
? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 1.25)
: webContents.setZoomFactor(1.25);
} else if (zoomFactor > 1.1 && zoomFactor <= 1.25) {
isNotificationWindow
? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 1.1)
: webContents.setZoomFactor(1.1);
} else if (zoomFactor > 1.0 && zoomFactor <= 1.1) {
isNotificationWindow
? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 1.0)
: webContents.setZoomFactor(1.0);
} else if (zoomFactor > 0.9 && zoomFactor <= 1.0) {
isNotificationWindow
? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 0.9)
: webContents.setZoomFactor(0.9);
} else if (zoomFactor > 0.8 && zoomFactor <= 0.9) {
isNotificationWindow
? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 0.8)
: webContents.setZoomFactor(0.8);
} else if (zoomFactor > 0.7 && zoomFactor <= 0.8) {
isNotificationWindow
? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 0.7)
: webContents.setZoomFactor(0.7);
}
}
} else {
const currentZoomLevel = webContents.getZoomLevel();
isNotificationWindow
? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, zoomFactor)
: webContents.setZoomLevel(currentZoomLevel - 0.5);
}
} else {
const currentZoomLevel = webContents.getZoomLevel();
webContents.setZoomLevel(currentZoomLevel - 0.5);
}
};

const notificationWindows = BrowserWindow.getAllWindows().filter(
(win) =>
(win as ICustomBrowserWindow).winName &&
(win as ICustomBrowserWindow).winName === apiName.notificationWindowName,
);

notificationWindows.map((notificationWindow) => {
const notificationWebContents = notificationWindow?.webContents;
if (!notificationWindow || !windowExists(notificationWindow)) {
return;
}
setZoomFactor(webContents, notificationWebContents, true);
});

setZoomFactor(webContents);
};

/**
Expand All @@ -972,14 +1031,6 @@ export const resetZoomLevel = () => {
if (!focusedWindow || !windowExists(focusedWindow)) {
return;
}
// Disable Zoom for notification windows
if (
(focusedWindow as ICustomBrowserWindow).winName &&
(focusedWindow as ICustomBrowserWindow).winName ===
apiName.notificationWindowName
) {
return;
}
let { webContents } = focusedWindow;
// If the focused window is mainWindow we should use mainWebContents
if (
Expand All @@ -990,6 +1041,19 @@ export const resetZoomLevel = () => {
webContents = mainWebContents;
}
}
const notificationWebContents = BrowserWindow.getAllWindows().filter(
(win) =>
(win as ICustomBrowserWindow).winName &&
(win as ICustomBrowserWindow).winName === apiName.notificationWindowName,
);

notificationWebContents.map((notificationWindow) => {
const notificationWebContents = notificationWindow.webContents;
if (!notificationWindow || !windowExists(notificationWindow)) {
return;
}
notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1);
});
webContents.setZoomLevel(0);
};

Expand Down
2 changes: 2 additions & 0 deletions src/common/api-interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,7 @@ export interface INotificationData {
hasReply?: boolean;
hasMention?: boolean;
isFederatedEnabled?: boolean;
zoomFactor: number;
}

/**
Expand All @@ -300,6 +301,7 @@ export interface ICallNotificationData {
shouldDisplayBadge: boolean;
acceptButtonText: string;
rejectButtonText: string;
zoomFactor: number;
}

export enum NotificationActions {
Expand Down
2 changes: 2 additions & 0 deletions src/renderer/call-notification-helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ class CallNotificationHelper {
* @param options {ICallNotificationData}
*/
public showNotification(options: ICallNotificationData) {
options.zoomFactor =
windowHandler?.getMainWebContents()?.getZoomFactor() || 1;
callNotification.createCallNotificationWindow(
options,
this.notificationCallback,
Expand Down
20 changes: 17 additions & 3 deletions src/renderer/components/call-notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ interface ICallNotificationState {
isPrimaryTextOverflowing: boolean;
isSecondaryTextOverflowing: boolean;
isFederatedEnabled: boolean;
zoomFactor: number;
}

type mouseEventButton =
Expand Down Expand Up @@ -78,6 +79,7 @@ export default class CallNotification extends React.Component<
isPrimaryTextOverflowing: false,
isSecondaryTextOverflowing: false,
isFederatedEnabled: false,
zoomFactor: 1,
};
this.state = { ...this.defaultState };
this.updateState = this.updateState.bind(this);
Expand All @@ -88,13 +90,15 @@ export default class CallNotification extends React.Component<
*/
public componentDidMount(): void {
ipcRenderer.on('call-notification-data', this.updateState);
ipcRenderer.on('zoom-factor-change', this.setZoomFactor);
}

/**
* Callback to handle event when a component is unmounted
*/
public componentWillUnmount(): void {
ipcRenderer.removeListener('call-notification-data', this.updateState);
ipcRenderer.on('zoom-factor-change', this.setZoomFactor);
}

/**
Expand All @@ -121,6 +125,7 @@ export default class CallNotification extends React.Component<
isPrimaryTextOverflowing,
isSecondaryTextOverflowing,
isFederatedEnabled,
zoomFactor,
} = this.state;

let themeClassName;
Expand Down Expand Up @@ -168,8 +173,10 @@ export default class CallNotification extends React.Component<
}}
onClick={this.eventHandlers.onClick(id)}
>
<div className={`title ${themeClassName}`}>{title}</div>
<div className='caller-info-container'>
<div className={`title ${themeClassName}`} style={{ zoom: zoomFactor }}>
{title}
</div>
<div className='caller-info-container' style={{ zoom: zoomFactor }}>
<div className='logo-container'>
{this.renderImage(
icon,
Expand Down Expand Up @@ -236,7 +243,7 @@ export default class CallNotification extends React.Component<
)}
</div>
</div>
<div className='actions'>
<div className='actions' style={{ zoom: zoomFactor }}>
<button
data-testid='CALL_NOTIFICATION_REJECT_BUTTON'
className={classNames('decline', {
Expand Down Expand Up @@ -323,6 +330,13 @@ export default class CallNotification extends React.Component<
this.checkTextOverflow();
}

/**
* Set notification zoom factor
*/
private setZoomFactor = (_event, zoomFactor) => {
this.setState({ zoomFactor });
};

/**
* Renders image if provided otherwise renders symphony logo
* @param imageUrl
Expand Down
Loading

0 comments on commit 98f638b

Please sign in to comment.