added pointer to expandable sections, synced with recorder

pull/2249/head
lianahus 3 years ago committed by yann300
parent 75e602dc49
commit 9c5c27e7a1
  1. 4
      libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
  2. 10
      libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
  3. 6
      libs/remix-ui/run-tab/src/lib/css/run-tab.css
  4. 3
      libs/remix-ui/run-tab/src/lib/types/index.ts
  5. 4
      libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
  6. 3
      libs/remix-ui/solidity-compiler/src/lib/css/style.css

@ -12,7 +12,7 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
return ( return (
<div className="udapp_instanceContainer border-0 list-group-item"> <div className="udapp_instanceContainer border-0 list-group-item">
<div className="d-flex justify-content-between align-items-center pl-2 ml-1 mb-2" <label className="h6 d-flex justify-content-between align-items-center pl-2 mb-2"
title="Autogenerated generic user interfaces for interaction with deployed contracts"> title="Autogenerated generic user interfaces for interaction with deployed contracts">
Deployed Contracts Deployed Contracts
{ instanceList.length > 0 { instanceList.length > 0
@ -20,7 +20,7 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
title="Clear instances list and reset recorder" aria-hidden="true"> title="Clear instances list and reset recorder" aria-hidden="true">
</i> : null </i> : null
} }
</div> </label>
{ instanceList.length > 0 { instanceList.length > 0
? <div> { props.instances.instanceList.map((instance, index) => { ? <div> { props.instances.instanceList.map((instance, index) => {
return <UniversalDappUI return <UniversalDappUI

@ -18,9 +18,9 @@ export function RecorderUI (props: RecorderProps) {
return ( return (
<div className="udapp_cardContainer list-group-item border-0"> <div className="udapp_cardContainer list-group-item border-0">
<div className="d-flex justify-content-between" onClick={toggleClass}> <div className="udapp_recorderSection d-flex justify-content-between" onClick={toggleClass}>
<div className="d-flex"> <div className="d-flex">
<label>Transactions recorded</label> <label className="h6 udapp_recorderSection">Transactions recorded</label>
<div className="ml-2 mb-2 badge badge-pill badge-primary" title="The number of recorded transactions">{props.count}</div> <div className="ml-2 mb-2 badge badge-pill badge-primary" title="The number of recorded transactions">{props.count}</div>
</div> </div>
<div> <div>
@ -29,12 +29,12 @@ export function RecorderUI (props: RecorderProps) {
</span> </span>
</div> </div>
</div> </div>
<div className={`flex-column ${toggleExpander ? "d-flex" : "d-none"}`}> <div className={`border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
<div className="udapp_recorderDescription mt-2"> <div className="p-2 mt-2">
All transactions (deployed contracts and function executions) can be saved and replayed in All transactions (deployed contracts and function executions) can be saved and replayed in
another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3. another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
</div> </div>
<div className="udapp_transactionActions"> <div className="mb-2 udapp_transactionActions">
<i className="fas fa-save savetransaction udapp_recorder udapp_icon" <i className="fas fa-save savetransaction udapp_recorder udapp_icon"
onClick={triggerRecordButton} title="Save Transactions" aria-hidden="true"> onClick={triggerRecordButton} title="Save Transactions" aria-hidden="true">
</i> </i>

@ -70,9 +70,6 @@
.udapp_container { .udapp_container {
padding: 0 24px 16px; padding: 0 24px 16px;
} }
.udapp_recorderDescription {
margin: 0 15px 15px 0;
}
.udapp_contractNames { .udapp_contractNames {
width: 100%; width: 100%;
border: 1px solid border: 1px solid
@ -121,7 +118,8 @@
.udapp_ataddressinput { .udapp_ataddressinput {
padding: .25rem; padding: .25rem;
} }
.udapp_create { .udapp_recorderSection:hover {
cursor: pointer;
} }
.udapp_input { .udapp_input {
font-size: 10px !important; font-size: 10px !important;

@ -227,7 +227,8 @@ export interface ContractGUIProps {
clickCallBack: (inputs: { name: string, type: string }[], input: string) => void, clickCallBack: (inputs: { name: string, type: string }[], input: string) => void,
widthClass?: string, widthClass?: string,
evmBC: any, evmBC: any,
lookupOnly: boolean lookupOnly: boolean,
disabled?: boolean
} }
export interface MainnetProps { export interface MainnetProps {
network: Network, network: Network,

@ -684,9 +684,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
</div> </div>
} }
</div> </div>
<div className="d-flex px-4 pb-1 justify-content-between" onClick={toggleConfigurations}> <div className="d-flex px-4 remixui_compilerConfigSection justify-content-between" onClick={toggleConfigurations}>
<div className="d-flex"> <div className="d-flex">
<label>Advanced Configurations</label> <label className="h6 remixui_compilerConfigSection">Advanced Configurations</label>
</div> </div>
<div> <div>
<span data-id='scConfigExpander' onClick={toggleConfigurations}> <span data-id='scConfigExpander' onClick={toggleConfigurations}>

@ -72,6 +72,9 @@
.remixui_compilerSection { .remixui_compilerSection {
padding: 12px 24px 16px; padding: 12px 24px 16px;
} }
.remixui_compilerConfigSection:hover {
cursor: pointer;
}
.remixui_compilerLabel { .remixui_compilerLabel {
margin-bottom: 2px; margin-bottom: 2px;
font-size: 11px; font-size: 11px;

Loading…
Cancel
Save