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

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

@ -43,15 +43,44 @@ exports[`windows title bar should render correctly 1`] = `
<div <div
className="title-container" className="title-container"
> >
<img <svg
alt="Symphony Messaging Logo" fill="none"
className="symphony-messaging-logo" viewBox="-10 0 60 60"
src="../renderer/assets/symphony-messaging.png" 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 <p
id="title-bar-title" id="title-bar-title"
> >
Symphony Messaging Symphony
</p> </p>
</div> </div>
<div <div

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

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

1
src/locale/en.json
View File

@ -198,7 +198,6 @@
"Client 2.0 channel": "Client 2.0 channel", "Client 2.0 channel": "Client 2.0 channel",
"SDA update channel": "SDA update channel", "SDA update channel": "SDA update channel",
"Stable": "Stable", "Stable": "Stable",
"Symphony Messaging": "Symphony Messaging",
"Latest": "Latest", "Latest": "Latest",
"Daily": "Daily", "Daily": "Daily",
"Beta": "Beta", "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) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
title: document.title || i18n.t('Symphony Messaging')(), title: document.title || 'Symphony',
isMaximized: false, isMaximized: false,
isDisabled: false, isDisabled: false,
}; };
@ -55,7 +55,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
this.observer = new MutationObserver((mutations) => { this.observer = new MutationObserver((mutations) => {
const title: string = mutations[0].target.textContent const title: string = mutations[0].target.textContent
? mutations[0].target.textContent ? mutations[0].target.textContent
: i18n.t('Symphony Messaging')(); : 'Symphony';
this.setState({ title }); this.setState({ title });
}); });
if (target) { if (target) {
@ -118,11 +118,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
</button> </button>
</div> </div>
<div className='title-container'> <div className='title-container'>
<img {this.getSymphonyLogo()}
className='symphony-messaging-logo'
alt={'Symphony Messaging Logo'}
src={'../renderer/assets/symphony-messaging.png'}
/>
<p id='title-bar-title'>{title}</p> <p id='title-bar-title'>{title}</p>
</div> </div>
<div className='title-bar-button-container'> <div className='title-bar-button-container'>
@ -283,6 +279,37 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
document.body.classList.add('window-border'); 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 * Disables context menu for action buttons
* *

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

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