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

some code quality improvements and coding style fixes

Browse Source
pull/1908/head
lianahus 3 years ago
parent 6dbf58cafe
commit 51f4da35e6
4 changed files with 197 additions and 264 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. 7
      apps/remix-ide-e2e/src/tests/defaultLayout.test.ts
  2. 2
      libs/remix-ui/terminal/src/lib/components/Table.tsx
  3. 442
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
  4. 10
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

7
apps/remix-ide-e2e/src/tests/defaultLayout.test.ts
Unescape View File

@ -50,11 +50,14 @@ module.exports = {
'Toggles Terminal': function (browser: NightwatchBrowser) { 'Toggles Terminal': function (browser: NightwatchBrowser) {
browser.waitForElementVisible('div[data-id="terminalContainer"]') browser.waitForElementVisible('div[data-id="terminalContainer"]')
.assert.elementPresent('div[data-id="terminalContainerDisplay"]') .assert.elementPresent('div[data-id="terminalCli"]')
.assert.elementPresent('div[data-id="terminalContainer"]')
.click('i[data-id="terminalToggleIcon"]') .click('i[data-id="terminalToggleIcon"]')
.assert.elementNotPresent('div[data-id="terminalContainer"]')
.checkElementStyle('div[data-id="terminalToggleMenu"]', 'height', '35px') .checkElementStyle('div[data-id="terminalToggleMenu"]', 'height', '35px')
.click('i[data-id="terminalToggleIcon"]') .click('i[data-id="terminalToggleIcon"]')
.assert.elementPresent('div[data-id="terminalContainerDisplay"]') .assert.elementPresent('div[data-id="terminalCli"]')
.assert.elementPresent('div[data-id="terminalContainer"]')
}, },
'Switch Tabs using tabs icon': function (browser: NightwatchBrowser) { 'Switch Tabs using tabs icon': function (browser: NightwatchBrowser) {

2
libs/remix-ui/terminal/src/lib/components/Table.tsx
Unescape View File

@ -37,7 +37,7 @@ const showTable = (opts, showTableHash) => {
const val = opts.val != null ? typeConversion.toInt(opts.val) : 0 const val = opts.val != null ? typeConversion.toInt(opts.val) : 0
return ( return (
<table <table
className={`remix_ui_terminal_txTable ${showTableHash.includes(opts.hash) ? 'active' : ''}`} className={`mt-1 mb-2 mr-4 align-self-center ${showTableHash.includes(opts.hash) ? 'active' : ''}`}
id="txTable" id="txTable"
data-id={`txLoggerTable${opts.hash}`} data-id={`txLoggerTable${opts.hash}`}
> >

442
libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
Unescape View File

@ -11,282 +11,218 @@ element.style {
} }
.remix_ui_terminal_panel { .remix_ui_terminal_panel {
position : relative; position : relative;
display : flex; display : flex;
flex-direction : column; flex-direction : column;
font-size : 12px; font-size : 12px;
min-height : 3em; min-height : 3em;
} }
.remix_ui_terminal_bar { .remix_ui_terminal_bar {
z-index : 2; z-index : 2;
} }
.remix_ui_terminal_menu { .remix_ui_terminal_menu {
max-height : 35px; max-height : 35px;
min-height : 35px; min-height : 35px;
} }
.remix_ui_terminal_toggleTerminal { .remix_ui_terminal_toggleTerminal {
cursor : pointer; cursor : pointer;
} }
.remix_ui_terminal_toggleTerminal:hover { .remix_ui_terminal_toggleTerminal:hover {
color : var(--secondary); color : var(--secondary);
} }
.remix_ui_terminal_container { .remix_ui_terminal_container {
overflow-y : auto; overflow-y : auto;
font-family : monospace; font-family : monospace;
background-repeat : no-repeat; background-repeat : no-repeat;
background-position : center 15%; background-position : center 15%;
background-size : auto calc(75% - 1.7em); background-size : auto calc(75% - 1.7em);
} }
.remix_ui_terminal_journal {
margin-top : auto;
font-family : monospace;
overflow-y : scroll;
}
.remix_ui_terminal_block {
white-space : pre-wrap;
font-family : monospace;
line-height : 2ch;
}
.remix_ui_terminal_block > pre {
max-height : 200px;
}
.remix_ui_terminal_cli {
line-height : 1.7em;
font-family : monospace;
padding : .4em;
color : var(--primary);
}
.remix_ui_terminal_prompt {
font-family : monospace;
}
.remix_ui_terminal_input {
outline : none;
font-family : monospace;
}
.remix_ui_terminal_search {
width : 330px;
padding-left : 20px;
padding-top : 1px;
padding-bottom : 1px;
}
.remix_ui_terminal_filter {
height : 80%;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
}
.remix_ui_terminal_searchIcon {
width : 25px;
border-top-left-radius : 3px;
border-bottom-left-radius : 3px;
margin-right : 5px;
}
.remix_ui_terminal_console {
cursor : pointer;
}
.remix_ui_terminal_listenOnNetwork { .remix_ui_terminal_journal {
min-height: auto; margin-top : auto;
} font-family : monospace;
overflow-y : scroll;
}
.remix_ui_terminal_block {
white-space : pre-wrap;
font-family : monospace;
line-height : 2ch;
}
.remix_ui_terminal_block > pre {
max-height : 200px;
}
.remix_ui_terminal_cli {
line-height : 1.7em;
font-family : monospace;
padding : .4em;
color : var(--primary);
}
.remix_ui_terminal_prompt {
font-family : monospace;
}
.remix_ui_terminal_input {
outline : none;
font-family : monospace;
}
.remix_ui_terminal_search {
width : 330px;
padding-left : 20px;
padding-top : 1px;
padding-bottom : 1px;
}
.remix_ui_terminal_filter {
height : 80%;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
}
.remix_ui_terminal_searchIcon {
width : 25px;
border-top-left-radius : 3px;
border-bottom-left-radius : 3px;
margin-right : 5px;
}
.remix_ui_terminal_popup { .remix_ui_terminal_console {
width : 95%; cursor : pointer;
font-family : monospace; }
background-color : var(--secondary);
overflow : auto;
padding-bottom : 13px;
z-index : 80;
bottom : 1em;
border-width : 4px;
left : 2em;
overflow-y : scroll;
}
.remix_ui_terminal_autoCompleteItem { .remix_ui_terminal_listenOnNetwork {
padding : 4px; min-height: auto;
border-radius : 2px; }
}
.remix_ui_terminal_popup a { .remix_ui_terminal_popup {
cursor : pointer; width : 95%;
} font-family : monospace;
background-color : var(--secondary);
overflow : auto;
padding-bottom : 13px;
z-index : 80;
bottom : 1em;
border-width : 4px;
left : 2em;
overflow-y : scroll;
}
.call { .remix_ui_terminal_autoCompleteItem {
font-size: 7px; padding : 4px;
border-radius: 50%; border-radius : 2px;
min-width: 20px; }
min-height: 20px;
display: flex;
justify-content: center;
align-items: center;
color: var(--text-info);
text-transform: uppercase;
font-weight: bold;
}
.remix_ui_terminal_txItem {
color: var(--text-info);
margin-right: 5px;
float: left;
}
.remix_ui_terminal_txItemTitle { .remix_ui_terminal_popup a {
font-weight: bold; cursor : pointer;
} }
/* tx logger css*/ .call {
font-size: 7px;
border-radius: 50%;
min-width: 20px;
min-height: 20px;
display: flex;
justify-content: center;
align-items: center;
color: var(--text-info);
text-transform: uppercase;
font-weight: bold;
}
.remix_ui_terminal_log { .remix_ui_terminal_txItem {
display: flex; color: var(--text-info);
cursor: pointer; margin-right: 5px;
align-items: center; float: left;
cursor: pointer; }
}
.remix_ui_terminal_log:hover {
opacity: 0.8;
}
.remix_ui_terminal_txStatus { .remix_ui_terminal_txItemTitle {
display: flex; font-weight: bold;
font-size: 20px; }
margin-right: 20px;
float: left;
}
.remix_ui_terminal_succeeded {
color: var(--success);
}
.remix_ui_terminal_failed {
color: var(--danger);
}
.remix_ui_terminal_arrow { /* tx logger css*/
color: var(--text-info);
font-size: 20px;
cursor: pointer;
display: flex;
margin-left: 10px;
}
.remix_ui_terminal_arrow:hover {
color: var(--secondary);
}
.remix_ui_terminal_call {
font-size: 7px;
border-radius: 50%;
min-width: 20px;
min-height: 20px;
display: flex;
justify-content: center;
align-items: center;
color: var(--text-info);
text-transform: uppercase;
font-weight: bold;
}
.remix_ui_terminal_tx {
color: var(--text-info);
font-weight: bold;
float: left;
margin-right: 10px;
}
.remix_ui_terminal_tr,
.remix_ui_terminal_td {
border-collapse: collapse;
font-size: 10px;
color: var(--text-info);
border: 1px solid var(--text-info);
transition: max-height 0.3s, padding 0.3s;
}
table .active {
transition: max-height 0.6s, padding 0.6s;
}
#txTable {
margin-top: 1%;
margin-bottom: 5%;
align-self: center;
width: 85%;
}
.remix_ui_terminal_tr, .remix_ui_terminal_td {
padding: 4px;
vertical-align: baseline;
}
.remix_ui_terminal_td:first-child {
min-width: 30%;
width: 30%;
align-items: baseline;
font-weight: bold;
}
.remix_ui_terminal_tableTitle {
width: 25%;
}
.remix_ui_terminal_buttons {
display: flex;
margin-left: auto;
}
.remix_ui_terminal_debug {
white-space: nowrap;
}
.remix_ui_terminal_debug:hover {
opacity: 0.8;
}
.remix_ui_terminal_log {
display: flex;
cursor: pointer;
align-items: center;
cursor: pointer;
padding-top: 0.5rem;
}
.remix_ui_terminal_log:hover {
opacity: 0.8;
}
/* Style the accordion section */ .remix_ui_terminal_txStatus {
.accordion__section {
display: flex; display: flex;
flex-direction: column; font-size: 20px;
margin-right: 20px;
float: left;
}
.remix_ui_terminal_succeeded {
color: var(--success);
}
.remix_ui_terminal_failed {
color: var(--danger);
} }
/* Style the buttons that are used to open and close the accordion panel */ .remix_ui_terminal_arrow {
.accordion { color: var(--text-info);
background-color: #eee; font-size: 20px;
color: #444;
cursor: pointer; cursor: pointer;
padding: 18px;
display: flex; display: flex;
margin-left: 10px;
}
.remix_ui_terminal_arrow:hover {
color: var(--secondary);
}
.remix_ui_terminal_call {
font-size: 7px;
border-radius: 50%;
min-width: 20px;
min-height: 20px;
display: flex;
justify-content: center;
align-items: center; align-items: center;
border: none; color: var(--text-info);
outline: none; text-transform: uppercase;
transition: background-color 0.6s ease; font-weight: bold;
} }
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .remix_ui_terminal_tx {
/* .accordion:hover, color: var(--text-info);
.active { font-weight: bold;
background-color: #ccc; float: left;
} */ margin-right: 10px;
/* Style the accordion content title */
.accordion__title {
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 14px;
} }
/* Style the accordion chevron icon */ .remix_ui_terminal_tr,
.accordion__icon { .remix_ui_terminal_td {
margin-left: auto; border-collapse: collapse;
transition: transform 0.6s ease; font-size: 10px;
color: var(--text-info);
border: 1px solid var(--text-info);
transition: max-height 0.3s, padding 0.3s;
} }
table .active {
/* Style to rotate icon when state is active */ transition: max-height 0.6s, padding 0.6s;
.rotate {
transform: rotate(90deg);
} }
.remix_ui_terminal_tr, .remix_ui_terminal_td {
/* Style the accordion content panel. Note: hidden by default */ padding: 4px;
.accordion__content { vertical-align: baseline;
background-color: white;
overflow: hidden;
transition: max-height 0.6s ease;
} }
.remix_ui_terminal_td:first-child {
/* Style the accordion content text */ min-width: 30%;
.accordion__text { width: 30%;
font-family: "Open Sans", sans-serif; align-items: baseline;
font-weight: 400; font-weight: bold;
font-size: 14px; }
padding: 18px; .remix_ui_terminal_tableTitle {
width: 25%;
}
.remix_ui_terminal_buttons {
display: flex;
margin-left: auto;
}
.remix_ui_terminal_debug {
white-space: nowrap;
}
.remix_ui_terminal_debug:hover {
opacity: 0.8;
} }

10
libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
Unescape View File

@ -381,6 +381,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
} else { } else {
setShowTableHash((prevState) => ([...prevState, tx.hash])) setShowTableHash((prevState) => ([...prevState, tx.hash]))
} }
scrollToBottom()
} }
const handleAutoComplete = () => ( const handleAutoComplete = () => (
@ -422,7 +423,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen) props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen)
} }
const classNameBlock = 'remix_ui_terminal_block px-4 text-break' const classNameBlock = 'remix_ui_terminal_block px-4 py-1 text-break'
return ( return (
<div style={{ flexGrow: 1 }} className='remix_ui_terminal_panel' ref={panelRef}> <div style={{ flexGrow: 1 }} className='remix_ui_terminal_panel' ref={panelRef}>
@ -469,13 +470,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
{ {
handleAutoComplete() handleAutoComplete()
} }
<div data-id='terminalContainerDisplay' style = {{
position: 'relative',
height: '100%',
width: '100%',
opacity: '0.1',
zIndex: -1
}}></div>
<div className="position-relative d-flex flex-column-reverse h-100"> <div className="position-relative d-flex flex-column-reverse h-100">
<div id='journal' className='remix_ui_terminal_journal pt-3 pb-4 px-2 m-2' data-id='terminalJournal'> <div id='journal' className='remix_ui_terminal_journal pt-3 pb-4 px-2 m-2' data-id='terminalJournal'>
{!clearConsole && <TerminalWelcomeMessage packageJson={version}/>} {!clearConsole && <TerminalWelcomeMessage packageJson={version}/>}

Write Preview
Loading…
Cancel
Save