mirror of
https://github.com/finos/SymphonyElectron.git
synced 2025-02-25 18:55:29 -06:00
Merge pull request #211 from KiranNiranjan/ELECTRON-134
Electron-134 (Notification redesign)
This commit is contained in:
Vikas Shashidhar
GitHub
commit
00ea6badc5
@ -16,7 +16,7 @@
|
||||
</p>
|
||||
<p>
|
||||
<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>
|
||||
<label for='flash'>flash:</label>
|
||||
|
||||
BIN
js/notify/assets/symphony-logo-black.png
Normal file
BIN
js/notify/assets/symphony-logo-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
js/notify/assets/symphony-logo-white.png
Normal file
BIN
js/notify/assets/symphony-logo-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -9,6 +9,8 @@
|
||||
const electron = require('electron');
|
||||
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
|
||||
* @param config
|
||||
@ -19,7 +21,9 @@ function setStyle(config) {
|
||||
let container = notiDoc.getElementById('container');
|
||||
let header = notiDoc.getElementById('header');
|
||||
let image = notiDoc.getElementById('image');
|
||||
let logo = notiDoc.getElementById('symphony-logo');
|
||||
let title = notiDoc.getElementById('title');
|
||||
let pod = notiDoc.getElementById('pod');
|
||||
let message = notiDoc.getElementById('message');
|
||||
let close = notiDoc.getElementById('close');
|
||||
|
||||
@ -37,8 +41,12 @@ function setStyle(config) {
|
||||
|
||||
setStyleOnDomElement(config.defaultStyleImage, image);
|
||||
|
||||
setStyleOnDomElement(config.defaultStyleLogo, logo);
|
||||
|
||||
setStyleOnDomElement(config.defaultStyleTitle, title);
|
||||
|
||||
setStyleOnDomElement(config.defaultStylePod, pod);
|
||||
|
||||
setStyleOnDomElement(config.defaultStyleText, message);
|
||||
|
||||
setStyleOnDomElement(config.defaultStyleClose, close);
|
||||
@ -75,6 +83,20 @@ function setContents(event, notificationObj) {
|
||||
|
||||
if (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) {
|
||||
|
||||
@ -2,11 +2,17 @@
|
||||
<head></head>
|
||||
<body style='margin:0; overflow: hidden; -webkit-user-select: none;'>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
<img src="" id="image" />
|
||||
<div>
|
||||
<img src="" id="symphony-logo">
|
||||
</div>
|
||||
<div id="header">
|
||||
<span id="title"></span>
|
||||
<span id="pod"></span>
|
||||
<span id="message"></span>
|
||||
</div>
|
||||
<p id="message"></p>
|
||||
<div id="picture">
|
||||
<img src="" id="image" style="border-radius: 4px" />
|
||||
</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>
|
||||
|
||||
@ -55,9 +55,9 @@ let config = {
|
||||
// corner to put notifications
|
||||
// upper-right, upper-left, lower-right, lower-left
|
||||
startCorner: 'upper-right',
|
||||
width: 300,
|
||||
height: 80,
|
||||
borderRadius: 2,
|
||||
width: 380,
|
||||
height: 70,
|
||||
borderRadius: 5,
|
||||
displayTime: 5000,
|
||||
animationSteps: 5,
|
||||
animationStepMs: 5,
|
||||
@ -67,63 +67,66 @@ let config = {
|
||||
defaultStyleContainer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
backgroundColor: '#f0f0f0',
|
||||
overflow: 'hidden',
|
||||
padding: 10,
|
||||
position: 'relative',
|
||||
lineHeight: '15px',
|
||||
boxSizing: 'border-box'
|
||||
},
|
||||
defaultStyleHeader: {
|
||||
flex: '0 0 auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'row'
|
||||
width: 245,
|
||||
minWidth: 230,
|
||||
margin: "12px 10px"
|
||||
},
|
||||
defaultStyleImage: {
|
||||
flex: '0 0 auto',
|
||||
overflow: 'hidden',
|
||||
height: 30,
|
||||
width: 30,
|
||||
marginLeft: 0,
|
||||
marginRight: 8
|
||||
height: 43,
|
||||
borderRadius: 4,
|
||||
marginTop: 12,
|
||||
width: 43
|
||||
},
|
||||
defaultStyleClose: {
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
right: 8,
|
||||
width: 16,
|
||||
height: 16,
|
||||
margin: "10px 8px 0 8px",
|
||||
opacity: 0.54,
|
||||
fontSize: 12,
|
||||
color: '#CCC'
|
||||
},
|
||||
defaultStyleTitle: {
|
||||
fontFamily: 'Arial',
|
||||
fontFamily: 'sans-serif',
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
opacity: 0.87,
|
||||
marginRight: 10,
|
||||
alignSelf: 'center',
|
||||
color: '#4a4a4a',
|
||||
overflow: 'hidden',
|
||||
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',
|
||||
},
|
||||
defaultStyleText: {
|
||||
flex: '0 0 auto',
|
||||
fontFamily: 'Calibri',
|
||||
fontSize: 14,
|
||||
fontWeight: 400,
|
||||
opacity: 0.87,
|
||||
margin: 0,
|
||||
marginTop: 4,
|
||||
fontFamily: 'sans-serif',
|
||||
fontSize: 12,
|
||||
color: '#4a4a4a',
|
||||
marginTop: 12,
|
||||
overflow: 'hidden',
|
||||
display: '-webkit-box',
|
||||
webkitLineClamp: 2,
|
||||
webkitLineClamp: 1,
|
||||
webkitBoxOrient: 'vertical',
|
||||
cursor: 'default'
|
||||
},
|
||||
defaultStyleLogo: {
|
||||
margin: "12px 0 0 -12px",
|
||||
opacity: 0.6,
|
||||
},
|
||||
defaultWindow: {
|
||||
alwaysOnTop: true,
|
||||
skipTaskbar: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user