mirror of
https://github.com/finos/SymphonyElectron.git
synced 2025-01-03 12:47:13 -06:00
9991690a7e
1. Implemented new title bar style for Windows 2. Updated design 3. Updated design and added some safety checks 4. Added title bar double click event 5. Added API to update DOM element 6. Updated style as per the design spec 7. Refactored code and handled full screen scenario 8. Added borders to window 9. Added z-index to make sure border is always on top 10. Updated logic to check Windows 10 version 11. Setting frame property as true for pop-out windows 12. Optimized the code to initiate Windows title bar only after injecting CSS 13. Removed API to update content height 14. Added a global config field to enable or disable custom title bar 15. Reading `isCustomTitleBar` before creating main window 16. Fixed shortcut suggestion in menu items 17. Added two more missing shortcut suggestion in menu items 18. Updated menu template to dynamically assign accelerators 19. Changed the func name closeButtonClick to closeWindow 20. Converted all HEX color code to rgba
121 lines
5.2 KiB
JavaScript
121 lines
5.2 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" width="100px" height="32px" x="0px" y="0px"
|
|
viewBox="0 0 121 24" enable-background="new 0 0 121 24" xml:space="preserve">
|
|
<g>
|
|
<path fill="#FFFFFF" d="M36.7,10c-0.6-0.5-1.8-1.1-3.4-1.1c-1.1,0-2,0.4-2,1.3c0,1,1.3,1,2.7,1.1c1.7,0.1,4.5,0.3,4.5,3
|
|
c0,2.4-2,3.3-4.3,3.3c-2.5,0-4.2-1-5.3-2l1.1-1.3c0.8,0.7,2.2,1.7,4.2,1.7c1.3,0,2.4-0.5,2.4-1.5c0-1.1-1-1.3-2.6-1.4
|
|
c-2.1-0.2-4.6-0.3-4.6-2.7c0-2.3,2.1-3,3.9-3c2,0,3.7,0.8,4.5,1.3L36.7,10z"/>
|
|
<path fill="#FFFFFF" d="M59.4,17.2v-6.1h-0.1l-2.9,4.9h-0.4L53,11.2h-0.1v6.1h-1.8V7.6h1.9l3.3,5.5h0l3.2-5.5h1.8v9.6H59.4z"/>
|
|
<path fill="#FFFFFF" d="M75.6,17.2V7.6h1.9v3.8h4.9V7.6h1.9v9.6h-1.9v-4.2h-4.9v4.2H75.6z"/>
|
|
<path fill="#FFFFFF" d="M91.9,15.9c1.9,0,3.3-1.6,3.3-3.5c0-1.9-1.5-3.4-3.3-3.4c-1.8,0-3.3,1.5-3.3,3.4
|
|
C88.7,14.3,90.1,15.9,91.9,15.9z M91.9,7.3c2.9,0,5.3,2.3,5.3,5.1c0,2.9-2.3,5.1-5.3,5.1c-2.9,0-5.2-2.3-5.2-5.1
|
|
C86.7,9.6,89,7.3,91.9,7.3z"/>
|
|
<path fill="#FFFFFF" d="M108.3,7.6v9.6h-1.6l-5.2-6.3h0v6.3h-1.9V7.6h1.6l5.2,6.3h0V7.6H108.3z"/>
|
|
<polygon fill="#FFFFFF" points="120.1,7.6 117.9,7.6 115.2,12.2 115.1,12.2 112.4,7.6 110.1,7.6 114.2,14 114.2,17.2 116,17.2
|
|
116,14 "/>
|
|
<polygon fill="#FFFFFF" points="49.3,7.6 47.1,7.6 44.4,12.2 44.3,12.2 41.6,7.6 39.3,7.6 43.4,14 43.4,17.2 45.2,17.2 45.2,14
|
|
"/>
|
|
<path fill="#FFFFFF" d="M66.2,14.1l3.1,0c1.4,0,2.3-0.4,2.9-1c0.6-0.6,1-1.4,1-2.3c0-0.8-0.3-1.5-0.8-2.1c-0.7-0.7-1.6-1.1-3.1-1.1
|
|
h-5v9.6h1.9V14.1z M66.2,9.2h3.1c0.5,0,1.1,0.1,1.5,0.5c0.3,0.3,0.4,0.7,0.4,1.1c0,0.4-0.2,0.8-0.5,1.1c-0.5,0.4-1,0.5-1.5,0.5
|
|
l-3.1,0V9.2z"/>
|
|
</g>
|
|
<g>
|
|
<g>
|
|
<path fill="#F48DA1" d="M4,12.2c-0.1,0.5-0.1,0.9-0.1,1.4c0,1.5,0.4,2.9,1,4.1l8.1-4.1L4,12.2z"/>
|
|
</g>
|
|
<g>
|
|
<path fill="#33B9E6" d="M9.7,18.2c0.9,0.7,2.1,1.1,3.3,1.1c0.3,0,0.6,0,0.9-0.1L13,13.6L9.7,18.2z"/>
|
|
</g>
|
|
<g>
|
|
<path fill="#90D095" d="M18.2,1.1c-1.6-0.7-3.4-1-5.2-1c-0.7,0-1.4,0.1-2.1,0.2L13,13.6L18.2,1.1z"/>
|
|
</g>
|
|
<g>
|
|
<path fill="#FED05F" d="M13,13.6h11.3c0-2.5-0.8-4.8-2.2-6.7L13,13.6z"/>
|
|
</g>
|
|
<g>
|
|
<path fill="#727376" d="M2.9,7.4c-1.1,1.8-1.8,3.9-1.8,6.2H13L2.9,7.4z"/>
|
|
</g>
|
|
<g>
|
|
<path fill="#A1A2A3" d="M13,5.7c-1.7,0-3.4,0.6-4.7,1.5l4.7,6.4V5.7z"/>
|
|
</g>
|
|
<g>
|
|
<path fill="#8A8B8C" d="M13,23.8c2.2,0,4.3-0.7,6-1.9l-6-8.2V23.8z"/>
|
|
</g>
|
|
<g>
|
|
<path fill="#636466" d="M20.8,12.4L13,13.6l7.3,3c0.4-0.9,0.6-2,0.6-3C20.9,13.2,20.9,12.8,20.8,12.4z"/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</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
|
|
}; |