Skip to content

B
baas-ide
Unverified Commit f9e518ac authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #1039 from ethereum/refactor/separate_styles

separate styles
parents 99c82922 c6c62867
Hide whitespace changes
Inline Side-by-side
Showing with 1168 additions and 1130 deletions
src/app/contract/contractParser.js
View file @ f9e518ac
'use strict' 'use strict'
var $ = require('jquery')
var txHelper = require('../execution/txHelper') var txHelper = require('../execution/txHelper')
module.exports = (contractName, contract, compiledSource) => { module.exports = (contractName, contract, compiledSource) => {
...@@ -63,7 +62,7 @@ var formatAssemblyText = function (asm, prefix, source) { ...@@ -63,7 +62,7 @@ var formatAssemblyText = function (asm, prefix, source) {
return prefix + asm + '\n' return prefix + asm + '\n'
} }
var text = prefix + '.code\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 v = item.value === undefined ? '' : item.value
var src = '' var src = ''
if (item.begin !== undefined && item.end !== undefined) { if (item.begin !== undefined && item.end !== undefined) {
...@@ -78,11 +77,12 @@ var formatAssemblyText = function (asm, prefix, source) { ...@@ -78,11 +77,12 @@ var formatAssemblyText = function (asm, prefix, source) {
text += prefix + item.name + ' ' + v + '\t\t\t' + src + '\n' text += prefix + item.name + ' ' + v + '\t\t\t' + src + '\n'
}) })
text += prefix + '.data\n' text += prefix + '.data\n'
if (asm['.data']) { let asmData = (asm['.data'] || [])
$.each(asm['.data'], function (i, item) { for (let i in asmData) {
text += ' ' + prefix + '' + i + ':\n' let item = asmData[i]
text += formatAssemblyText(item, prefix + ' ', source)
}) text += ' ' + prefix + '' + i + ':\n'
text += formatAssemblyText(item, prefix + ' ', source)
} }
return text return text
} }
......
src/app/panels/editor-panel.js
View file @ f9e518ac
var csjs = require('csjs-inject')
var yo = require('yo-yo') var yo = require('yo-yo')
var remixLib = require('remix-lib') var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager var EventManager = remixLib.EventManager
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var Terminal = require('./terminal') var Terminal = require('./terminal')
var cssTabs = yo` var styles = require('./styles/editor-panel-styles')
<style> var cssTabs = styles.cssTabs
#files .file { var css = styles.css
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};
}
`
class EditorPanel { class EditorPanel {
constructor (opts = {}) { constructor (opts = {}) {
......
src/app/panels/file-panel.js
View file @ f9e518ac
var async = require('async') var async = require('async')
var $ = require('jquery') var $ = require('jquery')
var csjs = require('csjs-inject')
var yo = require('yo-yo') var yo = require('yo-yo')
var minixhr = require('minixhr') // simple and small cross-browser XMLHttpRequest (XHR) var minixhr = require('minixhr') // simple and small cross-browser XMLHttpRequest (XHR)
var remixLib = require('remix-lib') var remixLib = require('remix-lib')
...@@ -15,110 +14,7 @@ var helper = require('../../lib/helper') ...@@ -15,110 +14,7 @@ var helper = require('../../lib/helper')
var styleGuide = remixLib.ui.themeChooser var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser() var styles = styleGuide.chooser()
module.exports = filepanel var css = require('./styles/file-panel-styles')
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 limit = 60 var limit = 60
var canUpload = window.File || window.FileReader || window.FileList || window.Blob var canUpload = window.File || window.FileReader || window.FileList || window.Blob
...@@ -403,3 +299,5 @@ function packageFiles (files, callback) { ...@@ -403,3 +299,5 @@ function packageFiles (files, callback) {
callback(null, ret) callback(null, ret)
}) })
} }
module.exports = filepanel
src/app/panels/righthand-panel.js
View file @ f9e518ac
...@@ -11,111 +11,7 @@ var supportTab = require('../tabs/support-tab') ...@@ -11,111 +11,7 @@ var supportTab = require('../tabs/support-tab')
var pluginTab = require('../tabs/plugin-tab') var pluginTab = require('../tabs/plugin-tab')
var PluginManager = require('../../pluginManager') var PluginManager = require('../../pluginManager')
// -------------- styling ---------------------- var css = require('./styles/righthand-panel-styles')
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
function RighthandPanel (appAPI, events, opts) { function RighthandPanel (appAPI, events, opts) {
var self = this var self = this
...@@ -146,21 +42,21 @@ function RighthandPanel (appAPI, events, opts) { ...@@ -146,21 +42,21 @@ function RighthandPanel (appAPI, events, opts) {
// load tabbed menu component // load tabbed menu component
var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event} 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 events.rhp = self.event
this._view.tabbedMenu.addTab('Compile', 'compileView', compileTab(optionViews, appAPI, events, opts)) 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('Run', 'runView', runTab(optionViews, appAPI, events))
this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events, opts)) this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events))
this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews, appAPI, events, opts)) this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews))
this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews, appAPI, events, opts)) this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews))
this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews, appAPI, events, opts)) this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews))
this._view.tabbedMenu.selectTabByTitle('Compile') this._view.tabbedMenu.selectTabByTitle('Compile')
self.pluginManager = new PluginManager(appAPI, events) self.pluginManager = new PluginManager(appAPI, events)
events.rhp.register('plugin-loadRequest', (json) => { 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) this._view.tabbedMenu.addTab(json.title, 'plugin', content)
self.pluginManager.register(json, content) self.pluginManager.register(json, content)
}) })
...@@ -211,3 +107,5 @@ function RighthandPanel (appAPI, events, opts) { ...@@ -211,3 +107,5 @@ function RighthandPanel (appAPI, events, opts) {
} }
} }
} }
module.exports = RighthandPanel
src/app/panels/styles/editor-panel-styles.js 0 → 100644
View file @ f9e518ac
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
}
src/app/panels/styles/file-panel-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/panels/styles/righthand-panel-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/panels/styles/terminal-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/panels/terminal.js
View file @ f9e518ac
...@@ -11,172 +11,11 @@ var Web3 = require('web3') ...@@ -11,172 +11,11 @@ var Web3 = require('web3')
var executionContext = require('../../execution-context') var executionContext = require('../../execution-context')
var Dropdown = require('../ui/dropdown') var Dropdown = require('../ui/dropdown')
// -------------- styling ----------------------
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = remixLib.ui.themeChooser var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser() var styles = styleGuide.chooser()
var css = csjs` var css = require('./styles/terminal-styles')
.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 KONSOLES = [] var KONSOLES = []
......
src/app/tabs/analysis-tab.js
View file @ f9e518ac
var yo = require('yo-yo') var yo = require('yo-yo')
var remixLib = require('remix-lib') var css = require('./styles/analysis-tab-styles')
// -------------- styling ---------------------- function analysisTab (container) {
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) {
var el = yo` var el = yo`
<div class="${css.analysisTabView} "id="staticanalysisView"> <div class="${css.analysisTabView} "id="staticanalysisView">
</div> </div>
...@@ -36,3 +9,5 @@ function analysisTab (container, appAPI, events, opts) { ...@@ -36,3 +9,5 @@ function analysisTab (container, appAPI, events, opts) {
container.appendChild(el) container.appendChild(el)
return el return el
} }
module.exports = analysisTab
src/app/tabs/compile-tab.js
View file @ f9e518ac
/* global */ /* global */
var $ = require('jquery') var $ = require('jquery')
var yo = require('yo-yo') var yo = require('yo-yo')
var parseContracts = require('../contract/contractParser') var parseContracts = require('../contract/contractParser')
...@@ -9,153 +8,12 @@ var modalDialog = require('../ui/modaldialog') ...@@ -9,153 +8,12 @@ var modalDialog = require('../ui/modaldialog')
var modalDialogCustom = require('../ui/modal-dialog-custom') var modalDialogCustom = require('../ui/modal-dialog-custom')
var TreeView = require('remix-debugger').ui.TreeView var TreeView = require('remix-debugger').ui.TreeView
var copyToClipboard = require('../ui/copy-to-clipboard') var copyToClipboard = require('../ui/copy-to-clipboard')
var remixLib = require('remix-lib')
// -------------- styling ---------------------- var css = require('./styles/compile-tab-styles')
var csjs = require('csjs-inject') var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.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 = compileTab
function compileTab (container, appAPI, appEvents, opts) { function compileTab (container, appAPI, appEvents, opts) {
if (typeof container === 'string') container = document.querySelector(container) if (typeof container === 'string') container = document.querySelector(container)
if (!container) throw new Error('no container given') if (!container) throw new Error('no container given')
...@@ -464,3 +322,5 @@ function detailsHelpSection () { ...@@ -464,3 +322,5 @@ function detailsHelpSection () {
'web3Deploy': 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract' 'web3Deploy': 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract'
} }
} }
module.exports = compileTab
src/app/tabs/debugger-tab.js
View file @ f9e518ac
var yo = require('yo-yo') var yo = require('yo-yo')
// -------------- styling ---------------------- var css = require('./styles/debugger-tab-styles')
var csjs = require('csjs-inject')
var styleGuide = require('remix-lib').ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs` function debuggerTab (container) {
.debuggerTabView {
padding: 2%;
}
.debugger {
margin-bottom: 1%;
${styles.rightPanel.debuggerTab.box_Debugger}
}
`
module.exports = debuggerTab
function debuggerTab (container, appAPI, events, opts) {
var el = yo` var el = yo`
<div class="${css.debuggerTabView} "id="debugView"> <div class="${css.debuggerTabView} "id="debugView">
<div id="debugger" class="${css.debugger}"></div> <div id="debugger" class="${css.debugger}"></div>
...@@ -24,3 +9,5 @@ function debuggerTab (container, appAPI, events, opts) { ...@@ -24,3 +9,5 @@ function debuggerTab (container, appAPI, events, opts) {
container.appendChild(el) container.appendChild(el)
return el return el
} }
module.exports = debuggerTab
src/app/tabs/plugin-tab.js
View file @ f9e518ac
var yo = require('yo-yo') var yo = require('yo-yo')
var css = require('./styles/plugin-tab-styles')
// -------------- styling ---------------------- function plugintab (container, url) {
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) {
var el = yo` var el = yo`
<div class="${css.pluginTabView}" id="pluginView"> <div class="${css.pluginTabView}" id="pluginView">
<iframe class="${css.iframe}" src="${url}/index.html"></iframe> <iframe class="${css.iframe}" src="${url}/index.html"></iframe>
...@@ -26,3 +9,5 @@ function plugintab (container, appAPI, events, opts, url) { ...@@ -26,3 +9,5 @@ function plugintab (container, appAPI, events, opts, url) {
container.appendChild(el) container.appendChild(el)
return el return el
} }
module.exports = plugintab
src/app/tabs/run-tab.js
View file @ f9e518ac
...@@ -12,204 +12,15 @@ var Recorder = require('../../recorder') ...@@ -12,204 +12,15 @@ var Recorder = require('../../recorder')
var EventManager = require('remix-lib').EventManager var EventManager = require('remix-lib').EventManager
var addTooltip = require('../ui/tooltip') var addTooltip = require('../ui/tooltip')
// -------------- styling ----------------------
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('remix-lib').ui.themeChooser var css = require('./styles/run-tab-styles')
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 instanceContainer = yo`<div class="${css.instanceContainer}"></div>` var instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instances</div>` var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instances</div>`
var pendingTxsText = yo`<span></span>` var pendingTxsText = yo`<span></span>`
function runTab (container, appAPI, appEvents, opts) { function runTab (container, appAPI, appEvents) {
var events = new EventManager() var events = new EventManager()
var clearInstanceElement = yo`<i class="${css.clearinstance} fa fa-minus-square-o" title="Clear Instances List" aria-hidden="true"></i>` 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) { ...@@ -630,3 +441,5 @@ function settings (container, appAPI, appEvents) {
return el return el
} }
module.exports = runTab
src/app/tabs/settings-tab.js
View file @ f9e518ac
...@@ -5,85 +5,12 @@ var QueryParams = require('../../lib/query-params') ...@@ -5,85 +5,12 @@ var QueryParams = require('../../lib/query-params')
var remixLib = require('remix-lib') var remixLib = require('remix-lib')
var Storage = remixLib.Storage var Storage = remixLib.Storage
var styleGuide = remixLib.ui.themeChooser var styleGuide = remixLib.ui.themeChooser
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styles = styleGuide.chooser()
var helper = require('../../lib/helper') var helper = require('../../lib/helper')
var modal = require('../ui/modal-dialog-custom') var modal = require('../ui/modal-dialog-custom')
var css = csjs` var css = require('./styles/settings-tab-styles')
.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
function SettingsTab (container, appAPI, appEvents, opts) { function SettingsTab (container, appAPI, appEvents) {
if (typeof container === 'string') container = document.querySelector(container) if (typeof container === 'string') container = document.querySelector(container)
if (!container) throw new Error('no container given') if (!container) throw new Error('no container given')
...@@ -305,3 +232,5 @@ function loadVersion (version, queryParams, appAPI, el) { ...@@ -305,3 +232,5 @@ function loadVersion (version, queryParams, appAPI, el) {
setVersionText('(loading)', el) setVersionText('(loading)', el)
} }
} }
module.exports = SettingsTab
src/app/tabs/styles/analysis-tab-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/tabs/styles/compile-tab-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/tabs/styles/debugger-tab-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/tabs/styles/plugin-tab-styles.js 0 → 100644
View file @ f9e518ac
var csjs = require('csjs-inject')
var css = csjs`
.pluginTabView {
height: 100%;
width: 100%;
}
.iframe {
height: 100%;
width: 100%;
border: 0;
}
`
module.exports = css
src/app/tabs/styles/run-tab-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/tabs/styles/settings-tab-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/tabs/styles/support-tab-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/tabs/styles/tabbed-menu-styles.js 0 → 100644
View file @ f9e518ac
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
src/app/tabs/support-tab.js
View file @ f9e518ac
var yo = require('yo-yo') var yo = require('yo-yo')
// -------------- styling ---------------------- var css = require('./styles/support-tab-styles')
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 infoText = yo` var infoText = yo`
<div> <div>
...@@ -65,9 +11,7 @@ var infoText = yo` ...@@ -65,9 +11,7 @@ var infoText = yo`
</div> </div>
` `
module.exports = supportTab function supportTab (container) {
function supportTab (container, appAPI, events, opts) {
var el = yo` var el = yo`
<div class="${css.supportTabView} "id="supportView"> <div class="${css.supportTabView} "id="supportView">
<div> <div>
...@@ -90,3 +34,5 @@ function supportTab (container, appAPI, events, opts) { ...@@ -90,3 +34,5 @@ function supportTab (container, appAPI, events, opts) {
function openLink () { function openLink () {
window.open('https://gitter.im/ethereum/remix') window.open('https://gitter.im/ethereum/remix')
} }
module.exports = supportTab
src/app/tabs/tabbed-menu.js
View file @ f9e518ac
var yo = require('yo-yo') 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 helper = require('../../lib/helper')
var css = csjs` var css = require('./styles/tabbed-menu-styles')
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}
}
`
class TabbedMenu { class TabbedMenu {
constructor (tabView, api, events, opts) { constructor (tabView, events) {
var self = this var self = this
this.tabView = tabView this.tabView = tabView
this.events = events this.events = events
......
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