Merge pull request #2599 from ethereum/themeImgs

added filter invert to images

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)
     })
@@ -77,6 +83,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]) {
@@ -129,6 +143,7 @@ export class TabProxy {
       icon,
       tooltip: name
     })
+    this.updateImgStyles()
     this._handlers[name] = { switchTo, close }
   }
 

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

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`<input id="gistaccesstoken" type="password" class="form-control mb-2 ${css.inline}" placeholder="Token">`
+    var gistAccessToken = yo`<input id="gistaccesstoken" type="password" class="border form-control mb-2 ${css.inline}" placeholder="Token">`
     var token = this.config.get('settings/gist-access-token')
     if (token) gistAccessToken.value = token
     var gistAddToken = yo`<input class="${css.savegisttoken} btn btn-sm btn-primary" id="savegisttoken" onclick=${() => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`

src/app/tabs/styles/settings-tab-styles.js

@@ -85,7 +85,7 @@ const css = csjs`
   }
   .inline {
     display: inline;
-    width: 50%;
+    width: 40%;
   }
 `
 

src/app/tabs/theme-module.js

@@ -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})`
+    }
+  }
 }

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 = () => {

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,37 +141,45 @@ export class PermissionHandler {
         : delete this.permissions[to.name][from.name]
     }
     const rememberSwitch = remember
-      ? yo`<input type="checkbox" onchange="${switchMode}" checkbox class="custom-control-input" id="remember" data-id="permissionHandlerRememberChecked">`
-      : yo`<input type="checkbox" onchange="${switchMode}" class="custom-control-input" id="remember" data-id="permissionHandlerRememberUnchecked">`
+      ? yo`<input type="checkbox" onchange="${switchMode}" checkbox class="form-check-input" id="remember" data-id="permissionHandlerRememberChecked">`
+      : yo`<input type="checkbox" onchange="${switchMode}" class="form-check-input" id="remember" data-id="permissionHandlerRememberUnchecked">`
     const message = remember
       ? `"${fromName}" has changed and would like to access "${toName}"`
       : `"${fromName}" would like to access "${toName}"`
 
-    return yo`
-    <section class="${css.permission}">
+    const imgFrom = yo`<img id="permissionModalImagesFrom" src="${from.icon}" />`
+    const imgTo = yo`<img id="permissionModalImagesTo" src="${to.icon}" />`
+    const pluginsImages = yo`
       <article class="${css.images}">
-        <img src="${from.icon}" />
+        ${imgFrom}
         <i class="fas fa-arrow-right"></i>
-        <img src="${to.icon}" />
-      </article>
-      
-      <article>
-        <h4 data-id="permissionHandlerMessage">${message} :</h4>
-        <h6>${fromName}</h6>
-        <p>${from.description || yo`<i>No description Provided</i>`}</p>
-        <h6>${toName} :</p>
-        <p>${to.description || yo`<i>No description Provided</i>`}</p>
+        ${imgTo}
       </article>
 
-      <article class="${css.remember}">
-        <div class="custom-control custom-checkbox">
-          ${rememberSwitch}
-          <label class="custom-control-label" for="remember" data-id="permissionHandlerRememberChoice">Remember this choice</label>
-        </div>
-        <button class="btn btn-sm" onclick="${_ => this.clear()}">Reset all Permissions</button>
-      </article>
+    `
+
+    globalRegistry.get('themeModule').api.fixInvert(imgFrom)
+    globalRegistry.get('themeModule').api.fixInvert(imgTo)
+
+    return yo`
+      <section class="${css.permission}">
+        ${pluginsImages}
+        <article>
+          <h4 data-id="permissionHandlerMessage">${message} :</h4>
+          <h6>${fromName}</h6>
+          <p>${from.description || yo`<i>No description Provided</i>`}</p>
+          <h6>${toName} :</p>
+          <p>${to.description || yo`<i>No description Provided</i>`}</p>
+        </article>
 
-    </section>
+        <article class="${css.remember}">
+          <div class="form-check">
+            ${rememberSwitch}
+            <label class="form-check-label" for="remember" data-id="permissionHandlerRememberChoice">Remember this choice</label>
+          </div>
+          <button class="btn btn-sm" onclick="${_ => this.clear()}">Reset all Permissions</button>
+        </article>
+      </section>
     `
   }
 }

test-browser/tests/publishContract.js

@@ -23,7 +23,7 @@ module.exports = {
     })
     .modalFooterOKClick()
   },
-  'Publish on Swarm': function (browser) {
+  'Publish on Swarm': '' + function (browser) {
     browser
     .click('#publishOnSwarm')
     .getModalBody((value, done) => {