Custom css: Add a setting option for custom css.

This PR adds an option to inject custom CSS.
Fixes - #432.

Author: akashnimare

app/renderer/css/preference.css

@@ -13,7 +13,7 @@ body {
 
 kbd {
     display: inline-block;
-    border: 1px solid #ccc ;
+    border: 1px solid #ccc;
     border-radius: 3px;
     font-size: 15px;
     font-family: Courier New, Courier, monospace;
@@ -271,8 +271,7 @@ img.server-info-icon {
 
 .settings-card:hover {
     border-left: 8px solid #bcbcbc;
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
-                0 2px 0px 0px rgba(0,0,0,0.12);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 0px 0px rgba(0, 0, 0, 0.12);
 }
 
 .hidden {
@@ -320,7 +319,8 @@ i.open-tab-button {
     cursor: pointer;
 }
 
-.reset-data-button {
+.reset-data-button,
+.custom-css-button {
     display: inline-block;
     border: none;
     padding: 10px;
@@ -331,11 +331,29 @@ i.open-tab-button {
     text-decoration: none;
 }
 
+.css-delete-action {
+    margin-bottom: 10px;
+}
+
 .reset-data-button:hover {
     background-color: #3c9f8d;
     color: #fff;
 }
 
+.selected-css-path {
+    background: #eeeeee;
+    padding: 10px;
+    margin-top: 10px;
+    margin-right: 10px;
+    display: flex;
+    width: 90%;
+    justify-content: space-between;
+}
+
+#remove-custom-css {
+    align-items: flex-end;
+}
+
 #server-info-container {
     min-height: calc(100% - 260px);
 }
@@ -412,4 +430,19 @@ input.toggle-round:checked+label:before {
 
 input.toggle-round:checked+label:after {
     margin-left: 25px;
+}
+
+
+/* responsive grid */
+
+@media (max-width: 650px) {
+    .selected-css-path {
+        margin-right: 15px;
+    }
+    #css-delete-action {
+        margin-left: 10px;
+    }
+    #css-delete-action span {
+        display: none;
+    }
 }

app/renderer/js/components/webview.js

@@ -7,7 +7,7 @@ const DomainUtil = require(__dirname + '/../utils/domain-util.js');
 const ConfigUtil = require(__dirname + '/../utils/config-util.js');
 const SystemUtil = require(__dirname + '/../utils/system-util.js');
 const LinkUtil = require(__dirname + '/../utils/link-util.js');
-const { shell, app } = require('electron').remote;
+const { shell, app, dialog } = require('electron').remote;
 
 const BaseComponent = require(__dirname + '/../components/base.js');
 
@@ -21,6 +21,7 @@ class WebView extends BaseComponent {
 		this.zoomFactor = 1.0;
 		this.loading = false;
 		this.badgeCount = 0;
+		this.customCSS = ConfigUtil.getConfigItem('customCSS');
 	}
 
 	template() {
@@ -139,6 +140,21 @@ class WebView extends BaseComponent {
 		this.props.onTitleChange();
 		// Injecting preload css in webview to override some css rules
 		this.$el.insertCSS(fs.readFileSync(path.join(__dirname, '/../../css/preload.css'), 'utf8'));
+
+		// get customCSS again from config util to avoid warning user again
+		this.customCSS = ConfigUtil.getConfigItem('customCSS');
+		if (this.customCSS) {
+			if (!fs.existsSync(this.customCSS)) {
+				this.customCSS = null;
+				ConfigUtil.setConfigItem('customCSS', null);
+
+				const errMsg = 'The custom css previously set is deleted!';
+				dialog.showErrorBox('custom css file deleted!', errMsg);
+				return;
+			}
+
+			this.$el.insertCSS(fs.readFileSync(path.resolve(__dirname, this.customCSS), 'utf8'));
+		}
 	}
 
 	focus() {

app/renderer/js/pages/preference/general-section.js

@@ -69,6 +69,24 @@ class GeneralSection extends BaseSection {
 						<div class="setting-control"></div>
 					</div>
 				</div>
+				<div class="title">Add custom CSS</div>
+				<div class="settings-card">
+					<div class="setting-row" id="add-custom-css">
+						<div class="setting-description">
+							This will inject the selected css stylesheet in all the added accounts
+						</div>
+						<button class="custom-css-button blue">Add</button>
+					</div>
+					<div class="setting-row" id="remove-custom-css">
+						<div class="setting-description">
+							<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigItem('customCSS')}</div>
+						</div>
+						<div class="action red" id="css-delete-action">
+							<i class="material-icons">indeterminate_check_box</i>
+							<span>Delete</span>
+						</div>
+					</div>
+				</div>
 				<div class="title">Reset Application Data</div>
                 <div class="settings-card">
 					<div class="setting-row" id="resetdata-option">
@@ -93,6 +111,9 @@ class GeneralSection extends BaseSection {
 		this.showDesktopNotification();
 		this.enableSpellchecker();
 		this.minimizeOnStart();
+		this.addCustomCSS();
+		this.showCustomCSSPath();
+		this.removeCustomCSS();
 
 		// Platform specific settings
 		// Flashing taskbar on Windows
@@ -232,6 +253,22 @@ class GeneralSection extends BaseSection {
 		});
 	}
 
+	customCssDialog() {
+		const showDialogOptions = {
+			title: 'Select file',
+			defaultId: 1,
+			properties: ['openFile'],
+			filters: [{ name: 'CSS file', extensions: ['css'] }]
+		};
+
+		dialog.showOpenDialog(showDialogOptions, selectedFile => {
+			if (selectedFile) {
+				ConfigUtil.setConfigItem('customCSS', selectedFile[0]);
+				ipcRenderer.send('forward-message', 'hard-reload');
+			}
+		});
+	}
+
 	updateResetDataOption() {
 		const resetDataButton = document.querySelector('#resetdata-option .reset-data-button');
 		resetDataButton.addEventListener('click', () => {
@@ -251,6 +288,28 @@ class GeneralSection extends BaseSection {
 		});
 	}
 
+	addCustomCSS() {
+		const customCSSButton = document.querySelector('#add-custom-css .custom-css-button');
+		customCSSButton.addEventListener('click', () => {
+			this.customCssDialog();
+		});
+	}
+
+	showCustomCSSPath() {
+		if (!ConfigUtil.getConfigItem('customCSS')) {
+			const cssPATH = document.getElementById('remove-custom-css');
+			cssPATH.style.display = 'none';
+		}
+	}
+
+	removeCustomCSS() {
+		const removeCSSButton = document.getElementById('css-delete-action');
+		removeCSSButton.addEventListener('click', () => {
+			ConfigUtil.setConfigItem('customCSS');
+			ipcRenderer.send('forward-message', 'hard-reload');
+		});
+	}
+
 }
 
 module.exports = GeneralSection;