Skip to content

B
baas-ide
Commit f7511bd3 authored by ninabreznik's avatar ninabreznik Committed by yann300
Browse files
Options

First draft - themeable Remix

parent b7f8f151
Show whitespace changes
Inline Side-by-side
Showing with 168 additions and 227 deletions
src/ui/ButtonNavigator.js
View file @ f7511bd3
...@@ -14,24 +14,24 @@ var css = csjs` ...@@ -14,24 +14,24 @@ var css = csjs`
.stepButtons { .stepButtons {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center justify-content: center;
} }
.stepButton { .stepButton {
${styles.button} ${styles.rightPanel.debuggerTab.button_Debugger}
} }
.jumpButtons { .jumpButtons {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center justify-content: center;
} }
.jumpButton { .jumpButton {
${styles.button} ${styles.rightPanel.debuggerTab.button_Debugger}
} }
.navigator { .navigator {
color: ${styles.colors.black} color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
} }
.navigator:hover { .navigator:hover {
color: ${styles.colors.orange} color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
} }
` `
......
src/ui/CodeListView.js
View file @ f7511bd3
...@@ -4,7 +4,18 @@ var yo = require('yo-yo') ...@@ -4,7 +4,18 @@ var yo = require('yo-yo')
var ui = require('../helpers/ui') var ui = require('../helpers/ui')
var DropdownPanel = require('./DropdownPanel') var DropdownPanel = require('./DropdownPanel')
var EventManager = require('../lib/eventManager') 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) { function CodeListView (_parent, _codeManager) {
this.event = new EventManager() this.event = new EventManager()
this.parent = _parent this.parent = _parent
...@@ -69,7 +80,7 @@ CodeListView.prototype.renderAssemblyItems = function () { ...@@ -69,7 +80,7 @@ CodeListView.prototype.renderAssemblyItems = function () {
var codeView = this.code.map(function (item, i) { var codeView = this.code.map(function (item, i) {
return yo`<div key=${i} value=${i}><span>${item}</span></div>` 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} ${codeView}
</div>` </div>`
} }
......
src/ui/DropdownPanel.js
View file @ f7511bd3
...@@ -13,25 +13,25 @@ var styles = styleGuide() ...@@ -13,25 +13,25 @@ var styles = styleGuide()
var css = csjs` var css = csjs`
.title { .title {
margin-top: 10px; margin-top: 10px;
${styles.dropdown} ${styles.rightPanel.debuggerTab.dropdown_Debugger}
display: flex; display: flex;
align-items: center; align-items: center;
} }
.name { .name {
color: ${styles.colors.black};
font-weight: bold; font-weight: bold;
} }
.icon { .icon {
color: ${styles.colors.black}; color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
margin-right: 5%; margin-right: 5%;
} }
.eyeButton { .eyeButton {
${styles.button} ${styles.rightPanel.debuggerTab.button_Debugger}
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
margin: 3px; margin: 3px;
float: right; float: right;
} }
.eyeButton:hover { .eyeButton:hover {
color: ${styles.colors.orange}; color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
} }
` `
......
src/ui/TxBrowser.js
View file @ f7511bd3
...@@ -25,7 +25,7 @@ var css = csjs` ...@@ -25,7 +25,7 @@ var css = csjs`
justify-content: center; justify-content: center;
} }
.txinput { .txinput {
${styles.inputField} ${styles.rightPanel.debuggerTab.input_Debugger}
min-width: 30px; min-width: 30px;
margin: 3px; margin: 3px;
} }
...@@ -35,11 +35,11 @@ var css = csjs` ...@@ -35,11 +35,11 @@ var css = csjs`
justify-content: center; justify-content: center;
} }
.txbutton { .txbutton {
${styles.button} ${styles.rightPanel.debuggerTab.button_Debugger}
color: ${styles.colors.black}; color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
} }
.txbutton:hover { .txbutton:hover {
color: ${styles.colors.orange}; color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
} }
.txinfo { .txinfo {
margin-top: 5px; margin-top: 5px;
......
src/ui/styles/style-guide.js
View file @ f7511bd3
...@@ -71,8 +71,8 @@ function styleGuide () { ...@@ -71,8 +71,8 @@ function styleGuide () {
/******************************************************** /********************************************************
BACKGROUND COLORS BACKGROUND COLORS
******************************************************** */ ******************************************************** */
primary_BackgroundColor: css_properties.colors.red, primary_BackgroundColor: css_properties.colors.white,
secondary_BackgroundColor: css_properties.colors.blue, secondary_BackgroundColor: css_properties.colors.backgroundBlue,
dark_BackgroundColor: css_properties.colors.veryLightGrey, dark_BackgroundColor: css_properties.colors.veryLightGrey,
light_BackgroundColor: css_properties.colors.white, light_BackgroundColor: css_properties.colors.white,
...@@ -118,7 +118,7 @@ function styleGuide () { ...@@ -118,7 +118,7 @@ function styleGuide () {
DROPDOWN DROPDOWN
******************************************************** */ ******************************************************** */
dropdown_TextColor: css_properties.colors.black, dropdown_TextColor: css_properties.colors.black,
dropdown_BackgroundColor: css_properties.colors.violet, dropdown_BackgroundColor: css_properties.colors.white,
dropdown_BorderColor: css_properties.colors.veryLightGrey, dropdown_BorderColor: css_properties.colors.veryLightGrey,
/******************************************************** /********************************************************
...@@ -132,7 +132,7 @@ function styleGuide () { ...@@ -132,7 +132,7 @@ function styleGuide () {
SOLID BORDER BOX SOLID BORDER BOX
******************************************************** */ ******************************************************** */
solidBorderBox_TextColor: css_properties.colors.black, solidBorderBox_TextColor: css_properties.colors.black,
solidBorderBox_BackgroundColor: css_properties.colors.violet, solidBorderBox_BackgroundColor: css_properties.colors.white,
solidBorderBox_BorderColor: css_properties.colors.veryLightGrey, solidBorderBox_BorderColor: css_properties.colors.veryLightGrey,
/******************************************************** /********************************************************
...@@ -262,9 +262,9 @@ function styleGuide () { ...@@ -262,9 +262,9 @@ function styleGuide () {
button: (opts = {}) => ` button: (opts = {}) => `
margin : 1px; margin : 1px;
background-color : ${css_properties.colors.veryLightGrey}; background-color : ${opts.BackgroundColor};
border : .3px solid ${css_properties.colors.veryLightGrey}; border : .3px solid ${opts.BorderColor};
color : ${css_properties.colors.black}; color : ${opts.Color};
display : flex; display : flex;
align-items : center; align-items : center;
justify-content : center; justify-content : center;
...@@ -292,7 +292,20 @@ var remix_properties = { ...@@ -292,7 +292,20 @@ var remix_properties = {
/******************************************************** /********************************************************
REMIX GENERAL REMIX GENERAL
/******************************************************** */ /******************************************************** */
remix: {}, remix: {
modalDialog_BackgroundColor_Primary: app_properties.primary_BackgroundColor,
modalDialog_text_Primary: app_properties.mainText_Color,
modalDialog_text_Secondary: app_properties.supportText_Color,
modalDialog_Header_Footer_BackgroundColor: app_properties.secondary_BackgroundColor,
modalDialog_Header_Footer_Color: app_properties.mainText_Color,
modalDialog_BoxDottedBorder_BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
modalDialog_BoxDottedBorder_BorderColor: app_properties.solidBorderBox_BorderColor,
modalDialog_BoxDottedBorder_Color: app_properties.solidBorderBox_TextColor,
modalDialog_CopyToClipboard_Icon_Color: app_properties.icon_Color,
modalDialog_CopyToClipboard_Icon_HoverColor: app_properties.icon_HoverColor
},
/******************************************************** /********************************************************
LEFT PANEL (FILE PANEL) LEFT PANEL (FILE PANEL)
...@@ -345,20 +358,22 @@ var remix_properties = { ...@@ -345,20 +358,22 @@ var remix_properties = {
text_Primary: app_properties.mainText_Color, text_Primary: app_properties.mainText_Color,
text_Secondary: app_properties.supportText_Color, text_Secondary: app_properties.supportText_Color,
text_InfoLog: app_properties.mainText_Color, text_RegularLog: app_properties.mainText_Color,
text_InfoLog: app_properties.supportText_Color,
text_ErrorLog: app_properties.errorText_Color, text_ErrorLog: app_properties.errorText_Color,
text_Title_TransactionLog: app_properties.warningText_Color, text_Title_TransactionLog: app_properties.warningText_Color,
text_Regular_TransactionLog: app_properties.supportText_Color, text_Regular_TransactionLog: app_properties.supportText_Color,
icon_Color_TogglePanel: app_properties.icon_Color, icon_Color_TogglePanel: app_properties.icon_Color,
icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, icon_HoverColor_TogglePanel: app_properties.icon_HoverColor,
icon_Color_Menu: app_properties.icon_Color,
icon_HoverColor_Menu: app_properties.icon_HoverColor,
icon_Color_CopyToClipboard: app_properties.icon_Color,
icon_HoverColor_CopyToClipboard: app_properties.icon_HoverColor,
bar_Ghost: app_properties.ghostBar, bar_Ghost: app_properties.ghostBar,
bar_Dragging: app_properties.draggingBar, bar_Dragging: app_properties.draggingBar,
icon_Color_Menu: app_properties.icon_Color,
icon_HoverColor_Menu: app_properties.icon_HoverColor,
input_Search_MenuBar: app_properties.uiElements.inputField({ input_Search_MenuBar: app_properties.uiElements.inputField({
BackgroundColor: app_properties.input_BackgroundColor, BackgroundColor: app_properties.input_BackgroundColor,
BorderColor: app_properties.input_BorderColor, BorderColor: app_properties.input_BorderColor,
...@@ -371,13 +386,17 @@ var remix_properties = { ...@@ -371,13 +386,17 @@ var remix_properties = {
Color: app_properties.dropdown_TextColor Color: app_properties.dropdown_TextColor
}), }),
button_Log_Details_BackgroundColor: app_properties.secondaryButton_BackgroundColor, button_Log_Debug: app_properties.uiElements.button({
button_Details_BorderColor: app_properties.secondaryButton_BorderColor, BackgroundColor: app_properties.warningButton_BackgroundColor,
button_Details_Color: app_properties.secondaryButton_TextColor, BorderColor: app_properties.warningButton_BorderColor,
Color: app_properties.warningButton_TextColor
}),
button_Log_Debug_BackgroundColor: app_properties.warningButton_BackgroundColor, button_Log_Details: app_properties.uiElements.button({
button_Debug_BorderColor: app_properties.warningButton_BorderColor, BackgroundColor: app_properties.secondaryButton_BackgroundColor,
button_Debug_Color: app_properties.warningButton_TextColor, BorderColor: app_properties.secondaryButton_BorderColor,
Color: app_properties.secondaryButton_TextColor
})
}, },
...@@ -388,6 +407,7 @@ var remix_properties = { ...@@ -388,6 +407,7 @@ var remix_properties = {
backgroundColor_Panel: app_properties.primary_BackgroundColor, backgroundColor_Panel: app_properties.primary_BackgroundColor,
backgroundColor_Tab: app_properties.secondary_BackgroundColor, backgroundColor_Tab: app_properties.secondary_BackgroundColor,
BackgroundColor_Pre: app_properties.light_BackgroundColor,
text_Primary: app_properties.mainText_Color, text_Primary: app_properties.mainText_Color,
text_Secondary: app_properties.supportText_Color, text_Secondary: app_properties.supportText_Color,
...@@ -398,27 +418,45 @@ var remix_properties = { ...@@ -398,27 +418,45 @@ var remix_properties = {
icon_Color_TogglePanel: app_properties.icon_Color, icon_Color_TogglePanel: app_properties.icon_Color,
icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, icon_HoverColor_TogglePanel: app_properties.icon_HoverColor,
message_Warning_BackgroundColor: app_properties.warning_BackgroundColor,
message_Warning_BorderColor: app_properties.warning_BorderColor,
message_Warning_Color: app_properties.warning_TextColor,
message_Error_BackgroundColor: app_properties.danger_BackgroundColor,
message_Error_BorderColor: app_properties.danger_BorderColor,
message_Error_Color: app_properties.danger_TextColor,
message_Success_BackgroundColor: app_properties.success_BackgroundColor,
message_Success_BorderColor: app_properties.success_BorderColor,
message_Success_Color: app_properties.success_TextColor,
/* :::::::::::::: /* ::::::::::::::
COMPILE TAB COMPILE TAB
::::::::::::::: */ ::::::::::::::: */
compileTab: { compileTab: {
button_Compile_BackgroundColor: app_properties.primaryButton_BackgroundColor, button_Compile: app_properties.uiElements.button({
button_Compile_BorderColor: app_properties.primaryButton_BorderColor, BackgroundColor: app_properties.primaryButton_BackgroundColor,
button_Compile_Color: app_properties.primaryButton_TextColor, BorderColor: app_properties.primaryButton_BorderColor,
Color: app_properties.primaryButton_TextColor
}),
button_Details_BackgroundColor: app_properties.secondaryButton_BackgroundColor, button_Details: app_properties.uiElements.button({
button_Details_BorderColor: app_properties.secondaryButton_BorderColor, BackgroundColor: app_properties.secondaryButton_BackgroundColor,
button_Details_Color: app_properties.secondaryButton_TextColor, BorderColor: app_properties.secondaryButton_BorderColor,
Color: app_properties.secondaryButton_TextColor
}),
button_Publish_BackgroundColor: app_properties.secondaryButton_BackgroundColor, button_Publish: app_properties.uiElements.button({
button_Publish_BorderColor: app_properties.secondaryButton_BorderColor, BackgroundColor: app_properties.secondaryButton_BackgroundColor,
button_Publish_Color: app_properties.secondaryButton_TextColor, BorderColor: app_properties.secondaryButton_BorderColor,
Color: app_properties.secondaryButton_TextColor
}),
dropdown_CompileContract: app_properties.uiElements.dropdown({ dropdown_CompileContract: app_properties.uiElements.dropdown({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BackgroundColor: app_properties.dropdown_BackgroundColor,
BorderColor:app_properties.solidBorderBox_BorderColor, BorderColor: app_properties.dropdown_BorderColor,
Color: app_properties.solidBorderBox_TextColor Color: app_properties.dropdown_TextColor
}), }),
box_CompileContainer: app_properties.uiElements.solidBorderBox({ box_CompileContainer: app_properties.uiElements.solidBorderBox({
...@@ -427,26 +465,7 @@ var remix_properties = { ...@@ -427,26 +465,7 @@ var remix_properties = {
Color: app_properties.solidBorderBox_TextColor Color: app_properties.solidBorderBox_TextColor
}), }),
modalDialog_Details_BackgroundColor_Primary: app_properties.primary_BackgroundColor, icon_WarnCompilation_Color: app_properties.warning_BackgroundColor,
modalDialog_Details_Header_BackgroundColor: app_properties.secondary_BackgroundColor,
modalDialog_Details_Header_Color: app_properties.mainText_Color,
modalDialog_Details_BoxDottedBorder_BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
modalDialog_Details_BoxDottedBorder_BorderColor: app_properties.solidBorderBox_BorderColor,
modalDialog_Details_BoxDottedBorder_Color: app_properties.solidBorderBox_TextColor,
modalDialog_Details_CopyToClipboard_Icon_Color: app_properties.icon_Color,
modalDialog_Details_CopyToClipboard_Icon_HoverColor: app_properties.icon_HoverColor,
message_Warning_BackgroundColor: app_properties.warning_BackgroundColor,
message_Warning_BorderColor: app_properties.warning_BorderColor,
message_Warning_Color: app_properties.warning_TextColor,
message_Error_BackgroundColor: app_properties.danger_BackgroundColor,
message_Error_BorderColor: app_properties.danger_BorderColor,
message_Error_Color: app_properties.danger_TextColor,
message_Success_BackgroundColor: app_properties.success_BackgroundColor,
message_Success_BorderColor: app_properties.success_BorderColor,
message_Success_Color: app_properties.success_TextColor,
}, },
...@@ -455,16 +474,16 @@ var remix_properties = { ...@@ -455,16 +474,16 @@ var remix_properties = {
::::::::::::::: */ ::::::::::::::: */
runTab: { runTab: {
box_Instance: app_properties.uiElements.solidBorderBox({ box_RunTab: app_properties.uiElements.solidBorderBox({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
BorderColor:app_properties.solidBorderBox_BorderColor, BorderColor:app_properties.solidBorderBox_BorderColor,
Color: app_properties.solidBorderBox_TextColor Color: app_properties.solidBorderBox_TextColor
}), }),
dropdown_RunTab: app_properties.uiElements.dropdown({ dropdown_RunTab: app_properties.uiElements.dropdown({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BackgroundColor: app_properties.dropdown_BackgroundColor,
BorderColor: app_properties.solidBorderBox_BorderColor, BorderColor: app_properties.dropdown_BorderColor,
Color: app_properties.solidBorderBox_TextColor Color: app_properties.dropdown_TextColor
}), }),
input_RunTab: app_properties.uiElements.inputField({ input_RunTab: app_properties.uiElements.inputField({
...@@ -473,22 +492,41 @@ var remix_properties = { ...@@ -473,22 +492,41 @@ var remix_properties = {
Color: app_properties.input_TextColor Color: app_properties.input_TextColor
}), }),
button_atAddress_BackgroundColor: app_properties.primaryButton_BackgroundColor, box_Instance: app_properties.uiElements.solidBorderBox({
button_atAddress_BorderColor: app_properties.primaryButton_BorderColor, BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
button_atAddress_Color: app_properties.primaryButton_TextColor, BorderColor:app_properties.solidBorderBox_BorderColor,
button_Create_BackgroundColor: app_properties.primaryButton_BackgroundColor, Color: app_properties.solidBorderBox_TextColor
button_Create_BorderColor: app_properties.primaryButton_BorderColor, }),
button_Create_Color: app_properties.primaryButton_TextColor,
button_atAddress: app_properties.uiElements.button({
button_Instance_Call_BackgroundColor: app_properties.callButton_BackgroundColor, BackgroundColor: app_properties.primaryButton_BackgroundColor,
button_Instance_Call_BorderColor: app_properties.callButton_BorderColor, BorderColor: app_properties.primaryButton_BorderColor,
button_Instance_Call_Color: app_properties.callButton_TextColor, Color: app_properties.primaryButton_TextColor
button_Instance_Transact_BackgroundColor: app_properties.transactButton_BackgroundColor, }),
button_Instance_Transact_BorderColor: app_properties.transactButton_BorderColor,
button_Instance_Transact_Color: app_properties.transactButton_TextColor, button_Create: app_properties.uiElements.button({
button_Instance_TransactPayable_BackgroundColor: app_properties.transactPayableButton_BackgroundColor, BackgroundColor: app_properties.primaryButton_BackgroundColor,
button_Instance_TransactPayable_BorderColor: app_properties.transactPayableButton_BorderColor, BorderColor: app_properties.primaryButton_BorderColor,
button_Instance_TransactPayable_Color: app_properties.transactPayableButton_TextColor, Color: app_properties.primaryButton_TextColor
}),
button_Instance_Call: app_properties.uiElements.button({
BackgroundColor: app_properties.callButton_BackgroundColor,
BorderColor: app_properties.callButton_BorderColor,
Color: app_properties.callButton_TextColor
}),
button_Instance_Transact: app_properties.uiElements.button({
BackgroundColor: app_properties.transactButton_BackgroundColor,
BorderColor: app_properties.transactButton_BorderColor,
Color: app_properties.transactButton_TextColor
}),
button_Instance_TransactPayable: app_properties.uiElements.button({
BackgroundColor: app_properties.transactPayableButton_BackgroundColor,
BorderColor: app_properties.transactPayableButton_BorderColor,
Color: app_properties.transactPayableButton_TextColor
}),
icon_Color_Instance_CopyToClipboard: app_properties.icon_Color, icon_Color_Instance_CopyToClipboard: app_properties.icon_Color,
icon_HoverColor_Instance_CopyToClipboard: app_properties.icon_HoverColor, icon_HoverColor_Instance_CopyToClipboard: app_properties.icon_HoverColor,
...@@ -507,9 +545,9 @@ var remix_properties = { ...@@ -507,9 +545,9 @@ var remix_properties = {
}), }),
dropdown_SelectCompiler: app_properties.uiElements.dropdown({ dropdown_SelectCompiler: app_properties.uiElements.dropdown({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BackgroundColor: app_properties.dropdown_BackgroundColor,
BorderColor:app_properties.solidBorderBox_BorderColor, BorderColor: app_properties.dropdown_BorderColor,
Color: app_properties.solidBorderBox_TextColor Color: app_properties.dropdown_TextColor
}), }),
}, },
...@@ -519,22 +557,35 @@ var remix_properties = { ...@@ -519,22 +557,35 @@ var remix_properties = {
::::::::::::::: */ ::::::::::::::: */
debuggerTab: { debuggerTab: {
button_Debugger_BackgroundColor: app_properties.secondaryButton_BackgroundColor, text_Primary: app_properties.mainText_Color,
button_Debugger_BorderColor: app_properties.secondaryButton_BorderColor, text_Secondary: app_properties.supportText_Color,
button_Debugger_Color: app_properties.secondaryButton_TextColor,
button_Debugger_icon_Color: app_properties.icon_Color,
button_Debugger_icon_HoverColor: app_properties.icon_HoverColor,
debuggerDropdown: app_properties.uiElements.dropdown({ box_Debugger: app_properties.uiElements.solidBorderBox({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
BorderColor:app_properties.solidBorderBox_BorderColor, BorderColor:app_properties.solidBorderBox_BorderColor,
Color: app_properties.solidBorderBox_TextColor Color: app_properties.solidBorderBox_TextColor
}), }),
inputField_BackgroundColor: app_properties.input_BackgroundColor, button_Debugger: app_properties.uiElements.button({
inputField_BorderColor: app_properties.input_BorderColor, BackgroundColor: app_properties.primaryButton_BackgroundColor,
inputField_Color: app_properties.input_TextColor, BorderColor: app_properties.primaryButton_BorderColor,
Color: app_properties.primaryButton_TextColor
}),
button_Debugger_icon_Color: app_properties.icon_Color,
button_Debugger_icon_HoverColor: app_properties.icon_HoverColor,
dropdown_Debugger: app_properties.uiElements.dropdown({
BackgroundColor: app_properties.dropdown_BackgroundColor,
BorderColor: app_properties.dropdown_BorderColor,
Color: app_properties.dropdown_TextColor
}),
input_Debugger: app_properties.uiElements.inputField({
BackgroundColor: app_properties.input_BackgroundColor,
BorderColor: app_properties.input_BorderColor,
Color: app_properties.input_TextColor
}),
debuggerDropdowns_Instructions_Highlight_BackgroundColor: app_properties.secondary_BackgroundColor debuggerDropdowns_Instructions_Highlight_BackgroundColor: app_properties.secondary_BackgroundColor
...@@ -545,9 +596,11 @@ var remix_properties = { ...@@ -545,9 +596,11 @@ var remix_properties = {
::::::::::::::: */ ::::::::::::::: */
analysisTab: { analysisTab: {
button_Run_BackgroundColor: app_properties.primaryButton_BackgroundColor, button_Run_AnalysisTab: app_properties.uiElements.button({
button_Run_BorderColor: app_properties.primaryButton_BorderColor, BackgroundColor: app_properties.primaryButton_BackgroundColor,
button_Run_Color: app_properties.primaryButton_TextColor, BorderColor: app_properties.primaryButton_BorderColor,
Color: app_properties.primaryButton_TextColor
}),
box_AnalysisContainer: app_properties.uiElements.solidBorderBox({ box_AnalysisContainer: app_properties.uiElements.solidBorderBox({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
...@@ -555,10 +608,6 @@ var remix_properties = { ...@@ -555,10 +608,6 @@ var remix_properties = {
Color: app_properties.solidBorderBox_TextColor, Color: app_properties.solidBorderBox_TextColor,
}), }),
message_Warning_BackgroundColor: app_properties.warning_BackgroundColor,
message_Warning_BorderColor: app_properties.warning_BorderColor,
message_Warning_Color: app_properties.warning_TextColor
}, },
/* :::::::::::::: /* ::::::::::::::
...@@ -583,133 +632,14 @@ var remix_properties = { ...@@ -583,133 +632,14 @@ var remix_properties = {
} }
} }
/* ////////////////////////////////////////////////////
///////////////////////////////////////////////////////
TO BE DELETED (START)
///////////////////////////////////////////////////////
//////////////////////////////////////////////////// */
var elementColors = {
/* -----------------------
BUTTONS
----------------------- */
// DROPDOWN
dropdown_TextColor: css_properties.colors.black,
dropdown_BackgroundColor: css_properties.colors.white,
dropdown_BorderColor: css_properties.colors.veryLightGrey,
// BUTTON
button_TextColor: css_properties.element_TextColor,
button_BorderColor: css_properties.colors.veryLightGrey,
rightPanel_compileTab_compileButton_BackgroundColor: 'hsla(0, 0%, 40%, .2)',
rightPanel_compileTab_otherButtons_BackgroundColor: 'hsla(0, 0%, 40%, .2)'
}
/* --------------------------------------------------------------------------
UI ELEMENTS
-------------------------------------------------------------------------- */
var uiElements = {
'display-box': `
font-size : 12px;
padding : 10px 15px;
line-height : 20px;
background : ${css_properties.colors.white};
border-radius : 3px;
border : 1px solid ${css_properties.colors.veryLightGrey};
overflow : hidden;
word-break : break-word;
width : 100%;
`,
'info-text-box': `
background-color : ${css_properties.colors.white};
line-height : 20px;
border : .2em dotted ${css_properties.colors.lightGrey};
padding : 8px 15px;
border-radius : 5px;
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
`,
'input': `
border : 1px solid ${css_properties.colors.veryLightGrey};
height : 25px;
width : 250px;
border-radius : 3px;
padding : 0 8px;
overflow : hidden;
word-break : normal;
`,
'dropdown': `
color : ${css_properties.colors.black};
background-color : ${css_properties.colors.white};
border : 1px solid ${css_properties.colors.veryLightGrey};
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': `
margin : 1px;
background-color : ${css_properties.colors.veryLightGrey};
border : .3px solid ${css_properties.colors.veryLightGrey};
color : ${css_properties.colors.black};
display : flex;
align-items : center;
justify-content : center;
border-radius : 3px;
cursor : pointer;
min-height : 25px;
max-height : 25px;
width : 70px;
min-width : 70px;
font-size : 12px;
overflow : hidden;
word-break : normal;
`,
'button:hover': `
opacity : 0.8;
`
}
/* ////////////////////////////////////////////////////
///////////////////////////////////////////////////////
TO BE DELETED (FINISH)
///////////////////////////////////////////////////////
//////////////////////////////////////////////////// */
return { return {
colors: css_properties.colors, colors: css_properties.colors,
app_properties: app_properties,
borders: css_properties.borders, borders: css_properties.borders,
leftPanel: remix_properties.leftPanel, leftPanel: remix_properties.leftPanel,
editor: remix_properties.editor, editor: remix_properties.editor,
terminal: remix_properties.terminal, terminal: remix_properties.terminal,
rightPanel: remix_properties.rightPanel, rightPanel: remix_properties.rightPanel,
remix: remix_properties.remix
app_properties: app_properties,
elementColors: elementColors,
dropdown: uiElements['dropdown'],
button: uiElements['button'],
inputField: uiElements['input'],
infoTextBox: uiElements['info-text-box'],
displayBox: uiElements['display-box']
} }
} }
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