terminal title bar UI adjustments according to last design

pull/11/head
LianaHus 4 years ago committed by ioedeveloper
parent d9378b91f4
commit 5473908ffa
  1. 34
      apps/remix-ide/src/app/panels/styles/terminal-styles.js
  2. 13
      apps/remix-ide/src/app/panels/terminal.js

@ -20,20 +20,7 @@ var css = csjs`
max-height : 35px;
min-height : 35px;
}
.clear {
margin-right : 20px;
width : 10px;
cursor : pointer;
display : flex;
}
.clear:hover {
color : var(--secondary);
}
.toggleTerminal {
margin-right : 20px;
margin-left : 2px;
font-size : 14px;
font-weight : bold;
cursor : pointer;
}
.toggleTerminal:hover {
@ -95,9 +82,7 @@ var css = csjs`
padding-bottom : 1px;
}
.filter {
padding-right : 0px;
margin-right : 0px;
height : 100%;
height : 80%;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
@ -126,20 +111,6 @@ var css = csjs`
border-left : 1px solid var(--secondary)
height : 65%;
}
.listenOnNetworkLabel {
white-space : nowrap;
}
.pendingTx {
border-radius : 50%;
margin-right : 30px;
min-width : 13px;
height : 13px;
display : flex;
justify-content : center;
align-items : center;
font-size : 14px;
user-select : none;
}
.dragbarHorizontal {
position : absolute;
top : 0;
@ -149,6 +120,9 @@ var css = csjs`
cursor : ns-resize;
z-index : 999;
}
.listenOnNetwork {
min-height: auto;
}
.ghostbar {
position : absolute;
height : 6px;

@ -147,11 +147,11 @@ class Terminal extends Plugin {
self._view.icon = yo`
<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
class="btn btn-secondary btn-sm align-items-center ${css.toggleTerminal} fas fa-angle-double-down" data-id="terminalToggleIcon"></i>`
class="mx-2 ${css.toggleTerminal} fas fa-angle-double-down" data-id="terminalToggleIcon"></i>`
self._view.dragbar = yo`
<div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
self._view.pendingTxCount = yo`<div class=${css.pendingTx} title='Pending Transactions'>0</div>`
self._view.pendingTxCount = yo`<div class="mx-2" title='Pending Transactions'>0</div>`
self._view.inputSearch = yo`<input
spellcheck="false"
type="text"
@ -166,21 +166,22 @@ class Terminal extends Plugin {
${self._view.dragbar}
<div class="${css.menu} border-top border-dark bg-light" data-id="terminalToggleMenu">
${self._view.icon}
<div class=${css.clear} id="clearConsole" data-id="terminalClearConsole" onclick=${clear}>
<div class="mx-2" id="clearConsole" data-id="terminalClearConsole" onclick=${clear}>
<i class="fas fa-ban" aria-hidden="true" title="Clear console"
onmouseenter=${hover} onmouseleave=${hover}></i>
</div>
${self._view.pendingTxCount}
<div class=${css.verticalLine}></div>
<div class="form-check">
<div class="mx-2 d-flex pb-1 align-items-center ${css.listenOnNetwork} custom-control custom-checkbox">
<input
class="pb-0 form-check-input custom-control-input"
id="listenNetworkCheck"
onchange=${listenOnNetwork}
type="checkbox" class="form-check-input "
type="checkbox"
title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
>
<label
class="${css.listenOnNetworkLabel} form-check-label"
class="pt-1 form-check-label custom-control-label text-nowrap""
title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
for="listenNetworkCheck"
>

Loading…
Cancel
Save