ELECTRON-801 (Dynamically update notification based on message length) (#511)

* ELECTRON-801 - Dynamically update notification based on message length

* ELECTRON-801 - hide text only if the length is greater than 96 char
This commit is contained in:
Kiran Niranjan 2018-10-02 20:31:37 +05:30 committed by Vishwas Shashidhar
parent ba83338e6e
commit 2a1f2b16e8
3 changed files with 45 additions and 26 deletions

View File

@ -20,15 +20,17 @@ let onMouseOverFunc;
*/
function setStyle(config) {
// Style it
let notiDoc = window.document;
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 company = notiDoc.getElementById('company');
let message = notiDoc.getElementById('message');
let close = notiDoc.getElementById('close');
const notiDoc = window.document;
const container = notiDoc.getElementById('container');
const header = notiDoc.getElementById('header');
const image = notiDoc.getElementById('image');
const logo = notiDoc.getElementById('symphony-logo');
const title = notiDoc.getElementById('title');
const company = notiDoc.getElementById('company');
const message = notiDoc.getElementById('message');
const close = notiDoc.getElementById('close');
const picture = notiDoc.getElementById('picture');
const logoContainer = notiDoc.getElementById('logo-container');
// Default style
setStyleOnDomElement(config.defaultStyleContainer, container);
@ -53,6 +55,10 @@ function setStyle(config) {
setStyleOnDomElement(config.defaultStyleText, message);
setStyleOnDomElement(config.defaultStyleClose, close);
setStyleOnDomElement(config.defaultStyleImageContainer, picture);
setStyleOnDomElement(config.defaultStyleLogoContainer, logoContainer);
}
/**
@ -80,15 +86,15 @@ function setContents(event, notificationObj) {
}
}
let notiDoc = window.document;
const notiDoc = window.document;
// All the required DOM elements to update the content
let container = notiDoc.getElementById('container');
let titleDoc = notiDoc.getElementById('title');
let companyDoc = notiDoc.getElementById('company');
let messageDoc = notiDoc.getElementById('message');
let imageDoc = notiDoc.getElementById('image');
let closeButton = notiDoc.getElementById('close');
const container = notiDoc.getElementById('container');
const titleDoc = notiDoc.getElementById('title');
const companyDoc = notiDoc.getElementById('company');
const messageDoc = notiDoc.getElementById('message');
const imageDoc = notiDoc.getElementById('image');
const closeButton = notiDoc.getElementById('close');
closeButton.title = notificationObj.i18n.close;
if (notificationObj.color) {

View File

@ -2,8 +2,8 @@
<head></head>
<body style='margin:0; overflow: hidden; -webkit-user-select: none;'>
<div id="container">
<div>
<img src="" id="symphony-logo">
<div id="logo-container">
<img src="./assets/symphony-logo-white.png" id="symphony-logo">
</div>
<div id="header">
<span id="title"></span>

View File

@ -56,7 +56,7 @@ let config = {
// upper-right, upper-left, lower-right, lower-left
startCorner: 'upper-right',
width: 380,
height: 70,
height: 100,
borderRadius: 5,
displayTime: 5000,
animationSteps: 5,
@ -76,18 +76,25 @@ let config = {
defaultStyleHeader: {
width: 245,
minWidth: 230,
margin: "10px 10px"
margin: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
},
defaultStyleImageContainer: {
alignItems: 'center',
display: 'flex',
},
defaultStyleImage: {
height: 43,
borderRadius: 4,
marginTop: 12,
width: 43
},
defaultStyleClose: {
width: 16,
height: 16,
margin: "10px 8px 0 8px",
height: 80,
display: 'flex',
margin: 'auto',
opacity: 0.54,
fontSize: 12,
color: '#CCC'
@ -119,13 +126,19 @@ let config = {
marginTop: 5,
overflow: 'hidden',
display: '-webkit-box',
webkitLineClamp: 1,
webkitLineClamp: 3,
webkitBoxOrient: 'vertical',
cursor: 'default'
cursor: 'default',
textOverflow: 'ellipsis',
},
defaultStyleLogoContainer: {
display: 'flex',
alignItems: 'center',
},
defaultStyleLogo: {
margin: "12px 0 0 -12px",
marginLeft: '5px',
opacity: 0.6,
width: '43px',
},
defaultWindow: {
alwaysOnTop: true,