From: Zhiting Lin <zlin035@uottawa.ca>
Date: Wed, 19 Sep 2018 07:18:02 +0000 (+0800)
Subject: change the gas table to the slider style
X-Git-Url: http://git.sourceforge.jp/view?a=commitdiff_plain;h=9c6c77c0c0f8e3cd2ea3ec5c87dcab673d5f37a2;p=bytom%2Fbytom-dashboard.git

change the gas table to the slider style
---

diff --git a/src/features/shared/components/GasField/GasField.jsx b/src/features/shared/components/GasField/GasField.jsx
index 82a212c..5a7d6fd 100644
--- a/src/features/shared/components/GasField/GasField.jsx
+++ b/src/features/shared/components/GasField/GasField.jsx
@@ -1,5 +1,8 @@
 import React from 'react'
 import pick from 'lodash/pick'
+import { normalizeBTMAmountUnit } from 'utility/buildInOutDisplay'
+import { btmID } from 'utility/environment'
+import styles from './GasField.scss'
 
 const TEXT_FIELD_PROPS = [
   'value',
@@ -9,7 +12,7 @@ const TEXT_FIELD_PROPS = [
   'name'
 ]
 
-class SliderField extends React.Component {
+class GasField extends React.Component {
   constructor(props) {
     super(props)
   }
@@ -19,12 +22,12 @@ class SliderField extends React.Component {
     const {touched, error} = this.props.fieldProps
 
     return(
-      <div className='form-group'>
-        <span>{fieldProps.value}</span>
-        <input className='form-control'
+      <div className={`form-group ${styles.slider}`}>
+        {this.props.gas && <span>{normalizeBTMAmountUnit(btmID, fieldProps.value* this.props.gas, this.props.btmAmountUnit)}</span>}
+        <input className={fieldProps.value>0&&styles[`gradient-${fieldProps.value}`]}
                type='range'
-               min={this.props.min}
-               max={this.props.max}
+               min={0}
+               max={3}
                step='1'
                {...fieldProps} />
 
@@ -35,4 +38,4 @@ class SliderField extends React.Component {
   }
 }
 
-export default SliderField
+export default GasField
diff --git a/src/features/shared/components/GasField/GasField.scss b/src/features/shared/components/GasField/GasField.scss
new file mode 100644
index 0000000..b8d0961
--- /dev/null
+++ b/src/features/shared/components/GasField/GasField.scss
@@ -0,0 +1,13 @@
+.slider{
+  width: 340px;
+}
+
+@for $i from 1 through 3 {
+  .gradient-#{$i}::-webkit-slider-runnable-track{
+    background:linear-gradient(to right, $highlight-default 0%, $highlight-default ($i/3)*100% ,#eee ($i/3)*100% , #eee) !important;
+  }
+
+  .gradient-#{$i}::-moz-range-track{
+    background:linear-gradient(to right, $highlight-default 0%, $highlight-default ($i/3)*100% ,#eee ($i/3)*100%, #eee) !important;
+  }
+}
\ No newline at end of file
diff --git a/src/features/shared/components/index.js b/src/features/shared/components/index.js
index 77f2479..35b2a54 100644
--- a/src/features/shared/components/index.js
+++ b/src/features/shared/components/index.js
@@ -14,6 +14,7 @@ import FieldLabel from './FieldLabel/FieldLabel'
 import Flash from './Flash/Flash'
 import FormContainer from './FormContainer/FormContainer'
 import FormSection from './FormSection/FormSection'
+import GasField from './GasField/GasField'
 import HiddenField from './HiddenField'
 import JsonField from './JsonField/JsonField'
 import KeyConfiguration from './KeyConfiguration'
@@ -52,6 +53,7 @@ export {
   Flash,
   FormContainer,
   FormSection,
+  GasField,
   HiddenField,
   JsonField,
   KeyConfiguration,
diff --git a/src/features/transactions/actions.js b/src/features/transactions/actions.js
index 6574494..19e2ab2 100644
--- a/src/features/transactions/actions.js
+++ b/src/features/transactions/actions.js
@@ -19,20 +19,8 @@ function preprocessTransaction(formParams) {
   }
 
   if (formParams.form === 'normalTx') {
-    let gasPrice = 0
-    switch (formParams.gas.type) {
-      case 'Fast':
-        gasPrice = formParams.state.estimateGas * 2
-        break
-      case 'Customize':
-        gasPrice = formParams.gas.price
-        break
-      case 'Standard':
-      default:
-        gasPrice = formParams.state.estimateGas * 1
-        break
-    }
-
+    const gasPrice = formParams.state.estimateGas * Number(formParams.gasLevel)
+   
     builder.actions.push({
       accountAlias: formParams.accountAlias,
       accountId: formParams.accountId,
diff --git a/src/features/transactions/components/New/New.jsx b/src/features/transactions/components/New/New.jsx
index 46163fb..47145ba 100644
--- a/src/features/transactions/components/New/New.jsx
+++ b/src/features/transactions/components/New/New.jsx
@@ -62,7 +62,7 @@ class Form extends React.Component {
         }
       }
 
-      return !(this.props.normalform['gas']['price'])
+      return true
     }else{
       return !(this.props.advform['actions'].length > 0 ||
       this.props.advform['signTransaction'] ||
diff --git a/src/features/transactions/components/New/NormalTransactionForm.jsx b/src/features/transactions/components/New/NormalTransactionForm.jsx
index 8c9e85b..ee4c462 100644
--- a/src/features/transactions/components/New/NormalTransactionForm.jsx
+++ b/src/features/transactions/components/New/NormalTransactionForm.jsx
@@ -8,33 +8,16 @@ import {
   AmountInputMask,
   ErrorBanner,
   SubmitIndicator,
-  PasswordField
+  PasswordField,
+  GasField
 } from 'features/shared/components'
 import {chainClient} from 'utility/environment'
 import {reduxForm} from 'redux-form'
 import React from 'react'
 import styles from './New.scss'
 import disableAutocomplete from 'utility/disableAutocomplete'
-import { normalizeBTMAmountUnit } from 'utility/buildInOutDisplay'
 import { btmID } from 'utility/environment'
 
-const rangeOptions = [
-  {
-    label: 'Standard',
-    label_zh: '标准',
-    ratio: 1
-  },
-  {
-    label: 'Fast',
-    label_zh: '快速',
-    ratio: 2
-  },
-  {
-    label: 'Customize',
-    label_zh: '自定义',
-    value: ''
-  }
-]
 
 class NormalTxForm extends React.Component {
   constructor(props) {
@@ -48,17 +31,12 @@ class NormalTxForm extends React.Component {
     this.disableSubmit = this.disableSubmit.bind(this)
   }
 
-  componentDidMount() {
-    this.props.fields.gas.type.onChange(rangeOptions[0].label)
-    this.props.fields.gas.price.onChange(rangeOptions[0].value)
-  }
-
   disableSubmit(props) {
     const hasValue = target => {
       return !!(target && target.value)
     }
 
-    return !( (this.state.estimateGas || hasValue(props.gas.price))&&
+    return !( (this.state.estimateGas)&&
       (hasValue(props.accountId) || hasValue(props.accountAlias)) &&
       (hasValue(props.assetId) || hasValue(props.assetAlias)) &&
       hasValue(props.address) && (hasValue(props.amount)) &&
@@ -151,7 +129,7 @@ class NormalTxForm extends React.Component {
 
   render() {
     const {
-      fields: {accountId, accountAlias, assetId, assetAlias, address, amount, gas, password},
+      fields: {accountId, accountAlias, assetId, assetAlias, address, amount, password, gasLevel},
       error,
       handleSubmit,
       submitting
@@ -163,12 +141,6 @@ class NormalTxForm extends React.Component {
 
     let submitLabel = lang === 'zh' ? '提交交易' : 'Submit transaction'
 
-    const gasOnChange = event => {
-      gas.type.onChange(event)
-
-      const range = rangeOptions.find(item => item.label === event.target.value)
-      gas.price.onChange(range.value)
-    }
     const assetDecimal = this.props.assetDecimal(this.props.fields) || 0
 
     const showAvailableBalance = (accountAlias.value || accountId.value) &&
@@ -180,102 +152,71 @@ class NormalTxForm extends React.Component {
 
     return (
         <form
+          className={styles.container}
           onSubmit={handleSubmit(this.submitWithValidation)} {...disableAutocomplete}
           onKeyDown={(e) => { this.props.handleKeyDown(e, handleSubmit(this.submitWithValidation), this.disableSubmit(this.props.fields)) }}>
-          <FormSection title={lang === 'zh' ? '简单交易' : 'Normal Trasaction'}>
+          <div>
+            <label className={styles.title}>{lang === 'zh' ? '从' : 'From'}</label>
+            <div className={styles.main}>
+              <ObjectSelectorField
+                key='account-selector-field'
+                keyIndex='normaltx-account'
+                lang={lang}
+                title={lang === 'zh' ? '账户' : 'Account'}
+                aliasField={Autocomplete.AccountAlias}
+                fieldProps={{
+                  id: accountId,
+                  alias: accountAlias
+                }}
+              />
               <div>
-                <label className={styles.title}>{lang === 'zh' ? '从' : 'From'}</label>
-                <div className={styles.main}>
-                  <ObjectSelectorField
-                    key='account-selector-field'
-                    keyIndex='normaltx-account'
-                    lang={lang}
-                    title={lang === 'zh' ? '账户' : 'Account'}
-                    aliasField={Autocomplete.AccountAlias}
-                    fieldProps={{
-                      id: accountId,
-                      alias: accountAlias
-                    }}
-                  />
-                  <ObjectSelectorField
-                    key='asset-selector-field'
-                    keyIndex='normaltx-asset'
-                    lang={lang}
-                    title={lang === 'zh' ? '资产' : 'Asset'}
-                    aliasField={Autocomplete.AssetAlias}
-                    fieldProps={{
-                      id: assetId,
-                      alias: assetAlias
-                    }}
-                  />
-                  {showAvailableBalance && availableBalance &&
-                  <small className={styles.balanceHint}>{lang === 'zh' ? '可用余额:' : 'Available balance:'} {availableBalance}</small>}
-                </div>
+                <ObjectSelectorField
+                  key='asset-selector-field'
+                  keyIndex='normaltx-asset'
+                  lang={lang}
+                  title={lang === 'zh' ? '资产' : 'Asset'}
+                  aliasField={Autocomplete.AssetAlias}
+                  fieldProps={{
+                    id: assetId,
+                    alias: assetAlias
+                  }}
+                />
+                {showAvailableBalance && availableBalance &&
+                <small className={styles.balanceHint}>{lang === 'zh' ? '可用余额:' : 'Available balance:'} {availableBalance}</small>}
               </div>
+            </div>
 
-              <div>
-                <label className={styles.title}>{lang === 'zh' ? '至' : 'To'}</label>
-                <div className={styles.main}>
-                  <TextField title={lang === 'zh' ? '地址' : 'Address'} fieldProps={{
-                    ...address,
-                    onBlur: (e) => {
-                      address.onBlur(e)
-                      this.estimateNormalTransactionGas()
-                    },
-                  }}/>
-                  {!showBtmAmountUnit &&
-                  <AmountInputMask title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount} decimal={assetDecimal}
-                  />}
-                  {showBtmAmountUnit &&
-                  <AmountUnitField title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount}/>
-                  }
-                </div>
-              </div>
+            <label className={styles.title}>{lang === 'zh' ? '至' : 'To'}</label>
+            <div className={styles.main}>
+              <TextField title={lang === 'zh' ? '地址' : 'Address'} fieldProps={{
+                ...address,
+                onBlur: (e) => {
+                  address.onBlur(e)
+                  this.estimateNormalTransactionGas()
+                },
+              }}/>
+              {!showBtmAmountUnit &&
+              <AmountInputMask title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount} decimal={assetDecimal}
+              />}
+              {showBtmAmountUnit &&
+              <AmountUnitField title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount}/>
+              }
+            </div>
+
+            <label className={styles.title}>{lang === 'zh' ? '选择手续费' : 'Select Fee'}</label>
+            <GasField
+              gas={this.state.estimateGas}
+              fieldProps={gasLevel}
+              btmAmountUnit={this.props.btmAmountUnit}
+            />
 
-            <label className={styles.title}>Gas</label>
-            <table>
-              <tbody className={styles.optionsBtnContianer}>
-                {rangeOptions.map((option) =>
-                  <tr className={styles.optionsBtn}>
-                    <td className={styles.optionsLabel}>
-                      <label>
-                        <input type='radio'
-                               {...gas.type}
-                               onChange={gasOnChange}
-                               value={option.label}
-                               checked={option.label == gas.type.value}
-                        />
-                        {lang === 'zh' ? option.label_zh : option.label}
-                      </label>
-                    </td>
-                    <td>
-                      {
-                        option.label == gas.type.value && option.label !== 'Customize'
-                        && this.state.estimateGas && ((lang === 'zh' ? '估算' : 'estimated') + '   ' + normalizeBTMAmountUnit(btmID,
-                          option.ratio * this.state.estimateGas,
-                          this.props.btmAmountUnit))
-                      }
-                      {
-                        option.label === 'Customize' && gas.type.value === 'Customize' &&
-                        <div>
-                          <AmountUnitField
-                            autoFocus={true}
-                            fieldProps={gas.price}
-                            placeholder='Enter gas'/>
-                        </div>
-                      }
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
 
             <label className={styles.title}>{lang === 'zh' ? '密码' : 'Password'}</label>
             <PasswordField
               placeholder={lang === 'zh' ? '请输入密码' : 'Please enter the password'}
               fieldProps={password}
             />
-          </FormSection>
+          </div>
 
           <FormSection className={styles.submitSection}>
             {error &&
@@ -342,9 +283,7 @@ export default BaseNew.connect(
       'amount',
       'assetAlias',
       'assetId',
-      'gas',
-      'gas.type',
-      'gas.price',
+      'gasLevel',
       'address',
       'submitAction',
       'password'
@@ -355,6 +294,7 @@ export default BaseNew.connect(
     touchOnChange: true,
     initialValues: {
       submitAction: 'submit',
+      gasLevel: '1'
     },
   }
   )(NormalTxForm)
diff --git a/static/styles/_body.scss b/static/styles/_body.scss
index d093a5f..9fac1fb 100644
--- a/static/styles/_body.scss
+++ b/static/styles/_body.scss
@@ -224,3 +224,79 @@ span.react-console-prompt {
 div.react-console-message-Error{
   color: $text-danger;
 }
+
+input[type=range] {
+  height: 34px;
+  -webkit-appearance: none;
+}
+input[type=range]:focus {
+  outline: none;
+}
+
+//Chrome
+input[type=range]::-webkit-slider-runnable-track {
+  height: 7px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: $background-content-color;
+}
+input[type=range]::-webkit-slider-thumb {
+  height: 20px;
+  width: 20px;
+  border-radius: 15px;
+  background: $highlight-default;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -6px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: $background-content-color;
+}
+
+//Firefox
+input[type=range]::-moz-range-track {
+  height: 7px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: $background-content-color;
+}
+input[type=range]::-moz-range-thumb {
+  border: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 15px;
+  background: $highlight-default;
+  cursor: pointer;
+}
+
+//IE
+input[type=range]::-ms-track {
+  height: 7px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: $highlight-default;
+  border-radius: 2px;
+}
+input[type=range]::-ms-fill-upper {
+  background: $background-content-color;
+  border-radius: 2px;
+}
+input[type=range]::-ms-thumb {
+  margin-top: 1px;
+  height: 20px;
+  width: 20px;
+  border-radius: 15px;
+  background: $highlight-default;
+  cursor: pointer;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: $highlight-default;
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: $background-content-color;
+}