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

Revert "SDA-4725 - Update SDA title bar branding (#2234)" (#2241)

Browse Source 
This reverts commit 4c366bcf2f.
This commit is contained in:
Salah Benmoussati 2024-12-20 20:04:19 +01:00 committed by GitHub
parent 9a81031e03
commit 01f53c51bd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 143 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
config/titleBarStyles.css
View File

@ -1,3 +1,4 @@
/*---
title: Tile bar
section: div
@ -12,20 +13,20 @@ Typically you'll want to set background-image: url(""); and background-size: cov
*/
#title-bar {
display: flex;
position: fixed;
background: rgba(74, 74, 74, 1);
top: 0;
left: 0;
width: 100%;
height: 32px;
padding-left: 0;
justify-content: center;
align-items: center;
-webkit-app-region: drag;
-webkit-user-select: none;
box-sizing: content-box;
z-index: 1000;
display: flex;
position: fixed;
background: rgba(74,74,74,1);
top: 0;
left: 0;
width: 100%;
height: 32px;
padding-left: 0;
justify-content: center;
align-items: center;
-webkit-app-region: drag;
-webkit-user-select: none;
box-sizing: content-box;
z-index: 1000;
}
/*---
@ -58,101 +59,96 @@ Typically you'll want to set content: url("") and adjust the width property
```
*/
.branding-logo {
height: 32px;
height: 32px;
}
.hamburger-menu-button {
color: rgba(255, 255, 255, 1);
text-align: center;
width: 40px;
height: 32px;
background: center;
border: none;
border-image: initial;
display: inline-grid;
border-radius: 0;
padding: 11px;
box-sizing: border-box;
cursor: default;
color: rgba(255,255,255,1);
text-align: center;
width: 40px;
height: 32px;
background: center;
border: none;
border-image: initial;
display: inline-grid;
border-radius: 0;
padding: 11px;
box-sizing: border-box;
cursor: default;
}
.hamburger-menu-button:focus {
outline: none;
outline: none;
}
.title-container {
height: 32px;
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
white-space: nowrap;
overflow: hidden;
}
.symphony-messaging-logo {
width: 20px;
height: 20px;
height: 32px;
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
white-space: nowrap;
overflow: hidden;
}
#title-bar-title {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
color: white;
margin: 0;
padding-left: 10px;
font-size: 13px;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
color: white;
margin: 0;
padding-left: 10px;
font-size: 13px;
}
.title-bar-button-container {
justify-content: center;
align-items: center;
right: 0;
color: rgba(255, 255, 255, 1);
-webkit-app-region: no-drag;
text-align: center;
width: 45px;
height: 32px;
margin: 0;
box-sizing: border-box !important;
cursor: default;
justify-content: center;
align-items: center;
right: 0;
color: rgba(255,255,255,1);
-webkit-app-region: no-drag;
text-align: center;
width: 45px;
height: 32px;
margin: 0;
box-sizing: border-box !important;
cursor: default;
}
.title-bar-button {
color: rgba(255, 255, 255, 1);
text-align: center;
width: 45px;
height: 32px;
background: center;
border: none;
border-image: initial;
display: inline-grid;
border-radius: 0;
padding: 10px 15px;
cursor: default;
align-content: center;
color: rgba(255,255,255,1);
text-align: center;
width: 45px;
height: 32px;
background: center;
border: none;
border-image: initial;
display: inline-grid;
border-radius: 0;
padding: 10px 15px;
cursor: default;
align-content: center;
}
.title-bar-button:hover {
background-color: rgba(255, 255, 255, 0.2);
background-color: rgba(255,255,255,0.2);
}
.title-bar-button:focus {
outline: none;
outline: none;
}
.title-bar-button-container:hover {
background-color: rgba(255, 255, 255, 0.2);
background-color: rgba(255,255,255,0.2);
}
.window-border {
border-left: 1px solid rgba(74, 74, 74, 1);
border-right: 1px solid rgba(74, 74, 74, 1);
border-left: 1px solid rgba(74,74,74,1);
border-right: 1px solid rgba(74,74,74,1);
}
.bottom-window-border {
position: fixed;
border-bottom: 1px solid rgba(74, 74, 74, 1);
width: 100%;
z-index: 3000;
bottom: 0;
position: fixed;
border-bottom: 1px solid rgba(74,74,74,1);
width: 100%;
z-index: 3000;
bottom: 0;
}

41
spec/__snapshots__/windowsTitleBar.spec.ts.snap
View File

@ -43,15 +43,44 @@ exports[`windows title bar should render correctly 1`] = `
<div
className="title-container"
>
<img
alt="Symphony Messaging Logo"
className="symphony-messaging-logo"
src="../renderer/assets/symphony-messaging.png"
/>
<svg
fill="none"
viewBox="-10 0 60 60"
width="20"
>
<path
d="M40 20.111V9.653c0-2.142-1.1-4.153-2.883-5.255C34.458 2.754 28.7 0 20 0 11.3 0 5.542 2.754 2.883 4.407 1.1 5.5 0 7.511 0 9.653v15.705l31.667 9.618v6.995c0 .945-.567 1.61-1.534 2.108L20 49.404 9.808 44.052c-.908-.472-1.475-1.136-1.475-2.08v-5.247L0 34.102v7.87c0 4.319 2.358 7.991 6.108 9.906L20 59.46l13.833-7.546C37.642 49.963 40 46.291 40 41.971V28.855L8.333 19.237v-7.983C10.6 10.108 14.45 8.744 20 8.744s9.4 1.364 11.667 2.51v6.234L40 20.111z"
fill="#0098FF"
/>
<path
d="M40 20.111V9.653c0-2.142-1.1-4.153-2.883-5.255C34.458 2.754 28.7 0 20 0 11.3 0 5.542 2.754 2.883 4.407 1.1 5.5 0 7.511 0 9.653v15.705l31.667 9.618v6.995c0 .945-.567 1.61-1.534 2.108L20 49.404 9.808 44.052c-.908-.472-1.475-1.136-1.475-2.08v-5.247L0 34.102v7.87c0 4.319 2.358 7.991 6.108 9.906L20 59.46l13.833-7.546C37.642 49.963 40 46.291 40 41.971V28.855L8.333 19.237v-7.983C10.6 10.108 14.45 8.744 20 8.744s9.4 1.364 11.667 2.51v6.234L40 20.111z"
fill="url(#prefix__paint0_radial)"
/>
<defs>
<radialGradient
cx={0}
cy={0}
gradientTransform="matrix(0 40.259 -50.3704 0 20.07 0)"
gradientUnits="userSpaceOnUse"
id="prefix__paint0_radial"
r={1}
>
<stop
stopColor="#fff"
stopOpacity={0.4}
/>
<stop
offset={1}
stopColor="#fff"
stopOpacity={0}
/>
</radialGradient>
</defs>
</svg>
<p
id="title-bar-title"
>
Symphony Messaging
Symphony
</p>
</div>
<div

1
src/locale/en-US.json
View File

@ -199,7 +199,6 @@
"Client 2.0 channel": "Client 2.0 channel",
"SDA update channel": "SDA update channel",
"Stable": "Stable",
"Symphony Messaging": "Symphony Messaging",
"Latest": "Latest",
"Daily": "Daily",
"Beta": "Beta",

1
src/locale/en.json
View File

@ -198,7 +198,6 @@
"Client 2.0 channel": "Client 2.0 channel",
"SDA update channel": "SDA update channel",
"Stable": "Stable",
"Symphony Messaging": "Symphony Messaging",
"Latest": "Latest",
"Daily": "Daily",
"Beta": "Beta",

BIN
src/renderer/assets/symphony-messaging.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

41
src/renderer/components/windows-title-bar.tsx
View File

@ -25,7 +25,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
constructor(props) {
super(props);
this.state = {
title: document.title || i18n.t('Symphony Messaging')(),
title: document.title || 'Symphony',
isMaximized: false,
isDisabled: false,
};
@ -55,7 +55,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
this.observer = new MutationObserver((mutations) => {
const title: string = mutations[0].target.textContent
? mutations[0].target.textContent
: i18n.t('Symphony Messaging')();
: 'Symphony';
this.setState({ title });
});
if (target) {
@ -118,11 +118,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
</button>
</div>
<div className='title-container'>
<img
className='symphony-messaging-logo'
alt={'Symphony Messaging Logo'}
src={'../renderer/assets/symphony-messaging.png'}
/>
{this.getSymphonyLogo()}
<p id='title-bar-title'>{title}</p>
</div>
<div className='title-bar-button-container'>
@ -283,6 +279,37 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
document.body.classList.add('window-border');
}
/**
* Returns the title bar logo
*/
private getSymphonyLogo(): JSX.Element {
return (
<svg width='20' viewBox='-10 0 60 60' fill='none'>
<path
d='M40 20.111V9.653c0-2.142-1.1-4.153-2.883-5.255C34.458 2.754 28.7 0 20 0 11.3 0 5.542 2.754 2.883 4.407 1.1 5.5 0 7.511 0 9.653v15.705l31.667 9.618v6.995c0 .945-.567 1.61-1.534 2.108L20 49.404 9.808 44.052c-.908-.472-1.475-1.136-1.475-2.08v-5.247L0 34.102v7.87c0 4.319 2.358 7.991 6.108 9.906L20 59.46l13.833-7.546C37.642 49.963 40 46.291 40 41.971V28.855L8.333 19.237v-7.983C10.6 10.108 14.45 8.744 20 8.744s9.4 1.364 11.667 2.51v6.234L40 20.111z'
fill='#0098FF'
/>
<path
d='M40 20.111V9.653c0-2.142-1.1-4.153-2.883-5.255C34.458 2.754 28.7 0 20 0 11.3 0 5.542 2.754 2.883 4.407 1.1 5.5 0 7.511 0 9.653v15.705l31.667 9.618v6.995c0 .945-.567 1.61-1.534 2.108L20 49.404 9.808 44.052c-.908-.472-1.475-1.136-1.475-2.08v-5.247L0 34.102v7.87c0 4.319 2.358 7.991 6.108 9.906L20 59.46l13.833-7.546C37.642 49.963 40 46.291 40 41.971V28.855L8.333 19.237v-7.983C10.6 10.108 14.45 8.744 20 8.744s9.4 1.364 11.667 2.51v6.234L40 20.111z'
fill='url(#prefix__paint0_radial)'
/>
<defs>
<radialGradient
id='prefix__paint0_radial'
cx={0}
cy={0}
r={1}
gradientUnits='userSpaceOnUse'
gradientTransform='matrix(0 40.259 -50.3704 0 20.07 0)'
>
<stop stopColor='#fff' stopOpacity={0.4} />
<stop offset={1} stopColor='#fff' stopOpacity={0} />
</radialGradient>
</defs>
</svg>
);
}
/**
* Disables context menu for action buttons
*

5
src/renderer/styles/windows-title-bar.less
View File

@ -50,11 +50,6 @@
overflow: hidden;
}
.symphony-messaging-logo {
width: 20px;
height: 20px;
}
#title-bar-title {
font-family: @font-family;
color: @color_2;