Electron-134 - Optimized CSS & made changes as per review comments

This commit is contained in:
Kiran Niranjan 2017-11-05 10:23:40 +05:30 committed by Kiran Niranjan
parent f5ab7035e6
commit 6675d3937f
3 changed files with 22 additions and 24 deletions

View File

@ -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');

View File

@ -2,7 +2,7 @@
<head></head>
<body style='margin:0; overflow: hidden; -webkit-user-select: none;'>
<div id="container">
<div style="overflow: hidden; position: absolute; transform: translate(-25px, 10px);">
<div>
<img src="" id="symphony-logo">
</div>
<div id="header">
@ -11,7 +11,7 @@
<span id="message"></span>
</div>
<div id="picture">
<img src="" id="image" />
<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">

View File

@ -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,