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

Start applying new style-guide css to csjs

Browse Source
pull/1/head
ninabreznik 7 years ago committed by yann300
parent 8e3ffb8a2c
commit d0d4dcaecc
7 changed files with 92 additions and 82 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/app.js
  2. 15
      src/app/editor/editor.js
  3. 6
      src/app/files/file-explorer.js
  4. 99
      src/app/panels/editor-panel.js
  5. 6
      src/app/panels/righthand-panel.js
  6. 29
      src/app/panels/terminal.js
  7. 7
      src/app/ui/dropdown.js

12
src/app.js
Unescape View File

@ -48,7 +48,7 @@ var css = csjs`
margin : 0; margin : 0;
padding : 0; padding : 0;
font-size : 12px; font-size : 12px;
color : ${styles.colors.black}; color : ${styles.leftPanel.text_Primary};
font-weight : normal; font-weight : normal;
} }
pre { pre {
@ -61,7 +61,7 @@ var css = csjs`
overflow : hidden; overflow : hidden;
} }
.centerpanel { .centerpanel {
background-color : ${styles.colors.general_BackgroundColor}; background-color : ${styles.colors.transparent};
display : flex; display : flex;
flex-direction : column; flex-direction : column;
position : absolute; position : absolute;
@ -70,7 +70,7 @@ var css = csjs`
overflow : hidden; overflow : hidden;
} }
.leftpanel { .leftpanel {
background-color : ${styles.colors.general_BackgroundColor}; background-color : ${styles.leftPanel.backgroundColor_Panel};
display : flex; display : flex;
flex-direction : column; flex-direction : column;
position : absolute; position : absolute;
@ -80,7 +80,7 @@ var css = csjs`
overflow : hidden; overflow : hidden;
} }
.rightpanel { .rightpanel {
background-color : ${styles.colors.general_BackgroundColor}; background-color : ${styles.rightPanel.backgroundColor_Panel};
display : flex; display : flex;
flex-direction : column; flex-direction : column;
position : absolute; position : absolute;
@ -92,12 +92,12 @@ var css = csjs`
.highlightcode { .highlightcode {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color: ${styles.colors.lightOrange}; background-color: ${styles.editor.backgroundColor_DebuggerMode};
} }
.highlightcode_fullLine { .highlightcode_fullLine {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color: ${styles.colors.lightOrange}; background-color: ${styles.editor.backgroundColor_DebuggerMode};
opacity: 0.5; opacity: 0.5;
} }
` `

15
src/app/editor/editor.js
Unescape View File

@ -8,11 +8,14 @@ var Range = ace.acequire('ace/range').Range
require('brace/ext/language_tools') require('brace/ext/language_tools')
var langTools = ace.acequire('ace/ext/language_tools') var langTools = ace.acequire('ace/ext/language_tools')
require('./mode-solidity.js') require('./mode-solidity.js')
var remix = require('ethereum-remix')
var styleGuide = remix.ui.styleGuide
var styles = styleGuide()
var css = csjs` var css = csjs`
.ace-editor { .ace-editor {
background-color : ${styles.colors.general_BackgroundColor}; background-color : ${styles.editor.backgroundColor_Editor};
border-top: 20px solid ${styles.colors.backgroundBlue}; border-top: 20px solid ${styles.editor.backgroundColor_Tabs_Highlights};
width : 100%; width : 100%;
} }
` `
@ -21,10 +24,10 @@ document.head.appendChild(yo`
.ace-tm .ace_gutter, .ace-tm .ace_gutter,
.ace-tm .ace_gutter-active-line, .ace-tm .ace_gutter-active-line,
.ace-tm .ace_marker-layer .ace_active-line { .ace-tm .ace_marker-layer .ace_active-line {
background-color: rgba(225, 229, 251, 0.5); background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
} }
.ace_gutter-cell.ace_breakpoint{ .ace_gutter-cell.ace_breakpoint{
background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */ background-color: ${styles.editor.backgroundColor_DebuggerMode};
} }
.highlightreference { .highlightreference {
position:absolute; position:absolute;
@ -44,7 +47,7 @@ document.head.appendChild(yo`
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */ background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
} }
</style> </style>
`) `)

6
src/app/files/file-explorer.js
Unescape View File

@ -24,10 +24,10 @@ var css = csjs`
cursor : pointer; cursor : pointer;
} }
.hasFocus { .hasFocus {
background-color : ${styles.colors.backgroundBlue}; background-color : ${styles.leftPanel.backgroundColor_FileExplorer};
} }
.rename { .rename {
background-color : ${styles.colors.general_BackgroundColor}; background-color : ${styles.leftPanel.backgroundColor_Panel};
} }
.remove { .remove {
margin-left : auto; margin-left : auto;
@ -186,7 +186,7 @@ function fileExplorer (appAPI, files) {
this.style.paddingRight = '19px' this.style.paddingRight = '19px'
return this.removeChild(deleteButton) return this.removeChild(deleteButton)
} }
this.style.backgroundColor = styles.colors.backgroundBlue this.style.backgroundColor = styles.leftPanel.backgroundColor_FileExplorer
this.style.paddingRight = '0px' this.style.paddingRight = '0px'
this.appendChild(deleteButton) this.appendChild(deleteButton)
} }

99
src/app/panels/editor-panel.js
Unescape View File

@ -7,6 +7,49 @@ var styles = styleGuide()
var Terminal = require('./terminal') var Terminal = require('./terminal')
var cssTabs = yo`
<style>
#files .file {
padding: 0 0.6em;
box-sizing: border-box;
background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
cursor: pointer;
margin-right: 10px;
margin-top: 5px;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
color: ${styles.editor.text_Secondary};
}
#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;
}
</style>
`
var css = csjs` var css = csjs`
.editorpanel { .editorpanel {
display : flex; display : flex;
@ -14,10 +57,10 @@ var css = csjs`
height : 100%; height : 100%;
} }
.tabsbar { .tabsbar {
background-color : ${styles.editor.backgroundColor_Panel};
display : flex; display : flex;
overflow : hidden; overflow : hidden;
height : 2em; height : 30px;
margin-top : 0.5em;
} }
.tabs { .tabs {
position : relative; position : relative;
@ -29,6 +72,7 @@ var css = csjs`
overflow : hidden; overflow : hidden;
} }
.files { .files {
display : flex;
position : relative; position : relative;
list-style : none; list-style : none;
margin : 0; margin : 0;
@ -67,7 +111,7 @@ var css = csjs`
padding : 10px; padding : 10px;
width : 100%; width : 100%;
font-weight : bold; font-weight : bold;
color : ${styles.colors.black}; color : ${styles.leftPanel.icon_Color_TogglePanel};
} }
.toggleLHP i { .toggleLHP i {
cursor : pointer; cursor : pointer;
@ -75,7 +119,7 @@ var css = csjs`
font-weight : bold; font-weight : bold;
} }
.toggleLHP i:hover { .toggleLHP i:hover {
color : ${styles.colors.orange}; color : ${styles.leftPanel.icon_HoverColor_TogglePanel};
} }
.scroller { .scroller {
position : absolute; position : absolute;
@ -96,7 +140,7 @@ var css = csjs`
left : 0; left : 0;
} }
.toggleRHP { .toggleRHP {
margin : 0.3em; margin : 0.5em;
font-weight : bold; font-weight : bold;
color : ${styles.colors.black}; color : ${styles.colors.black};
right : 0; right : 0;
@ -139,49 +183,6 @@ var css = csjs`
} }
` `
var cssTabs = yo`<style>
#files .file {
padding: 0 0.6em;
box-sizing: border-box;
background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
cursor: pointer;
border-right: 0.5em solid white;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
}
#files .file.active {
color: black;
font-weight: bold;
border-bottom: 0 none;
padding-right: 2em;
}
#files .file .remove {
position: absolute;
right: 0;
top: 0;
height: 1.25em;
width: 1.25em;
line-height: 1em;
color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
display: none;
margin: 0.4em;
text-align: center;
}
#files .file input {
background-color: transparent;
border: 0 none;
border-bottom: 1px dotted black;
line-height: 1em;
margin: 0.5em 0;
}
#files .file.active .remove {
display: inline-block;
}
</style>`
class EditorPanel { class EditorPanel {
constructor (opts = {}) { constructor (opts = {}) {
var self = this var self = this
@ -236,7 +237,7 @@ class EditorPanel {
} }
_adjustLayout (direction, delta) { _adjustLayout (direction, delta) {
var limitUp = 0 var limitUp = 0
var limitDown = 20 var limitDown = 32
var containerHeight = window.innerHeight - limitUp // - menu bar containerHeight var containerHeight = window.innerHeight - limitUp // - menu bar containerHeight
var self = this var self = this
var layout = self.data._layout[direction] var layout = self.data._layout[direction]

6
src/app/panels/righthand-panel.js
Unescape View File

@ -66,7 +66,7 @@ var css = csjs`
color: ${styles.colors.black}; color: ${styles.colors.black};
} }
.opts_li:hover { .opts_li:hover {
color: ${styles.colors.orange}; color: ${styles.colors.grey};
} }
.dragbar { .dragbar {
position : absolute; position : absolute;
@ -98,9 +98,9 @@ var css = csjs`
margin-right: 30px; margin-right: 30px;
display: flex; display: flex;
align-self: center; align-self: center;
height: 20px; height: 29px;
width: 20px; width: 20px;
background-color: white; background-color: ${styles.colors.transparent};
} }
` `

29
src/app/panels/terminal.js
Unescape View File

@ -21,8 +21,8 @@ var css = csjs`
display : flex; display : flex;
flex-direction : column; flex-direction : column;
font-size : 12px; font-size : 12px;
color : #777; color : ${styles.terminal.text_Regular_TransactionLog}
background-color : #ededed; background-color : ${styles.terminal.backgroundColor_Terminal};
height : 100%; height : 100%;
min-height : 1.7em; min-height : 1.7em;
overflow : hidden; overflow : hidden;
@ -30,12 +30,13 @@ var css = csjs`
.bar { .bar {
display : flex; display : flex;
min-height : 1.7em; min-height : 3em;
padding : 2px; padding : 2px;
background-color : #eef; background-color : ${styles.terminal.backgroundColor_Menu};
z-index : 3; z-index : 3;
} }
.menu { .menu {
color : ${styles.terminal.text_Primary};
position : relative; position : relative;
display : flex; display : flex;
align-items : center; align-items : center;
@ -46,20 +47,24 @@ var css = csjs`
margin-left : auto; margin-left : auto;
width : 10px; width : 10px;
cursor : pointer; cursor : pointer;
color : black; color : ${styles.terminal.icon_Color_TogglePanel};
font-size : 14px; font-size : 14px;
font-weight : bold; font-weight : bold;
} }
.toggleTerminal:hover {
color : ${styles.terminal.icon_HoverColor_TogglePanel};
}
.clear { .clear {
margin-right : 5px; margin-right : 5px;
cursor : pointer; cursor : pointer;
color : black; color : ${styles.terminal.icon_Color_Menu};
} }
.hover { .clear:hover {
color : orange; color : ${styles.terminal.icon_HoverColor_Menu};
} }
.terminal { .terminal {
background-color : ${styles.terminal.backgroundColor_Terminal};
display : flex; display : flex;
flex-direction : column; flex-direction : column;
height : 100%; height : 100%;
@ -88,7 +93,7 @@ var css = csjs`
font-family : monospace; font-family : monospace;
font-weight : bold; font-weight : bold;
font-size : large; font-size : large;
color : ${styles.colors.black} color : ${styles.colors.black};
} }
.input { .input {
word-break : break-all; word-break : break-all;
@ -96,7 +101,7 @@ var css = csjs`
font-family : monospace; font-family : monospace;
} }
.filter { .filter {
${styles.inputField} ${styles.terminal.input_Search_MenuBar}
width : 150px; width : 150px;
} }
@ -108,12 +113,12 @@ var css = csjs`
left : 0; left : 0;
cursor : ns-resize; cursor : ns-resize;
z-index : 999; z-index : 999;
border-top : 2px solid hsla(215, 81%, 79%, .3); border-top : 2px solid ${styles.terminal.bar_Dragging};
} }
.ghostbar { .ghostbar {
position : absolute; position : absolute;
height : 6px; height : 6px;
background-color : #C6CFF7; background-color : ${styles.terminal.bar_Ghost};
opacity : 0.5; opacity : 0.5;
cursor : row-resize; cursor : row-resize;
z-index : 9999; z-index : 9999;

7
src/app/ui/dropdown.js
Unescape View File

@ -8,11 +8,12 @@ var styles = styleGuide()
var css = csjs` var css = csjs`
.dropdown { .dropdown {
${styles.dropdown} ${styles.terminal.dropdown_Filter_MenuBar}
overflow : visible; overflow : visible;
position : relative; position : relative;
display : flex; display : flex;
flex-direction : column; flex-direction : column;
margin-right : 3px;
} }
.selectbox { .selectbox {
display : flex; display : flex;
@ -40,8 +41,8 @@ var css = csjs`
top : 24px; top : 24px;
left : 0; left : 0;
width : 250px; width : 250px;
background-color : white; background-color : ${styles.app_properties.dropdown_BackgroundColor};
border : 1px solid ${styles.colors.veryLightGrey}; border : 1px solid ${styles.app_properties.dropdown_BorderColor};
border-radius : 3px; border-radius : 3px;
border-top : 0; border-top : 0;
} }

Write Preview
Loading…
Cancel
Save