mirror of
https://github.com/finos/SymphonyElectron.git
synced 2025-01-05 13:45:25 -06:00
d1c1e3caa2
- Initial title bar menu item implementation - Allow users to customization title bar style - Add separators for menu item and hide action items - Fix menu item separator and bold text in installer
143 lines
7.0 KiB
JavaScript
143 lines
7.0 KiB
JavaScript
const titleBar = (`
|
|
<div id="title-bar">
|
|
<div class="title-bar-button-container">
|
|
<button title="Menu" id='hamburger-menu-button'>
|
|
<svg x='0px' y='0px' viewBox='0 0 15 10'>
|
|
<rect fill="rgba(255, 255, 255, 0.9)" width='15' height='1'/>
|
|
<rect fill="rgba(255, 255, 255, 0.9)" y='4' width='15' height='1'/>
|
|
<rect fill="rgba(255, 255, 255, 0.9)" y='8' width='152' height='1'/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="title-container">
|
|
<?xml version="1.0" encoding="utf-8"?>
|
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
width="20px" viewBox="0 0 19.7 32" style="enable-background:new 0 0 19.7 32;" xml:space="preserve">
|
|
<style type="text/css">
|
|
.st0{fill:url(#Shape_8_);}
|
|
.st1{fill:url(#Shape_9_);}
|
|
.st2{fill:url(#Shape_10_);}
|
|
.st3{fill:url(#Shape_11_);}
|
|
.st4{fill:url(#Shape_12_);}
|
|
.st5{fill:url(#Shape_13_);}
|
|
.st6{fill:url(#Shape_14_);}
|
|
.st7{fill:url(#Shape_15_);}
|
|
</style>
|
|
<title>Symphony_logo</title>
|
|
<g id="Page-1">
|
|
<g id="Symphony_logo">
|
|
<g id="logo2">
|
|
<linearGradient id="Shape_8_" gradientUnits="userSpaceOnUse" x1="39.8192" y1="23.9806" x2="39.2461" y2="23.7258" gradientTransform="matrix(7.6157 0 0 -3.458 -295.3247 101.0398)">
|
|
<stop offset="0" style="stop-color:#197A68"/>
|
|
<stop offset="1" style="stop-color:#329D87"/>
|
|
</linearGradient>
|
|
<path id="Shape" class="st0" d="M2.4,17.4c0,1.2,0.3,2.4,0.8,3.5l6.8-3.5H2.4z"/>
|
|
|
|
<linearGradient id="Shape_9_" gradientUnits="userSpaceOnUse" x1="28.9162" y1="22.8111" x2="29.9162" y2="22.8111" gradientTransform="matrix(2.7978 0 0 -4.7596 -73.7035 128.374)">
|
|
<stop offset="0" style="stop-color:#1D7E7B"/>
|
|
<stop offset="1" style="stop-color:#35B0B7"/>
|
|
</linearGradient>
|
|
<path id="Shape_1_" class="st1" d="M7.2,21.3C8,21.9,9,22.2,10,22.2v-4.8L7.2,21.3z"/>
|
|
|
|
<linearGradient id="Shape_10_" gradientUnits="userSpaceOnUse" x1="37.9575" y1="21.1358" x2="38.1785" y2="21.8684" gradientTransform="matrix(6.1591 0 0 -11.4226 -223.952 256.8769)">
|
|
<stop offset="0" style="stop-color:#175952"/>
|
|
<stop offset="1" style="stop-color:#3A8F88"/>
|
|
</linearGradient>
|
|
<path id="Shape_2_" class="st2" d="M14.4,6.9C13,6.3,11.5,6,10,6C9.4,6,8.8,6,8.2,6.1L10,17.4L14.4,6.9z"/>
|
|
|
|
<linearGradient id="Shape_11_" gradientUnits="userSpaceOnUse" x1="40.5688" y1="22.0975" x2="41.0294" y2="22.3767" gradientTransform="matrix(9.5186 0 0 -5.5951 -373.339 140.3243)">
|
|
<stop offset="0" style="stop-color:#39A8BA"/>
|
|
<stop offset="1" style="stop-color:#3992B4"/>
|
|
</linearGradient>
|
|
<path id="Shape_3_" class="st3" d="M10,17.4h9.5c0-2-0.6-4-1.8-5.6L10,17.4z"/>
|
|
|
|
<linearGradient id="Shape_12_" gradientUnits="userSpaceOnUse" x1="41.2142" y1="22.3254" x2="40.7055" y2="22.5477" gradientTransform="matrix(9.9955 0 0 -5.2227 -404.7955 132.8762)">
|
|
<stop offset="0" style="stop-color:#021C3C"/>
|
|
<stop offset="1" style="stop-color:#215180"/>
|
|
</linearGradient>
|
|
<path id="Shape_4_" class="st4" d="M1.5,12.2c-1,1.6-1.5,3.4-1.5,5.2h10L1.5,12.2z"/>
|
|
|
|
<linearGradient id="Shape_13_" gradientUnits="userSpaceOnUse" x1="33.5112" y1="22.1509" x2="34.5112" y2="22.1509" gradientTransform="matrix(3.9169 0 0 -6.6631 -125.1783 161.684)">
|
|
<stop offset="0" style="stop-color:#23796C"/>
|
|
<stop offset="1" style="stop-color:#41BEAF"/>
|
|
</linearGradient>
|
|
<path id="Shape_5_" class="st5" d="M10,10.8c-1.4,0-2.8,0.4-3.9,1.3l3.9,5.4V10.8z"/>
|
|
|
|
<linearGradient id="Shape_14_" gradientUnits="userSpaceOnUse" x1="36.1289" y1="21.9578" x2="36.4868" y2="21.4811" gradientTransform="matrix(5.0353 0 0 -8.5671 -171.5901 208.3326)">
|
|
<stop offset="0" style="stop-color:#14466A"/>
|
|
<stop offset="1" style="stop-color:#286395"/>
|
|
</linearGradient>
|
|
<path id="Shape_6_" class="st6" d="M10,26c1.8,0,3.6-0.6,5-1.6l-5-6.9V26z"/>
|
|
|
|
<linearGradient id="Shape_15_" gradientUnits="userSpaceOnUse" x1="38.5336" y1="23.6558" x2="39.0866" y2="23.5777" gradientTransform="matrix(6.663 0 0 -3.5931 -244.8399 102.8351)">
|
|
<stop offset="0" style="stop-color:#261D49"/>
|
|
<stop offset="1" style="stop-color:#483A6D"/>
|
|
</linearGradient>
|
|
<path id="Shape_7_" class="st7" d="M16.6,16.4l-6.6,1l6.2,2.6c0.3-0.8,0.5-1.7,0.5-2.6C16.7,17.1,16.6,16.7,16.6,16.4z"/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
<p id="title-bar-title">Symphony</p>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
const button = (`
|
|
<div class="action-items">
|
|
<div class="title-bar-button-container">
|
|
<button class="title-bar-button" id="title-bar-minimize-button" title='Minimize'>
|
|
<svg x='0px' y='0px' viewBox='0 0 14 1'>
|
|
<rect fill="rgba(255, 255, 255, 0.9)" width='14' height='0.6' />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="title-bar-button-container">
|
|
<button class="title-bar-button" id="title-bar-maximize-button" title='Maximize'>
|
|
<svg x='0px' y='0px' viewBox='0 0 14 10.2'>
|
|
<path
|
|
fill='rgba(255, 255, 255, 0.9)'
|
|
d='M0,0v10.1h10.2V0H0z M9.2,9.2H1.1V1h8.1V9.2z'
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="title-bar-button-container">
|
|
<button class="title-bar-button" id="title-bar-close-button" title='Close'>
|
|
<svg x='0px' y='0px' viewBox='0 0 14 10.2'>
|
|
<polygon
|
|
fill="rgba(255, 255, 255, 0.9)"
|
|
points='10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 '
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
const unMaximizeButton = (`
|
|
<svg x='0px' y='0px' viewBox='0 0 14 10.2'>
|
|
<path
|
|
fill='rgba(255, 255, 255, 0.9)'
|
|
d='M2.1,0v2H0v8.1h8.2v-2h2V0H2.1z M7.2,9.2H1.1V3h6.1V9.2z M9.2,7.1h-1V2H3.1V1h6.1V7.1z'
|
|
/>
|
|
</svg>
|
|
`);
|
|
|
|
const maximizeButton = (`
|
|
<svg x='0px' y='0px' viewBox='0 0 14 10.2'>
|
|
<path
|
|
fill='rgba(255, 255, 255, 0.9)'
|
|
d='M0,0v10.1h10.2V0H0z M9.2,9.2H1.1V1h8.1V9.2z'
|
|
/>
|
|
</svg>
|
|
`);
|
|
|
|
|
|
module.exports = {
|
|
titleBar: titleBar,
|
|
button: button,
|
|
unMaximizeButton: unMaximizeButton,
|
|
maximizeButton: maximizeButton
|
|
}; |