Merge pull request #1768 from ethereum/bootstrap_theme_list

src/app/editor/editor.js

@@ -104,8 +104,6 @@ class Editor {
     this.editor.setShowPrintMargin(false)
     this.editor.resize(true)
 
-    this.setTheme()
-
     this.editor.setOptions({
       enableBasicAutocompletion: true,
       enableLiveAutocompletion: true

src/app/tabs/settings-tab.js

 var yo = require('yo-yo')
-var remixLib = require('remix-lib')
-
 var tooltip = require('../ui/tooltip')
 var copyToClipboard = require('../ui/copy-to-clipboard')
 var styleGuide = require('../ui/styles-guide/theme-chooser')
-var Storage = remixLib.Storage
 var EventManager = require('../../lib/events')
 var css = require('./styles/settings-tab-styles')
 import { ApiFactory } from 'remix-plugin'
@@ -19,7 +16,6 @@ module.exports = class SettingsTab extends ApiFactory {
     this._view = { /* eslint-disable */
       el: null,
       optionVM: null, personal: null, warnPersonalMode: null, generateContractMetadata: null,
-      theme: { dark: null, light: null, clean: null },
       config: {
         general: null, themes: null
       }
@@ -29,10 +25,8 @@ module.exports = class SettingsTab extends ApiFactory {
   }
 
   initTheme () {
-    const themeStorage = new Storage('style:')
-    this.currentTheme = themeStorage.get('theme') || 'light'
+    this.currentTheme = styleGuide.currentTheme()
   }
-
   get profile () {
     return {
       displayName: 'settings',
@@ -45,6 +39,24 @@ module.exports = class SettingsTab extends ApiFactory {
       location: 'swapPanel'
     }
   }
+  createThemeCheckies () {
+    let themes = styleGuide.getThemes()
+    function onswitchTheme (event, name) {
+      styleGuide.switchTheme(name)
+    }
+    if (themes) {
+      return yo`<div class="card-text themes-container">
+        ${themes.map((aTheme) => {
+          let el = yo`<div class="${css.frow} form-check ${css.crow}">
+          <input type="radio" onchange=${event => { onswitchTheme(event, aTheme.name) }} class="align-middle form-check-input" name="theme" id="${aTheme.name}"   >
+          <label class="form-check-label" for="${aTheme.name}">${aTheme.name} (${aTheme.quality})</label>
+        </div>`
+          if (this.currentTheme === aTheme.name) el.querySelector('input').setAttribute('checked', 'checked')
+          return el
+        })}
+      </div>`
+    }
+  }
 
   render () {
     const self = this
@@ -57,7 +69,6 @@ module.exports = class SettingsTab extends ApiFactory {
     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">`
     var gistRemoveToken = yo`<input class="btn btn-sm btn-primary" id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; this.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
     this._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => this.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>`
-    //
     this._view.optionVM = yo`<input onchange=${onchangeOption} class="align-middle form-check-input" id="alwaysUseVM" type="checkbox">`
     if (this.config.get('settings/always-use-vm')) this._view.optionVM.setAttribute('checked', '')
     this._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox" class="align-middle form-check-input">`
@@ -74,12 +85,10 @@ module.exports = class SettingsTab extends ApiFactory {
 
     this._view.pluginInput = yo`<textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>`
 
-    this._view.theme.light = yo`<input onchange=${onswitch2lightTheme} class="align-middle form-check-input" name="theme" id="themeLight" type="radio">`
-    this._view.theme.dark = yo`<input onchange=${onswitch2darkTheme} class="align-middle form-check-input" name="theme" id="themeDark" type="radio">`
-    this._view.theme.clean = yo`<input onchange=${onswitch2cleanTheme} class="align-middle form-check-input" name="theme" id="themeClean" type="radio">`
-    this._view.theme[this.currentTheme].setAttribute('checked', 'checked')
-
+    this._view.themes = styleGuide.getThemes()
+    this._view.themesCheckBoxes = this.createThemeCheckies()
     this._view.config.homePage = yo`
+
     <div class="${css.info} card">
       <div class="card-body">
       <h6 class="${css.title} card-title">Home</h6>
@@ -126,20 +135,7 @@ module.exports = class SettingsTab extends ApiFactory {
       <div class="${css.info} card">
         <div class="card-body">
           <h6 class="${css.title} card-title">Themes</h6>
-          <div class="card-text">
-            <div class="${css.frow} form-check ${css.crow}">
-              ${this._view.theme.light}
-              <label class="form-check-label" for="themeLight">Light Theme</label>
-            </div>
-            <div class="${css.frow} form-check ${css.crow}">
-              ${this._view.theme.dark}
-              <label class="form-check-label" for="themeDark">Dark Theme</label>
-            </div>
-            <div class="${css.frow} form-check ${css.crow}">
-              ${this._view.theme.clean}
-              <label class="form-check-label" for="themeClean">Clean Theme</label>
-            </div>
-          </div>
+            ${this._view.themesCheckBoxes}
         </div>
       </div>`
     this._view.el = yo`
@@ -156,18 +152,10 @@ module.exports = class SettingsTab extends ApiFactory {
     function onchangeOption (event) {
       self.config.set('settings/always-use-vm', !self.config.get('settings/always-use-vm'))
     }
-    function onswitch2darkTheme (event) {
-      styleGuide.switchTheme('dark')
-    }
-    function onswitch2lightTheme (event) {
-      styleGuide.switchTheme('light')
-    }
-    function onswitch2cleanTheme (event) {
-      styleGuide.switchTheme('clean')
-    }
     function onchangePersonal (event) {
       self.config.set('settings/personal-mode', !self.config.get('settings/personal-mode'))
     }
+
     styleGuide.switchTheme()
     return this._view.el
   }

src/app/ui/styles-guide/theme-chooser.js

 var Storage = require('remix-lib').Storage
 var EventEmitter = require('events')
 
-// Boostrap themes
 // TODO : Put it somewhere else
-const themes = {
-  dark: 'https://bootstrap.themes.guide/darkster/theme.min.css',
-  light: 'https://bootstrap.themes.guide/herbie/theme.min.css',
-  clean: 'https://bootstrap.themes.guide/fresca/theme.min.css'
-}
-// Used for the scroll color
-const themeVariable = {
-  dark: 'dark',
-  light: 'light',
-  clean: 'light'
-}
+const themes = [
+  {name: 'cerulean', quality: 'light', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css'},
+  {name: 'materia', quality: 'light', url: 'https://bootswatch.com/4/materia/bootstrap.min.css'},
+  {name: 'litera', quality: 'light', url: 'https://bootswatch.com/4/litera/bootstrap.min.css'},
+  {name: 'cosmo', quality: 'light', url: 'https://bootswatch.com/4/cosmo/bootstrap.min.css'},
+  {name: 'flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},
+  {name: 'lux', quality: 'light', url: 'https://bootswatch.com/4/lux/bootstrap.min.css'},
+  {name: 'spacelab', quality: 'light', url: 'https://bootswatch.com/4/spacelab/bootstrap.min.css'},
+  {name: 'yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'},
+  {name: 'darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'},
+  {name: 'slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'}
+]
+
+const defaultTheme = themes[0].name
+
 module.exports = {
   event: new EventEmitter(),
-  chooser: function () {
+  currentTheme: function () {
     const themeStorage = new Storage('style:')
     if (themeStorage.exists('theme')) {
-      if (themeStorage.get('theme') === 'dark') {
-        document.getElementById('theme-link').setAttribute('href', themes['dark'])
-        document.documentElement.style.setProperty('--theme', 'dark')
-      } else if (themeStorage.get('theme') === 'clean') {
-        document.getElementById('theme-link').setAttribute('href', themes['clean'])
-        document.documentElement.style.setProperty('--theme', 'light')
-      } else {
-        document.getElementById('theme-link').setAttribute('href', themes['light'])
-        document.documentElement.style.setProperty('--theme', 'light')
-      }
+      const currThemeObj = this.isThere(themeStorage.get('theme'))
+      return currThemeObj ? currThemeObj.name : defaultTheme
     } else {
-      document.getElementById('theme-link').setAttribute('href', themes['light'])
-      document.documentElement.style.setProperty('--theme', 'light')
+      return defaultTheme
     }
   },
-
+  isThere: function (themeName) {
+    // returns an object
+    return themes.find(obj => {
+      return obj.name === themeName
+    })
+  },
+  getThemes: function () {
+    return themes
+  },
   switchTheme: function (theme) {
-    var themeStorage = new Storage('style:')
-    if (theme) themeStorage.set('theme', theme)
-    else {
-      theme = themeStorage.get('theme')
+    let themeStorage = new Storage('style:')
+    if (theme) {
+      themeStorage.set('theme', theme)
+    }
+    let theTheme
+    if (theme) {
+      theTheme = theme
+    } else {
+      theTheme = this.currentTheme()
     }
-    if (!theme) theme = 'light'
-    if (themes[theme]) {
-      document.getElementById('theme-link').setAttribute('href', themes[theme])
-      document.documentElement.style.setProperty('--theme', themeVariable[theme])
-      this.event.emit('switchTheme', themeVariable[theme])
+    let themeObj = this.isThere(theTheme)
+    if (themeObj) {
+      document.getElementById('theme-link').setAttribute('href', themeObj.url)
+      document.documentElement.style.setProperty('--theme', themeObj.quality)
+      this.event.emit('switchTheme', themeObj.quality)
     }
   }
 }