diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js index 901f6b91e9..51b3be8040 100644 --- a/src/app/tabs/compile-tab.js +++ b/src/app/tabs/compile-tab.js @@ -1,16 +1,16 @@ /* global */ var $ = require('jquery') var yo = require('yo-yo') +var csjs = require('csjs-inject') -var parseContracts = require('../contract/contractParser') -var publishOnSwarm = require('../contract/publishOnSwarm') -var modalDialog = require('../ui/modaldialog') -var modalDialogCustom = require('../ui/modal-dialog-custom') var TreeView = require('../ui/TreeView') +var modalDialog = require('../ui/modaldialog') var copyToClipboard = require('../ui/copy-to-clipboard') - -var css = require('./styles/compile-tab-styles') +var modalDialogCustom = require('../ui/modal-dialog-custom') var styleGuide = require('../ui/styles-guide/theme-chooser') +var parseContracts = require('../contract/contractParser') +var publishOnSwarm = require('../contract/publishOnSwarm') + var styles = styleGuide.chooser() function compileTab (appAPI = {}, appEvents = {}, opts = {}) { @@ -317,3 +317,141 @@ function detailsHelpSection () { } module.exports = compileTab + +const css = csjs` + .compileTabView { + padding: 2%; + } + .contract { + display: block; + margin: 3% 0; + } + .compileContainer { + ${styles.rightPanel.compileTab.box_CompileContainer}; + margin-bottom: 2%; + } + .autocompileContainer { + width: 90px; + 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; + } + .name { + display: flex; + } + .size { + display: flex; + } + .compileButton { + ${styles.rightPanel.compileTab.button_Compile}; + width: 120px; + min-width: 110px; + margin-right: 1%; + font-size: 12px; + } + .container { + ${styles.rightPanel.compileTab.box_CompileContainer}; + margin: 0; + display: flex; + align-items: center; + } + .contractNames { + ${styles.rightPanel.compileTab.dropdown_CompileContract}; + margin-right: 5%; + } + .contractButtons { + display: flex; + cursor: pointer; + justify-content: center; + text-align: center; + } + .details { + ${styles.rightPanel.compileTab.button_Details}; + } + .publish { + ${styles.rightPanel.compileTab.button_Publish}; + margin-left: 2%; + width: 120px; + } + .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: 3%; + } + .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}; + } +} +` diff --git a/src/app/tabs/styles/compile-tab-styles.js b/src/app/tabs/styles/compile-tab-styles.js deleted file mode 100644 index e0fdc7f01b..0000000000 --- a/src/app/tabs/styles/compile-tab-styles.js +++ /dev/null @@ -1,143 +0,0 @@ -var csjs = require('csjs-inject') -var styleGuide = require('../../ui/styles-guide/theme-chooser') -var styles = styleGuide.chooser() - -var css = csjs` - .compileTabView { - padding: 2%; - } - .contract { - display: block; - margin: 3% 0; - } - .compileContainer { - ${styles.rightPanel.compileTab.box_CompileContainer}; - margin-bottom: 2%; - } - .autocompileContainer { - width: 90px; - 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; - } - .name { - display: flex; - } - .size { - display: flex; - } - .compileButton { - ${styles.rightPanel.compileTab.button_Compile}; - width: 120px; - min-width: 110px; - margin-right: 1%; - font-size: 12px; - } - .container { - ${styles.rightPanel.compileTab.box_CompileContainer}; - margin: 0; - display: flex; - align-items: center; - } - .contractNames { - ${styles.rightPanel.compileTab.dropdown_CompileContract}; - margin-right: 5%; - } - .contractButtons { - display: flex; - cursor: pointer; - justify-content: center; - text-align: center; - } - .details { - ${styles.rightPanel.compileTab.button_Details}; - } - .publish { - ${styles.rightPanel.compileTab.button_Publish}; - margin-left: 2%; - width: 120px; - } - .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: 3%; - } - .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