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

move terminal styles to its own file

Browse Source
pull/3094/head
Iuri Matias 7 years ago
parent 748693b6d5
commit 6ba7f229c0
2 changed files with 168 additions and 162 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. 167
      src/app/panels/styles/terminal-styles.js
  2. 163
      src/app/panels/terminal.js

167
src/app/panels/styles/terminal-styles.js
Unescape View File

@ -0,0 +1,167 @@
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.panel {
position : relative;
display : flex;
flex-direction : column;
font-size : 12px;
color : ${styles.terminal.text_Regular_TransactionLog};
background-color : ${styles.terminal.backgroundColor_Terminal};
height : 100%;
min-height : 1.7em;
overflow : hidden;
}
.bar {
display : flex;
min-height : 3em;
padding : 2px;
background-color : ${styles.terminal.backgroundColor_Menu};
z-index : 3;
}
.menu {
color : ${styles.terminal.text_Primary};
position : relative;
display : flex;
align-items : center;
width : 100%;
padding : 5px;
}
.clear {
margin-left : 10px;
margin-right : 10px;
width : 10px;
cursor : pointer;
color : ${styles.terminal.icon_Color_TogglePanel};
}
.clear:hover {
color : ${styles.terminal.icon_HoverColor_Menu};
}
.toggleTerminal {
margin-right : 10px;
font-size : 14px;
font-weight : bold;
cursor : pointer;
color : ${styles.terminal.icon_Color_Menu};
}
.toggleTerminal:hover {
color : ${styles.terminal.icon_HoverColor_TogglePanel};
}
.terminal_container {
background-color : ${styles.terminal.backgroundColor_Terminal};
display : flex;
flex-direction : column;
height : 100%;
overflow-y : auto;
font-family : monospace;
}
.terminal_bg {
display : flex;
flex-direction : column;
height : 100%;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 3px;
overflow-y : auto;
font-family : monospace;
background-image : ${styles.terminal.backgroundImage_Terminal};
opacity : 0.1;
top : 15%;
left : 33%;
bottom : 0;
right : 0;
position : absolute;
background-repeat : no-repeat;
background-size : 45%;
}
.terminal {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.journal {
margin-top : auto;
font-family : monospace;
}
.block {
word-break : break-all;
white-space : pre-wrap;
line-height : 2ch;
margin : 1ch;
margin-top : 2ch;
}
.cli {
line-height : 1.7em;
font-family : monospace;
background-color : ${styles.terminal.backgroundColor_TerminalCLI};
padding : .4em;
color : ${styles.appProperties.mainText_Color};
border-top : solid 2px ${styles.terminal.bar_Ghost};
}
.prompt {
margin-right : 0.5em;
font-family : monospace;
font-weight : bold;
font-size : large;
color : ${styles.appProperties.supportText_OppositeColor};
}
.input {
word-break : break-all;
outline : none;
font-family : monospace;
}
.search {
display: flex;
align-items: center;
margin-right: 10px;
}
.filter {
${styles.terminal.input_Search_MenuBar}
width : 200px;
padding-right : 0px;
margin-right : 0px;
border-top-left-radius : 0px;
border-bottom-left-radius : 0px;
}
.searchIcon {
background-color : ${styles.colors.veryLightGrey};
color : ${styles.terminal.icon_Color_Menu};
height : 25px;
width : 25px;
border-top-left-radius : 3px;
border-bottom-left-radius : 3px;
display : flex;
align-items : center;
justify-content : center;
}
.listen {
min-width : 120px;
display : flex;
}
.dragbarHorizontal {
position : absolute;
top : 0;
height : 0.5em;
right : 0;
left : 0;
cursor : ns-resize;
z-index : 999;
border-top : 2px solid ${styles.terminal.bar_Dragging};
}
.ghostbar {
position : absolute;
height : 6px;
background-color : ${styles.terminal.bar_Ghost};
opacity : 0.5;
cursor : row-resize;
z-index : 9999;
left : 0;
right : 0;
}
`
module.exports = css

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

@ -11,172 +11,11 @@ var Web3 = require('web3')
var executionContext = require('../../execution-context')
var Dropdown = require('../ui/dropdown')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
var css = csjs`
.panel {
position : relative;
display : flex;
flex-direction : column;
font-size : 12px;
color : ${styles.terminal.text_Regular_TransactionLog};
background-color : ${styles.terminal.backgroundColor_Terminal};
height : 100%;
min-height : 1.7em;
overflow : hidden;
}
.bar {
display : flex;
min-height : 3em;
padding : 2px;
background-color : ${styles.terminal.backgroundColor_Menu};
z-index : 3;
}
.menu {
color : ${styles.terminal.text_Primary};
position : relative;
display : flex;
align-items : center;
width : 100%;
padding : 5px;
}
.clear {
margin-left : 10px;
margin-right : 10px;
width : 10px;
cursor : pointer;
color : ${styles.terminal.icon_Color_TogglePanel};
}
.clear:hover {
color : ${styles.terminal.icon_HoverColor_Menu};
}
.toggleTerminal {
margin-right : 10px;
font-size : 14px;
font-weight : bold;
cursor : pointer;
color : ${styles.terminal.icon_Color_Menu};
}
.toggleTerminal:hover {
color : ${styles.terminal.icon_HoverColor_TogglePanel};
}
.terminal_container {
background-color : ${styles.terminal.backgroundColor_Terminal};
display : flex;
flex-direction : column;
height : 100%;
overflow-y : auto;
font-family : monospace;
}
.terminal_bg {
display : flex;
flex-direction : column;
height : 100%;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 3px;
overflow-y : auto;
font-family : monospace;
background-image : ${styles.terminal.backgroundImage_Terminal};
opacity : 0.1;
top : 15%;
left : 33%;
bottom : 0;
right : 0;
position : absolute;
background-repeat : no-repeat;
background-size : 45%;
}
.terminal {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.journal {
margin-top : auto;
font-family : monospace;
}
.block {
word-break : break-all;
white-space : pre-wrap;
line-height : 2ch;
margin : 1ch;
margin-top : 2ch;
}
.cli {
line-height : 1.7em;
font-family : monospace;
background-color : ${styles.terminal.backgroundColor_TerminalCLI};
padding : .4em;
color : ${styles.appProperties.mainText_Color};
border-top : solid 2px ${styles.terminal.bar_Ghost};
}
.prompt {
margin-right : 0.5em;
font-family : monospace;
font-weight : bold;
font-size : large;
color : ${styles.appProperties.supportText_OppositeColor};
}
.input {
word-break : break-all;
outline : none;
font-family : monospace;
}
.search {
display: flex;
align-items: center;
margin-right: 10px;
}
.filter {
${styles.terminal.input_Search_MenuBar}
width : 200px;
padding-right : 0px;
margin-right : 0px;
border-top-left-radius : 0px;
border-bottom-left-radius : 0px;
}
.searchIcon {
background-color : ${styles.colors.veryLightGrey};
color : ${styles.terminal.icon_Color_Menu};
height : 25px;
width : 25px;
border-top-left-radius : 3px;
border-bottom-left-radius : 3px;
display : flex;
align-items : center;
justify-content : center;
}
.listen {
min-width : 120px;
display : flex;
}
.dragbarHorizontal {
position : absolute;
top : 0;
height : 0.5em;
right : 0;
left : 0;
cursor : ns-resize;
z-index : 999;
border-top : 2px solid ${styles.terminal.bar_Dragging};
}
.ghostbar {
position : absolute;
height : 6px;
background-color : ${styles.terminal.bar_Ghost};
opacity : 0.5;
cursor : row-resize;
z-index : 9999;
left : 0;
right : 0;
}
`
var css = require('./styles/terminal-styles')
var KONSOLES = []

Write Preview
Loading…
Cancel
Save