diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index f7b2385671..33ba182cdc 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -12,197 +12,8 @@ var Recorder = require('../../recorder') var EventManager = require('remix-lib').EventManager var addTooltip = require('../ui/tooltip') -// -------------- styling ---------------------- var csjs = require('csjs-inject') -var styleGuide = require('remix-lib').ui.themeChooser -var styles = styleGuide.chooser() - -var css = csjs` - .runTabView { - padding: 2%; - display: flex; - flex-direction: column; - } - .settings { - ${styles.rightPanel.runTab.box_RunTab} - margin-bottom: 2%; - padding: 10px 15px 15px 15px; - } - .crow { - margin-top: .5em; - display: flex; - align-items: center; - } - .col1 { - width: 30%; - float: left; - align-self: center; - } - .col1_1 { - font-size: 12px; - width: 25%; - min-width: 75px; - float: left; - align-self: center; - } - .environment { - display: flex; - align-items: center; - position: relative; - } - .col2 { - ${styles.rightPanel.runTab.input_RunTab} - } - .col2_1 { - ${styles.rightPanel.runTab.input_RunTab} - width: 165px; - min-width: 165px; - } - .col2_2 { - ${styles.rightPanel.runTab.dropdown_RunTab} - width: 82px; - min-width: 82px; - } - .select { - ${styles.rightPanel.runTab.dropdown_RunTab} - font-weight: normal; - min-width: 150px; - } - .instanceContainer { - display: flex; - flex-direction: column; - margin-top: 2%; - border: none; - text-align: center; - } - .pendingTxsContainer { - ${styles.rightPanel.runTab.box_Instance} - display: flex; - flex-direction: column; - margin-top: 2%; - border: none; - text-align: center; - } - .container { - ${styles.rightPanel.runTab.box_RunTab} - margin-top: 2%; - } - .contractNames { - ${styles.rightPanel.runTab.dropdown_RunTab} - width: 100%; - border: 1px solid - } - .contractNamesError { - border: 1px solid ${styles.appProperties.errorText_Color} - } - .subcontainer { - display: flex; - flex-direction: row; - align-items: baseline; - } - .button { - display: flex; - align-items: center; - margin-top: 2%; - } - .transaction { - ${styles.rightPanel.runTab.button_transaction} - } - .atAddress { - ${styles.rightPanel.runTab.button_atAddress} - } - .create { - ${styles.rightPanel.runTab.button_Create} - } - .input { - ${styles.rightPanel.runTab.input_RunTab} - } - .noInstancesText { - ${styles.rightPanel.runTab.box_Instance} - font-style: italic; - } - .pendingTxsText { - ${styles.rightPanel.runTab.borderBox_Instance} - font-style: italic; - } - .item { - margin-right: 1em; - display: flex; - align-items: center; - } - .transact { - color: ${styles.colors.lightRed}; - margin-right: .3em; - } - .payable { - color: ${styles.colors.red}; - margin-right: .3em; - } - .call { - color: ${styles.colors.lightBlue}; - margin-right: .3em; - } - .pendingContainer { - display: flex; - align-items: baseline; - } - .pending { - height: 25px; - text-align: center; - padding-left: 10px; - border-radius: 3px; - margin-left: 5px; - } - .icon { - font-size: 12px; - color: ${styles.rightPanel.runTab.icon_Color}; - margin-left: 5px; - } - .icon:hover { - font-size: 12px; - color: ${styles.rightPanel.runTab.icon_HoverColor}; - } - .errorIcon { - color: ${styles.appProperties.errorText_Color}; - margin-left: 15px; - } - .failDesc { - color: ${styles.appProperties.errorText_Color}; - padding-left: 10px; - display: inline; - } - .network { - display: flex; - justify-content: flex-end; - align-items: center; - position: absolute; - color: grey; - width: 100%; - height: 100%; - padding-right: 28px; - pointer-events: none; - } - .networkItem { - margin-right: 5px; - } - .clearinstance { - font-size: 20px; - cursor: pointer; - margin-right: 10px; - } - .transactionActions { - float: right; - } - .createAccount { - margin-left: 5px; - cursor: pointer; - } - .createAccount:hover { - color: ${styles.colors.orange}; - } -` - -module.exports = runTab +var css = require('./styles/run-tab-styles') var instanceContainer = yo`
` var noInstancesText = yo`
0 contract Instances
` @@ -630,3 +441,5 @@ function settings (container, appAPI, appEvents) { return el } + +module.exports = runTab diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js new file mode 100644 index 0000000000..10e960f31a --- /dev/null +++ b/src/app/tabs/styles/run-tab-styles.js @@ -0,0 +1,182 @@ +var csjs = require('csjs-inject') +var styleGuide = require('remix-lib').ui.themeChooser +var styles = styleGuide.chooser() + +var css = csjs` + .runTabView { + padding: 2%; + display: flex; + flex-direction: column; + } + .settings { + ${styles.rightPanel.runTab.box_RunTab} + margin-bottom: 2%; + padding: 10px 15px 15px 15px; + } + .crow { + margin-top: .5em; + display: flex; + align-items: center; + } + .col1 { + width: 30%; + float: left; + align-self: center; + } + .col1_1 { + font-size: 12px; + width: 25%; + min-width: 75px; + float: left; + align-self: center; + } + .environment { + display: flex; + align-items: center; + position: relative; + } + .col2 { + ${styles.rightPanel.runTab.input_RunTab} + } + .col2_1 { + ${styles.rightPanel.runTab.input_RunTab} + width: 165px; + min-width: 165px; + } + .col2_2 { + ${styles.rightPanel.runTab.dropdown_RunTab} + width: 82px; + min-width: 82px; + } + .select { + ${styles.rightPanel.runTab.dropdown_RunTab} + font-weight: normal; + min-width: 150px; + } + .instanceContainer { + display: flex; + flex-direction: column; + margin-top: 2%; + border: none; + text-align: center; + } + .pendingTxsContainer { + ${styles.rightPanel.runTab.box_Instance} + display: flex; + flex-direction: column; + margin-top: 2%; + border: none; + text-align: center; + } + .container { + ${styles.rightPanel.runTab.box_RunTab} + margin-top: 2%; + } + .contractNames { + ${styles.rightPanel.runTab.dropdown_RunTab} + width: 100%; + border: 1px solid + } + .contractNamesError { + border: 1px solid ${styles.appProperties.errorText_Color} + } + .subcontainer { + display: flex; + flex-direction: row; + align-items: baseline; + } + .button { + display: flex; + align-items: center; + margin-top: 2%; + } + .transaction { + ${styles.rightPanel.runTab.button_transaction} + } + .atAddress { + ${styles.rightPanel.runTab.button_atAddress} + } + .create { + ${styles.rightPanel.runTab.button_Create} + } + .input { + ${styles.rightPanel.runTab.input_RunTab} + } + .noInstancesText { + ${styles.rightPanel.runTab.box_Instance} + font-style: italic; + } + .pendingTxsText { + ${styles.rightPanel.runTab.borderBox_Instance} + font-style: italic; + } + .item { + margin-right: 1em; + display: flex; + align-items: center; + } + .transact { + color: ${styles.colors.lightRed}; + margin-right: .3em; + } + .payable { + color: ${styles.colors.red}; + margin-right: .3em; + } + .call { + color: ${styles.colors.lightBlue}; + margin-right: .3em; + } + .pendingContainer { + display: flex; + align-items: baseline; + } + .pending { + height: 25px; + text-align: center; + padding-left: 10px; + border-radius: 3px; + margin-left: 5px; + } + .icon { + font-size: 12px; + color: ${styles.rightPanel.runTab.icon_Color}; + margin-left: 5px; + } + .icon:hover { + font-size: 12px; + color: ${styles.rightPanel.runTab.icon_HoverColor}; + } + .errorIcon { + color: ${styles.appProperties.errorText_Color}; + margin-left: 15px; + } + .failDesc { + color: ${styles.appProperties.errorText_Color}; + padding-left: 10px; + display: inline; + } + .network { + display: flex; + justify-content: flex-end; + align-items: center; + position: absolute; + color: grey; + width: 100%; + height: 100%; + padding-right: 28px; + pointer-events: none; + } + .networkItem { + margin-right: 5px; + } + .clearinstance { + font-size: 20px; + cursor: pointer; + margin-right: 10px; + } + .transactionActions { + float: right; +` + +module.exports = css