diff --git a/package-lock.json b/package-lock.json index f291a48dfe..c7fecd367f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17777,7 +17777,7 @@ "requires": { "underscore": "1.8.3", "web3-core-helpers": "1.0.0-beta.27", - "websocket": "git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible" + "websocket": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2" }, "dependencies": { "debug": { diff --git a/src/app/panels/tab-proxy.js b/src/app/panels/tab-proxy.js index d69dbd7e96..c07b07a56d 100644 --- a/src/app/panels/tab-proxy.js +++ b/src/app/panels/tab-proxy.js @@ -1,6 +1,7 @@ var yo = require('yo-yo') var $ = require('jquery') const EventEmitter = require('events') +const globalRegistry = require('../../global/registry') require('remix-tabs') @@ -14,6 +15,11 @@ export class TabProxy { this._view = {} this._handlers = {} + globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => { + // update invert for all icons + this.updateImgStyles() + }) + fileManager.events.on('fileRemoved', (name) => { this.removeTab(name) }) @@ -78,6 +84,14 @@ export class TabProxy { } }) } + updateImgStyles () { + const images = this._view.filetabs.getElementsByClassName('image') + if (images.length !== 0) { + for (let element of images) { + globalRegistry.get('themeModule').api.fixInvert(element) + }; + } + } switchTab (tabName) { if (this._handlers[tabName]) { @@ -130,6 +144,7 @@ export class TabProxy { icon, tooltip: name }) + this.updateImgStyles() this._handlers[name] = { switchTo, close } } diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js index 6fb90eb2c3..a1aac23349 100644 --- a/src/app/tabs/compile-tab.js +++ b/src/app/tabs/compile-tab.js @@ -168,12 +168,8 @@ class CompileTab extends ViewPlugin { } }) - globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => { - const invert = theme.quality === 'dark' ? 1 : 0 - const img = document.getElementById('swarmLogo') - if (img) { - img.style.filter = `invert(${invert})` - } + globalRegistry.get('themeModule').api.events.on('themeChanged', () => { + globalRegistry.get('themeModule').api.fixInvert(document.getElementById('swarmLogo')) }) // Run the compiler instead of trying to save the website diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js index 0d7ac7a09f..221d59f38d 100644 --- a/src/app/tabs/settings-tab.js +++ b/src/app/tabs/settings-tab.js @@ -68,7 +68,7 @@ module.exports = class SettingsTab extends ViewPlugin { if (self._view.el) return self._view.el // Gist settings - var gistAccessToken = yo`` + var gistAccessToken = yo`` var token = this.config.get('settings/gist-access-token') if (token) gistAccessToken.value = token var gistAddToken = yo` { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">` diff --git a/src/app/tabs/styles/settings-tab-styles.js b/src/app/tabs/styles/settings-tab-styles.js index 3c7cf404ce..2e836b5b04 100644 --- a/src/app/tabs/styles/settings-tab-styles.js +++ b/src/app/tabs/styles/settings-tab-styles.js @@ -85,7 +85,7 @@ const css = csjs` } .inline { display: inline; - width: 50%; + width: 40%; } ` diff --git a/src/app/tabs/theme-module.js b/src/app/tabs/theme-module.js index be7cb8184f..445cb779e7 100644 --- a/src/app/tabs/theme-module.js +++ b/src/app/tabs/theme-module.js @@ -24,7 +24,7 @@ const themes = [ const profile = { name: 'theme', events: ['themeChanged'], - methods: ['switchTheme', 'getThemes', 'currentTheme'], + methods: ['switchTheme', 'getThemes', 'currentTheme', 'fixInvert'], version: packageJson.version, kind: 'theme' } @@ -84,4 +84,15 @@ export class ThemeModule extends Plugin { this.emit('themeChanged', nextTheme) this.events.emit('themeChanged', nextTheme) } + + /** + * fixes the invertion for images since this should be adjusted when we switch between dark/light qualified themes + * @param {element} [image] - the dom element which invert should be fixed to increase visibility + */ + fixInvert (image) { + const invert = this.currentTheme().quality === 'dark' ? 1 : 0 + if (image) { + image.style.filter = `invert(${invert})` + } + } } diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js index 1548c4d4dd..f2f98a9493 100644 --- a/src/app/ui/landing-page/landing-page.js +++ b/src/app/ui/landing-page/landing-page.js @@ -163,12 +163,8 @@ export class LandingPage extends ViewPlugin { this.verticalIcons.select('fileExplorers') } - globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => { - const invert = theme.quality === 'dark' ? 1 : 0 - const img = document.getElementById('remixLogo') - if (img) { - img.style.filter = `invert(${invert})` - } + globalRegistry.get('themeModule').api.events.on('themeChanged', () => { + globalRegistry.get('themeModule').api.fixInvert(document.getElementById('remixLogo')) }) let switchToPreviousVersion = () => { diff --git a/src/app/ui/persmission-handler.js b/src/app/ui/persmission-handler.js index 9064521eed..d25f3b28b5 100644 --- a/src/app/ui/persmission-handler.js +++ b/src/app/ui/persmission-handler.js @@ -3,6 +3,7 @@ const yo = require('yo-yo') const csjs = require('csjs-inject') const addTooltip = require('./tooltip') const modalDialog = require('./modaldialog') +const globalRegistry = require('../../global/registry') const css = csjs` .permission h4 { @@ -140,20 +141,26 @@ export class PermissionHandler { : delete this.permissions[to.name][from.name] } const rememberSwitch = remember - ? yo`` - : yo`` + ? yo`` + : yo`` const message = remember ? `"${fromName}" has changed and would like to access "${toName}"` : `"${fromName}" would like to access "${toName}"` - return yo` -
-
+ const pluginsImages = yo` +
- +
- + + ` + + globalRegistry.get('themeModule').api.fixInvert(pluginsImages) + + return yo` +
+ ${pluginsImages}

${message} :

${fromName}
@@ -163,9 +170,9 @@ export class PermissionHandler {
-
+
${rememberSwitch} - +
@@ -173,4 +180,12 @@ export class PermissionHandler {
` } + + listenOnThemeChange (images) { + // update invert for Plugin icons + if (!globalRegistry.get('themeModule')) return + globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => { + globalRegistry.get('themeModule').api.fixInvert(images) + }) + } }