Unverified Commit 7bb6393b authored by yann300's avatar yann300 Committed by GitHub

Merge pull request #1809 from ethereum/issue#1754-theme_module

Issue#1754 theme module
parents 2f4abcb4 66976146
......@@ -56,6 +56,7 @@ import { LandingPage } from './app/ui/landing-page/landing-page'
import framingService from './framingService'
import { ApiFactory } from 'remix-plugin'
import { TxListenerModule } from './app/tabs/txlistener-module'
import { ThemeModule } from './app/tabs/theme-module'
var css = csjs`
html { box-sizing: border-box; }
......@@ -387,6 +388,10 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
var fileManager = self._components.fileManager
registry.put({api: fileManager, name: 'filemanager'})
// ----------------- theme module ----------------------------
const themeModule = new ThemeModule()
registry.put({api: themeModule, name: 'themeModule'})
// ----------------- editor panel ----------------------
self._components.editorpanel = new EditorPanel(appStore, appManager, mainPanelComponent)
registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
......@@ -412,8 +417,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconsComponent) // eslint-disable-line
const mainPanelApi = new SwapPanelApi(mainPanelComponent, verticalIconsComponent) // eslint-disable-line
const verticalIconsApi = new VerticalIconsApi(verticalIconsComponent) // eslint-disable-line
registry.put({api: verticalIconsApi, name: 'verticalicon'})
registry.put({api: appManager.proxy(), name: 'pluginmanager'})
registry.put({api: verticalIconsApi, name: 'verticalicon'})
pluginManagerComponent.setApp(appManager)
pluginManagerComponent.setStore(appStore)
......@@ -472,7 +478,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
filePanel.api(),
// { profile: support.profile(), api: support },
settings.api(),
pluginManagerComponent.api()
pluginManagerComponent.api(),
themeModule.api()
])
appManager.registerMany([
......
......@@ -15,7 +15,6 @@ require('ace-mode-solidity/build/remix-ide/mode-solidity')
require('brace/mode/javascript')
require('brace/mode/python')
require('brace/mode/json')
const themeChooser = require('../ui/styles-guide/theme-chooser')
require('brace/theme/chaos')
require('brace/theme/chrome')
......@@ -63,6 +62,7 @@ class Editor {
this._components = {}
this._components.registry = localRegistry || globalRegistry
this._deps = {
themeModule: this._components.registry.get('themeModule').api,
fileManager: this._components.registry.get('filemanager').api,
config: this._components.registry.get('config').api
}
......@@ -71,7 +71,7 @@ class Editor {
'light': 'chrome',
'dark': 'chaos'
}
themeChooser.event.on('switchTheme', (type) => {
this._deps.themeModule.events.on('themeChanged', (type) => {
this.setTheme(type)
})
......
var yo = require('yo-yo')
const globalRegistry = require('../../global/registry')
var tooltip = require('../ui/tooltip')
var copyToClipboard = require('../ui/copy-to-clipboard')
var styleGuide = require('../ui/styles-guide/theme-chooser')
var EventManager = require('../../lib/events')
var css = require('./styles/settings-tab-styles')
import { ApiFactory } from 'remix-plugin'
......@@ -13,6 +13,9 @@ module.exports = class SettingsTab extends ApiFactory {
this.editor = editor
this.appManager = appManager
this._components = {}
this._deps = {
themeModule: globalRegistry.get('themeModule').api
}
this._view = { /* eslint-disable */
el: null,
optionVM: null, personal: null, warnPersonalMode: null, generateContractMetadata: null,
......@@ -25,7 +28,7 @@ module.exports = class SettingsTab extends ApiFactory {
}
initTheme () {
this.currentTheme = styleGuide.currentTheme()
this.currentTheme = this._deps.themeModule.currentTheme()
}
get profile () {
return {
......@@ -40,9 +43,9 @@ module.exports = class SettingsTab extends ApiFactory {
}
}
createThemeCheckies () {
let themes = styleGuide.getThemes()
function onswitchTheme (event, name) {
styleGuide.switchTheme(name)
let themes = this._deps.themeModule.getThemes()
const onswitchTheme = (event, name) => {
this._deps.themeModule.switchTheme(name)
}
if (themes) {
return yo`<div class="card-text themes-container">
......@@ -85,7 +88,7 @@ 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.themes = styleGuide.getThemes()
this._view.themes = this._deps.themeModule.getThemes()
this._view.themesCheckBoxes = this.createThemeCheckies()
this._view.config.homePage = yo`
......@@ -156,7 +159,7 @@ module.exports = class SettingsTab extends ApiFactory {
self.config.set('settings/personal-mode', !self.config.get('settings/personal-mode'))
}
styleGuide.switchTheme()
this._deps.themeModule.switchTheme()
return this._view.el
}
}
import { ApiFactory } from 'remix-plugin'
import { EventEmitter } from 'events'
const Storage = require('remix-lib').Storage
const themes = [
{name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'},
{name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},
{name: 'Lumen', quality: 'light', url: 'https://bootswatch.com/4/lumen/bootstrap.min.css'},
{name: 'Minty', quality: 'light', url: 'https://bootswatch.com/4/minty/bootstrap.min.css'},
{name: 'Pulse', quality: 'light', url: 'https://bootswatch.com/4/pulse/bootstrap.min.css'},
{name: 'Sandstone', quality: 'light', url: 'https://bootswatch.com/4/sandstone/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: 'Cyborg', quality: 'dark', url: 'https://bootswatch.com/4/cyborg/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'},
{name: 'Superhero', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/superhero/bootstrap.min.css'}
]
export class ThemeModule extends ApiFactory {
constructor () {
super()
this.events = new EventEmitter()
this.storage = new Storage('style:')
this.themes = themes.reduce((acc, theme) => ({ ...acc, [theme.name]: theme }), {})
this.active = this.storage.exists('theme') ? this.storage.get('theme') : 'Cerulean'
}
get profile () {
return {
name: 'theme',
events: ['themeChanged'],
methods: ['switchTheme', 'getThemes', 'currentTheme']
}
}
/** Return the active theme */
currentTheme () {
return this.themes[this.active]
}
/** Returns all themes as an array */
getThemes () {
return Object.keys(this.themes).map(key => this.themes[key])
}
/**
* Change the current theme
* @param {string} [themeName] - The name of the theme
*/
switchTheme (themeName) {
if (themeName && !Object.keys(this.themes).includes(themeName)) {
throw new Error(`Theme ${themeName} doesn't exist`)
}
const next = themeName || this.active // Name
const nextTheme = this.themes[next] // Theme
this.storage.set('theme', next)
document.getElementById('theme-link').setAttribute('href', nextTheme.url)
document.documentElement.style.setProperty('--theme', nextTheme.quality)
this.events.emit('themeChanged', nextTheme.quality)
}
}
var Storage = require('remix-lib').Storage
var EventEmitter = require('events')
// TODO : Put it somewhere else
const themes = [
{name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'},
{name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},
{name: 'Lumen', quality: 'light', url: 'https://bootswatch.com/4/lumen/bootstrap.min.css'},
{name: 'Minty', quality: 'light', url: 'https://bootswatch.com/4/minty/bootstrap.min.css'},
{name: 'Pulse', quality: 'light', url: 'https://bootswatch.com/4/pulse/bootstrap.min.css'},
{name: 'Sandstone', quality: 'light', url: 'https://bootswatch.com/4/sandstone/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: 'Cyborg', quality: 'dark', url: 'https://bootswatch.com/4/cyborg/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'},
{name: 'Superhero', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/superhero/bootstrap.min.css'}
]
const defaultTheme = 'Cerulean'
module.exports = {
event: new EventEmitter(),
currentTheme: function () {
const themeStorage = new Storage('style:')
if (themeStorage.exists('theme')) {
const currThemeObj = this.isThere(themeStorage.get('theme'))
return currThemeObj ? currThemeObj.name : defaultTheme
} else {
return defaultTheme
}
},
isThere: function (themeName) {
// returns an object
return themes.find(obj => {
return obj.name === themeName
})
},
getThemes: function () {
return themes
},
switchTheme: function (theme) {
let themeStorage = new Storage('style:')
if (theme) {
themeStorage.set('theme', theme)
}
let theTheme
if (theme) {
theTheme = theme
} else {
theTheme = this.currentTheme()
}
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)
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment