Merge pull request #1039 from ethereum/refactor/separate_styles

separate styles
pull/3094/head
yann300 7 years ago committed by GitHub
commit c1429f37b6
  1. 14
      src/app/contract/contractParser.js
  2. 175
      src/app/panels/editor-panel.js
  3. 108
      src/app/panels/file-panel.js
  4. 122
      src/app/panels/righthand-panel.js
  5. 180
      src/app/panels/styles/editor-panel-styles.js
  6. 109
      src/app/panels/styles/file-panel-styles.js
  7. 103
      src/app/panels/styles/righthand-panel-styles.js
  8. 167
      src/app/panels/styles/terminal-styles.js
  9. 163
      src/app/panels/terminal.js
  10. 33
      src/app/tabs/analysis-tab.js
  11. 148
      src/app/tabs/compile-tab.js
  12. 21
      src/app/tabs/debugger-tab.js
  13. 23
      src/app/tabs/plugin-tab.js
  14. 195
      src/app/tabs/run-tab.js
  15. 79
      src/app/tabs/settings-tab.js
  16. 28
      src/app/tabs/styles/analysis-tab-styles.js
  17. 144
      src/app/tabs/styles/compile-tab-styles.js
  18. 15
      src/app/tabs/styles/debugger-tab-styles.js
  19. 16
      src/app/tabs/styles/plugin-tab-styles.js
  20. 182
      src/app/tabs/styles/run-tab-styles.js
  21. 76
      src/app/tabs/styles/settings-tab-styles.js
  22. 56
      src/app/tabs/styles/support-tab-styles.js
  23. 38
      src/app/tabs/styles/tabbed-menu-styles.js
  24. 62
      src/app/tabs/support-tab.js
  25. 41
      src/app/tabs/tabbed-menu.js

@ -1,6 +1,5 @@
'use strict'
var $ = require('jquery')
var txHelper = require('../execution/txHelper')
module.exports = (contractName, contract, compiledSource) => {
@ -63,7 +62,7 @@ var formatAssemblyText = function (asm, prefix, source) {
return prefix + asm + '\n'
}
var text = prefix + '.code\n'
$.each(asm['.code'], function (i, item) {
asm['.code'].forEach(function (item, _i) {
var v = item.value === undefined ? '' : item.value
var src = ''
if (item.begin !== undefined && item.end !== undefined) {
@ -78,11 +77,12 @@ var formatAssemblyText = function (asm, prefix, source) {
text += prefix + item.name + ' ' + v + '\t\t\t' + src + '\n'
})
text += prefix + '.data\n'
if (asm['.data']) {
$.each(asm['.data'], function (i, item) {
text += ' ' + prefix + '' + i + ':\n'
text += formatAssemblyText(item, prefix + ' ', source)
})
let asmData = (asm['.data'] || [])
for (let i in asmData) {
let item = asmData[i]
text += ' ' + prefix + '' + i + ':\n'
text += formatAssemblyText(item, prefix + ' ', source)
}
return text
}

@ -1,181 +1,12 @@
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var Terminal = require('./terminal')
var cssTabs = yo`
<style>
#files .file {
padding: 0 0.6em;
box-sizing: border-box;
background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
cursor: pointer;
margin-right: 10px;
margin-top: 5px;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
color: ${styles.editor.text_Teriary};
}
#files .file.active {
color: ${styles.editor.text_Primary};
font-weight: bold;
border-bottom: 0 none;
padding-right: 1.5em;
}
#files .file .remove {
font-size: 12px;
display: flex;
color: ${styles.editor.text_Primary};
position: absolute;
top: -7px;
right: 5px;
display: none;
}
#files .file input {
background-color: ${styles.colors.transparent};
border: 0 none;
border-bottom: 1px dotted ${styles.editor.text_Primary};
line-height: 1em;
margin: 0.5em 0;
}
#files .file.active .remove {
display: inline-block;
color: ${styles.editor.text_Primary};
}
</style>
`
var css = csjs`
.editorpanel {
display : flex;
flex-direction : column;
height : 100%;
}
.tabsbar {
background-color : ${styles.editor.backgroundColor_Panel};
display : flex;
overflow : hidden;
height : 30px;
}
.tabs {
position : relative;
display : flex;
margin : 0;
left : 10px;
margin-right : 10px;
width : 100%;
overflow : hidden;
}
.files {
display : flex;
position : relative;
list-style : none;
margin : 0;
font-size : 15px;
height : 2.5em;
box-sizing : border-box;
line-height : 2em;
top : 0;
border-bottom : 0 none;
}
.changeeditorfontsize {
margin : 0;
font-size : 9px;
margin-top : 0.5em;
}
.changeeditorfontsize i {
cursor : pointer;
display : block;
color : ${styles.editor.icon_Color_Editor};
}
.changeeditorfontsize i {
cursor : pointer;
}
.changeeditorfontsize i:hover {
color : ${styles.editor.icon_HoverColor_Editor};
}
.buttons {
display : flex;
flex-direction : row;
justify-content : space-around;
align-items : center;
min-width : 45px;
}
.toggleLHP {
display : flex;
padding : 10px;
width : 100%;
font-weight : bold;
color : ${styles.leftPanel.icon_Color_TogglePanel};
}
.toggleLHP i {
cursor : pointer;
font-size : 14px;
font-weight : bold;
}
.toggleLHP i:hover {
color : ${styles.leftPanel.icon_HoverColor_TogglePanel};
}
.scroller {
position : absolute;
z-index : 999;
text-align : center;
cursor : pointer;
vertical-align : middle;
background-color : ${styles.colors.general_BackgroundColor};
height : 100%;
font-size : 1.3em;
color : orange;
}
.scrollerright {
right : 0;
margin-right : 15px;
}
.scrollerleft {
left : 0;
}
.toggleRHP {
margin : 0.5em;
font-weight : bold;
color : ${styles.rightPanel.icon_Color_TogglePanel};
right : 0;
}
.toggleRHP i {
cursor : pointer;
font-size : 14px;
font-weight : bold;
}
.toggleRHP i:hover {
color : ${styles.rightPanel.icon_HoverColor_TogglePanel};
}
.show {
opacity : 1;
transition : .3s opacity ease-in;
}
.hide {
opacity : 0;
pointer-events : none;
transition : .3s opacity ease-in;
}
.content {
position : relative;
display : flex;
flex-direction : column;
height : 100%;
width : 100%;
}
.contextviewcontainer{
width : 100%;
height : 20px;
background-color : ${styles.editor.backgroundColor_Tabs_Highlights};
}
`
var styles = require('./styles/editor-panel-styles')
var cssTabs = styles.cssTabs
var css = styles.css
class EditorPanel {
constructor (opts = {}) {

@ -1,6 +1,5 @@
var async = require('async')
var $ = require('jquery')
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var minixhr = require('minixhr') // simple and small cross-browser XMLHttpRequest (XHR)
var remixLib = require('remix-lib')
@ -15,110 +14,7 @@ var helper = require('../../lib/helper')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
module.exports = filepanel
var css = csjs`
.container {
display : flex;
flex-direction : row;
width : 100%;
height : 100%;
box-sizing : border-box;
}
.fileexplorer {
display : flex;
flex-direction : column;
position : relative;
width : 100%;
}
.menu {
margin-top : -0.2em;
flex-shrink : 0;
display : flex;
flex-direction : row;
min-width : 160px;
}
.newFile {
padding : 10px;
}
.newFile i {
cursor : pointer;
}
.newFile i:hover {
color : ${styles.colors.orange};
}
.gist {
padding : 10px;
}
.gist i {
cursor : pointer;
}
.gist i:hover {
color : orange;
}
.copyFiles {
padding : 10px;
}
.copyFiles i {
cursor : pointer;
}
.copyFiles i:hover {
color : orange;
}
.connectToLocalhost {
padding : 10px;
}
.connectToLocalhost i {
cursor : pointer;
}
.connectToLocalhost i:hover {
color : ${styles.colors.orange};
}
.uploadFile {
padding : 10px;
}
.uploadFile label:hover {
color : ${styles.colors.orange};
}
.uploadFile label {
cursor : pointer;
}
.treeview {
background-color : ${styles.colors.general_BackgroundColor};
}
.treeviews {
overflow-y : auto;
}
.dragbar {
position : absolute;
top : 37px;
width : 0.5em;
right : 0;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-right : 2px solid hsla(215, 81%, 79%, .3);
}
.ghostbar {
width : 3px;
background-color : ${styles.colors.lightBlue};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
.dialog {
display: flex;
flex-direction: column;
}
.dialogParagraph {
${styles.infoTextBox}
margin-bottom: 2em;
word-break: break-word;
}
`
var css = require('./styles/file-panel-styles')
var limit = 60
var canUpload = window.File || window.FileReader || window.FileList || window.Blob
@ -403,3 +299,5 @@ function packageFiles (files, callback) {
callback(null, ret)
})
}
module.exports = filepanel

@ -11,111 +11,7 @@ var supportTab = require('../tabs/support-tab')
var pluginTab = require('../tabs/plugin-tab')
var PluginManager = require('../../pluginManager')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
#righthand-panel {
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
overflow: hidden;
}
#optionViews {
background-color: ${styles.rightPanel.backgroundColor_Tab};
overflow: scroll;
height: 100%;
}
#optionViews > div {
display: none;
}
#optionViews .pre {
word-wrap: break-word;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
}
#optionViews .hide {
display: none;
}
a {
color: ${styles.rightPanel.text_link};
}
.menu {
display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
}
.options {
float: left;
padding-top: 0.7em;
min-width: 60px;
font-size: 0.9em;
cursor: pointer;
font-size: 1em;
text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li {
display: block;
font-weight: bold;
color: ${styles.rightPanel.text_Teriary};
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary};
}
.opts_li:hover {
color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
}
.dragbar {
position : absolute;
width : 0.5em;
top : 3em;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-left : 2px solid ${styles.rightPanel.bar_Dragging};
}
.ghostbar {
width : 3px;
background-color : ${styles.rightPanel.bar_Ghost};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
.panel {
height : 100%;
}
.header {
height : 100%;
}
.solIcon {
margin-left: 10px;
margin-right: 30px;
display: flex;
align-self: center;
height: 29px;
width: 20px;
background-color: ${styles.colors.transparent};
}
`
// ------------------------------------------------------------------
module.exports = RighthandPanel
var css = require('./styles/righthand-panel-styles')
function RighthandPanel (appAPI, events, opts) {
var self = this
@ -146,21 +42,21 @@ function RighthandPanel (appAPI, events, opts) {
// load tabbed menu component
var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
self._view.tabbedMenu = new TabbedMenu(options, {}, tabEvents, {})
self._view.tabbedMenu = new TabbedMenu(options, tabEvents)
events.rhp = self.event
this._view.tabbedMenu.addTab('Compile', 'compileView', compileTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Run', 'runView', runTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Run', 'runView', runTab(optionViews, appAPI, events))
this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events))
this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews))
this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews))
this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews))
this._view.tabbedMenu.selectTabByTitle('Compile')
self.pluginManager = new PluginManager(appAPI, events)
events.rhp.register('plugin-loadRequest', (json) => {
var content = pluginTab(optionViews, {}, {}, {}, json.url)
var content = pluginTab(optionViews, json.url)
this._view.tabbedMenu.addTab(json.title, 'plugin', content)
self.pluginManager.register(json, content)
})
@ -211,3 +107,5 @@ function RighthandPanel (appAPI, events, opts) {
}
}
}
module.exports = RighthandPanel

@ -0,0 +1,180 @@
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var cssTabs = yo`
<style>
#files .file {
padding: 0 0.6em;
box-sizing: border-box;
background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
cursor: pointer;
margin-right: 10px;
margin-top: 5px;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
color: ${styles.editor.text_Teriary};
}
#files .file.active {
color: ${styles.editor.text_Primary};
font-weight: bold;
border-bottom: 0 none;
padding-right: 1.5em;
}
#files .file .remove {
font-size: 12px;
display: flex;
color: ${styles.editor.text_Primary};
position: absolute;
top: -7px;
right: 5px;
display: none;
}
#files .file input {
background-color: ${styles.colors.transparent};
border: 0 none;
border-bottom: 1px dotted ${styles.editor.text_Primary};
line-height: 1em;
margin: 0.5em 0;
}
#files .file.active .remove {
display: inline-block;
color: ${styles.editor.text_Primary};
}
</style>
`
var css = csjs`
.editorpanel {
display : flex;
flex-direction : column;
height : 100%;
}
.tabsbar {
background-color : ${styles.editor.backgroundColor_Panel};
display : flex;
overflow : hidden;
height : 30px;
}
.tabs {
position : relative;
display : flex;
margin : 0;
left : 10px;
margin-right : 10px;
width : 100%;
overflow : hidden;
}
.files {
display : flex;
position : relative;
list-style : none;
margin : 0;
font-size : 15px;
height : 2.5em;
box-sizing : border-box;
line-height : 2em;
top : 0;
border-bottom : 0 none;
}
.changeeditorfontsize {
margin : 0;
font-size : 9px;
margin-top : 0.5em;
}
.changeeditorfontsize i {
cursor : pointer;
display : block;
color : ${styles.editor.icon_Color_Editor};
}
.changeeditorfontsize i {
cursor : pointer;
}
.changeeditorfontsize i:hover {
color : ${styles.editor.icon_HoverColor_Editor};
}
.buttons {
display : flex;
flex-direction : row;
justify-content : space-around;
align-items : center;
min-width : 45px;
}
.toggleLHP {
display : flex;
padding : 10px;
width : 100%;
font-weight : bold;
color : ${styles.leftPanel.icon_Color_TogglePanel};
}
.toggleLHP i {
cursor : pointer;
font-size : 14px;
font-weight : bold;
}
.toggleLHP i:hover {
color : ${styles.leftPanel.icon_HoverColor_TogglePanel};
}
.scroller {
position : absolute;
z-index : 999;
text-align : center;
cursor : pointer;
vertical-align : middle;
background-color : ${styles.colors.general_BackgroundColor};
height : 100%;
font-size : 1.3em;
color : orange;
}
.scrollerright {
right : 0;
margin-right : 15px;
}
.scrollerleft {
left : 0;
}
.toggleRHP {
margin : 0.5em;
font-weight : bold;
color : ${styles.rightPanel.icon_Color_TogglePanel};
right : 0;
}
.toggleRHP i {
cursor : pointer;
font-size : 14px;
font-weight : bold;
}
.toggleRHP i:hover {
color : ${styles.rightPanel.icon_HoverColor_TogglePanel};
}
.show {
opacity : 1;
transition : .3s opacity ease-in;
}
.hide {
opacity : 0;
pointer-events : none;
transition : .3s opacity ease-in;
}
.content {
position : relative;
display : flex;
flex-direction : column;
height : 100%;
width : 100%;
}
.contextviewcontainer{
width : 100%;
height : 20px;
background-color : ${styles.editor.backgroundColor_Tabs_Highlights};
}
`
module.exports = {
cssTabs: cssTabs,
css: css
}

@ -0,0 +1,109 @@
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.container {
display : flex;
flex-direction : row;
width : 100%;
height : 100%;
box-sizing : border-box;
}
.fileexplorer {
display : flex;
flex-direction : column;
position : relative;
width : 100%;
}
.menu {
margin-top : -0.2em;
flex-shrink : 0;
display : flex;
flex-direction : row;
min-width : 160px;
}
.newFile {
padding : 10px;
}
.newFile i {
cursor : pointer;
}
.newFile i:hover {
color : ${styles.colors.orange};
}
.gist {
padding : 10px;
}
.gist i {
cursor : pointer;
}
.gist i:hover {
color : orange;
}
.copyFiles {
padding : 10px;
}
.copyFiles i {
cursor : pointer;
}
.copyFiles i:hover {
color : orange;
}
.connectToLocalhost {
padding : 10px;
}
.connectToLocalhost i {
cursor : pointer;
}
.connectToLocalhost i:hover {
color : ${styles.colors.orange};
}
.uploadFile {
padding : 10px;
}
.uploadFile label:hover {
color : ${styles.colors.orange};
}
.uploadFile label {
cursor : pointer;
}
.treeview {
background-color : ${styles.colors.general_BackgroundColor};
}
.treeviews {
overflow-y : auto;
}
.dragbar {
position : absolute;
top : 37px;
width : 0.5em;
right : 0;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-right : 2px solid hsla(215, 81%, 79%, .3);
}
.ghostbar {
width : 3px;
background-color : ${styles.colors.lightBlue};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
.dialog {
display: flex;
flex-direction: column;
}
.dialogParagraph {
${styles.infoTextBox}
margin-bottom: 2em;
word-break: break-word;
}
`
module.exports = css

@ -0,0 +1,103 @@
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
#righthand-panel {
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
overflow: hidden;
}
#optionViews {
background-color: ${styles.rightPanel.backgroundColor_Tab};
overflow: scroll;
height: 100%;
}
#optionViews > div {
display: none;
}
#optionViews .pre {
word-wrap: break-word;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
}
#optionViews .hide {
display: none;
}
a {
color: ${styles.rightPanel.text_link};
}
.menu {
display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
}
.options {
float: left;
padding-top: 0.7em;
min-width: 60px;
font-size: 0.9em;
cursor: pointer;
font-size: 1em;
text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li {
display: block;
font-weight: bold;
color: ${styles.rightPanel.text_Teriary};
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary};
}
.opts_li:hover {
color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
}
.dragbar {
position : absolute;
width : 0.5em;
top : 3em;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-left : 2px solid ${styles.rightPanel.bar_Dragging};
}
.ghostbar {
width : 3px;
background-color : ${styles.rightPanel.bar_Ghost};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
.panel {
height : 100%;
}
.header {
height : 100%;
}
.solIcon {
margin-left: 10px;
margin-right: 30px;
display: flex;
align-self: center;
height: 29px;
width: 20px;
background-color: ${styles.colors.transparent};
}
`
module.exports = css

@ -0,0 +1,167 @@
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.panel {
position : relative;
display : flex;
flex-direction : column;
font-size : 12px;
color : ${styles.terminal.text_Regular_TransactionLog};
background-color : ${styles.terminal.backgroundColor_Terminal};
height : 100%;
min-height : 1.7em;
overflow : hidden;
}
.bar {
display : flex;
min-height : 3em;
padding : 2px;
background-color : ${styles.terminal.backgroundColor_Menu};
z-index : 3;
}
.menu {
color : ${styles.terminal.text_Primary};
position : relative;
display : flex;
align-items : center;
width : 100%;
padding : 5px;
}
.clear {
margin-left : 10px;
margin-right : 10px;
width : 10px;
cursor : pointer;
color : ${styles.terminal.icon_Color_TogglePanel};
}
.clear:hover {
color : ${styles.terminal.icon_HoverColor_Menu};
}
.toggleTerminal {
margin-right : 10px;
font-size : 14px;
font-weight : bold;
cursor : pointer;
color : ${styles.terminal.icon_Color_Menu};
}
.toggleTerminal:hover {
color : ${styles.terminal.icon_HoverColor_TogglePanel};
}
.terminal_container {
background-color : ${styles.terminal.backgroundColor_Terminal};
display : flex;
flex-direction : column;
height : 100%;
overflow-y : auto;
font-family : monospace;
}
.terminal_bg {
display : flex;
flex-direction : column;
height : 100%;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 3px;
overflow-y : auto;
font-family : monospace;
background-image : ${styles.terminal.backgroundImage_Terminal};
opacity : 0.1;
top : 15%;
left : 33%;
bottom : 0;
right : 0;
position : absolute;
background-repeat : no-repeat;
background-size : 45%;
}
.terminal {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.journal {
margin-top : auto;
font-family : monospace;
}
.block {
word-break : break-all;
white-space : pre-wrap;
line-height : 2ch;
margin : 1ch;
margin-top : 2ch;
}
.cli {
line-height : 1.7em;
font-family : monospace;
background-color : ${styles.terminal.backgroundColor_TerminalCLI};
padding : .4em;
color : ${styles.appProperties.mainText_Color};
border-top : solid 2px ${styles.terminal.bar_Ghost};
}
.prompt {
margin-right : 0.5em;
font-family : monospace;
font-weight : bold;
font-size : large;
color : ${styles.appProperties.supportText_OppositeColor};
}
.input {
word-break : break-all;
outline : none;
font-family : monospace;
}
.search {
display: flex;
align-items: center;
margin-right: 10px;
}
.filter {
${styles.terminal.input_Search_MenuBar}
width : 200px;
padding-right : 0px;
margin-right : 0px;
border-top-left-radius : 0px;
border-bottom-left-radius : 0px;
}
.searchIcon {
background-color : ${styles.colors.veryLightGrey};
color : ${styles.terminal.icon_Color_Menu};
height : 25px;
width : 25px;
border-top-left-radius : 3px;
border-bottom-left-radius : 3px;
display : flex;
align-items : center;
justify-content : center;
}
.listen {
min-width : 120px;
display : flex;
}
.dragbarHorizontal {
position : absolute;
top : 0;
height : 0.5em;
right : 0;
left : 0;
cursor : ns-resize;
z-index : 999;
border-top : 2px solid ${styles.terminal.bar_Dragging};
}
.ghostbar {
position : absolute;
height : 6px;
background-color : ${styles.terminal.bar_Ghost};
opacity : 0.5;
cursor : row-resize;
z-index : 9999;
left : 0;
right : 0;
}
`
module.exports = css

@ -11,172 +11,11 @@ var Web3 = require('web3')
var executionContext = require('../../execution-context')
var Dropdown = require('../ui/dropdown')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.panel {
position : relative;
display : flex;
flex-direction : column;
font-size : 12px;
color : ${styles.terminal.text_Regular_TransactionLog};
background-color : ${styles.terminal.backgroundColor_Terminal};
height : 100%;
min-height : 1.7em;
overflow : hidden;
}
.bar {
display : flex;
min-height : 3em;
padding : 2px;
background-color : ${styles.terminal.backgroundColor_Menu};
z-index : 3;
}
.menu {
color : ${styles.terminal.text_Primary};
position : relative;
display : flex;
align-items : center;
width : 100%;
padding : 5px;
}
.clear {
margin-left : 10px;
margin-right : 10px;
width : 10px;
cursor : pointer;
color : ${styles.terminal.icon_Color_TogglePanel};
}
.clear:hover {
color : ${styles.terminal.icon_HoverColor_Menu};
}
.toggleTerminal {
margin-right : 10px;
font-size : 14px;
font-weight : bold;
cursor : pointer;
color : ${styles.terminal.icon_Color_Menu};
}
.toggleTerminal:hover {
color : ${styles.terminal.icon_HoverColor_TogglePanel};
}
.terminal_container {
background-color : ${styles.terminal.backgroundColor_Terminal};
display : flex;
flex-direction : column;
height : 100%;
overflow-y : auto;
font-family : monospace;
}
.terminal_bg {
display : flex;
flex-direction : column;
height : 100%;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 3px;
overflow-y : auto;
font-family : monospace;
background-image : ${styles.terminal.backgroundImage_Terminal};
opacity : 0.1;
top : 15%;
left : 33%;
bottom : 0;
right : 0;
position : absolute;
background-repeat : no-repeat;
background-size : 45%;
}
.terminal {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.journal {
margin-top : auto;
font-family : monospace;
}
.block {
word-break : break-all;
white-space : pre-wrap;
line-height : 2ch;
margin : 1ch;
margin-top : 2ch;
}
.cli {
line-height : 1.7em;
font-family : monospace;
background-color : ${styles.terminal.backgroundColor_TerminalCLI};
padding : .4em;
color : ${styles.appProperties.mainText_Color};
border-top : solid 2px ${styles.terminal.bar_Ghost};
}
.prompt {
margin-right : 0.5em;
font-family : monospace;
font-weight : bold;
font-size : large;
color : ${styles.appProperties.supportText_OppositeColor};
}
.input {
word-break : break-all;
outline : none;
font-family : monospace;
}
.search {
display: flex;
align-items: center;
margin-right: 10px;
}
.filter {
${styles.terminal.input_Search_MenuBar}
width : 200px;
padding-right : 0px;
margin-right : 0px;
border-top-left-radius : 0px;
border-bottom-left-radius : 0px;
}
.searchIcon {
background-color : ${styles.colors.veryLightGrey};
color : ${styles.terminal.icon_Color_Menu};
height : 25px;
width : 25px;
border-top-left-radius : 3px;
border-bottom-left-radius : 3px;
display : flex;
align-items : center;
justify-content : center;
}
.listen {
min-width : 120px;
display : flex;
}
.dragbarHorizontal {
position : absolute;
top : 0;
height : 0.5em;
right : 0;
left : 0;
cursor : ns-resize;
z-index : 999;
border-top : 2px solid ${styles.terminal.bar_Dragging};
}
.ghostbar {
position : absolute;
height : 6px;
background-color : ${styles.terminal.bar_Ghost};
opacity : 0.5;
cursor : row-resize;
z-index : 9999;
left : 0;
right : 0;
}
`
var css = require('./styles/terminal-styles')
var KONSOLES = []

@ -1,34 +1,7 @@
var yo = require('yo-yo')
var remixLib = require('remix-lib')
var css = require('./styles/analysis-tab-styles')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.analysisTabView {
padding: 2%;
padding-bottom: 3em;
display: flex;
flex-direction: column;
}
#staticanalysisView {
display: block;
}
.infoBox {
${styles.infoTextBox}
margin-bottom: 1em;
}
.textBox {
${styles.textBoxL}
margin-bottom: 1em;
}
`
module.exports = analysisTab
function analysisTab (container, appAPI, events, opts) {
function analysisTab (container) {
var el = yo`
<div class="${css.analysisTabView} "id="staticanalysisView">
</div>
@ -36,3 +9,5 @@ function analysisTab (container, appAPI, events, opts) {
container.appendChild(el)
return el
}
module.exports = analysisTab

@ -1,6 +1,5 @@
/* global */
var $ = require('jquery')
var yo = require('yo-yo')
var parseContracts = require('../contract/contractParser')
@ -9,153 +8,12 @@ var modalDialog = require('../ui/modaldialog')
var modalDialogCustom = require('../ui/modal-dialog-custom')
var TreeView = require('remix-debugger').ui.TreeView
var copyToClipboard = require('../ui/copy-to-clipboard')
var remixLib = require('remix-lib')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var css = require('./styles/compile-tab-styles')
var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
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 = compileTab
function compileTab (container, appAPI, appEvents, opts) {
if (typeof container === 'string') container = document.querySelector(container)
if (!container) throw new Error('no container given')
@ -464,3 +322,5 @@ function detailsHelpSection () {
'web3Deploy': 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract'
}
}
module.exports = compileTab

@ -1,22 +1,7 @@
var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('remix-lib').ui.themeChooser
var styles = styleGuide.chooser()
var css = require('./styles/debugger-tab-styles')
var css = csjs`
.debuggerTabView {
padding: 2%;
}
.debugger {
margin-bottom: 1%;
${styles.rightPanel.debuggerTab.box_Debugger}
}
`
module.exports = debuggerTab
function debuggerTab (container, appAPI, events, opts) {
function debuggerTab (container) {
var el = yo`
<div class="${css.debuggerTabView} "id="debugView">
<div id="debugger" class="${css.debugger}"></div>
@ -24,3 +9,5 @@ function debuggerTab (container, appAPI, events, opts) {
container.appendChild(el)
return el
}
module.exports = debuggerTab

@ -1,24 +1,7 @@
var yo = require('yo-yo')
var css = require('./styles/plugin-tab-styles')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var css = csjs`
.pluginTabView {
height: 100%;
width: 100%;
}
.iframe {
height: 100%;
width: 100%;
border: 0;
}
`
module.exports = plugintab
function plugintab (container, appAPI, events, opts, url) {
function plugintab (container, url) {
var el = yo`
<div class="${css.pluginTabView}" id="pluginView">
<iframe class="${css.iframe}" src="${url}/index.html"></iframe>
@ -26,3 +9,5 @@ function plugintab (container, appAPI, events, opts, url) {
container.appendChild(el)
return el
}
module.exports = plugintab

@ -12,204 +12,15 @@ 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`<div class="${css.instanceContainer}"></div>`
var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instances</div>`
var pendingTxsText = yo`<span></span>`
function runTab (container, appAPI, appEvents, opts) {
function runTab (container, appAPI, appEvents) {
var events = new EventManager()
var clearInstanceElement = yo`<i class="${css.clearinstance} fa fa-minus-square-o" title="Clear Instances List" aria-hidden="true"></i>`
@ -630,3 +441,5 @@ function settings (container, appAPI, appEvents) {
return el
}
module.exports = runTab

@ -5,85 +5,12 @@ var QueryParams = require('../../lib/query-params')
var remixLib = require('remix-lib')
var Storage = remixLib.Storage
var styleGuide = remixLib.ui.themeChooser
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styles = styleGuide.chooser()
var helper = require('../../lib/helper')
var modal = require('../ui/modal-dialog-custom')
var css = csjs`
.settingsTabView {
padding: 2%;
display: flex;
}
.info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
margin-bottom: 1em;
word-break: break-word;
}
.title {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 1em;
}
.crow {
display: flex;
overflow: auto;
clear: both;
padding: .2em;
}
.checkboxText {
font-weight: normal;
}
.crow label {
cursor:pointer;
}
.crowNoFlex {
overflow: auto;
clear: both;
}
.attention {
margin-bottom: 1em;
padding: .5em;
font-weight: bold;
}
.select {
font-weight: bold;
margin-top: 1em;
${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
}
.heading {
margin-bottom: 0;
}
.explaination {
margin-top: 3px;
margin-bottom: 3px;
}
input {
margin-right: 5px;
cursor: pointer;
}
input[type=radio] {
margin-top: 2px;
}
.pluginTextArea {
font-family: unset;
}
.pluginLoad {
vertical-align: top;
}
i.warnIt {
color: ${styles.appProperties.warningText_Color};
}
.icon {
margin-right: .5em;
}
}
`
module.exports = SettingsTab
var css = require('./styles/settings-tab-styles')
function SettingsTab (container, appAPI, appEvents, opts) {
function SettingsTab (container, appAPI, appEvents) {
if (typeof container === 'string') container = document.querySelector(container)
if (!container) throw new Error('no container given')
@ -305,3 +232,5 @@ function loadVersion (version, queryParams, appAPI, el) {
setVersionText('(loading)', el)
}
}
module.exports = SettingsTab

@ -0,0 +1,28 @@
var remixLib = require('remix-lib')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.analysisTabView {
padding: 2%;
padding-bottom: 3em;
display: flex;
flex-direction: column;
}
#staticanalysisView {
display: block;
}
.infoBox {
${styles.infoTextBox}
margin-bottom: 1em;
}
.textBox {
${styles.textBoxL}
margin-bottom: 1em;
}
`
module.exports = css

@ -0,0 +1,144 @@
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
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

@ -0,0 +1,15 @@
var csjs = require('csjs-inject')
var styleGuide = require('remix-lib').ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.debuggerTabView {
padding: 2%;
}
.debugger {
margin-bottom: 1%;
${styles.rightPanel.debuggerTab.box_Debugger}
}
`
module.exports = css

@ -0,0 +1,16 @@
var csjs = require('csjs-inject')
var css = csjs`
.pluginTabView {
height: 100%;
width: 100%;
}
.iframe {
height: 100%;
width: 100%;
border: 0;
}
`
module.exports = css

@ -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

@ -0,0 +1,76 @@
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.settingsTabView {
padding: 2%;
display: flex;
}
.info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
margin-bottom: 1em;
word-break: break-word;
}
.title {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 1em;
}
.crow {
display: flex;
overflow: auto;
clear: both;
padding: .2em;
}
.checkboxText {
font-weight: normal;
}
.crow label {
cursor:pointer;
}
.crowNoFlex {
overflow: auto;
clear: both;
}
.attention {
margin-bottom: 1em;
padding: .5em;
font-weight: bold;
}
.select {
font-weight: bold;
margin-top: 1em;
${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
}
.heading {
margin-bottom: 0;
}
.explaination {
margin-top: 3px;
margin-bottom: 3px;
}
input {
margin-right: 5px;
cursor: pointer;
}
input[type=radio] {
margin-top: 2px;
}
.pluginTextArea {
font-family: unset;
}
.pluginLoad {
vertical-align: top;
}
i.warnIt {
color: ${styles.appProperties.warningText_Color};
}
.icon {
margin-right: .5em;
}
}
`
module.exports = css

@ -0,0 +1,56 @@
var csjs = require('csjs-inject')
var styleGuide = require('remix-lib').ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.supportTabView {
height: 100vh;
padding: 2%;
padding-bottom: 3em;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat {
${styles.rightPanel.supportTab.box_IframeContainer}
display: flex;
flex-direction: column;
align-items: center;
height: 85%;
padding: 0;
}
.chatTitle {
height: 40px;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
.chatTitle:hover {
cursor: pointer;
}
.icon {
height: 70%;
margin-right: 2%;
}
.chatTitleText {
font-size: 17px;
font-weight: bold;
}
.chatTitleText {
opacity: 0.8;
}
.chatIframe {
width: 100%;
height: 100%;
transform: scale(0.9);
padding: 0;
border: none;
}
.infoBox {
${styles.rightPanel.supportTab.box_SupportInfo}
}
`
module.exports = css

@ -0,0 +1,38 @@
var csjs = require('csjs-inject')
var styleGuide = require('remix-lib').ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
li.active {
background-color: ${styles.rightPanel.backgroundColor_Tab};
color: ${styles.appProperties.mainText_Color}
}
.options {
float: left;
padding-top: 0.7em;
min-width: 60px;
font-size: 0.9em;
cursor: pointer;
font-size: 1em;
text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li {
display: block;
font-weight: bold;
color: ${styles.rightPanel.text_Teriary}
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary}
}
.opts_li:hover {
color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
}
`
module.exports = css

@ -1,60 +1,6 @@
var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('remix-lib').ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.supportTabView {
height: 100vh;
padding: 2%;
padding-bottom: 3em;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat {
${styles.rightPanel.supportTab.box_IframeContainer}
display: flex;
flex-direction: column;
align-items: center;
height: 85%;
padding: 0;
}
.chatTitle {
height: 40px;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
.chatTitle:hover {
cursor: pointer;
}
.icon {
height: 70%;
margin-right: 2%;
}
.chatTitleText {
font-size: 17px;
font-weight: bold;
}
.chatTitleText {
opacity: 0.8;
}
.chatIframe {
width: 100%;
height: 100%;
transform: scale(0.9);
padding: 0;
border: none;
}
.infoBox {
${styles.rightPanel.supportTab.box_SupportInfo}
}
`
var css = require('./styles/support-tab-styles')
var infoText = yo`
<div>
@ -65,9 +11,7 @@ var infoText = yo`
</div>
`
module.exports = supportTab
function supportTab (container, appAPI, events, opts) {
function supportTab (container) {
var el = yo`
<div class="${css.supportTabView} "id="supportView">
<div>
@ -90,3 +34,5 @@ function supportTab (container, appAPI, events, opts) {
function openLink () {
window.open('https://gitter.im/ethereum/remix')
}
module.exports = supportTab

@ -1,47 +1,10 @@
var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('remix-lib').ui.themeChooser
var styles = styleGuide.chooser()
var helper = require('../../lib/helper')
var css = csjs`
li.active {
background-color: ${styles.rightPanel.backgroundColor_Tab};
color: ${styles.appProperties.mainText_Color}
}
.options {
float: left;
padding-top: 0.7em;
min-width: 60px;
font-size: 0.9em;
cursor: pointer;
font-size: 1em;
text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li {
display: block;
font-weight: bold;
color: ${styles.rightPanel.text_Teriary}
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary}
}
.opts_li:hover {
color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
}
`
var css = require('./styles/tabbed-menu-styles')
class TabbedMenu {
constructor (tabView, api, events, opts) {
constructor (tabView, events) {
var self = this
this.tabView = tabView
this.events = events

Loading…
Cancel
Save