move compile tab styles to its own file refactor: simplify some methods; transform functions into blocks move events to its own method move compiler and compiler import out of _dependencies simplify passing registry to compile tab move queryParams & remove _dependencies var refactor optimize param move to compile tab logic extract code for compiler container into a separate module remove unused method move compiler imports logic out of the UIpull/1/head
Iuri Matias
6 years ago
parent
454778e474
commit
fc29644f50
@ -0,0 +1,98 @@ |
|||||||
|
const async = require('async') |
||||||
|
var remixTests = require('remix-tests') |
||||||
|
var Compiler = require('remix-solidity').Compiler |
||||||
|
var CompilerImport = require('../../compiler/compiler-imports') |
||||||
|
|
||||||
|
// TODO: move this to the UI
|
||||||
|
const addTooltip = require('../../ui/tooltip') |
||||||
|
|
||||||
|
class CompileTab { |
||||||
|
|
||||||
|
constructor (queryParams, fileManager, editor, config, fileProviders) { |
||||||
|
this.queryParams = queryParams |
||||||
|
this.compilerImport = new CompilerImport() |
||||||
|
this.compiler = new Compiler((url, cb) => this.importFileCb(url, cb)) |
||||||
|
this.fileManager = fileManager |
||||||
|
this.editor = editor |
||||||
|
this.config = config |
||||||
|
this.fileProviders = fileProviders |
||||||
|
} |
||||||
|
|
||||||
|
init () { |
||||||
|
this.optimize = this.queryParams.get().optimize |
||||||
|
this.optimize = this.optimize === 'true' |
||||||
|
this.queryParams.update({ optimize: this.optimize }) |
||||||
|
this.compiler.setOptimize(this.optimize) |
||||||
|
} |
||||||
|
|
||||||
|
setOptimize (newOptimizeValue) { |
||||||
|
this.optimize = newOptimizeValue |
||||||
|
this.queryParams.update({ optimize: this.optimize }) |
||||||
|
this.compiler.setOptimize(this.optimize) |
||||||
|
} |
||||||
|
|
||||||
|
runCompiler () { |
||||||
|
this.fileManager.saveCurrentFile() |
||||||
|
this.editor.clearAnnotations() |
||||||
|
var currentFile = this.config.get('currentFile') |
||||||
|
if (!currentFile && !/.(.sol)$/.exec(currentFile)) return |
||||||
|
// only compile *.sol file.
|
||||||
|
var target = currentFile |
||||||
|
var sources = {} |
||||||
|
var provider = this.fileManager.fileProviderOf(currentFile) |
||||||
|
if (!provider) return console.log('cannot compile ' + currentFile + '. Does not belong to any explorer') |
||||||
|
provider.get(target, (error, content) => { |
||||||
|
if (error) return console.log(error) |
||||||
|
sources[target] = { content } |
||||||
|
this.compiler.compile(sources, target) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
importExternal (url, cb) { |
||||||
|
this.compilerImport.import(url, |
||||||
|
|
||||||
|
// TODO: move to an event that is generated, the UI shouldn't be here
|
||||||
|
(loadingMsg) => { addTooltip(loadingMsg) }, |
||||||
|
(error, content, cleanUrl, type, url) => { |
||||||
|
if (error) return cb(error) |
||||||
|
|
||||||
|
if (this._deps.fileProviders[type]) { |
||||||
|
this._deps.fileProviders[type].addReadOnly(cleanUrl, content, url) |
||||||
|
} |
||||||
|
cb(null, content) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
importFileCb (url, filecb) { |
||||||
|
if (url.indexOf('/remix_tests.sol') !== -1) return filecb(null, remixTests.assertLibCode) |
||||||
|
|
||||||
|
var provider = this._deps.fileManager.fileProviderOf(url) |
||||||
|
if (provider) { |
||||||
|
if (provider.type === 'localhost' && !provider.isConnected()) { |
||||||
|
return filecb(`file provider ${provider.type} not available while trying to resolve ${url}`) |
||||||
|
} |
||||||
|
return provider.exists(url, (error, exist) => { |
||||||
|
if (error) return filecb(error) |
||||||
|
if (exist) { |
||||||
|
return provider.get(url, filecb) |
||||||
|
} |
||||||
|
this.importExternal(url, filecb) |
||||||
|
}) |
||||||
|
} |
||||||
|
if (this.compilerImport.isRelativeImport(url)) { |
||||||
|
// try to resolve localhost modules (aka truffle imports)
|
||||||
|
var splitted = /([^/]+)\/(.*)$/g.exec(url) |
||||||
|
return async.tryEach([ |
||||||
|
(cb) => { this.importFileCb('localhost/installed_contracts/' + url, cb) }, |
||||||
|
(cb) => { if (!splitted) { cb('URL not parseable: ' + url) } else { this.importFileCb('localhost/installed_contracts/' + splitted[1] + '/contracts/' + splitted[2], cb) } }, |
||||||
|
(cb) => { this.importFileCb('localhost/node_modules/' + url, cb) }, |
||||||
|
(cb) => { if (!splitted) { cb('URL not parseable: ' + url) } else { this.importFileCb('localhost/node_modules/' + splitted[1] + '/contracts/' + splitted[2], cb) } }], |
||||||
|
(error, result) => { filecb(error, result) } |
||||||
|
) |
||||||
|
} |
||||||
|
this.importExternal(url, filecb) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
module.exports = CompileTab |
||||||
@ -0,0 +1,227 @@ |
|||||||
|
/* global Worker */ |
||||||
|
const yo = require('yo-yo') |
||||||
|
var minixhr = require('minixhr') |
||||||
|
var helper = require('../../../lib/helper') |
||||||
|
const addTooltip = require('../../ui/tooltip') |
||||||
|
|
||||||
|
const styleGuide = require('../../ui/styles-guide/theme-chooser') |
||||||
|
const styles = styleGuide.chooser() |
||||||
|
var css = require('../styles/compile-tab-styles') |
||||||
|
|
||||||
|
class CompilerContainer { |
||||||
|
|
||||||
|
constructor (compileTabLogic, editor, config, queryParams) { |
||||||
|
this._view = {} |
||||||
|
this.compileTabLogic = compileTabLogic |
||||||
|
this.editor = editor |
||||||
|
this.config = config |
||||||
|
this.queryParams = queryParams |
||||||
|
|
||||||
|
this.data = { |
||||||
|
hideWarnings: config.get('hideWarnings') || false, |
||||||
|
autoCompile: config.get('autoCompile'), |
||||||
|
compileTimeout: null, |
||||||
|
timeout: 300, |
||||||
|
allversions: null, |
||||||
|
selectedVersion: null, |
||||||
|
defaultVersion: 'soljson-v0.5.1+commit.c8a2cb62.js', // this default version is defined: in makeMockCompiler (for browser test) and in package.json (downloadsolc_root) for the builtin compiler
|
||||||
|
baseurl: 'https://solc-bin.ethereum.org/bin' |
||||||
|
} |
||||||
|
|
||||||
|
this.listenToEvents() |
||||||
|
} |
||||||
|
|
||||||
|
listenToEvents () { |
||||||
|
this.editor.event.register('contentChanged', this.scheduleCompilation.bind(this)) |
||||||
|
this.editor.event.register('sessionSwitched', this.scheduleCompilation.bind(this)) |
||||||
|
|
||||||
|
this.compileTabLogic.compiler.event.register('compilationDuration', (speed) => { |
||||||
|
if (!this._view.warnCompilationSlow) return |
||||||
|
if (speed > 1000) { |
||||||
|
const msg = `Last compilation took ${speed}ms. We suggest to turn off autocompilation.` |
||||||
|
this._view.warnCompilationSlow.setAttribute('title', msg) |
||||||
|
this._view.warnCompilationSlow.style.visibility = 'visible' |
||||||
|
} else { |
||||||
|
this._view.warnCompilationSlow.style.visibility = 'hidden' |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
this.editor.event.register('contentChanged', () => { |
||||||
|
if (!this._view.compileIcon) return |
||||||
|
this._view.compileIcon.classList.add(`${css.bouncingIcon}`) // @TODO: compileView tab
|
||||||
|
}) |
||||||
|
|
||||||
|
this.compileTabLogic.compiler.event.register('loadingCompiler', () => { |
||||||
|
if (!this._view.compileIcon) return |
||||||
|
this._view.compileIcon.classList.add(`${css.spinningIcon}`) |
||||||
|
this._view.warnCompilationSlow.style.visibility = 'hidden' |
||||||
|
this._view.compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.') |
||||||
|
}) |
||||||
|
|
||||||
|
this.compileTabLogic.compiler.event.register('compilationStarted', () => { |
||||||
|
if (!this._view.compileIcon) return |
||||||
|
this._view.compileIcon.classList.remove(`${css.bouncingIcon}`) |
||||||
|
this._view.compileIcon.classList.add(`${css.spinningIcon}`) |
||||||
|
this._view.compileIcon.setAttribute('title', 'compiling...') |
||||||
|
}) |
||||||
|
|
||||||
|
this.compileTabLogic.compiler.event.register('compilerLoaded', () => { |
||||||
|
if (!this._view.compileIcon) return |
||||||
|
this._view.compileIcon.classList.remove(`${css.spinningIcon}`) |
||||||
|
this._view.compileIcon.setAttribute('title', '') |
||||||
|
}) |
||||||
|
|
||||||
|
this.compileTabLogic.compiler.event.register('compilationFinished', (success, data, source) => { |
||||||
|
if (!this._view.compileIcon) return |
||||||
|
this._view.compileIcon.style.color = styles.colors.black |
||||||
|
this._view.compileIcon.classList.remove(`${css.spinningIcon}`) |
||||||
|
this._view.compileIcon.classList.remove(`${css.bouncingIcon}`) |
||||||
|
this._view.compileIcon.setAttribute('title', 'idle') |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
this.compileTabLogic.compiler.event.register('compilerLoaded', (version) => this.setVersionText(version)) |
||||||
|
this.fetchAllVersion((allversions, selectedVersion) => { |
||||||
|
this.data.allversions = allversions |
||||||
|
this.data.selectedVersion = selectedVersion |
||||||
|
if (this._view.versionSelector) this._updateVersionSelector() |
||||||
|
}) |
||||||
|
|
||||||
|
this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>` |
||||||
|
this._view.compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>` |
||||||
|
this._view.compileButton = yo`<div class="${css.compileButton}" onclick=${this.compile.bind(this)} id="compile" title="Compile source code">${this._view.compileIcon} Start to compile (Ctrl-S)</div>` |
||||||
|
this._view.autoCompile = yo`<input class="${css.autocompile}" onchange=${this.updateAutoCompile.bind(this)} id="autoCompile" type="checkbox" title="Auto compile">` |
||||||
|
this._view.hideWarningsBox = yo`<input class="${css.autocompile}" onchange=${this.hideWarnings.bind(this)} id="hideWarningsBox" type="checkbox" title="Hide warnings">` |
||||||
|
if (this.data.autoCompile) this._view.autoCompile.setAttribute('checked', '') |
||||||
|
if (this.data.hideWarnings) this._view.hideWarningsBox.setAttribute('checked', '') |
||||||
|
|
||||||
|
this._view.optimize = yo`<input onchange=${this.onchangeOptimize.bind(this)} id="optimize" type="checkbox">` |
||||||
|
if (this.compileTabLogic.optimize) this._view.optimize.setAttribute('checked', '') |
||||||
|
|
||||||
|
this._view.versionSelector = yo` |
||||||
|
<select onchange=${this.onchangeLoadVersion.bind(this)} class="${css.select}" id="versionSelector" disabled> |
||||||
|
<option disabled selected>Select new compiler version</option> |
||||||
|
</select>` |
||||||
|
this._view.version = yo`<span id="version"></span>` |
||||||
|
|
||||||
|
this._view.compileContainer = yo` |
||||||
|
<div class="${css.compileContainer}"> |
||||||
|
<div class="${css.info}"> |
||||||
|
<span>Current version:</span> ${this._view.version} |
||||||
|
<div class="${css.crow}"> |
||||||
|
${this._view.versionSelector} |
||||||
|
</div> |
||||||
|
<div class="${css.compileButtons}"> |
||||||
|
<div class=${css.checkboxes}> |
||||||
|
<div class="${css.autocompileContainer}"> |
||||||
|
${this._view.autoCompile} |
||||||
|
<label for="autoCompile" class="${css.autocompileText}">Auto compile</label> |
||||||
|
</div> |
||||||
|
<div class="${css.optimizeContainer}"> |
||||||
|
<div>${this._view.optimize}</div> |
||||||
|
<label for="optimize" class="${css.checkboxText}">Enable Optimization</label> |
||||||
|
</div> |
||||||
|
<div class=${css.hideWarningsContainer}> |
||||||
|
${this._view.hideWarningsBox} |
||||||
|
<label for="hideWarningsBox" class="${css.autocompileText}">Hide warnings</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
${this._view.compileButton} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div>` |
||||||
|
|
||||||
|
return this._view.compileContainer |
||||||
|
} |
||||||
|
|
||||||
|
updateAutoCompile (event) { |
||||||
|
this.config.set('autoCompile', this._view.autoCompile.checked) |
||||||
|
} |
||||||
|
|
||||||
|
compile (event) { |
||||||
|
this.compileTabLogic.runCompiler() |
||||||
|
} |
||||||
|
|
||||||
|
hideWarnings (event) { |
||||||
|
this.config.set('hideWarnings', this._view.hideWarningsBox.checked) |
||||||
|
this.compile() |
||||||
|
} |
||||||
|
|
||||||
|
onchangeOptimize () { |
||||||
|
this.compileTabLogic.setOptimize(!!this._view.optimize.checked) |
||||||
|
this.compileTabLogic.runCompiler() |
||||||
|
} |
||||||
|
|
||||||
|
onchangeLoadVersion (event) { |
||||||
|
this.data.selectedVersion = this._view.versionSelector.value |
||||||
|
this._updateVersionSelector() |
||||||
|
} |
||||||
|
|
||||||
|
_updateVersionSelector () { |
||||||
|
this._view.versionSelector.innerHTML = '' |
||||||
|
this._view.versionSelector.appendChild(yo`<option disabled selected>Select new compiler version</option>`) |
||||||
|
this.data.allversions.forEach(build => this._view.versionSelector.appendChild(yo`<option value=${build.path}>${build.longVersion}</option>`)) |
||||||
|
this._view.versionSelector.removeAttribute('disabled') |
||||||
|
this.queryParams.update({ version: this.data.selectedVersion }) |
||||||
|
var url |
||||||
|
if (this.data.selectedVersion === 'builtin') { |
||||||
|
var location = window.document.location |
||||||
|
location = location.protocol + '//' + location.host + '/' + location.pathname |
||||||
|
if (location.endsWith('index.html')) location = location.substring(0, location.length - 10) |
||||||
|
if (!location.endsWith('/')) location += '/' |
||||||
|
url = location + 'soljson.js' |
||||||
|
} else { |
||||||
|
if (this.data.selectedVersion.indexOf('soljson') !== 0 || helper.checkSpecialChars(this.data.selectedVersion)) { |
||||||
|
return console.log('loading ' + this.data.selectedVersion + ' not allowed') |
||||||
|
} |
||||||
|
url = `${this.data.baseurl}/${this.data.selectedVersion}` |
||||||
|
} |
||||||
|
var isFirefox = typeof InstallTrigger !== 'undefined' |
||||||
|
if (document.location.protocol !== 'file:' && Worker !== undefined && isFirefox) { |
||||||
|
// Workers cannot load js on "file:"-URLs and we get a
|
||||||
|
// "Uncaught RangeError: Maximum call stack size exceeded" error on Chromium,
|
||||||
|
// resort to non-worker version in that case.
|
||||||
|
this.compileTabLogic.compiler.loadVersion(true, url) |
||||||
|
this.setVersionText('(loading using worker)') |
||||||
|
} else { |
||||||
|
this.compileTabLogic.compiler.loadVersion(false, url) |
||||||
|
this.setVersionText('(loading)') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setVersionText (text) { |
||||||
|
this.data.version = text |
||||||
|
if (this._view.version) this._view.version.innerText = text |
||||||
|
} |
||||||
|
|
||||||
|
fetchAllVersion (callback) { |
||||||
|
minixhr(`${this.data.baseurl}/list.json`, (json, event) => { |
||||||
|
// @TODO: optimise and cache results to improve app loading times
|
||||||
|
var allversions, selectedVersion |
||||||
|
if (event.type !== 'error') { |
||||||
|
try { |
||||||
|
const data = JSON.parse(json) |
||||||
|
allversions = data.builds.slice().reverse() |
||||||
|
selectedVersion = this.data.defaultVersion |
||||||
|
if (this.queryParams.get().version) selectedVersion = this.queryParams.get().version |
||||||
|
} catch (e) { |
||||||
|
addTooltip('Cannot load compiler version list. It might have been blocked by an advertisement blocker. Please try deactivating any of them from this page and reload.') |
||||||
|
} |
||||||
|
} else { |
||||||
|
allversions = [{ path: 'builtin', longVersion: 'latest local version' }] |
||||||
|
selectedVersion = 'builtin' |
||||||
|
} |
||||||
|
callback(allversions, selectedVersion) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
scheduleCompilation () { |
||||||
|
if (!this.config.get('autoCompile')) return |
||||||
|
if (this.data.compileTimeout) window.clearTimeout(this.data.compileTimeout) |
||||||
|
this.data.compileTimeout = window.setTimeout(() => this.compileTabLogic.runCompiler(), this.data.timeout) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
module.exports = CompilerContainer |
||||||
@ -0,0 +1,213 @@ |
|||||||
|
const csjs = require('csjs-inject') |
||||||
|
const styleGuide = require('../../ui/styles-guide/theme-chooser') |
||||||
|
const styles = styleGuide.chooser() |
||||||
|
|
||||||
|
const css = csjs` |
||||||
|
.title { |
||||||
|
font-size: 1.1em; |
||||||
|
font-weight: bold; |
||||||
|
margin-bottom: 1em; |
||||||
|
} |
||||||
|
.panicError { |
||||||
|
color: red; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.crow { |
||||||
|
display: flex; |
||||||
|
overflow: auto; |
||||||
|
clear: both; |
||||||
|
padding: .2em; |
||||||
|
} |
||||||
|
.checkboxText { |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
.crow label { |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
.crowNoFlex { |
||||||
|
overflow: auto; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
.select { |
||||||
|
font-weight: bold; |
||||||
|
margin: 10px 0px; |
||||||
|
${styles.rightPanel.settingsTab.dropdown_SelectCompiler}; |
||||||
|
} |
||||||
|
.info { |
||||||
|
${styles.rightPanel.settingsTab.box_SolidityVersionInfo} |
||||||
|
margin-bottom: 1em; |
||||||
|
word-break: break-word; |
||||||
|
} |
||||||
|
.compileTabView { |
||||||
|
padding: 2%; |
||||||
|
} |
||||||
|
.contract { |
||||||
|
display: block; |
||||||
|
margin: 3% 0; |
||||||
|
} |
||||||
|
.compileContainer { |
||||||
|
${styles.rightPanel.compileTab.box_CompileContainer}; |
||||||
|
margin-bottom: 2%; |
||||||
|
} |
||||||
|
.autocompileContainer { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.hideWarningsContainer { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.autocompile {} |
||||||
|
.autocompileTitle { |
||||||
|
font-weight: bold; |
||||||
|
margin: 1% 0; |
||||||
|
} |
||||||
|
.autocompileText { |
||||||
|
margin: 1% 0; |
||||||
|
font-size: 12px; |
||||||
|
overflow: hidden; |
||||||
|
word-break: normal; |
||||||
|
line-height: initial; |
||||||
|
} |
||||||
|
.warnCompilationSlow { |
||||||
|
color: ${styles.rightPanel.compileTab.icon_WarnCompilation_Color}; |
||||||
|
margin-left: 1%; |
||||||
|
} |
||||||
|
.compileButtons { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
.name { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.size { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.checkboxes { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.compileButton { |
||||||
|
${styles.rightPanel.compileTab.button_Compile}; |
||||||
|
width: 100%; |
||||||
|
margin: 15px 0 10px 0; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.container { |
||||||
|
${styles.rightPanel.compileTab.box_CompileContainer}; |
||||||
|
margin: 0; |
||||||
|
margin-bottom: 2%; |
||||||
|
} |
||||||
|
.contractContainer { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 2%; |
||||||
|
} |
||||||
|
.optimizeContainer { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.contractNames { |
||||||
|
${styles.rightPanel.compileTab.dropdown_CompileContract}; |
||||||
|
width:78%; |
||||||
|
} |
||||||
|
.contractHelperButtons { |
||||||
|
display: flex; |
||||||
|
cursor: pointer; |
||||||
|
text-align: center; |
||||||
|
justify-content: flex-end; |
||||||
|
margin: 15px 15px 10px 0; |
||||||
|
} |
||||||
|
.copyButton { |
||||||
|
${styles.rightPanel.compileTab.button_Publish}; |
||||||
|
padding: 0 7px; |
||||||
|
min-width: 50px; |
||||||
|
width: auto; |
||||||
|
margin-left: 5px; |
||||||
|
background-color: inherit; |
||||||
|
border: inherit; |
||||||
|
} |
||||||
|
.bytecodeButton { |
||||||
|
min-width: 80px; |
||||||
|
} |
||||||
|
.copyIcon { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.details { |
||||||
|
${styles.rightPanel.compileTab.button_Details}; |
||||||
|
min-width: 70px; |
||||||
|
width: 80px; |
||||||
|
} |
||||||
|
.publish { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-left: 10px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.log { |
||||||
|
${styles.rightPanel.compileTab.box_CompileContainer}; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
margin-bottom: 5%; |
||||||
|
overflow: visible; |
||||||
|
} |
||||||
|
.key { |
||||||
|
margin-right: 5px; |
||||||
|
color: ${styles.rightPanel.text_Primary}; |
||||||
|
text-transform: uppercase; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.value { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
margin-top: 1.5%; |
||||||
|
} |
||||||
|
.questionMark { |
||||||
|
margin-left: 2%; |
||||||
|
cursor: pointer; |
||||||
|
color: ${styles.rightPanel.icon_Color_TogglePanel}; |
||||||
|
} |
||||||
|
.questionMark:hover { |
||||||
|
color: ${styles.rightPanel.icon_HoverColor_TogglePanel}; |
||||||
|
} |
||||||
|
.detailsJSON { |
||||||
|
padding: 8px 0; |
||||||
|
background-color: ${styles.rightPanel.modalDialog_BackgroundColor_Primary}; |
||||||
|
border: none; |
||||||
|
color: ${styles.rightPanel.modalDialog_text_Secondary}; |
||||||
|
} |
||||||
|
.icon { |
||||||
|
margin-right: 0.3em; |
||||||
|
} |
||||||
|
.spinningIcon { |
||||||
|
margin-right: .3em; |
||||||
|
animation: spin 2s linear infinite; |
||||||
|
} |
||||||
|
.bouncingIcon { |
||||||
|
margin-right: .3em; |
||||||
|
animation: bounce 2s infinite; |
||||||
|
} |
||||||
|
@keyframes spin { |
||||||
|
0% { transform: rotate(0deg); } |
||||||
|
100% { transform: rotate(360deg); } |
||||||
|
} |
||||||
|
@-webkit-keyframes bounce { |
||||||
|
0% { |
||||||
|
margin-bottom: 0; |
||||||
|
color: ${styles.colors.transparent}; |
||||||
|
} |
||||||
|
70% { |
||||||
|
margin-bottom: 0; |
||||||
|
color: ${styles.rightPanel.text_Secondary}; |
||||||
|
} |
||||||
|
100% { |
||||||
|
margin-bottom: 0; |
||||||
|
color: ${styles.colors.transparent}; |
||||||
|
} |
||||||
|
} |
||||||
|
` |
||||||
|
|
||||||
|
module.exports = css |
||||||
Loading…
Reference in new issue