Skip to content

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

Merge pull request #575 from ethereum/theme

Refactoring for theme
parents 630703a1 94aa6422
Hide whitespace changes
Inline Side-by-side
Showing with 670 additions and 187 deletions
src/ui/BasicPanel.js
View file @ b90bca18
......@@ -3,6 +3,14 @@ var style = require('./styles/basicStyles')
var yo = require('yo-yo')
var ui = require('../helpers/ui')
var csjs = require('csjs-inject')
var css = csjs`
.container {
width: 70%;
}
`
function BasicPanel (_name, _width, _height) {
this.data
this.name = _name
......@@ -24,7 +32,8 @@ BasicPanel.prototype.show = function () {
}
BasicPanel.prototype.render = function () {
var view = yo`<div id='container' style=${ui.formatCss({'width': this.width}, style.panel.container)}>
var view = yo`
<div css=${css.container} id='container' style=${ui.formatCss({'width': this.width})}>
<div style=${ui.formatCss(style.panel.title)}>
${this.name}
</div>
......
src/ui/ButtonNavigator.js
View file @ b90bca18
......@@ -14,21 +14,24 @@ var css = csjs`
.stepButtons {
width: 100%;
display: flex;
justify-content: center
justify-content: center;
}
.stepButton {
${styles.button}
${styles.rightPanel.debuggerTab.button_Debugger}
}
.jumpButtons {
width: 100%;
display: flex;
justify-content: center
justify-content: center;
}
.jumpButton {
${styles.button}
${styles.rightPanel.debuggerTab.button_Debugger}
}
.navigator {
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
}
.navigator:hover {
color: ${styles.colors.black}
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
}
`
......
src/ui/CodeListView.js
View file @ b90bca18
......@@ -4,7 +4,18 @@ var yo = require('yo-yo')
var ui = require('../helpers/ui')
var DropdownPanel = require('./DropdownPanel')
var EventManager = require('../lib/eventManager')
var csjs = require('csjs-inject')
var styleGuide = require('./styles/style-guide')
var styles = styleGuide()
var css = csjs`
.instructions {
${styles.rightPanel.debuggerTab.box_Debugger}
width: 75%;
overflow-y: scroll;
max-height: 250px;
}
`
function CodeListView (_parent, _codeManager) {
this.event = new EventManager()
this.parent = _parent
......@@ -69,7 +80,7 @@ CodeListView.prototype.renderAssemblyItems = function () {
var codeView = this.code.map(function (item, i) {
return yo`<div key=${i} value=${i}><span>${item}</span></div>`
})
return yo`<div id='asmitems' ref='itemsList' style=${ui.formatCss(style.instructionsList)}>
return yo`<div class=${css.instructions} id='asmitems' ref='itemsList'>
${codeView}
</div>`
}
......
src/ui/DropdownPanel.js
View file @ b90bca18
......@@ -2,10 +2,38 @@
var yo = require('yo-yo')
var ui = require('../helpers/ui')
var styleDropdown = require('./styles/dropdownPanel')
var basicStyles = require('./styles/basicStyles')
var TreeView = require('./TreeView')
var EventManager = require('../lib/eventManager')
var csjs = require('csjs-inject')
var styleGuide = require('./styles/style-guide')
var styles = styleGuide()
var css = csjs`
.title {
margin-top: 10px;
${styles.rightPanel.debuggerTab.dropdown_Debugger}
display: flex;
align-items: center;
}
.name {
font-weight: bold;
}
.icon {
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
margin-right: 5%;
}
.eyeButton {
${styles.rightPanel.debuggerTab.button_Debugger}
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
margin: 3px;
float: right;
}
.eyeButton:hover {
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
}
`
function DropdownPanel (_name, _opts) {
this.event = new EventManager()
if (!_opts) {
......@@ -79,12 +107,12 @@ DropdownPanel.prototype.render = function (overridestyle) {
to {transform:rotate(359deg);}
}
</style>
<div class='title' style=${ui.formatCss(styleDropdown.title)} onclick=${function () { self.toggle() }}>
<div style=${ui.formatCss(styleDropdown.caret)} class='fa fa-caret-right'></div>
<div style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div><span></span>
<div class='${css.title} title' onclick=${function () { self.toggle() }}>
<div class='${css.icon} fa fa-caret-right'></div>
<div class=${css.name}>${this.name}</div><span></span>
</div>
<div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
<button onclick=${function () { self.toggleRaw() }} style=${ui.formatCss(basicStyles.button, styleDropdown.copyBtn)} title='raw' class="btn fa fa-eye" type="button">
<button onclick=${function () { self.toggleRaw() }} title='raw' class="${css.eyeButton} btn fa fa-eye" type="button">
</button>
<i class="fa fa-refresh" style=${ui.formatCss(styleDropdown.inner, overridestyle, {display: 'none', 'margin-left': '4px', 'margin-top': '4px', 'animation': 'spin 2s linear infinite'})} aria-hidden="true"></i>
<div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'>${content}</div>
......@@ -110,11 +138,11 @@ DropdownPanel.prototype.toggle = function () {
var caret = this.view.querySelector('.title').firstElementChild
if (el.style.display === '') {
el.style.display = 'none'
caret.className = 'fa fa-caret-right'
caret.className = `${css.icon} fa fa-caret-right`
this.event.trigger('hide', [])
} else {
el.style.display = ''
caret.className = 'fa fa-caret-down'
caret.className = `${css.icon} fa fa-caret-down`
this.event.trigger('show', [])
}
}
......@@ -124,7 +152,7 @@ DropdownPanel.prototype.hide = function () {
var caret = this.view.querySelector('.title').firstElementChild
var el = this.view.querySelector('.dropdownpanel')
el.style.display = 'none'
caret.className = 'fa fa-caret-right'
caret.className = `${css.icon} fa fa-caret-right`
this.event.trigger('hide', [])
}
}
......@@ -134,7 +162,7 @@ DropdownPanel.prototype.show = function () {
var caret = this.view.querySelector('.title').firstElementChild
var el = this.view.querySelector('.dropdownpanel')
el.style.display = ''
caret.className = 'fa fa-caret-down'
caret.className = `${css.icon} fa fa-caret-down`
this.event.trigger('show', [])
}
}
......
src/ui/TxBrowser.js
View file @ b90bca18
......@@ -25,7 +25,7 @@ var css = csjs`
justify-content: center;
}
.txinput {
${styles.inputField}
${styles.rightPanel.debuggerTab.input_Debugger}
min-width: 30px;
margin: 3px;
}
......@@ -35,10 +35,14 @@ var css = csjs`
justify-content: center;
}
.txbutton {
${styles.button}
${styles.rightPanel.debuggerTab.button_Debugger}
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
}
.txbutton:hover {
color: ${styles.colors.black};
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
}
.txinfo {
margin-top: 5px;
}
`
function TxBrowser (_parent) {
......@@ -192,7 +196,7 @@ TxBrowser.prototype.render = function () {
</div>
</div>
<span id='error'></span>
<div style=${ui.formatCss(style.transactionInfo)} id='txinfo'>
<div style=${css.txinfo} id='txinfo'>
${this.basicPanel.render()}
</div>
</div>`
......
src/ui/styles/style-guide.js
View file @ b90bca18
......@@ -4,155 +4,267 @@ module.exports = styleGuide
function styleGuide () {
/* --------------------------------------------------------------------------
COLORS
CSS PROPERTIES
-------------------------------------------------------------------------- */
var colors = {
// BASIC COLORS (B&W and transparent)
transparent: 'transparent',
white: 'hsl(0, 0%, 100%)',
black: 'hsl(0, 0%, 0%)',
opacityBlack: 'hsla(0, 0%, 0%, .4)',
// BLUE
blue: 'hsla(229, 75%, 87%, 1)',
lightBlue: 'hsla(229, 75%, 87%, .5)',
backgroundBlue: 'hsla(229, 100%, 97%, 1)',
// GREY
grey: 'hsla(0, 0%, 40%, 1)',
lightGrey: 'hsla(0, 0%, 40%, .5)',
veryLightGrey: 'hsla(0, 0%, 40%, .2)',
// RED
red: 'hsla(0, 82%, 82%, 1)',
lightRed: 'hsla(0, 82%, 82%, .5)',
// GREEN
green: 'hsla(141, 75%, 84%, 1)',
lightGreen: 'hsla(141, 75%, 84%, .5)',
// PINK
pink: 'hsla(300, 69%, 76%, 1)',
lightPink: 'hsla(300, 69%, 76%, .5)',
// YELLOW
orange: 'hsla(44, 100%, 50%, 1)',
lightOrange: 'hsla(44, 100%, 50%, .5)',
// VIOLET
violet: 'hsla(240, 64%, 68%, 1)'
}
var cssProperties = {
/* ------------------------------------------------------
COLORS
------------------------------------------------------ */
colors: {
// BASIC COLORS (B&W and transparent)
transparent: 'transparent',
white: 'hsl(0, 0%, 100%)',
black: 'hsl(0, 0%, 0%)',
opacityBlack: 'hsla(0, 0%, 0%, .4)',
// BLUE
blue: 'hsla(229, 75%, 87%, 1)',
lightBlue: 'hsla(229, 75%, 87%, .5)',
backgroundBlue: 'hsla(229, 100%, 97%, 1)',
// GREY
grey: 'hsla(0, 0%, 40%, 1)',
lightGrey: 'hsla(0, 0%, 40%, .5)',
veryLightGrey: 'hsla(0, 0%, 40%, .2)',
// RED
strongRed: 'hsla(0, 100%, 71%, 1)',
red: 'hsla(0, 82%, 82%, 1)',
lightRed: 'hsla(0, 82%, 82%, .5)',
// GREEN
green: 'hsla(141, 75%, 84%, 1)',
lightGreen: 'hsla(141, 75%, 84%, .5)',
// PINK
pink: 'hsla(300, 69%, 76%, 1)',
lightPink: 'hsla(300, 69%, 76%, .5)',
// YELLOW
orange: 'hsla(44, 100%, 50%, 1)',
lightOrange: 'hsla(44, 100%, 50%, .5)',
// VIOLET
violet: 'hsla(240, 64%, 68%, 1)'
},
/* --------------------------------------------------------------------------
/* ------------------------------------------------------
FONTS
-------------------------------------------------------------------------- */
------------------------------------------------------ */
fonts: {
font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif'
},
var texts = {
'title-XL': `
font-size : 2em;
font-weight : 700;
letter-spacing : .05em;
`,
'title-L': `
font-size : 1em;
font-weight : 600;
`,
'title-M': `
font-size : 1em;
font-weight : 400;
`,
'title-S': `
font-size : .8em;
font-weight : 300;
`,
'text': `
font-size : .8em;
`
/* ------------------------------------------------------
BORDERS
------------------------------------------------------ */
borders: {
primary_borderRadius: '3px',
secondary_borderRadius: '5px'
}
}
/* --------------------------------------------------------------------------
TEXT-BOXES
-------------------------------------------------------------------------- */
var textBoxes = {
'display-box': `
font-size : 12px;
padding : 10px 15px;
line-height : 20px;
background : ${colors.white};
border-radius : 3px;
border : 1px solid ${colors.veryLightGrey};
overflow : hidden;
word-break : break-word;
width : 100%;
`,
'info-text-box': `
background-color : ${colors.white};
line-height : 20px;
border : .2em dotted ${colors.lightGrey};
padding : 8px 15px;
border-radius : 5px;
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
`,
'warning-text-box': `
background-color : ${colors.lightOrange};
line-height : 20px;
padding : 8px 15px;
border-radius : 5px;
border : .2em dotted ${colors.orange};
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
`,
'error-text-box': `
background-color : ${colors.lightRed};
line-height : 20px;
padding : 1em 1em .5em 1em;
border-radius : 3px;
box-shadow : rgba(0,0,0,.2) 0 1px 4px;
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
`,
'title-box': `
margin-bottom : 0.4em;
padding : .3em;
background-color : transparent;
font-weight : bold;
display : flex;
justify-content : space-between;
word-wrap : break-word;
position : relative;
border-radius : 3px;
overflow : hidden;
word-break : normal;
`,
'input': `
border : 1px solid ${colors.veryLightGrey};
height : 25px;
width : 250px;
border-radius : 3px;
padding : 0 8px;
overflow : hidden;
word-break : normal;
`
}
/* --------------------------------------------------------------------------
BUTTONS
APP PROPERTIES
-------------------------------------------------------------------------- */
var buttons = {
'button': `
var appProperties = {
/* ------------------------------------------------------
BACKGROUND COLORS
------------------------------------------------------ */
primary_BackgroundColor: cssProperties.colors.white,
secondary_BackgroundColor: cssProperties.colors.backgroundBlue,
dark_BackgroundColor: cssProperties.colors.veryLightGrey,
light_BackgroundColor: cssProperties.colors.white,
/* ------------------------------------------------------
RESIZING
******************************************************** */
ghostBar: cssProperties.colors.lightBlue,
draggingBar: cssProperties.colors.lightBlue,
/* ------------------------------------------------------
TEXT COLORS
******************************************************** */
mainText_Color: cssProperties.colors.black,
supportText_Color: cssProperties.colors.grey,
errorText_Color: cssProperties.colors.strongRed,
warningText_Color: cssProperties.colors.orange,
infoText_Color: cssProperties.colors.violet,
/* ------------------------------------------------------
ICONS
******************************************************** */
icon_Color: cssProperties.colors.black,
icon_HoverColor: cssProperties.colors.orange,
/* ------------------------------------------------------
MESSAGES
******************************************************** */
// Success
success_TextColor: cssProperties.colors.black,
success_BackgroundColor: cssProperties.colors.lightGreen,
success_BorderColor: cssProperties.colors.green,
// Danger
danger_TextColor: cssProperties.colors.black,
danger_BackgroundColor: cssProperties.colors.lightRed,
danger_BorderColor: cssProperties.colors.red,
// Warning
warning_TextColor: cssProperties.colors.black,
warning_BackgroundColor: cssProperties.colors.lightOrange,
warning_BorderColor: cssProperties.colors.orange,
/* ------------------------------------------------------
DROPDOWN
******************************************************** */
dropdown_TextColor: cssProperties.colors.black,
dropdown_BackgroundColor: cssProperties.colors.white,
dropdown_BorderColor: cssProperties.colors.veryLightGrey,
/* ------------------------------------------------------
INPUT
******************************************************** */
input_TextColor: cssProperties.colors.black,
input_BackgroundColor: cssProperties.colors.white,
input_BorderColor: cssProperties.colors.veryLightGrey,
/* ------------------------------------------------------
SOLID BORDER BOX
******************************************************** */
solidBorderBox_TextColor: cssProperties.colors.black,
solidBorderBox_BackgroundColor: cssProperties.colors.white,
solidBorderBox_BorderColor: cssProperties.colors.veryLightGrey,
/* ------------------------------------------------------
BUTTONS
******************************************************** */
/* .................
PRIMARY
.................. */
primaryButton_TextColor: cssProperties.colors.black,
primaryButton_BackgroundColor: cssProperties.colors.lightBlue,
primaryButton_BorderColor: cssProperties.colors.lightBlue,
/* .................
SECONDARY
.................. */
secondaryButton_TextColor: cssProperties.colors.black,
secondaryButton_BackgroundColor: cssProperties.colors.veryLightGrey,
secondaryButton_BorderColor: cssProperties.colors.veryLightGrey,
/* .................
SUCCESS
.................. */
successButton_TextColor: cssProperties.colors.white,
successButton_BackgroundColor: cssProperties.colors.green,
successButton_BorderColor: cssProperties.colors.green,
/* .................
DANGER
.................. */
dangerButton_TextColor: cssProperties.colors.white,
dangerButton_BackgroundColor: cssProperties.colors.red,
dangerButton_BorderColor: cssProperties.colors.red,
/* .................
WARNING
.................. */
warningButton_TextColor: cssProperties.colors.white,
warningButton_BackgroundColor: cssProperties.colors.lightOrange,
warningButton_BorderColor: cssProperties.colors.lightOrange,
/* .................
INFO
.................. */
infoButton_TextColor: cssProperties.colors.black,
infoButton_BackgroundColor: cssProperties.colors.white,
infoButton_BorderColor: cssProperties.colors.veryLightGrey,
/* .................
SOLIDITY
.................. */
// CALL
callButton_TextColor: cssProperties.colors.black,
callButton_BackgroundColor: cssProperties.colors.lightBlue,
callButton_BorderColor: cssProperties.colors.lightBlue,
// TRANSACTION
transactButton_TextColor: cssProperties.colors.black,
transactButton_BackgroundColor: cssProperties.colors.lightRed,
transactButton_BorderColor: cssProperties.colors.lightRed,
// PAYABLE TRANSACTION
transactPayableButton_TextColor: cssProperties.colors.black,
transactPayableButton_BackgroundColor: cssProperties.colors.red,
transactPayableButton_BorderColor: cssProperties.colors.red,
/* ------------------------------------------------------
UI ELEMENTS
******************************************************** */
uiElements: {
solidBorderBox: (opts = {}) => `
background-color : ${opts.BackgroundColor};
border : 1px solid ${opts.BorderColor};
color : ${opts.Color};
border-radius : ${cssProperties.borders.primary_borderRadius};
font-size : 12px;
padding : 10px 15px;
line-height : 20px;
overflow : hidden;
word-break : break-word;
width : 100%;
`,
dottedBorderBox: (opts = {}) => `
background-color : ${opts.BackgroundColor};
border : .2em dotted ${opts.BorderColor};
color : ${opts.Color};
border-radius : ${cssProperties.borders.secondary_borderRadius};
line-height : 20px;
padding : 8px 15px;
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
`,
inputField: (opts = {}) => `
background-color : ${opts.BackgroundColor};
border : 1px solid ${opts.BorderColor};
color : ${opts.Color};
border-radius : ${cssProperties.borders.secondary_borderRadius};
height : 25px;
width : 250px;
padding : 0 8px;
overflow : hidden;
word-break : normal;
`,
dropdown: (opts = {}) => `
background-color : ${opts.BackgroundColor};
border : 1px solid ${opts.BorderColor};
color : ${opts.Color};
font-size : 12px;
font-weight : bold;
padding : 0 8px;
text-decoration : none;
cursor : pointer;
border-radius : 3px;
height : 25px;
width : 250px;
text-align : center;
overflow : hidden;
word-break : normal;
`,
button: (opts = {}) => `
margin : 1px;
background-color : ${opts.BackgroundColor};
border : .3px solid ${opts.BorderColor};
color : ${opts.Color};
display : flex;
align-items : center;
justify-content : center;
border-color : transparent;
border-radius : 3px;
border : .3px solid ${colors.veryLightGrey};
cursor : pointer;
min-height : 25px;
max-height : 25px;
......@@ -161,42 +273,358 @@ function styleGuide () {
font-size : 12px;
overflow : hidden;
word-break : normal;
background-color : #E8E8E8;
`,
`
}
}
'button:hover': `
opacity : 0.8;
`,
/* --------------------------------------------------------------------------
'dropdown': `
font-size : 12px;
font-weight : bold;
padding : 0 8px;
text-decoration : none;
background-color : ${colors.white};
cursor : pointer;
border : 1px solid ${colors.veryLightGrey};
border-radius : 3px;
height : 25px;
width : 250px;
text-align : center;
overflow : hidden;
word-break : normal;
`
REMIX PROPERTIES
-------------------------------------------------------------------------- */
var remixProperties = {
/* ------------------------------------------------------
REMIX GENERAL
/* ------------------------------------------------------ */
remix: {
modalDialog_BackgroundColor_Primary: appProperties.primary_BackgroundColor,
modalDialog_text_Primary: appProperties.mainText_Color,
modalDialog_text_Secondary: appProperties.supportText_Color,
modalDialog_Header_Footer_BackgroundColor: appProperties.secondary_BackgroundColor,
modalDialog_Header_Footer_Color: appProperties.mainText_Color,
modalDialog_BoxDottedBorder_BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
modalDialog_BoxDottedBorder_BorderColor: appProperties.solidBorderBox_BorderColor,
modalDialog_BoxDottedBorder_Color: appProperties.solidBorderBox_TextColor,
modalDialog_CopyToClipboard_Icon_Color: appProperties.icon_Color,
modalDialog_CopyToClipboard_Icon_HoverColor: appProperties.icon_HoverColor
},
/* ------------------------------------------------------
LEFT PANEL (FILE PANEL)
/* ------------------------------------------------------ */
leftPanel: {
backgroundColor_Panel: appProperties.primary_BackgroundColor,
backgroundColor_FileExplorer: appProperties.secondary_BackgroundColor,
text_Primary: appProperties.mainText_Color,
text_Secondary: appProperties.supportText_Color,
bar_Ghost: appProperties.ghostBar,
bar_Dragging: appProperties.draggingBar,
icon_Color_Menu: appProperties.icon_Color,
icon_HoverColor_Menu: appProperties.icon_HoverColor,
icon_Color_TogglePanel: appProperties.icon_Color,
icon_HoverColor_TogglePanel: appProperties.icon_HoverColor
},
/* ------------------------------------------------------
EDITOR
/* ------------------------------------------------------ */
editor: {
backgroundColor_Panel: appProperties.primary_BackgroundColor,
backgroundColor_Editor: appProperties.light_BackgroundColor,
backgroundColor_Tabs_Highlights: appProperties.secondary_BackgroundColor,
backgroundColor_Editor_Context_Highlights: appProperties.dark_BackgroundColor,
backgroundColor_Editor_Context_Error_Highlights: appProperties.error_BackgroundColor,
backgroundColor_DebuggerMode: appProperties.warning_BackgroundColor,
text_Primary: appProperties.mainText_Color,
text_Secondary: appProperties.supportText_Color,
text_Editor: '',
icon_Color_Editor: appProperties.icon_Color,
icon_HoverColor_Editor: appProperties.icon_HoverColor
},
/* ------------------------------------------------------
TERMINAL
/* ------------------------------------------------------ */
terminal: {
backgroundColor_Menu: appProperties.secondary_BackgroundColor,
backgroundColor_Terminal: appProperties.dark_BackgroundColor,
text_Primary: appProperties.mainText_Color,
text_Secondary: appProperties.supportText_Color,
text_RegularLog: appProperties.mainText_Color,
text_InfoLog: appProperties.supportText_Color,
text_ErrorLog: appProperties.errorText_Color,
text_Title_TransactionLog: appProperties.infoText_Color,
text_Regular_TransactionLog: appProperties.supportText_Color,
icon_Color_TogglePanel: appProperties.icon_Color,
icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,
icon_Color_Menu: appProperties.icon_Color,
icon_HoverColor_Menu: appProperties.icon_HoverColor,
icon_Color_CopyToClipboard: appProperties.icon_Color,
icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor,
bar_Ghost: appProperties.ghostBar,
bar_Dragging: appProperties.draggingBar,
input_Search_MenuBar: appProperties.uiElements.inputField({
BackgroundColor: appProperties.input_BackgroundColor,
BorderColor: appProperties.input_BorderColor,
Color: appProperties.input_TextColor
}),
dropdown_Filter_MenuBar: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor,
Color: appProperties.dropdown_TextColor
}),
button_Log_Debug: appProperties.uiElements.button({
BackgroundColor: appProperties.warningButton_BackgroundColor,
BorderColor: appProperties.warningButton_BorderColor,
Color: appProperties.warningButton_TextColor
}),
button_Log_Details: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.warningButton_BorderColor,
Color: appProperties.warningButton_TextColor
})
},
/* ------------------------------------------------------
RIGHT PANEL
/* ------------------------------------------------------ */
rightPanel: {
backgroundColor_Panel: appProperties.primary_BackgroundColor,
backgroundColor_Tab: appProperties.secondary_BackgroundColor,
BackgroundColor_Pre: appProperties.light_BackgroundColor,
text_Primary: appProperties.mainText_Color,
text_Secondary: appProperties.supportText_Color,
bar_Ghost: appProperties.ghostBar,
bar_Dragging: appProperties.draggingBar,
icon_Color_TogglePanel: appProperties.icon_Color,
icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,
message_Warning_BackgroundColor: appProperties.warning_BackgroundColor,
message_Warning_BorderColor: appProperties.warning_BorderColor,
message_Warning_Color: appProperties.warning_TextColor,
message_Error_BackgroundColor: appProperties.danger_BackgroundColor,
message_Error_BorderColor: appProperties.danger_BorderColor,
message_Error_Color: appProperties.danger_TextColor,
message_Success_BackgroundColor: appProperties.success_BackgroundColor,
message_Success_BorderColor: appProperties.success_BorderColor,
message_Success_Color: appProperties.success_TextColor,
/* ::::::::::::::
COMPILE TAB
::::::::::::::: */
compileTab: {
button_Compile: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor,
BorderColor: appProperties.primaryButton_BorderColor,
Color: appProperties.primaryButton_TextColor
}),
button_Details: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor
}),
button_Publish: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor
}),
dropdown_CompileContract: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor,
Color: appProperties.dropdown_TextColor
}),
box_CompileContainer: appProperties.uiElements.solidBorderBox({
BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
BorderColor: appProperties.solidBorderBox_BorderColor,
Color: appProperties.solidBorderBox_TextColor
}),
icon_WarnCompilation_Color: appProperties.warning_BackgroundColor
},
/* ::::::::::::::
RUN TAB
::::::::::::::: */
runTab: {
box_RunTab: appProperties.uiElements.solidBorderBox({
BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
BorderColor: appProperties.solidBorderBox_BorderColor,
Color: appProperties.solidBorderBox_TextColor
}),
dropdown_RunTab: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor,
Color: appProperties.dropdown_TextColor
}),
input_RunTab: appProperties.uiElements.inputField({
BackgroundColor: appProperties.input_BackgroundColor,
BorderColor: appProperties.input_BorderColor,
Color: appProperties.input_TextColor
}),
box_Instance: appProperties.uiElements.solidBorderBox({
BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
BorderColor: appProperties.solidBorderBox_BorderColor,
Color: appProperties.solidBorderBox_TextColor
}),
button_atAddress: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor,
BorderColor: appProperties.primaryButton_BorderColor,
Color: appProperties.primaryButton_TextColor
}),
button_Create: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor,
BorderColor: appProperties.primaryButton_BorderColor,
Color: appProperties.primaryButton_TextColor
}),
button_Instance_Call: appProperties.uiElements.button({
BackgroundColor: appProperties.callButton_BackgroundColor,
BorderColor: appProperties.callButton_BorderColor,
Color: appProperties.callButton_TextColor
}),
button_Instance_Transact: appProperties.uiElements.button({
BackgroundColor: appProperties.transactButton_BackgroundColor,
BorderColor: appProperties.transactButton_BorderColor,
Color: appProperties.transactButton_TextColor
}),
button_Instance_TransactPayable: appProperties.uiElements.button({
BackgroundColor: appProperties.transactPayableButton_BackgroundColor,
BorderColor: appProperties.transactPayableButton_BorderColor,
Color: appProperties.transactPayableButton_TextColor
}),
icon_Color_Instance_CopyToClipboard: appProperties.icon_Color,
icon_HoverColor_Instance_CopyToClipboard: appProperties.icon_HoverColor
},
/* ::::::::::::::
SETTINGS TAB
::::::::::::::: */
settingsTab: {
box_SolidityVersionInfo: appProperties.uiElements.dottedBorderBox({
BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
BorderColor: appProperties.solidBorderBox_BorderColor,
Color: appProperties.solidBorderBox_TextColor
}),
dropdown_SelectCompiler: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor,
Color: appProperties.dropdown_TextColor
})
},
/* ::::::::::::::
DEBUGGER TAB
::::::::::::::: */
debuggerTab: {
text_Primary: appProperties.mainText_Color,
text_Secondary: appProperties.supportText_Color,
box_Debugger: appProperties.uiElements.solidBorderBox({
BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
BorderColor: appProperties.solidBorderBox_BorderColor,
Color: appProperties.solidBorderBox_TextColor
}),
button_Debugger: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor
}),
button_Debugger_icon_Color: appProperties.icon_Color,
button_Debugger_icon_HoverColor: appProperties.icon_HoverColor,
dropdown_Debugger: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor,
Color: appProperties.dropdown_TextColor
}),
input_Debugger: appProperties.uiElements.inputField({
BackgroundColor: appProperties.input_BackgroundColor,
BorderColor: appProperties.input_BorderColor,
Color: appProperties.input_TextColor
}),
debuggerDropdowns_Instructions_Highlight_BackgroundColor: appProperties.secondary_BackgroundColor
},
/* ::::::::::::::
ANALYSIS TAB
::::::::::::::: */
analysisTab: {
button_Run_AnalysisTab: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor,
BorderColor: appProperties.primaryButton_BorderColor,
Color: appProperties.primaryButton_TextColor
}),
box_AnalysisContainer: appProperties.uiElements.solidBorderBox({
BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
BorderColor: appProperties.solidBorderBox_BorderColor,
Color: appProperties.solidBorderBox_TextColor
})
},
/* ::::::::::::::
SUPPORT TAB
::::::::::::::: */
supportTab: {
box_IframeContainer: appProperties.uiElements.solidBorderBox({
BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
BorderColor: appProperties.solidBorderBox_BorderColor,
Color: appProperties.solidBorderBox_TextColor
}),
box_SupportInfo: appProperties.uiElements.dottedBorderBox({
BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
BorderColor: appProperties.solidBorderBox_BorderColor,
Color: appProperties.solidBorderBox_TextColor
})
}
}
}
return {
textBoxL: textBoxes['display-box-L'],
infoTextBox: textBoxes['info-text-box'],
inputField: textBoxes['input'],
displayBox: textBoxes['display-box'],
warningTextBox: textBoxes['warning-text-box'],
titleL: texts['title-L'],
titleM: texts['title-M'],
dropdown: buttons['dropdown'],
button: buttons['button'],
colors: colors,
titleBox: textBoxes['title-box']
colors: cssProperties.colors,
appProperties: appProperties,
borders: cssProperties.borders,
leftPanel: remixProperties.leftPanel,
editor: remixProperties.editor,
terminal: remixProperties.terminal,
rightPanel: remixProperties.rightPanel,
remix: remixProperties.remix
}
}
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