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

Merge pull request #211 from KiranNiranjan/ELECTRON-134

Browse Source 
Electron-134 (Notification redesign)
This commit is contained in:
Vikas Shashidhar 2017-11-06 14:15:08 +05:30 committed by GitHub
commit 00ea6badc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/index.html
View File

@ -16,7 +16,7 @@
</p> </p>
<p> <p>
<label for='image'>image url:</label> <label for='image'>image url:</label>
<input type='text' id='image' value='https://lh3.googleusercontent.com/-s2PXL6wWMCc/AAAAAAAAAAI/AAAAAAAAAAA/AAomvV2gUNMMeFsOijwVVpihfg_anpKWQA/s32-c-mo/photo.jpg'/> <input type='text' id='image' value='https://avatars0.githubusercontent.com/u/13243259?v=4&s=460'/>
</p> </p>
<p> <p>
<label for='flash'>flash:</label> <label for='flash'>flash:</label>

BIN
js/notify/assets/symphony-logo-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
js/notify/assets/symphony-logo-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

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

@ -9,6 +9,8 @@
const electron = require('electron'); const electron = require('electron');
const ipc = electron.ipcRenderer; const ipc = electron.ipcRenderer;
const whiteColorRegExp = new RegExp(/^(?:white|#fff(?:fff)?|rgba?\(\s*255\s*,\s*255\s*,\s*255\s*(?:,\s*1\s*)?\))$/i);
/** /**
* Sets style for a notification * Sets style for a notification
* @param config * @param config
@ -19,7 +21,9 @@ function setStyle(config) {
let container = notiDoc.getElementById('container'); let container = notiDoc.getElementById('container');
let header = notiDoc.getElementById('header'); let header = notiDoc.getElementById('header');
let image = notiDoc.getElementById('image'); let image = notiDoc.getElementById('image');
let logo = notiDoc.getElementById('symphony-logo');
let title = notiDoc.getElementById('title'); let title = notiDoc.getElementById('title');
let pod = notiDoc.getElementById('pod');
let message = notiDoc.getElementById('message'); let message = notiDoc.getElementById('message');
let close = notiDoc.getElementById('close'); let close = notiDoc.getElementById('close');
@ -37,8 +41,12 @@ function setStyle(config) {
setStyleOnDomElement(config.defaultStyleImage, image); setStyleOnDomElement(config.defaultStyleImage, image);
setStyleOnDomElement(config.defaultStyleLogo, logo);
setStyleOnDomElement(config.defaultStyleTitle, title); setStyleOnDomElement(config.defaultStyleTitle, title);
setStyleOnDomElement(config.defaultStylePod, pod);
setStyleOnDomElement(config.defaultStyleText, message); setStyleOnDomElement(config.defaultStyleText, message);
setStyleOnDomElement(config.defaultStyleClose, close); setStyleOnDomElement(config.defaultStyleClose, close);
@ -75,6 +83,20 @@ function setContents(event, notificationObj) {
if (notificationObj.color) { if (notificationObj.color) {
container.style.backgroundColor = notificationObj.color; container.style.backgroundColor = notificationObj.color;
let logo = notiDoc.getElementById('symphony-logo');
if (notificationObj.color.match(whiteColorRegExp)) {
logo.src = './assets/symphony-logo-black.png';
} else {
let title = notiDoc.getElementById('title');
let pod = notiDoc.getElementById('pod');
let message = notiDoc.getElementById('message');
message.style.color = '#ffffff';
title.style.color = '#ffffff';
pod.style.color = notificationObj.color;
logo.src = './assets/symphony-logo-white.png';
}
} }
if (notificationObj.flash) { if (notificationObj.flash) {

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

@ -2,11 +2,17 @@
<head></head> <head></head>
<body style='margin:0; 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>
<img src="" id="image" /> <img src="" id="symphony-logo">
</div>
<div id="header">
<span id="title"></span> <span id="title"></span>
<span id="pod"></span>
<span id="message"></span>
</div> </div>
<p id="message"></p> <div id="picture">
<img src="" id="image" style="border-radius: 4px" />
</div>
<div id="close"> <div id="close">
<svg fill="#000000" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"> <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> <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>

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

@ -55,9 +55,9 @@ let config = {
// corner to put notifications // corner to put notifications
// upper-right, upper-left, lower-right, lower-left // upper-right, upper-left, lower-right, lower-left
startCorner: 'upper-right', startCorner: 'upper-right',
width: 300, width: 380,
height: 80, height: 70,
borderRadius: 2, borderRadius: 5,
displayTime: 5000, displayTime: 5000,
animationSteps: 5, animationSteps: 5,
animationStepMs: 5, animationStepMs: 5,
@ -67,63 +67,66 @@ let config = {
defaultStyleContainer: { defaultStyleContainer: {
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#f0f0f0', backgroundColor: '#f0f0f0',
overflow: 'hidden', overflow: 'hidden',
padding: 10,
position: 'relative', position: 'relative',
lineHeight: '15px', lineHeight: '15px',
boxSizing: 'border-box' boxSizing: 'border-box'
}, },
defaultStyleHeader: { defaultStyleHeader: {
flex: '0 0 auto', width: 245,
display: 'flex', minWidth: 230,
flexDirection: 'row' margin: "12px 10px"
}, },
defaultStyleImage: { defaultStyleImage: {
flex: '0 0 auto', height: 43,
overflow: 'hidden', borderRadius: 4,
height: 30, marginTop: 12,
width: 30, width: 43
marginLeft: 0,
marginRight: 8
}, },
defaultStyleClose: { defaultStyleClose: {
position: 'absolute',
top: 8,
right: 8,
width: 16, width: 16,
height: 16, height: 16,
margin: "10px 8px 0 8px",
opacity: 0.54, opacity: 0.54,
fontSize: 12, fontSize: 12,
color: '#CCC' color: '#CCC'
}, },
defaultStyleTitle: { defaultStyleTitle: {
fontFamily: 'Arial', fontFamily: 'sans-serif',
fontSize: 14, fontSize: 14,
fontWeight: 700, fontWeight: 700,
opacity: 0.87, color: '#4a4a4a',
marginRight: 10,
alignSelf: 'center',
overflow: 'hidden', overflow: 'hidden',
display: '-webkit-box', display: '-webkit-box',
webkitLineClamp: 2, webkitLineClamp: 1,
webkitBoxOrient: 'vertical',
},
defaultStylePod: {
fontFamily: 'sans-serif',
fontSize: 11,
color: '#adadad',
overflow: 'hidden',
filter: 'brightness(70%)',
display: '-webkit-box',
webkitLineClamp: 1,
webkitBoxOrient: 'vertical', webkitBoxOrient: 'vertical',
}, },
defaultStyleText: { defaultStyleText: {
flex: '0 0 auto', fontFamily: 'sans-serif',
fontFamily: 'Calibri', fontSize: 12,
fontSize: 14, color: '#4a4a4a',
fontWeight: 400, marginTop: 12,
opacity: 0.87,
margin: 0,
marginTop: 4,
overflow: 'hidden', overflow: 'hidden',
display: '-webkit-box', display: '-webkit-box',
webkitLineClamp: 2, webkitLineClamp: 1,
webkitBoxOrient: 'vertical', webkitBoxOrient: 'vertical',
cursor: 'default' cursor: 'default'
}, },
defaultStyleLogo: {
margin: "12px 0 0 -12px",
opacity: 0.6,
},
defaultWindow: { defaultWindow: {
alwaysOnTop: true, alwaysOnTop: true,
skipTaskbar: true, skipTaskbar: true,