Skip to content

Commit

Permalink
Merge pull request #2228 from chronologic/scheduling/move-advanced
Browse files Browse the repository at this point in the history 
[SCHEDULING] Move advanced scheduling options to +Advanced section
  • Loading branch information
@ConnorBryan
ConnorBryan authored Dec 4, 2018
2 parents 602b0a9 + c00093d commit c213287
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 96 deletions.
39 changes: 30 additions & 9 deletions common/components/TXMetaDataPanel/components/AdvancedGas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,14 @@ import { AppState } from 'features/reducers';
import { configMetaActions, configMetaSelectors } from 'features/config';
import { scheduleSelectors } from 'features/schedule';
import { transactionFieldsActions, transactionSelectors } from 'features/transaction';
import { NonceField, GasLimitField, DataField } from 'components';
import {
NonceField,
GasLimitField,
DataField,
ScheduleDepositField,
ScheduleType,
WindowSizeField
} from 'components';
import { Input } from 'components/ui';
import FeeSummary, { RenderData } from './FeeSummary';
import './AdvancedGas.scss';
Expand Down Expand Up @@ -62,6 +69,21 @@ class AdvancedGas extends React.Component<Props, State> {

return (
<div className="AdvancedGas row form-group">
{scheduling && (
<div>
<div className="row vcenter-sm">
<div className="col-xs-6 col-md-4 col-lg-3">
<ScheduleType />
</div>
<div className="col-xs-6 col-md-8 col-lg-9">
<WindowSizeField />
</div>
</div>

<ScheduleDepositField />
</div>
)}

<div className="AdvancedGas-calculate-limit">
<label className="checkbox">
<input
Expand Down Expand Up @@ -111,12 +133,11 @@ class AdvancedGas extends React.Component<Props, State> {
)}
</div>

{!scheduling &&
dataField && (
<div className="AdvancedGas-data">
<DataField />
</div>
)}
{dataField && (
<div className="AdvancedGas-data">
<DataField />
</div>
)}

{this.renderFee()}
</div>
Expand Down Expand Up @@ -184,9 +205,9 @@ class AdvancedGas extends React.Component<Props, State> {
export default connect(
(state: AppState) => ({
autoGasLimitEnabled: configMetaSelectors.getAutoGasLimitEnabled(state),
scheduleGasPrice: scheduleSelectors.getScheduleGasPrice(state),
validGasPrice: transactionSelectors.isValidGasPrice(state),
timeBounty: scheduleSelectors.getTimeBounty(state),
validGasPrice: transactionSelectors.isValidGasPrice(state)
scheduleGasPrice: scheduleSelectors.getScheduleGasPrice(state)
}),
{ toggleAutoGasLimit: configMetaActions.toggleAutoGasLimit }
)(AdvancedGas);
26 changes: 14 additions & 12 deletions common/containers/Tabs/ScheduleTransaction/components/Fields/TimeBounty/TimeBountyField.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
@import 'common/sass/variables';
@import 'common/sass/mixins';

.TimeBountyField {
&-wrapper {
@media screen and (min-width: 390px) {
display: flex;
justify-content: center;
text-align: center;
}
}
$small-screen: 390px;

.TimeBountyField {
&-preview {
font-weight: normal;
flex-grow: 1;
Expand All @@ -18,7 +12,7 @@
text-align: center;
font-size: 14px;

@media screen and (max-width: 389px) {
@media screen and (max-width: $small-screen) {
margin-top: 10px;
}

Expand All @@ -36,20 +30,28 @@
max-width: initial;
margin-left: 0;

@media screen and (min-width: 390px) {
max-width: 140px;
margin-left: 10px;
@media screen and (min-width: $small-screen) {
width: auto;
}
}

&-input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}

&-advanced-toggle {
display: block;
font-weight: normal;
margin-top: 10px;

&:focus {
color: color(link-color);
}
}

.TimeBountyField-preview {
padding-bottom: 16px;
}
}
65 changes: 36 additions & 29 deletions common/containers/Tabs/ScheduleTransaction/components/Fields/TimeBounty/TimeBountyField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,32 +62,42 @@ class TimeBountyFieldClass extends Component<Props, State> {
</span>
</div>
<div className="TimeBountyField">
<div className="TimeBountyField-wrapper">
{advanced ? (
<Input
isValid={isValid}
className="TimeBountyField-input"
type="text"
value={currentTimeBounty.raw}
placeholder={translateRaw('X_CUSTOM')}
readOnly={isReadOnly}
spellCheck={false}
onChange={this.handleOnChange}
showInvalidWithoutValue={true}
/>
) : (
<GroupedRadioToggle
options={EAC_SCHEDULING_CONFIG.PRESET_TIME_BOUNTIES}
isValid={isValid}
onChangeHandler={this.handleOnChange}
selectedValue={currentTimeBounty.raw}
/>
)}

<div className="TimeBountyField-preview">
<span className="TimeBountyField-preview-display">
${this.getUSDEstimation(currentTimeBounty)}
</span>
<div className="row">
<div className="col-md-4">
<div className="TimeBountyField-preview">
<span className="TimeBountyField-preview-display">
${this.getUSDEstimation(currentTimeBounty)}
</span>
</div>
</div>
<div className="col-md-8">
<div className="TimeBountyField-input">
{advanced ? (
<Input
isValid={isValid}
className="TimeBountyField-input"
type="text"
value={currentTimeBounty.raw}
placeholder={translateRaw('X_CUSTOM')}
readOnly={isReadOnly}
spellCheck={false}
onChange={this.handleOnChange}
showInvalidWithoutValue={true}
/>
) : (
<GroupedRadioToggle
options={EAC_SCHEDULING_CONFIG.PRESET_TIME_BOUNTIES}
isValid={isValid}
onChangeHandler={this.handleOnChange}
selectedValue={currentTimeBounty.raw}
/>
)}
<a onClick={this.toggleAdvanced} className="TimeBountyField-advanced-toggle">
{advanced
? `- ${translateRaw('TRANS_SIMPLE')}`
: `+ ${translateRaw('TRANS_ADVANCED')}`}
</a>
</div>
</div>
</div>

Expand All @@ -99,9 +109,6 @@ class TimeBountyFieldClass extends Component<Props, State> {
</div>
</label>
</div>
<a onClick={this.toggleAdvanced} className="TimeBountyField-advanced-toggle">
{advanced ? `- ${translateRaw('TRANS_SIMPLE')}` : `+ ${translateRaw('TRANS_ADVANCED')}`}
</a>
</>
);
}
Expand Down
55 changes: 9 additions & 46 deletions common/containers/Tabs/ScheduleTransaction/components/ScheduleFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,8 @@ import { connect } from 'react-redux';
import translate from 'translations';
import { AppState } from 'features/reducers';
import { scheduleSelectors } from 'features/schedule';
import {
ScheduleTimezoneDropDown,
ScheduleTimestampField,
ScheduleType,
DataField
} from 'components';
import {
WindowSizeField,
WindowStartField,
ScheduleGasPriceField,
ScheduleGasLimitField,
ScheduleDepositField,
TimeBountyField
} from '.';
import { ScheduleTimezoneDropDown, ScheduleTimestampField } from 'components';
import { WindowStartField, ScheduleGasPriceField, ScheduleGasLimitField, TimeBountyField } from '.';
import './ScheduleFields.scss';

interface Props {
Expand All @@ -34,47 +22,28 @@ class ScheduleFieldsClass extends React.Component<Props> {

<div className="ScheduleFields-description">{translate('SCHEDULING_DESCRIPTION')}</div>

<div className="row form-group vcenter-sm">
<div className="col-lg-3 col-lg-push-9">
<ScheduleType />
<hr className="hidden-lg" />
</div>

<div className="row form-group">
{schedulingType.value === 'time' && (
<>
<div className="col-md-6 col-lg-4 col-lg-pull-3">
<div className="col-md-6">
<ScheduleTimestampField />
</div>
<div className="col-md-4 col-lg-3 col-lg-pull-3">
<div className="col-md-6">
<ScheduleTimezoneDropDown />
</div>
</>
)}

{schedulingType.value === 'block' && (
<>
<div className="col-md-6 col-lg-6 col-lg-pull-3">
<WindowStartField />
</div>
</>
<div className="col-md-12">
<WindowStartField />
</div>
)}

<div
className={`${
schedulingType.value === 'block' ? 'col-md-6 col-lg-2' : 'col-md-2 col-lg-2'
} col-lg-pull-3`}
>
<WindowSizeField />
</div>
</div>

<div className="row form-group">
<div className="col-xs-12 col-md-6">
<div className="col-xs-12 col-md-12">
<TimeBountyField />
<hr className="hidden-md hidden-lg" />
</div>
<div className="col-xs-12 col-md-6">
<ScheduleDepositField />
</div>
</div>

Expand All @@ -87,12 +56,6 @@ class ScheduleFieldsClass extends React.Component<Props> {
</div>
</div>

<div className="row form-group">
<div className="col-xs-12 AdvancedGas-data">
<DataField />
</div>
</div>

<div className="row">
<div className="col-xs-12">
<a
Expand Down

0 comments on commit c213287

Please sign in to comment.