From 6675d3937f5ddca9865b100279a4ebcb753c8975 Mon Sep 17 00:00:00 2001 From: Kiran Niranjan Date: Sun, 5 Nov 2017 10:23:40 +0530 Subject: [PATCH] Electron-134 - Optimized CSS & made changes as per review comments --- js/notify/electron-notify-preload.js | 11 ++++++---- js/notify/electron-notify.html | 4 ++-- js/notify/electron-notify.js | 31 ++++++++++++---------------- 3 files changed, 22 insertions(+), 24 deletions(-) diff --git a/js/notify/electron-notify-preload.js b/js/notify/electron-notify-preload.js index d7507888..589385f9 100644 --- a/js/notify/electron-notify-preload.js +++ b/js/notify/electron-notify-preload.js @@ -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,6 +21,7 @@ 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'); @@ -38,6 +41,8 @@ function setStyle(config) { setStyleOnDomElement(config.defaultStyleImage, image); + setStyleOnDomElement(config.defaultStyleLogo, logo); + setStyleOnDomElement(config.defaultStyleTitle, title); setStyleOnDomElement(config.defaultStylePod, pod); @@ -78,13 +83,11 @@ function setContents(event, notificationObj) { if (notificationObj.color) { container.style.backgroundColor = notificationObj.color; + let logo = notiDoc.getElementById('symphony-logo'); - if (notificationObj.color.match(/^(?:white|#fff(?:fff)?|rgba?\(\s*255\s*,\s*255\s*,\s*255\s*(?:,\s*1\s*)?\))$/i)) { - let logo = notiDoc.getElementById('symphony-logo'); + if (notificationObj.color.match(whiteColorRegExp)) { logo.src = './assets/symphony-logo-black.png'; } else { - - let logo = notiDoc.getElementById('symphony-logo'); let title = notiDoc.getElementById('title'); let pod = notiDoc.getElementById('pod'); let message = notiDoc.getElementById('message'); diff --git a/js/notify/electron-notify.html b/js/notify/electron-notify.html index 43d37ecd..ec8c2c2b 100644 --- a/js/notify/electron-notify.html +++ b/js/notify/electron-notify.html @@ -2,7 +2,7 @@
-
+
- +
diff --git a/js/notify/electron-notify.js b/js/notify/electron-notify.js index 8434fccb..b559e104 100644 --- a/js/notify/electron-notify.js +++ b/js/notify/electron-notify.js @@ -67,52 +67,45 @@ let config = { defaultStyleContainer: { display: 'flex', justifyContent: 'center', - flexDirection: 'column', backgroundColor: '#f0f0f0', overflow: 'hidden', - padding: 10, position: 'relative', lineHeight: '15px', boxSizing: 'border-box' }, defaultStyleHeader: { - flex: '1 0 auto', - display: 'flex', - flexDirection: 'column' + width: 245, + minWidth: 230, + margin: "12px 10px" }, defaultStyleImage: { height: 43, - position: 'absolute', - right: 30, - top: 11, + 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: 'Lato-Bold, san-serif', + fontFamily: 'sans-serif', fontSize: 14, fontWeight: 700, color: '#4a4a4a', - marginLeft: 52, overflow: 'hidden', display: '-webkit-box', webkitLineClamp: 1, webkitBoxOrient: 'vertical', }, defaultStylePod: { - fontFamily: 'Lato-Regular, san-serif', + fontFamily: 'sans-serif', fontSize: 11, color: '#adadad', - marginLeft: 52, overflow: 'hidden', filter: 'brightness(70%)', display: '-webkit-box', @@ -120,18 +113,20 @@ let config = { webkitBoxOrient: 'vertical', }, defaultStyleText: { - fontFamily: 'Lato-Regular, san-serif', + fontFamily: 'sans-serif', fontSize: 12, color: '#4a4a4a', marginTop: 12, - marginRight: 65, - marginLeft: 52, overflow: 'hidden', display: '-webkit-box', webkitLineClamp: 1, webkitBoxOrient: 'vertical', cursor: 'default' }, + defaultStyleLogo: { + margin: "12px 0 0 -12px", + opacity: 0.6, + }, defaultWindow: { alwaysOnTop: true, skipTaskbar: true,