if/SymphonyElectron
1
0
Fork 0
mirror of https://github.com/finos/SymphonyElectron.git synced 2025-02-25 18:55:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

SDA-2824 Set notification position modal darkmode

Browse Source
This commit is contained in:
psjostrom
2021-01-14 12:10:20 +01:00
parent 2c947ed41c
commit 5c5462592d
10 changed files with 118 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
spec/__snapshots__/notificationSettings.spec.ts.snap
View File

@@ -48,10 +48,17 @@ exports[`Notification Settings should mount, unmount and render component should
className="position-button-container"
>
<button
className="position-button upper-left"
className="position-button"
data-testid="upper-left"
id="upper-left"
name="position"
onClick={[Function]}
style={
Object {
"backgroundColor": "#F8F8F9",
"color": "#17181B",
}
}
type="button"
value="upper-left"
>
@@ -62,10 +69,17 @@ exports[`Notification Settings should mount, unmount and render component should
className="position-button-container"
>
<button
className="position-button lower-left"
className="position-button"
data-testid="lower-left"
id="lower-left"
name="position"
onClick={[Function]}
style={
Object {
"backgroundColor": "#F8F8F9",
"color": "#17181B",
}
}
type="button"
value="lower-left"
>
@@ -80,10 +94,17 @@ exports[`Notification Settings should mount, unmount and render component should
className="position-button-container"
>
<button
className="position-button position-button-selected upper-right"
className="position-button"
data-testid="upper-right"
id="upper-right"
name="position"
onClick={[Function]}
style={
Object {
"backgroundColor": "#008EFF",
"color": "white",
}
}
type="button"
value="upper-right"
>
@@ -94,10 +115,17 @@ exports[`Notification Settings should mount, unmount and render component should
className="position-button-container"
>
<button
className="position-button lower-right"
className="position-button"
data-testid="lower-right"
id="lower-right"
name="position"
onClick={[Function]}
style={
Object {
"backgroundColor": "#F8F8F9",
"color": "#17181B",
}
}
type="button"
value="lower-right"
>

4
spec/mainApiHandler.spec.ts
View File

@@ -289,10 +289,10 @@ describe('main api handler', () => {
const value = {
cmd: apiCmds.showNotificationSettings,
windowName: 'notification-settings',
theme: 'light',
};
const expectedValue = 'notification-settings';
ipcMain.send(apiName.symphonyApi, value);
expect(spy).toBeCalledWith(expectedValue);
expect(spy).toBeCalledWith('notification-settings', 'light');
});
it('should call `sanitize` correctly', () => {

14
spec/notificationSettings.spec.ts
View File

@@ -16,6 +16,7 @@ describe('Notification Settings', () => {
},
],
display: '6713899',
theme: 'light'
};
const onLabelEvent = 'on';
const sendEvent = 'send';
@@ -85,6 +86,7 @@ describe('Notification Settings', () => {
position: 'upper-right',
screens: [],
display: '6713899',
theme: 'light',
};
const spy = jest.spyOn(NotificationSettings.prototype, 'setState');
@@ -93,8 +95,7 @@ describe('Notification Settings', () => {
const wrapper = shallow(React.createElement(NotificationSettings));
ipcRenderer.send('notification-settings-data', notificationSettingsMock);
const positionButton = `button.upper-right`;
const input = wrapper.find(positionButton);
const input = wrapper.find('[data-testid="upper-right"]');
input.simulate('click', { target: { value: 'upper-right' } });
@@ -115,8 +116,7 @@ describe('Notification Settings', () => {
const wrapper = shallow(React.createElement(NotificationSettings));
ipcRenderer.send('notification-settings-data', notificationSettingsMock);
const positionButton = `button.lower-right`;
const input = wrapper.find(positionButton);
const input = wrapper.find('[data-testid="lower-right"]');
input.simulate('click', { target: { value: 'lower-right' } });
@@ -137,8 +137,7 @@ describe('Notification Settings', () => {
const wrapper = shallow(React.createElement(NotificationSettings));
ipcRenderer.send('notification-settings-data', notificationSettingsMock);
const positionButton = `button.upper-left`;
const input = wrapper.find(positionButton);
const input = wrapper.find('[data-testid="upper-left"]');
input.simulate('click', { target: { value: 'upper-left' } });
@@ -159,8 +158,7 @@ describe('Notification Settings', () => {
const wrapper = shallow(React.createElement(NotificationSettings));
ipcRenderer.send('notification-settings-data', notificationSettingsMock);
const positionButton = `button.lower-left`;
const input = wrapper.find(positionButton);
const input = wrapper.find('[data-testid="lower-left"]');
input.simulate('click', { target: { value: 'lower-left' } });

4
src/app/main-api-handler.ts
View File

@@ -93,8 +93,8 @@ ipcMain.on(apiName.symphonyApi, async (event: Electron.IpcMainEvent, arg: IApiAr
downloadHandler.setWindow(event.sender);
break;
case apiCmds.showNotificationSettings:
if (typeof arg.windowName === 'string') {
windowHandler.createNotificationSettingsWindow(arg.windowName);
if (typeof arg.windowName === 'string' && typeof arg.theme === 'string') {
windowHandler.createNotificationSettingsWindow(arg.windowName, arg.theme);
}
break;
case apiCmds.sanitize:

6
src/app/window-handler.ts
View File

@@ -13,7 +13,7 @@ import * as fs from 'fs';
import * as path from 'path';
import { format, parse } from 'url';
import { apiName, WindowTypes } from '../common/api-interface';
import { apiName, Themes, WindowTypes } from '../common/api-interface';
import { isDevEnv, isLinux, isMac, isNodeEnv, isWindowsOS } from '../common/env';
import { i18n, LocaleType } from '../common/i18n';
import { logger } from '../common/logger';
@@ -1323,7 +1323,7 @@ export class WindowHandler {
*
* @param windowName
*/
public createNotificationSettingsWindow(windowName: string): void {
public createNotificationSettingsWindow(windowName: string, theme: Themes): void {
const opts = this.getWindowOpts(
{
width: 540,
@@ -1370,7 +1370,7 @@ export class WindowHandler {
]).notificationSettings;
this.notificationSettingsWindow.webContents.send(
'notification-settings-data',
{screens, position, display},
{screens, position, display, theme},
);
}
});

3
src/common/api-interface.ts
View File

@@ -83,8 +83,11 @@ export interface IApiArgs {
isMana: boolean;
notificationOpts: object;
notificationId: number;
theme: Themes;
}
export type Themes = 'light' | 'dark';
export type WindowTypes = 'screen-picker' | 'screen-sharing-indicator' | 'notification-settings';
export interface IBadgeCount {

2
src/renderer/app-bridge.ts
View File

@@ -173,7 +173,7 @@ export class AppBridge {
await notification.hideNotification(data as number);
break;
case apiCmds.showNotificationSettings:
ssf.showNotificationSettings();
ssf.showNotificationSettings(data);
break;
case apiCmds.setIsInMeeting:
if (typeof data === 'boolean') {

73
src/renderer/components/notification-settings.tsx
View File

@@ -12,6 +12,12 @@ interface IState {
position: startCorner;
screens: Electron.Display[];
display: number;
theme: Themes;
}
export enum Themes {
LIGHT = 'light',
DARK = 'dark',
}
/**
@@ -25,6 +31,7 @@ export default class NotificationSettings extends React.Component<{}, IState> {
position: 'upper-right',
screens: [],
display: 1,
theme: Themes.LIGHT,
};
this.updateState = this.updateState.bind(this);
}
@@ -33,20 +40,27 @@ export default class NotificationSettings extends React.Component<{}, IState> {
* Renders the notification settings window
*/
public render(): JSX.Element {
return (
<div className='content'>
if (this.state.theme === Themes.DARK) {
document.body.classList.add('dark-mode');
}
<header className='header'>
return (
<div className='content' style={this.state.theme === Themes.DARK ? { backgroundColor: '#25272B' } : undefined} >
<header
className='header'
style={this.state.theme === Themes.DARK ? { color: 'white', borderBottom: '1px solid #525760' } : undefined}>
<span className='header-title'>
{i18n.t('Set Notification Position', NOTIFICATION_SETTINGS_NAMESPACE)()}
</span>
</header>
<div className='form'>
<label className='display-label'>{i18n.t('Show on display', NOTIFICATION_SETTINGS_NAMESPACE)()}</label>
<label className='display-label' style={this.state.theme === Themes.DARK ? { color: 'white' } : undefined}>
{i18n.t('Show on display', NOTIFICATION_SETTINGS_NAMESPACE)()}
</label>
<div id='screens' className='display-container'>
<select
className='display-selector'
style={this.state.theme === Themes.DARK ? { border: '2px solid #767A81', backgroundColor: '#25272B', color: 'white' } : undefined}
id='screen-selector'
title='position'
value={this.state.display}
@@ -55,9 +69,10 @@ export default class NotificationSettings extends React.Component<{}, IState> {
{this.renderScreens()}
</select>
</div>
<label className='position-label'>{i18n.t('Position', NOTIFICATION_SETTINGS_NAMESPACE)()}</label>
<div className='position-container'>
<label className='position-label' style={this.state.theme === Themes.DARK ? { color: 'white' } : undefined}>
{i18n.t('Position', NOTIFICATION_SETTINGS_NAMESPACE)()}
</label>
<div className='position-container' style={this.state.theme === Themes.DARK ? { background: '#2E3136' } : undefined}>
<div className='button-set-left'>
{this.renderPositionButton('upper-left', 'Top Left')}
{this.renderPositionButton('lower-left', 'Bottom Left')}
@@ -68,18 +83,24 @@ export default class NotificationSettings extends React.Component<{}, IState> {
</div>
</div>
</div>
<footer className='footer'>
<footer className='footer' style={this.state.theme === Themes.DARK ? { borderTop: '1px solid #525760' } : undefined}>
<div className='footer-button-container'>
<button id='cancel' className='footer-button footer-button-dismiss' onClick={this.close.bind(this)}>
<button
id='cancel'
className='footer-button footer-button-dismiss'
onClick={this.close.bind(this)}
style={this.state.theme === Themes.DARK ? { backgroundColor: '#25272B', color: 'white' } : undefined}>
{i18n.t('CANCEL', NOTIFICATION_SETTINGS_NAMESPACE)()}
</button>
<button id='ok-button' className='footer-button footer-button-ok' onClick={this.submit.bind(this)}>
<button
id='ok-button'
className='footer-button footer-button-ok'
onClick={this.submit.bind(this)}
style={this.state.theme === Themes.DARK ? { backgroundColor: '#25272B', color: 'white' } : undefined}>
{i18n.t('OK', NOTIFICATION_SETTINGS_NAMESPACE)()}
</button>
</div>
</footer>
</div>
);
}
@@ -143,13 +164,16 @@ export default class NotificationSettings extends React.Component<{}, IState> {
* @param content
*/
private renderPositionButton(id: startCorner, content: string): JSX.Element {
const style = this.state.position === id ? `position-button position-button-selected ${id}` : `position-button ${id}`;
const style = this.getPositionButtonStyle(id);
return (
<div className='position-button-container'>
<button
onClick={this.togglePosition.bind(this)}
className={style}
id={id} type='button'
className='position-button'
style={style}
id={id}
data-testid={id}
type='button'
name='position'
value={id}
>
@@ -159,6 +183,23 @@ export default class NotificationSettings extends React.Component<{}, IState> {
);
}
/**
* Gets the text color and background color of a position button
*
* @param id
*/
private getPositionButtonStyle(id: string): React.CSSProperties {
let style: React.CSSProperties;
if (this.state.position === id) {
style = { backgroundColor: '#008EFF', color: 'white' };
} else if (this.state.theme === Themes.DARK) {
style = { backgroundColor: '#25272B', color: 'white' };
} else {
style = { backgroundColor: '#F8F8F9', color: '#17181B' };
}
return style;
}
/**
* Renders the drop down list of available screens
*/

3
src/renderer/ssf-api.ts
View File

@@ -433,11 +433,12 @@ export class SSFApi {
/**
* Opens a modal window to configure notification preference.
*/
public showNotificationSettings(): void {
public showNotificationSettings(data: string): void {
const windowName = (remote.getCurrentWindow() as ICustomBrowserWindow).winName;
local.ipcRenderer.send(apiName.symphonyApi, {
cmd: apiCmds.showNotificationSettings,
windowName,
theme: data,
});
}

15
src/renderer/styles/notification-settings.less
View File

@@ -12,6 +12,13 @@ body {
margin: 0;
height: 100%;
font-family: @font-family;
font-size: 14px;
line-height: 20px;
}
.dark-mode {
background-color: #25272B;
color: white;
}
.content {
@@ -28,6 +35,7 @@ body {
border-bottom: 1px solid rgba(0, 0, 0, .1);
margin-bottom: 20px;
padding: 16px;
color: @color;
}
.header-title {
@@ -41,7 +49,6 @@ body {
white-space: nowrap;
overflow: hidden;
width: 100%;
color: @color;
}
.form {
@@ -131,10 +138,7 @@ body {
line-height: 20px;
align-items: center;
color: #17181B;
}
.position-button-selected {
background-color: #008EFF;
cursor: pointer;
}
.upper-left,
@@ -170,6 +174,7 @@ body {
font-size: 14px;
line-height: 20px;
align-items: center;
cursor: pointer;
}
.footer-button-ok {