From a90dc0c82fed7fb7a10fb54fadaa3aa91e2f8bbb Mon Sep 17 00:00:00 2001 From: Akash Nimare Date: Thu, 1 Mar 2018 18:52:53 +0530 Subject: [PATCH] Custom css: Add a setting option for custom css. This PR adds an option to inject custom CSS. Fixes - #432. --- app/renderer/css/preference.css | 41 +++++++++++-- app/renderer/js/components/webview.js | 18 +++++- .../js/pages/preference/general-section.js | 59 +++++++++++++++++++ 3 files changed, 113 insertions(+), 5 deletions(-) diff --git a/app/renderer/css/preference.css b/app/renderer/css/preference.css index 275694ed..6fac8ad9 100644 --- a/app/renderer/css/preference.css +++ b/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; + } } \ No newline at end of file diff --git a/app/renderer/js/components/webview.js b/app/renderer/js/components/webview.js index 1bd7a97c..4283d1db 100644 --- a/app/renderer/js/components/webview.js +++ b/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() { diff --git a/app/renderer/js/pages/preference/general-section.js b/app/renderer/js/pages/preference/general-section.js index 7f70cf8c..f1d5cce0 100644 --- a/app/renderer/js/pages/preference/general-section.js +++ b/app/renderer/js/pages/preference/general-section.js @@ -69,6 +69,24 @@ class GeneralSection extends BaseSection {
+
Add custom CSS
+
+
+
+ This will inject the selected css stylesheet in all the added accounts +
+ +
+
+
+
${ConfigUtil.getConfigItem('customCSS')}
+
+
+ indeterminate_check_box + Delete +
+
+
Reset Application Data
@@ -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;