Electron-211 - Updated the toast notification to display company information

demo/index.html

@@ -18,6 +18,10 @@
             <label for='image'>image url:</label>
             <input type='text' id='image' value='https://avatars0.githubusercontent.com/u/13243259?v=4&s=460'/>
         </p>
+        <p>
+            <label for='company'>company:</label>
+            <input type='text' id='company' value='Symphony'/>
+        </p>
         <p>
             <label for='flash'>flash:</label>
             <input type='checkbox' id='flash'/>
@@ -92,6 +96,7 @@
             var shouldStick = document.getElementById('sticky').checked;
             var color = document.getElementById('color').value;
             var tag = document.getElementById('tag').value;
+            var company = document.getElementById('company').value;
 
             num++;
 
@@ -104,7 +109,8 @@
                 data: {
                     hello: 'hello word'
                 },
-                tag: tag
+                tag: tag,
+                company: company
             });
 
             notf.addEventListener('click', onclick);

js/notify/electron-notify-preload.js

@@ -23,7 +23,7 @@ function setStyle(config) {
     let image = notiDoc.getElementById('image');
     let logo = notiDoc.getElementById('symphony-logo');
     let title = notiDoc.getElementById('title');
-    let pod = notiDoc.getElementById('pod');
+    let company = notiDoc.getElementById('company');
     let message = notiDoc.getElementById('message');
     let close = notiDoc.getElementById('close');
 
@@ -45,7 +45,7 @@ function setStyle(config) {
 
     setStyleOnDomElement(config.defaultStyleTitle, title);
 
-    setStyleOnDomElement(config.defaultStylePod, pod);
+    setStyleOnDomElement(config.defaultStyleCompany, company);
 
     setStyleOnDomElement(config.defaultStyleText, message);
 
@@ -79,7 +79,13 @@ function setContents(event, notificationObj) {
 
     let 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');
 
     if (notificationObj.color) {
         container.style.backgroundColor = notificationObj.color;
@@ -88,13 +94,9 @@ function setContents(event, notificationObj) {
         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;
+            messageDoc.style.color = '#ffffff';
+            titleDoc.style.color = '#ffffff';
+            companyDoc.style.color = notificationObj.color;
             logo.src = './assets/symphony-logo-white.png';
         }
     }
@@ -111,24 +113,26 @@ function setContents(event, notificationObj) {
     }
 
     // Title
-    let titleDoc = notiDoc.getElementById('title');
     titleDoc.innerHTML = notificationObj.title || '';
 
     // message
-    let messageDoc = notiDoc.getElementById('message');
     messageDoc.innerHTML = notificationObj.text || '';
 
     // Image
-    let imageDoc = notiDoc.getElementById('image');
     if (notificationObj.image) {
         imageDoc.src = notificationObj.image;
     } else {
         setStyleOnDomElement({ display: 'none'}, imageDoc);
     }
 
-    const winId = notificationObj.windowId;
+    // Company
+    if (notificationObj.company) {
+        companyDoc.innerHTML = notificationObj.company
+    } else {
+        messageDoc.style.marginTop = '15px';
+    }
 
-    let closeButton = notiDoc.getElementById('close');
+    const winId = notificationObj.windowId;
 
     // note: use onclick because we only want one handler, for case
     // when content gets overwritten by notf with same tag

js/notify/electron-notify.html

@@ -7,7 +7,7 @@
     </div>
     <div id="header">
 		<span id="title"></span>
-        <span id="pod"></span>
+        <span id="company"></span>
         <span id="message"></span>
 	</div>
     <div id="picture">

js/notify/electron-notify.js

@@ -76,7 +76,7 @@ let config = {
     defaultStyleHeader: {
         width: 245,
         minWidth: 230,
-        margin: "12px 10px"
+        margin: "10px 10px"
     },
     defaultStyleImage: {
         height: 43,
@@ -102,7 +102,7 @@ let config = {
         webkitLineClamp: 1,
         webkitBoxOrient: 'vertical',
     },
-    defaultStylePod: {
+    defaultStyleCompany: {
         fontFamily: 'sans-serif',
         fontSize: 11,
         color: '#adadad',
@@ -116,7 +116,7 @@ let config = {
         fontFamily: 'sans-serif',
         fontSize: 12,
         color: '#4a4a4a',
-        marginTop: 12,
+        marginTop: 5,
         overflow: 'hidden',
         display: '-webkit-box',
         webkitLineClamp: 1,

js/notify/notifyImpl.js

@@ -41,6 +41,7 @@ class Notify {
             color: options.color,
             tag: options.tag,
             sticky: options.sticky || false,
+            company: options.company,
             onShowFunc: onShow.bind(this),
             onClickFunc: onClick.bind(this),
             onCloseFunc: onClose.bind(this),