mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

First draft - themeable Remix

Browse Source
pull/7/head
ninabreznik 7 years ago committed by yann300
parent b7f8f151a5
commit f7511bd36a
5 changed files with 168 additions and 227 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      src/ui/ButtonNavigator.js
  2. 13
      src/ui/CodeListView.js
  3. 10
      src/ui/DropdownPanel.js
  4. 8
      src/ui/TxBrowser.js
  5. 352
      src/ui/styles/style-guide.js

12
src/ui/ButtonNavigator.js
Unescape View File

@ -14,24 +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.colors.black}
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
}
.navigator:hover {
color: ${styles.colors.orange}
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
}
`

13
src/ui/CodeListView.js
Unescape View File

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

10
src/ui/DropdownPanel.js
Unescape View File

@ -13,25 +13,25 @@ var styles = styleGuide()
var css = csjs`
.title {
margin-top: 10px;
${styles.dropdown}
${styles.rightPanel.debuggerTab.dropdown_Debugger}
display: flex;
align-items: center;
}
.name {
color: ${styles.colors.black};
font-weight: bold;
}
.icon {
color: ${styles.colors.black};
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
margin-right: 5%;
}
.eyeButton {
${styles.button}
${styles.rightPanel.debuggerTab.button_Debugger}
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
margin: 3px;
float: right;
}
.eyeButton:hover {
color: ${styles.colors.orange};
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
}
`

8
src/ui/TxBrowser.js
Unescape View File

@ -25,7 +25,7 @@ var css = csjs`
justify-content: center;
}
.txinput {
${styles.inputField}
${styles.rightPanel.debuggerTab.input_Debugger}
min-width: 30px;
margin: 3px;
}
@ -35,11 +35,11 @@ var css = csjs`
justify-content: center;
}
.txbutton {
${styles.button}
color: ${styles.colors.black};
${styles.rightPanel.debuggerTab.button_Debugger}
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
}
.txbutton:hover {
color: ${styles.colors.orange};
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
}
.txinfo {
margin-top: 5px;

352
src/ui/styles/style-guide.js
Unescape View File

@ -71,8 +71,8 @@ function styleGuide () {
/********************************************************
BACKGROUND COLORS
******************************************************** */
primary_BackgroundColor: css_properties.colors.red,
secondary_BackgroundColor: css_properties.colors.blue,
primary_BackgroundColor: css_properties.colors.white,
secondary_BackgroundColor: css_properties.colors.backgroundBlue,
dark_BackgroundColor: css_properties.colors.veryLightGrey,
light_BackgroundColor: css_properties.colors.white,
@ -118,7 +118,7 @@ function styleGuide () {
DROPDOWN
******************************************************** */
dropdown_TextColor: css_properties.colors.black,
dropdown_BackgroundColor: css_properties.colors.violet,
dropdown_BackgroundColor: css_properties.colors.white,
dropdown_BorderColor: css_properties.colors.veryLightGrey,
/********************************************************
@ -132,7 +132,7 @@ function styleGuide () {
SOLID BORDER BOX
******************************************************** */
solidBorderBox_TextColor: css_properties.colors.black,
solidBorderBox_BackgroundColor: css_properties.colors.violet,
solidBorderBox_BackgroundColor: css_properties.colors.white,
solidBorderBox_BorderColor: css_properties.colors.veryLightGrey,
/********************************************************
@ -262,9 +262,9 @@ function styleGuide () {
button: (opts = {}) => `
margin : 1px;
background-color : ${css_properties.colors.veryLightGrey};
border : .3px solid ${css_properties.colors.veryLightGrey};
color : ${css_properties.colors.black};
background-color : ${opts.BackgroundColor};
border : .3px solid ${opts.BorderColor};
color : ${opts.Color};
display : flex;
align-items : center;
justify-content : center;
@ -292,7 +292,20 @@ var remix_properties = {
/********************************************************
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)
@ -345,20 +358,22 @@ var remix_properties = {
text_Primary: app_properties.mainText_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_Title_TransactionLog: app_properties.warningText_Color,
text_Regular_TransactionLog: app_properties.supportText_Color,
icon_Color_TogglePanel: app_properties.icon_Color,
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_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({
BackgroundColor: app_properties.input_BackgroundColor,
BorderColor: app_properties.input_BorderColor,
@ -371,13 +386,17 @@ var remix_properties = {
Color: app_properties.dropdown_TextColor
}),
button_Log_Details_BackgroundColor: app_properties.secondaryButton_BackgroundColor,
button_Details_BorderColor: app_properties.secondaryButton_BorderColor,
button_Details_Color: app_properties.secondaryButton_TextColor,
button_Log_Debug: app_properties.uiElements.button({
BackgroundColor: app_properties.warningButton_BackgroundColor,
BorderColor: app_properties.warningButton_BorderColor,
Color: app_properties.warningButton_TextColor
}),
button_Log_Debug_BackgroundColor: app_properties.warningButton_BackgroundColor,
button_Debug_BorderColor: app_properties.warningButton_BorderColor,
button_Debug_Color: app_properties.warningButton_TextColor,
button_Log_Details: app_properties.uiElements.button({
BackgroundColor: app_properties.secondaryButton_BackgroundColor,
BorderColor: app_properties.secondaryButton_BorderColor,
Color: app_properties.secondaryButton_TextColor
})
},
@ -388,6 +407,7 @@ var remix_properties = {
backgroundColor_Panel: app_properties.primary_BackgroundColor,
backgroundColor_Tab: app_properties.secondary_BackgroundColor,
BackgroundColor_Pre: app_properties.light_BackgroundColor,
text_Primary: app_properties.mainText_Color,
text_Secondary: app_properties.supportText_Color,
@ -398,27 +418,45 @@ var remix_properties = {
icon_Color_TogglePanel: app_properties.icon_Color,
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
::::::::::::::: */
compileTab: {
button_Compile_BackgroundColor: app_properties.primaryButton_BackgroundColor,
button_Compile_BorderColor: app_properties.primaryButton_BorderColor,
button_Compile_Color: app_properties.primaryButton_TextColor,
button_Compile: app_properties.uiElements.button({
BackgroundColor: app_properties.primaryButton_BackgroundColor,
BorderColor: app_properties.primaryButton_BorderColor,
Color: app_properties.primaryButton_TextColor
}),
button_Details_BackgroundColor: app_properties.secondaryButton_BackgroundColor,
button_Details_BorderColor: app_properties.secondaryButton_BorderColor,
button_Details_Color: app_properties.secondaryButton_TextColor,
button_Details: app_properties.uiElements.button({
BackgroundColor: app_properties.secondaryButton_BackgroundColor,
BorderColor: app_properties.secondaryButton_BorderColor,
Color: app_properties.secondaryButton_TextColor
}),
button_Publish_BackgroundColor: app_properties.secondaryButton_BackgroundColor,
button_Publish_BorderColor: app_properties.secondaryButton_BorderColor,
button_Publish_Color: app_properties.secondaryButton_TextColor,
button_Publish: app_properties.uiElements.button({
BackgroundColor: app_properties.secondaryButton_BackgroundColor,
BorderColor: app_properties.secondaryButton_BorderColor,
Color: app_properties.secondaryButton_TextColor
}),
dropdown_CompileContract: app_properties.uiElements.dropdown({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
BorderColor:app_properties.solidBorderBox_BorderColor,
Color: app_properties.solidBorderBox_TextColor
BackgroundColor: app_properties.dropdown_BackgroundColor,
BorderColor: app_properties.dropdown_BorderColor,
Color: app_properties.dropdown_TextColor
}),
box_CompileContainer: app_properties.uiElements.solidBorderBox({
@ -427,26 +465,7 @@ var remix_properties = {
Color: app_properties.solidBorderBox_TextColor
}),
modalDialog_Details_BackgroundColor_Primary: app_properties.primary_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,
icon_WarnCompilation_Color: app_properties.warning_BackgroundColor,
},
@ -455,16 +474,16 @@ var remix_properties = {
::::::::::::::: */
runTab: {
box_Instance: app_properties.uiElements.solidBorderBox({
box_RunTab: app_properties.uiElements.solidBorderBox({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
BorderColor:app_properties.solidBorderBox_BorderColor,
Color: app_properties.solidBorderBox_TextColor
}),
dropdown_RunTab: app_properties.uiElements.dropdown({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
BorderColor: app_properties.solidBorderBox_BorderColor,
Color: app_properties.solidBorderBox_TextColor
BackgroundColor: app_properties.dropdown_BackgroundColor,
BorderColor: app_properties.dropdown_BorderColor,
Color: app_properties.dropdown_TextColor
}),
input_RunTab: app_properties.uiElements.inputField({
@ -473,22 +492,41 @@ var remix_properties = {
Color: app_properties.input_TextColor
}),
button_atAddress_BackgroundColor: app_properties.primaryButton_BackgroundColor,
button_atAddress_BorderColor: app_properties.primaryButton_BorderColor,
button_atAddress_Color: app_properties.primaryButton_TextColor,
button_Create_BackgroundColor: app_properties.primaryButton_BackgroundColor,
button_Create_BorderColor: app_properties.primaryButton_BorderColor,
button_Create_Color: app_properties.primaryButton_TextColor,
button_Instance_Call_BackgroundColor: app_properties.callButton_BackgroundColor,
button_Instance_Call_BorderColor: app_properties.callButton_BorderColor,
button_Instance_Call_Color: app_properties.callButton_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_Instance_TransactPayable_BackgroundColor: app_properties.transactPayableButton_BackgroundColor,
button_Instance_TransactPayable_BorderColor: app_properties.transactPayableButton_BorderColor,
button_Instance_TransactPayable_Color: app_properties.transactPayableButton_TextColor,
box_Instance: app_properties.uiElements.solidBorderBox({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
BorderColor:app_properties.solidBorderBox_BorderColor,
Color: app_properties.solidBorderBox_TextColor
}),
button_atAddress: app_properties.uiElements.button({
BackgroundColor: app_properties.primaryButton_BackgroundColor,
BorderColor: app_properties.primaryButton_BorderColor,
Color: app_properties.primaryButton_TextColor
}),
button_Create: app_properties.uiElements.button({
BackgroundColor: app_properties.primaryButton_BackgroundColor,
BorderColor: app_properties.primaryButton_BorderColor,
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_HoverColor_Instance_CopyToClipboard: app_properties.icon_HoverColor,
@ -507,9 +545,9 @@ var remix_properties = {
}),
dropdown_SelectCompiler: app_properties.uiElements.dropdown({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
BorderColor:app_properties.solidBorderBox_BorderColor,
Color: app_properties.solidBorderBox_TextColor
BackgroundColor: app_properties.dropdown_BackgroundColor,
BorderColor: app_properties.dropdown_BorderColor,
Color: app_properties.dropdown_TextColor
}),
},
@ -519,22 +557,35 @@ var remix_properties = {
::::::::::::::: */
debuggerTab: {
button_Debugger_BackgroundColor: app_properties.secondaryButton_BackgroundColor,
button_Debugger_BorderColor: app_properties.secondaryButton_BorderColor,
button_Debugger_Color: app_properties.secondaryButton_TextColor,
text_Primary: app_properties.mainText_Color,
text_Secondary: app_properties.supportText_Color,
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,
BorderColor:app_properties.solidBorderBox_BorderColor,
Color: app_properties.solidBorderBox_TextColor
}),
inputField_BackgroundColor: app_properties.input_BackgroundColor,
inputField_BorderColor: app_properties.input_BorderColor,
inputField_Color: app_properties.input_TextColor,
button_Debugger: app_properties.uiElements.button({
BackgroundColor: app_properties.primaryButton_BackgroundColor,
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
@ -545,9 +596,11 @@ var remix_properties = {
::::::::::::::: */
analysisTab: {
button_Run_BackgroundColor: app_properties.primaryButton_BackgroundColor,
button_Run_BorderColor: app_properties.primaryButton_BorderColor,
button_Run_Color: app_properties.primaryButton_TextColor,
button_Run_AnalysisTab: app_properties.uiElements.button({
BackgroundColor: app_properties.primaryButton_BackgroundColor,
BorderColor: app_properties.primaryButton_BorderColor,
Color: app_properties.primaryButton_TextColor
}),
box_AnalysisContainer: app_properties.uiElements.solidBorderBox({
BackgroundColor: app_properties.solidBorderBox_BackgroundColor,
@ -555,10 +608,6 @@ var remix_properties = {
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 = {
}
}
/* ////////////////////////////////////////////////////
///////////////////////////////////////////////////////
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 {
colors: css_properties.colors,
app_properties: app_properties,
borders: css_properties.borders,
leftPanel: remix_properties.leftPanel,
editor: remix_properties.editor,
terminal: remix_properties.terminal,
rightPanel: remix_properties.rightPanel,
app_properties: app_properties,
elementColors: elementColors,
dropdown: uiElements['dropdown'],
button: uiElements['button'],
inputField: uiElements['input'],
infoTextBox: uiElements['info-text-box'],
displayBox: uiElements['display-box']
remix: remix_properties.remix
}
}

Write Preview
Loading…
Cancel
Save