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

update notifications css (#56)

Browse Source
This commit is contained in:
Lynn 2017-04-11 15:01:14 -07:00 committed by GitHub
parent 6b99dc541e
commit 1047a26f15
3 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/notify/electron-notify-preload.js
View File

@ -22,10 +22,9 @@ function setStyle(config) {
// Default style // Default style
setStyleOnDomElement(config.defaultStyleContainer, container) setStyleOnDomElement(config.defaultStyleContainer, container)
// Size and radius
let style = { let style = {
height: config.height - 2 * config.borderRadius - 2 * config.defaultStyleContainer.padding, height: config.height,
width: config.width - 2 * config.borderRadius - 2 * config.defaultStyleContainer.padding, width: config.width,
borderRadius: config.borderRadius + 'px' borderRadius: config.borderRadius + 'px'
} }
setStyleOnDomElement(style, container) setStyleOnDomElement(style, container)

9
js/notify/electron-notify.html
View File

@ -1,13 +1,18 @@
<html> <html>
<head></head> <head></head>
<body style='overflow: hidden; -webkit-user-select: none;'> <body style='margin:0; overflow: hidden; -webkit-user-select: none;'>
<div id="container"> <div id="container">
<div id="header"> <div id="header">
<img src="" id="image" /> <img src="" id="image" />
<span id="title"></span> <span id="title"></span>
</div> </div>
<p id="message"></p> <p id="message"></p>
<div id="close">X</div> <div id="close">
<svg fill="#000000" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
</div> </div>
</body> </body>
</html> </html>

32
js/notify/electron-notify.js
View File

@ -48,8 +48,7 @@ let config = {
startCorner: 'upper-right', startCorner: 'upper-right',
width: 300, width: 300,
height: 80, height: 80,
padding: 4, borderRadius: 2,
borderRadius: 5,
displayTime: 5000, displayTime: 5000,
animationSteps: 5, animationSteps: 5,
animationStepMs: 5, animationStepMs: 5,
@ -62,10 +61,10 @@ let config = {
flexDirection: 'column', flexDirection: 'column',
backgroundColor: '#f0f0f0', backgroundColor: '#f0f0f0',
overflow: 'hidden', overflow: 'hidden',
padding: 4, padding: 10,
border: '1px solid #CCC',
position: 'relative', position: 'relative',
lineHeight: '15px' lineHeight: '15px',
boxSizing: 'border-box'
}, },
defaultStyleHeader: { defaultStyleHeader: {
flex: '0 0 auto', flex: '0 0 auto',
@ -82,14 +81,19 @@ let config = {
}, },
defaultStyleClose: { defaultStyleClose: {
position: 'absolute', position: 'absolute',
top: 12, top: 8,
right: 12, right: 8,
width: 16,
height: 16,
opacity: 0.54,
fontSize: 12, fontSize: 12,
color: '#CCC' color: '#CCC'
}, },
defaultStyleTitle: { defaultStyleTitle: {
fontFamily: 'Arial', fontFamily: 'Arial',
fontSize: 13, fontSize: 14,
fontWeight: 700,
opacity: 0.87,
marginRight: 10, marginRight: 10,
alignSelf: 'center', alignSelf: 'center',
overflow: 'hidden', overflow: 'hidden',
@ -100,9 +104,11 @@ let config = {
defaultStyleText: { defaultStyleText: {
flex: '0 0 auto', flex: '0 0 auto',
fontFamily: 'Calibri', fontFamily: 'Calibri',
fontSize: 12, fontSize: 14,
fontWeight: 400,
opacity: 0.87,
margin: 0, margin: 0,
marginTop: 3, marginTop: 4,
overflow: 'hidden', overflow: 'hidden',
display: '-webkit-box', display: '-webkit-box',
webkitLineClamp: 2, webkitLineClamp: 2,
@ -159,9 +165,11 @@ function getTemplatePath() {
} }
function calcDimensions() { function calcDimensions() {
const vertSpaceBetweenNotf = 8;
// Calc totalHeight & totalWidth // Calc totalHeight & totalWidth
config.totalHeight = config.height + config.padding config.totalHeight = config.height + vertSpaceBetweenNotf;
config.totalWidth = config.width + config.padding config.totalWidth = config.width
let firstPosX, firstPosY; let firstPosX, firstPosY;
switch (config.startCorner) { switch (config.startCorner) {