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) {
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"]')
.assert.elementNotPresent('div[data-id="terminalContainer"]')
.checkElementStyle('div[data-id="terminalToggleMenu"]', 'height', '35px')
.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) {

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
return (
<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"
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 {
position : relative;
display : flex;
flex-direction : column;
font-size : 12px;
min-height : 3em;
}
.remix_ui_terminal_bar {
z-index : 2;
}
.remix_ui_terminal_menu {
max-height : 35px;
min-height : 35px;
}
.remix_ui_terminal_toggleTerminal {
cursor : pointer;
}
.remix_ui_terminal_toggleTerminal:hover {
color : var(--secondary);
}
.remix_ui_terminal_container {
overflow-y : auto;
font-family : monospace;
background-repeat : no-repeat;
background-position : center 15%;
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;
}
position : relative;
display : flex;
flex-direction : column;
font-size : 12px;
min-height : 3em;
}
.remix_ui_terminal_bar {
z-index : 2;
}
.remix_ui_terminal_menu {
max-height : 35px;
min-height : 35px;
}
.remix_ui_terminal_toggleTerminal {
cursor : pointer;
}
.remix_ui_terminal_toggleTerminal:hover {
color : var(--secondary);
}
.remix_ui_terminal_container {
overflow-y : auto;
font-family : monospace;
background-repeat : no-repeat;
background-position : center 15%;
background-size : auto calc(75% - 1.7em);
}
.remix_ui_terminal_listenOnNetwork {
min-height: auto;
}
.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_popup {
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;
}
.remix_ui_terminal_console {
cursor : pointer;
}
.remix_ui_terminal_autoCompleteItem {
padding : 4px;
border-radius : 2px;
}
.remix_ui_terminal_listenOnNetwork {
min-height: auto;
}
.remix_ui_terminal_popup a {
cursor : pointer;
}
.remix_ui_terminal_popup {
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 {
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_txItem {
color: var(--text-info);
margin-right: 5px;
float: left;
}
.remix_ui_terminal_autoCompleteItem {
padding : 4px;
border-radius : 2px;
}
.remix_ui_terminal_txItemTitle {
font-weight: bold;
}
.remix_ui_terminal_popup a {
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 {
display: flex;
cursor: pointer;
align-items: center;
cursor: pointer;
}
.remix_ui_terminal_log:hover {
opacity: 0.8;
}
.remix_ui_terminal_txItem {
color: var(--text-info);
margin-right: 5px;
float: left;
}
.remix_ui_terminal_txStatus {
display: flex;
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_txItemTitle {
font-weight: bold;
}
.remix_ui_terminal_arrow {
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;
}
/* tx logger css*/
.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 */
.accordion__section {
.remix_ui_terminal_txStatus {
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 */
.accordion {
background-color: #eee;
color: #444;
.remix_ui_terminal_arrow {
color: var(--text-info);
font-size: 20px;
cursor: pointer;
padding: 18px;
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;
border: none;
outline: none;
transition: background-color 0.6s ease;
color: var(--text-info);
text-transform: uppercase;
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) */
/* .accordion:hover,
.active {
background-color: #ccc;
} */
/* Style the accordion content title */
.accordion__title {
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 14px;
.remix_ui_terminal_tx {
color: var(--text-info);
font-weight: bold;
float: left;
margin-right: 10px;
}
/* Style the accordion chevron icon */
.accordion__icon {
margin-left: auto;
transition: transform 0.6s ease;
.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;
}
/* Style to rotate icon when state is active */
.rotate {
transform: rotate(90deg);
table .active {
transition: max-height 0.6s, padding 0.6s;
}
/* Style the accordion content panel. Note: hidden by default */
.accordion__content {
background-color: white;
overflow: hidden;
transition: max-height 0.6s ease;
.remix_ui_terminal_tr, .remix_ui_terminal_td {
padding: 4px;
vertical-align: baseline;
}
/* Style the accordion content text */
.accordion__text {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
padding: 18px;
.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;
}

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

@ -381,6 +381,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
} else {
setShowTableHash((prevState) => ([...prevState, tx.hash]))
}
scrollToBottom()
}
const handleAutoComplete = () => (
@ -422,7 +423,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
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 (
<div style={{ flexGrow: 1 }} className='remix_ui_terminal_panel' ref={panelRef}>
@ -469,13 +470,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
{
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 id='journal' className='remix_ui_terminal_journal pt-3 pb-4 px-2 m-2' data-id='terminalJournal'>
{!clearConsole && <TerminalWelcomeMessage packageJson={version}/>}

Write Preview
Loading…
Cancel
Save