mirror of
https://github.com/finos/SymphonyElectron.git
synced 2024-11-21 00:24:56 -06:00
SDA-3892: About Symphony redesign (#1511)
This commit is contained in:
NguyenTranHoangSym
GitHub
parent
e5cce3029d
commit
7992dae4ec
21
crowdin.yml
21
crowdin.yml
@ -1,29 +1,28 @@
|
||||
#
|
||||
# Your Crowdin credentials
|
||||
#
|
||||
"project_id": "420172" # Crowdin project Settings > API & Webhooks > API > Project Id
|
||||
"api_token_env": "CROWDIN_PERSONAL_TOKEN" # Low priority: superseded by user-specific credentials file ~/.crowdin.yaml
|
||||
"base_path": "."
|
||||
"base_url": "https://api.crowdin.com"
|
||||
'project_id': '420172' # Crowdin project Settings > API & Webhooks > API > Project Id
|
||||
'api_token_env': 'CROWDIN_API_TOKEN' # Low priority: superseded by user-specific credentials file ~/.crowdin.yaml
|
||||
'base_path': '.'
|
||||
'base_url': 'https://api.crowdin.com'
|
||||
|
||||
#
|
||||
# Choose file structure in Crowdin
|
||||
# e.g. true or false
|
||||
#
|
||||
"preserve_hierarchy": true
|
||||
'preserve_hierarchy': true
|
||||
|
||||
#
|
||||
# Files configuration
|
||||
#
|
||||
files:
|
||||
[
|
||||
files: [
|
||||
{
|
||||
"source": "/src/locale/en-US.json",
|
||||
"translation": "/src/locale/%locale%.json",
|
||||
'source': '/src/locale/en-US.json',
|
||||
'translation': '/src/locale/%locale%.json',
|
||||
},
|
||||
# Duplicate file
|
||||
{
|
||||
"source": "/src/locale/en.json",
|
||||
"translation": "/src/locale/%two_letters_code%.json",
|
||||
'source': '/src/locale/en.json',
|
||||
'translation': '/src/locale/%two_letters_code%.json',
|
||||
},
|
||||
]
|
||||
|
||||
@ -8,78 +8,107 @@ exports[`about app should render correctly 1`] = `
|
||||
<div
|
||||
className="AboutApp-header-container"
|
||||
>
|
||||
<div
|
||||
className="AboutApp-image-container"
|
||||
>
|
||||
<img
|
||||
alt="Symphony Logo"
|
||||
className="AboutApp-logo"
|
||||
src="../renderer/assets/symphony-logo.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="AboutApp-header-content"
|
||||
>
|
||||
<h1
|
||||
className="AboutApp-name"
|
||||
>
|
||||
Symphony
|
||||
</h1>
|
||||
<p
|
||||
className="AboutApp-copyrightText"
|
||||
>
|
||||
© 2022 Symphony
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
alt="Symphony Logo"
|
||||
className="AboutApp-logo"
|
||||
src="../renderer/assets/new-symphony-logo.svg"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="AboutApp-main-container"
|
||||
>
|
||||
<div
|
||||
className="AboutApp-main-title"
|
||||
>
|
||||
<span>
|
||||
Desktop Application
|
||||
</span>
|
||||
</div>
|
||||
<section>
|
||||
<ul
|
||||
className="AboutApp-symphony-section"
|
||||
>
|
||||
<li>
|
||||
<b>
|
||||
<li
|
||||
key="0"
|
||||
>
|
||||
<strong>
|
||||
POD:
|
||||
</b>
|
||||
|
||||
N/A
|
||||
</strong>
|
||||
<span>
|
||||
N/A
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<b>
|
||||
<li
|
||||
key="1"
|
||||
>
|
||||
<strong>
|
||||
SBE:
|
||||
</b>
|
||||
|
||||
N/A (N/A)
|
||||
</strong>
|
||||
<span>
|
||||
N/A (N/A)
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<b>
|
||||
<li
|
||||
key="2"
|
||||
>
|
||||
<strong>
|
||||
SDA:
|
||||
</b>
|
||||
|
||||
N/A (N/A)
|
||||
</strong>
|
||||
<span>
|
||||
N/A (N/A)
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<b>
|
||||
SFE-Lite
|
||||
:
|
||||
</b>
|
||||
|
||||
N/A
|
||||
|
||||
<li
|
||||
key="3"
|
||||
>
|
||||
<strong>
|
||||
SFE:
|
||||
</strong>
|
||||
<span>
|
||||
N/A undefined
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
className="AboutApp-copy-button"
|
||||
onClick={[Function]}
|
||||
title="Copy all the version information in this page"
|
||||
<div
|
||||
className="AboutApp-copy-container"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
<button
|
||||
className="AboutApp-copy-button"
|
||||
data-testid="COPY_BUTTON"
|
||||
onClick={[Function]}
|
||||
title="Copy config to clipboard"
|
||||
>
|
||||
<img
|
||||
alt="Symphony Logo"
|
||||
src="../renderer/assets/copy-icon.svg"
|
||||
/>
|
||||
<span>
|
||||
Copy config to clipboard
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="AboutApp-close-container"
|
||||
>
|
||||
<button
|
||||
className="AboutApp-close-button"
|
||||
data-testid="CLOSE_BUTTON"
|
||||
onClick={[Function]}
|
||||
title="Close"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="AboutApp-version-container"
|
||||
>
|
||||
<p
|
||||
className="AboutApp-copyright-text"
|
||||
>
|
||||
Copyright © 2022 Symphony
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -67,7 +67,7 @@ describe('about app', () => {
|
||||
const spyIpc = jest.spyOn(ipcRenderer, ipcSendEvent);
|
||||
const wrapper = shallow(React.createElement(AboutApp));
|
||||
ipcRenderer.send('about-app-data', aboutDataMock);
|
||||
const copyButtonSelector = `button.AboutApp-copy-button[title="Copy all the version information in this page"]`;
|
||||
const copyButtonSelector = `[data-testid="COPY_BUTTON"]`;
|
||||
wrapper.find(copyButtonSelector).simulate('click');
|
||||
const expectedData = {
|
||||
cmd: apiCmds.aboutAppClipBoardData,
|
||||
|
||||
65
spectron/about-app.spec.ts
Normal file
65
spectron/about-app.spec.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import test from 'ava';
|
||||
import * as robot from 'robotjs';
|
||||
import { Application } from 'spectron';
|
||||
import { robotActions } from './fixtures/robot-actions';
|
||||
import {
|
||||
loadURL,
|
||||
podUrl,
|
||||
sleep,
|
||||
startApplication,
|
||||
stopApplication,
|
||||
Timeouts,
|
||||
} from './fixtures/spectron-setup';
|
||||
|
||||
let app;
|
||||
|
||||
test.before(async (t) => {
|
||||
app = (await startApplication()) as Application;
|
||||
t.true(app.isRunning());
|
||||
|
||||
await loadURL(app, podUrl);
|
||||
await app.client.waitUntilWindowLoaded(Timeouts.fiveSec);
|
||||
|
||||
await sleep(Timeouts.fiveSec);
|
||||
});
|
||||
|
||||
test.after.always(async () => {
|
||||
await stopApplication(app);
|
||||
});
|
||||
|
||||
test('about-app: verify about application feature', async (t) => {
|
||||
robotActions.clickAppMenu();
|
||||
robot.keyTap('down');
|
||||
robot.keyTap('enter');
|
||||
|
||||
// wait for about window to load
|
||||
await sleep(Timeouts.halfSec);
|
||||
await app.client.windowByIndex(1);
|
||||
await app.client.waitUntilWindowLoaded(Timeouts.fiveSec);
|
||||
t.truthy(await app.browserWindow.getTitle(), 'About Symphony');
|
||||
});
|
||||
|
||||
test('about-app: verify copy button with few data validation', async (t) => {
|
||||
await sleep(Timeouts.oneSec);
|
||||
await app.client.click('.AboutApp-copy-button');
|
||||
const clipboard = JSON.parse(
|
||||
await app.client.electron.remote.clipboard.readText(),
|
||||
);
|
||||
|
||||
t.log(clipboard);
|
||||
t.true(clipboard.hasOwnProperty('appName'));
|
||||
t.true(clipboard.hasOwnProperty('clientVersion'));
|
||||
t.true(clipboard.hasOwnProperty('sfeVersion'));
|
||||
t.true(clipboard.hasOwnProperty('sfeClientType'));
|
||||
t.true(clipboard.hasOwnProperty('sdaVersion'));
|
||||
t.true(clipboard.hasOwnProperty('sdaBuildNumber'));
|
||||
robotActions.closeWindow();
|
||||
});
|
||||
|
||||
test('about-app: verify close button will close modal', async (t) => {
|
||||
await sleep(Timeouts.oneSec);
|
||||
await app.client.click('[data-testid="CLOSE_BUTTON"]');
|
||||
|
||||
t.false(app.client.$('[data-testid="CLOSE_BUTTON"]'));
|
||||
robotActions.closeWindow();
|
||||
});
|
||||
@ -1099,9 +1099,10 @@ export class WindowHandler {
|
||||
|
||||
const opts: BrowserWindowConstructorOptions = this.getWindowOpts(
|
||||
{
|
||||
width: 440,
|
||||
height: 315,
|
||||
width: 404,
|
||||
height: 480,
|
||||
modal: true,
|
||||
frame: false,
|
||||
alwaysOnTop: isMac,
|
||||
resizable: false,
|
||||
fullscreenable: false,
|
||||
@ -1111,6 +1112,16 @@ export class WindowHandler {
|
||||
},
|
||||
);
|
||||
|
||||
const closeAboutApp = () => {
|
||||
if (
|
||||
this.aboutAppWindow &&
|
||||
windowExists(this.aboutAppWindow as BrowserWindow)
|
||||
) {
|
||||
this.aboutAppWindow.close();
|
||||
this.aboutAppWindow = null;
|
||||
}
|
||||
};
|
||||
|
||||
if (
|
||||
this.mainWindow &&
|
||||
windowExists(this.mainWindow) &&
|
||||
@ -1119,7 +1130,7 @@ export class WindowHandler {
|
||||
opts.alwaysOnTop = true;
|
||||
}
|
||||
|
||||
if (isWindowsOS && selectedParentWindow) {
|
||||
if (selectedParentWindow) {
|
||||
opts.parent = selectedParentWindow;
|
||||
}
|
||||
|
||||
@ -1127,6 +1138,12 @@ export class WindowHandler {
|
||||
this.moveWindow(this.aboutAppWindow);
|
||||
this.aboutAppWindow.setVisibleOnAllWorkspaces(true);
|
||||
|
||||
this.aboutAppWindow.once('close', () => {
|
||||
ipcMain.removeListener('close-about-app', closeAboutApp);
|
||||
});
|
||||
|
||||
ipcMain.once('close-about-app', closeAboutApp);
|
||||
|
||||
this.aboutAppWindow.webContents.once('did-finish-load', async () => {
|
||||
let client = '';
|
||||
if (this.url && this.url.startsWith('https://corporate.symphony.com')) {
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
"About Symphony": "About Symphony",
|
||||
"AboutSymphony": {
|
||||
"About Symphony": "About Symphony",
|
||||
"Copy": "Copy",
|
||||
"Copy all the version information in this page": "Copy all the version information in this page",
|
||||
"Others": "Others",
|
||||
"Swift Search": "Swift Search",
|
||||
"Swift Search API": "Swift Search API",
|
||||
"Symphony Logo": "Symphony Logo"
|
||||
"Symphony Logo": "Symphony Logo",
|
||||
"Copy config to clipboard": "Copy config to clipboard",
|
||||
"Close": "Close",
|
||||
"Copyright": "Copyright",
|
||||
"Desktop Application": "Desktop Application"
|
||||
},
|
||||
"Actual Size": "Actual Size",
|
||||
"Always on Top": "Always on Top",
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
"About Symphony": "About Symphony",
|
||||
"AboutSymphony": {
|
||||
"About Symphony": "About Symphony",
|
||||
"Copy": "Copy",
|
||||
"Copy all the version information in this page": "Copy all the version information in this page",
|
||||
"Others": "Others",
|
||||
"Swift Search": "Swift Search",
|
||||
"Swift Search API": "Swift Search API",
|
||||
"Symphony Logo": "Symphony Logo"
|
||||
"Symphony Logo": "Symphony Logo",
|
||||
"Copy config to clipboard": "Copy config to clipboard",
|
||||
"Close": "Close",
|
||||
"Copyright": "Copyright",
|
||||
"Desktop Application": "Desktop Application"
|
||||
},
|
||||
"Actual Size": "Actual Size",
|
||||
"Always on Top": "Always on Top",
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
"About Symphony": "À propos de Symphony",
|
||||
"AboutSymphony": {
|
||||
"About Symphony": "À propos de Symphony",
|
||||
"Copy": "Copier",
|
||||
"Copy all the version information in this page": "Copier toutes les informations de version dans cette page",
|
||||
"Others": "Autres",
|
||||
"Swift Search": "Recherche Rapide",
|
||||
"Swift Search API": "API Recherche Rapide",
|
||||
"Symphony Logo": "Logo Symphony"
|
||||
"Symphony Logo": "Logo de Symphony",
|
||||
"Copy config to clipboard": "Copier la configuration",
|
||||
"Close": "Fermer",
|
||||
"Copyright": "Copyright",
|
||||
"Desktop Application": "Application de bureau"
|
||||
},
|
||||
"Actual Size": "Taille actuelle",
|
||||
"Always on Top": "Garder Symphony au premier plan",
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
"About Symphony": "À propos de Symphony",
|
||||
"AboutSymphony": {
|
||||
"About Symphony": "À propos de Symphony",
|
||||
"Copy": "Copier",
|
||||
"Copy all the version information in this page": "Copier toutes les informations de version dans cette page",
|
||||
"Others": "Autres",
|
||||
"Swift Search": "Recherche Rapide",
|
||||
"Swift Search API": "API Recherche Rapide",
|
||||
"Symphony Logo": "Logo Symphony"
|
||||
"Symphony Logo": "Logo de Symphony",
|
||||
"Copy config to clipboard": "Copier la configuration",
|
||||
"Close": "Fermer",
|
||||
"Copyright": "Copyright",
|
||||
"Desktop Application": "Application de bureau"
|
||||
},
|
||||
"Actual Size": "Taille actuelle",
|
||||
"Always on Top": "Garder Symphony au premier plan",
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
"About Symphony": "Symphonyについて",
|
||||
"AboutSymphony": {
|
||||
"About Symphony": "Symphonyについて",
|
||||
"Copy": "コピー",
|
||||
"Copy all the version information in this page": "このページのすべてのバージョン情報をコピー",
|
||||
"Others": "その他",
|
||||
"Swift Search": "Swift検索",
|
||||
"Swift Search API": "Swift検索API",
|
||||
"Symphony Logo": "Symphonyロゴ"
|
||||
"Symphony Logo": "Symphonyロゴ",
|
||||
"Copy config to clipboard": "コンフィグをクリップボードにコピー",
|
||||
"Close": "閉じる",
|
||||
"Copyright": "Copyright",
|
||||
"Desktop Application": "デスクトップアプリケーション"
|
||||
},
|
||||
"Actual Size": "実際のサイズ",
|
||||
"Always on Top": "つねに前面に表示",
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
"About Symphony": "Symphonyについて",
|
||||
"AboutSymphony": {
|
||||
"About Symphony": "Symphonyについて",
|
||||
"Copy": "コピー",
|
||||
"Copy all the version information in this page": "このページのすべてのバージョン情報をコピー",
|
||||
"Others": "その他",
|
||||
"Swift Search": "Swift検索",
|
||||
"Swift Search API": "Swift検索API",
|
||||
"Symphony Logo": "Symphonyロゴ"
|
||||
"Symphony Logo": "Symphonyロゴ",
|
||||
"Copy config to clipboard": "コンフィグをクリップボードにコピー",
|
||||
"Close": "閉じる",
|
||||
"Copyright": "Copyright",
|
||||
"Desktop Application": "デスクトップアプリケーション"
|
||||
},
|
||||
"Actual Size": "実際のサイズ",
|
||||
"Always on Top": "つねに前面に表示",
|
||||
|
||||
4
src/renderer/assets/copy-icon.svg
Normal file
4
src/renderer/assets/copy-icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.75 0.209991C3.33579 0.209991 3 0.545778 3 0.959991V1.70999H10.5V9.20999H11.25C11.6642 9.20999 12 8.87421 12 8.45999V0.959991C12 0.545778 11.6642 0.209991 11.25 0.209991H3.75Z" fill="#6EB9FD"/>
|
||||
<path d="M0 3.95999C0 3.54578 0.335786 3.20999 0.75 3.20999H8.25C8.66421 3.20999 9 3.54578 9 3.95999V11.46C9 11.8742 8.66421 12.21 8.25 12.21H0.75C0.335786 12.21 0 11.8742 0 11.46V3.95999ZM1.5 10.71H7.5V4.70999H1.5V10.71Z" fill="#6EB9FD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 548 B |
11
src/renderer/assets/new-symphony-logo.svg
Normal file
11
src/renderer/assets/new-symphony-logo.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="276" height="49" viewBox="0 0 276 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.2682 16.3063V7.82845C34.2682 6.09218 33.3222 4.46013 31.8001 3.56967C29.5213 2.23609 24.5853 0 17.1341 0C9.6829 0 4.74686 2.23609 2.46802 3.56967C0.945944 4.46013 0 6.09218 0 7.82845V20.5601L27.129 28.3588V34.0306C27.129 34.7984 26.6435 35.3365 25.8182 35.7364L17.1341 40.0568L8.40498 35.7144C7.62467 35.3365 7.1392 34.7984 7.1392 34.0306V29.7768L0 27.6499V34.0306C0 37.5336 2.02325 40.5141 5.23589 42.0668L17.1341 48.21L28.988 42.0887C32.2449 40.5141 34.2682 37.5336 34.2682 34.0306V23.396L7.1392 15.5974V9.12374C9.0775 8.19499 12.3822 7.08971 17.1341 7.08971C21.8859 7.08971 25.1907 8.19499 27.129 9.12374V14.1794L34.2682 16.3063Z" fill="#008EFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.7591 36.1574C65.4693 36.1574 61.7926 34.7717 58.4908 32.7091L60.5335 29.6322C63.8353 31.7288 66.865 32.7431 70.2695 32.7431C74.2532 32.7431 76.1254 31.2212 76.1254 29.4299C76.1254 24.2914 59.2734 27.3674 59.2734 19.186C59.2734 15.197 63.291 12.053 69.7591 12.053C74.1167 12.053 77.8951 13.676 80.1082 15.8728L77.589 18.443C75.6828 16.786 72.7549 15.4673 69.6913 15.4673C65.9119 15.4673 63.3588 16.82 63.3588 18.7465C63.3588 23.5135 80.2447 20.9782 80.2447 29.0244C80.2447 33.2838 75.9211 36.1574 69.7591 36.1574Z" fill="#F8F8F8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M96.7568 26.3194V35.3458H92.6714V26.2854L82.4588 12.8304H87.2242L94.8845 23.2426L102.136 12.8304H106.834L96.7568 26.3194Z" fill="#F8F8F8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M135.329 35.3459V17.6986L134.206 20.0987L126.171 35.3459H123.72L115.788 20.0987L114.665 17.6986V35.3459H110.75V12.8305H116.434L124.061 27.9756L125.116 30.2745L126.171 27.9756L133.695 12.8305H139.312V35.3459H135.329Z" fill="#F8F8F8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M161.533 19.5244C161.533 17.665 160.273 16.2792 157.175 16.2792H149.651V23.5474H157.346C160.443 23.5474 161.533 22.0596 161.533 20.2343V19.5244ZM156.732 26.8607H149.651V35.3464H145.566V12.8309H156.732C162.928 12.8309 165.652 15.6025 165.652 19.5244V20.1332C165.652 24.0542 162.928 26.8607 156.732 26.8607Z" fill="#F8F8F8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M187.91 35.3459V25.6436H174.259V35.3459H170.174V12.8305H174.259V22.3645H187.91V12.8305H191.996V35.3459H187.91Z" fill="#F8F8F8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M216.665 22.7019C216.665 18.8481 213.975 15.5349 209.005 15.5349C204.035 15.5349 201.379 18.8481 201.379 22.7019V25.4404C201.379 29.2943 204.035 32.6755 209.005 32.6755C213.975 32.6755 216.665 29.2943 216.665 25.4404V22.7019ZM209.004 36.157C201.719 36.157 197.258 31.0185 197.258 25.5085V22.702C197.258 17.0899 201.719 12.0526 209.004 12.0526C216.323 12.0526 220.783 17.0899 220.783 22.702V25.5085C220.783 31.0185 216.323 36.157 209.004 36.157Z" fill="#F8F8F8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M244.371 35.3459L231.673 21.1129L230.038 19.0173V35.3459H225.987V12.8305H229.766L242.056 27.0975L243.724 29.1931V12.8305H247.741V35.3459H244.371Z" fill="#F8F8F8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M265.923 26.3194V35.3458H261.838V26.2854L251.625 12.8304H256.391L264.051 23.2426L271.302 12.8304H276L265.923 26.3194Z" fill="#F8F8F8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@ -40,6 +40,7 @@ const ABOUT_SYMPHONY_NAMESPACE = 'AboutSymphony';
|
||||
export default class AboutApp extends React.Component<{}, IState> {
|
||||
private readonly eventHandlers = {
|
||||
onCopy: () => this.copy(),
|
||||
onClose: () => this.close(),
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
@ -89,10 +90,32 @@ export default class AboutApp extends React.Component<{}, IState> {
|
||||
} = this.state;
|
||||
|
||||
const appName = productName || 'Symphony';
|
||||
const copyright = `\xA9 ${new Date().getFullYear()} ${appName}`;
|
||||
const copyright = `${i18n.t(
|
||||
'Copyright',
|
||||
ABOUT_SYMPHONY_NAMESPACE,
|
||||
)()} \xA9 ${new Date().getFullYear()} ${appName}`;
|
||||
const podVersion = `${clientVersion} (${buildNumber})`;
|
||||
const sdaVersionBuild = `${sdaVersion} (${sdaBuildNumber})`;
|
||||
let sfeClientTypeName = 'SFE';
|
||||
const symphonySectionItems = [
|
||||
{
|
||||
key: 'POD:',
|
||||
value: `${hostname || 'N/A'}`,
|
||||
},
|
||||
{
|
||||
key: 'SBE:',
|
||||
value: podVersion,
|
||||
},
|
||||
{
|
||||
key: 'SDA:',
|
||||
value: sdaVersionBuild,
|
||||
},
|
||||
{
|
||||
key: `${sfeClientTypeName}:`,
|
||||
value: `${sfeVersion} ${client}`,
|
||||
},
|
||||
];
|
||||
|
||||
if (sfeClientType !== '1.5') {
|
||||
sfeClientTypeName = 'SFE-Lite';
|
||||
}
|
||||
@ -100,47 +123,60 @@ export default class AboutApp extends React.Component<{}, IState> {
|
||||
return (
|
||||
<div className='AboutApp' lang={i18n.getLocale()}>
|
||||
<div className='AboutApp-header-container'>
|
||||
<div className='AboutApp-image-container'>
|
||||
<img
|
||||
className='AboutApp-logo'
|
||||
src='../renderer/assets/symphony-logo.png'
|
||||
alt={i18n.t('Symphony Logo', ABOUT_SYMPHONY_NAMESPACE)()}
|
||||
/>
|
||||
</div>
|
||||
<div className='AboutApp-header-content'>
|
||||
<h1 className='AboutApp-name'>{appName}</h1>
|
||||
<p className='AboutApp-copyrightText'>{copyright}</p>
|
||||
</div>
|
||||
<img
|
||||
className='AboutApp-logo'
|
||||
src='../renderer/assets/new-symphony-logo.svg'
|
||||
alt={i18n.t('Symphony Logo', ABOUT_SYMPHONY_NAMESPACE)()}
|
||||
/>
|
||||
</div>
|
||||
<div className='AboutApp-main-container'>
|
||||
<div className='AboutApp-main-title'>
|
||||
<span>
|
||||
{i18n.t('Desktop Application', ABOUT_SYMPHONY_NAMESPACE)()}
|
||||
</span>
|
||||
</div>
|
||||
<section>
|
||||
<ul className='AboutApp-symphony-section'>
|
||||
<li>
|
||||
<b>POD:</b> {hostname || 'N/A'}
|
||||
</li>
|
||||
<li>
|
||||
<b>SBE:</b> {podVersion}
|
||||
</li>
|
||||
<li>
|
||||
<b>SDA:</b> {sdaVersionBuild}
|
||||
</li>
|
||||
<li>
|
||||
<b>{sfeClientTypeName}:</b> {sfeVersion} {client}
|
||||
</li>
|
||||
{symphonySectionItems.map((item, key) => (
|
||||
<li key={key}>
|
||||
<strong>{item.key}</strong>
|
||||
<span>{item.value}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
<div className='AboutApp-copy-container'>
|
||||
<button
|
||||
className='AboutApp-copy-button'
|
||||
onClick={this.eventHandlers.onCopy}
|
||||
title={i18n.t(
|
||||
'Copy config to clipboard',
|
||||
ABOUT_SYMPHONY_NAMESPACE,
|
||||
)()}
|
||||
data-testid={'COPY_BUTTON'}
|
||||
>
|
||||
<img
|
||||
src='../renderer/assets/copy-icon.svg'
|
||||
alt={i18n.t('Symphony Logo', ABOUT_SYMPHONY_NAMESPACE)()}
|
||||
></img>
|
||||
<span>
|
||||
{i18n.t('Copy config to clipboard', ABOUT_SYMPHONY_NAMESPACE)()}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className='AboutApp-close-container'>
|
||||
<button
|
||||
className='AboutApp-close-button'
|
||||
onClick={this.eventHandlers.onClose}
|
||||
title={i18n.t('Close', ABOUT_SYMPHONY_NAMESPACE)()}
|
||||
data-testid={'CLOSE_BUTTON'}
|
||||
>
|
||||
{i18n.t('Close', ABOUT_SYMPHONY_NAMESPACE)()}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
className='AboutApp-copy-button'
|
||||
onClick={this.eventHandlers.onCopy}
|
||||
title={i18n.t(
|
||||
'Copy all the version information in this page',
|
||||
ABOUT_SYMPHONY_NAMESPACE,
|
||||
)()}
|
||||
>
|
||||
{i18n.t('Copy', ABOUT_SYMPHONY_NAMESPACE)()}
|
||||
</button>
|
||||
<div className='AboutApp-version-container'>
|
||||
<p className='AboutApp-copyright-text'>{copyright}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -175,6 +211,13 @@ export default class AboutApp extends React.Component<{}, IState> {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close modal
|
||||
*/
|
||||
public close(): void {
|
||||
ipcRenderer.send('close-about-app');
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the component state
|
||||
*
|
||||
|
||||
@ -14,126 +14,170 @@ body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.AboutApp:lang(ja-JP) {
|
||||
font-family: @font-family-ja;
|
||||
|
||||
h4 {
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.AboutApp-symphony-section {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.AboutApp:lang(fr-FR) {
|
||||
.AboutApp-symphony-section {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.AboutApp {
|
||||
text-align: center;
|
||||
padding: 32px 64px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
font-family: @font-family;
|
||||
background: @graphite-80;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
height: 480px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-main-title {
|
||||
text-align: left;
|
||||
font-family: @font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
line-height: 24px;
|
||||
color: @graphite-05;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&-symphony-section {
|
||||
padding: 0px;
|
||||
margin: 0px 0px 24px 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-symphony-section > li {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
&-symphony-section > li:last-child {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
&-symphony-section > li > span {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
&-symphony-section > li > * {
|
||||
text-align: left;
|
||||
font-family: @font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
line-height: 24px;
|
||||
color: @graphite-20;
|
||||
}
|
||||
|
||||
&-symphony-section > li > strong {
|
||||
font-weight: 600;
|
||||
color: @graphite-05;
|
||||
}
|
||||
|
||||
&-header-container {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
&-header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&-main-container {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-bottom: 32px;
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 1.8em;
|
||||
padding-left: @text-padding;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-copyrightText {
|
||||
padding-left: @text-padding;
|
||||
font-size: 0.9em;
|
||||
margin: 0;
|
||||
color: @copyright-text-color;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&-symphony-section {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
clear: both;
|
||||
display: table;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-align: start;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: table-row;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
b {
|
||||
display: table-cell;
|
||||
padding-right: 1em;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
&-copy-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
padding: 8px 16px;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-copy-button {
|
||||
text-transform: capitalize;
|
||||
text-transform: uppercase;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 12px;
|
||||
color: @electricity-ui-30;
|
||||
cursor: pointer;
|
||||
font-family: @font-family;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
padding-right: 8px;
|
||||
color: @electricity-ui-30;
|
||||
}
|
||||
}
|
||||
|
||||
&-copy-button {
|
||||
&-close-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-close-button {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
padding: 10px 32px;
|
||||
margin: 4px 20px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 12px;
|
||||
background-color: rgba(61, 162, 253, 1);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-color: @electricity-ui-50;
|
||||
color: @electricity-ui-05;
|
||||
cursor: pointer;
|
||||
padding: 12px 118px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
float: right;
|
||||
font-weight: 600;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 10px rgba(61, 162, 253, 1);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-version-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-copyright-text {
|
||||
font-size: 0.75rem;
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
color: @graphite-20;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,3 +4,11 @@
|
||||
@text-color-primary: #ffffff;
|
||||
@text-color-primary-dark: #2f3237;
|
||||
@text-color-secondary: #6a707c;
|
||||
|
||||
// Color palette
|
||||
@electricity-ui-05: #e9f2f9;
|
||||
@electricity-ui-50: #0277d6;
|
||||
@electricity-ui-30: #6eb9fd;
|
||||
@graphite-20: #cdcfd4;
|
||||
@graphite-05: #f1f1f3;
|
||||
@graphite-80: #27292c;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user