[responsive] Settings and Transaction Details (#2215)

decred · Nov 1, 2019 · 81a9c2c · 81a9c2c
1 parent 71771e0
commit 81a9c2c
Show file tree

Hide file tree

Showing 14 changed files with 446 additions and 92 deletions.
diff --git a/app/components/layout/TitleHeader.js b/app/components/layout/TitleHeader.js
@@ -1,5 +1,5 @@
 const TitleHeader = ({ title, iconClassName, optionalButton }) => (
-  <>
+  <div className="standalone-page-header-container">
     <div className="title-header-icon">
       <div className={iconClassName} />
     </div>
@@ -11,7 +11,7 @@ const TitleHeader = ({ title, iconClassName, optionalButton }) => (
       {optionalButton}
     </div>
     }
-  </>
+  </div>
 );
 
 export default TitleHeader;
diff --git a/app/components/views/GetStartedPage/Settings/Form.js b/app/components/views/GetStartedPage/Settings/Form.js
@@ -28,7 +28,7 @@ export default ({
   isTestNet
 }) => (
   <div className={cx("page-body getstarted", isTestNet && "testnet-body")}>
-    <div className="getstarted loader logs">
+    <div className="getstarted loader logs settings">
       <div className="loader-settings-logs">
         <AboutModalButton { ...{ appVersion, updateAvailable } } />
         <InvisibleButton className="active">
@@ -52,13 +52,15 @@ export default ({
           <PrivacySettings {...{ tempSettings, onChangeTempSettings }} />
         </div>
       </div>
-      <KeyBlueButton
-        disabled={!areSettingsDirty}
-        size="large"
-        block={false}
-        onClick={() => {onSaveSettings(tempSettings); onHideSettings();}}>
-        <T id="getStarted.settings.save" m="Save" />
-      </KeyBlueButton>
+      <div className="save-button-wrapper">
+        <KeyBlueButton
+          disabled={!areSettingsDirty}
+          size="large"
+          block={false}
+          onClick={() => {onSaveSettings(tempSettings); onHideSettings();}}>
+          <T id="getStarted.settings.save" m="Save" />
+        </KeyBlueButton>
+      </div>
       <LoaderBarBottom  {...{ getCurrentBlockCount, getNeededBlocks, getEstimatedTimeLeft }}  />
     </div>
   </div>

diff --git a/app/components/views/SettingsPage/GeneralSettings.js b/app/components/views/SettingsPage/GeneralSettings.js
@@ -107,7 +107,7 @@ const GeneralSettings = ({
 
       <div className="settings-row">
         <div className="settings-label">
-          <T id="settings.advancedDaemon.label" m="Advanced Daemon Startup" />
+          <T id="settings.advancedDaemon.label" m="Adv. Daemon Startup" />
         </div>
         <Tooltip text={ <AlreadySetMessage/> } disabled={!tempSettings.daemonStartAdvancedFromCli}>
           <SettingsInput
@@ -127,10 +127,10 @@ const GeneralSettings = ({
       {walletReady &&
         <div className="settings-row">
           <div className="settings-label">
+            <InfoDocFieldModalButton document="GapLimitInfo" modalClassName="has-warning" double />
             <div className="info-label">
               <T id="settings.gapLimit.label" m="Gap Limit" />
             </div>
-            <InfoDocFieldModalButton document="GapLimitInfo" modalClassName="has-warning" double/>
           </div>
           <div className="settings-input">
             <NumericInput

diff --git a/app/components/views/SettingsPage/Page.js b/app/components/views/SettingsPage/Page.js
@@ -54,7 +54,7 @@ const SettingsPage = ({
   walletReady,
   isTicketAutoBuyerEnabled
 }) => (
-  <StandalonePage header={<SettingsPageHeader {...{ onCloseWallet, walletName, isTicketAutoBuyerEnabled }}/>} >
+  <StandalonePage header={<SettingsPageHeader {...{ onCloseWallet, walletName, isTicketAutoBuyerEnabled }} />} className="settings-standalone-page">
     <div className="settings-wrapper">
       <div className="settings-columns">
         <GeneralSettings {...{ tempSettings, networks, currencies, locales, walletReady,
@@ -85,25 +85,27 @@ const SettingsPage = ({
       </div>
     </div>
 
-    <div className="settings-save-button">
-      {needNetworkReset ?
-        <ResetNetworkButton
-          modalTitle={<T id="settings.resetNetworkTitle" m="Reset required" />}
-          buttonLabel={<T id="settings.save" m="Save" />}
-          modalContent={
-            <T id="settings.resetNetworkContent" m="The setting you have chosen to change requires Decrediton to be restarted.  Please confirm this action before proceeding."/>}
-          disabled={!areSettingsDirty}
-          size="large"
-          block={false}
-          onSubmit={onSaveSettings}/>:
-        <KeyBlueButton
-          disabled={!areSettingsDirty}
-          size="large"
-          block={false}
-          onClick={onSaveSettings}>
-          <T id="settings.save" m="Save" />
-        </KeyBlueButton>
-      }
+    <div className="settings-save-button-wrapper">
+      <div className="settings-save-button">
+        {needNetworkReset ?
+          <ResetNetworkButton
+            modalTitle={<T id="settings.resetNetworkTitle" m="Reset required" />}
+            buttonLabel={<T id="settings.save" m="Save" />}
+            modalContent={
+              <T id="settings.resetNetworkContent" m="The setting you have chosen to change requires Decrediton to be restarted.  Please confirm this action before proceeding."/>}
+            disabled={!areSettingsDirty}
+            size="large"
+            block={false}
+            onSubmit={onSaveSettings}/>:
+          <KeyBlueButton
+            disabled={!areSettingsDirty}
+            size="large"
+            block={false}
+            onClick={onSaveSettings}>
+            <T id="settings.save" m="Save" />
+          </KeyBlueButton>
+        }
+      </div>
     </div>
   </StandalonePage>
 );

diff --git a/app/components/views/TxDetails.js b/app/components/views/TxDetails.js
@@ -154,7 +154,7 @@ const TxDetails = ({
       <div className="txdetails-top">
         <div className="txdetails-top-row">
           <div className="txdetails-name">
-            <T id="txDetails.transactionLabel" m="Transaction" />
+            <T id="txDetails.transactionLabel" m="Transaction" />:
           </div>
           <div className="txdetails-value">
             <a onClick={ openTxUrl } style={{ cursor: "pointer" }}>{txHash}</a>
@@ -176,13 +176,25 @@ const TxDetails = ({
             }
           </div>
         </div>
+        {txType !== "Vote" &&
+          <div className="txdetails-top-row">
+            <div className="txdetails-name"><T id="txDetails.toAddress" m="To address" />:</div>
+            <div className="txdetails-value non-flex">
+              {txOutputs.map(({ address }) => (
+                <div>{addSpacingAroundText(address)}</div>
+              ))}
+              {nonWalletOutputs.map(({ address }) => (
+                <div>{addSpacingAroundText(address)}</div>
+              ))}
+            </div>
+          </div>}
         {txDirection !== "in" && txType !== "Vote" &&
         <div className="txdetails-top-row">
-          <div className="txdetails-name"><T id="txDetails.transactionFeeLabel" m="Transaction fee" /></div>
+          <div className="txdetails-name"><T id="txDetails.transactionFeeLabel" m="Transaction fee" />:</div>
           <div className="txdetails-value"><Balance amount={txFee} /></div>
         </div> }
       </div>
-      {!isConfirmed && <KeyBlueButton className="rebroadcast-button" onClick={publishUnminedTransactions}><T id="txDetails.rebroadcastTransactions" m="Rebroadcast Transaction"/></KeyBlueButton> }
+      {!isConfirmed && <div className="rebroadcast-button-container"><KeyBlueButton className="rebroadcast-button" onClick={publishUnminedTransactions}><T id="txDetails.rebroadcastTransactions" m="Rebroadcast Transaction" /></KeyBlueButton></div> }
       <div className="txdetails-io">
         <div className="txdetails-title"><T id="txDetails.io.title" m="I/O Details" /></div>
         <div className="txdetails-overview">
@@ -253,7 +265,7 @@ const TxDetails = ({
             </div>
           </>
         }
-        <div className="txdetails-top-row">
+        <div className="txdetails-top-row row-transaction">
           <div className="txdetails-name"><T id="txDetails.rawTransactionLabel" m="Raw Transaction" /></div>
           <div className="txdetails-value"><div className="txdetails-value-rawtx">{rawTx}</div><CopyToClipboard textToCopy={rawTx} className="receive-content-nest-copy-to-clipboard-icon" /></div>
         </div>

diff --git a/app/i18n/translations/original.json b/app/i18n/translations/original.json
@@ -556,7 +556,7 @@
   "settings.SPV": "SPV",
   "settings.SPVConnect": "SPV Connect",
   "settings.advancedDaemon.false": "Disabled",
-  "settings.advancedDaemon.label": "Advanced Daemon Startup",
+  "settings.advancedDaemon.label": "Adv. Daemon Startup",
   "settings.advancedDaemon.true": "Enabled",
   "settings.changeConfirmation": "Change your passphrase",
   "settings.changePassphrase": "Successfully changed private passphrase.",
@@ -835,6 +835,7 @@
   "txDetails.ticketCost": "Ticket Cost",
   "txDetails.timestamp": "{timestamp, date, medium} {timestamp, time, medium}",
   "txDetails.transactionFeeLabel": "Transaction fee",
+  "txDetails.toAddress": "To address",
   "txDetails.transactionLabel": "Transaction",
   "txDetails.type.coinbase": "Coinbase",
   "txDetails.type.revoke": "Revoke",

diff --git a/app/style/GetStarted.less b/app/style/GetStarted.less
@@ -81,10 +81,13 @@
     background-size: 173px;
     background-position: 0 0;
   }
-
   &.testnet-body::before{
     background-image: var(--testnet-logo);
   }
+  .tabbed-page-subtitle {
+    font-size: 27px;
+    margin-left: 10px;
+  }
 }
 
 .getstarted {
@@ -105,12 +108,6 @@
     width: 100%;
     overflow-y: auto;
   }
-
-  .settings-privacy {
-    width: 50%;
-    float: right;
-    margin-right: 40px;
-  }
 }
 
 .getstarted.loader {
@@ -222,6 +219,23 @@
   .linear-progress.small {
     float: left;
   }
+
+  &.settings {
+    .go-back-screen-button-area {
+      position: absolute;
+      left: 710px;
+      top: 112px;
+      right: initial;
+    }
+    .save-button-wrapper {
+        width: 740px;
+        text-align: right;
+        .key-blue-button {
+          margin-top: 0;
+          padding: 12px 30px 14px 30px;
+        }
+    } 
+  }  
 }
 
 .loader-bar-bottom {
@@ -851,6 +865,18 @@
   margin-top: 14em;
 }
 
+@media screen and (max-width: 1106px) {
+  .getstarted.loader.settings {
+    .go-back-screen-button-area {
+      left: 620px;
+      top: 112px;
+    }
+    .save-button-wrapper {
+      width: 650px;
+    } 
+  }            
+}
+
 @media screen and (max-width: 768px) {
   .release-notes {
     height: 70vh;
@@ -865,11 +891,9 @@
   .getstarted.loader{
     padding-top: 56px;
     margin-left: 0;
-
-    .go-back-screen-button-area {
-      top:175px;
-      right:60px;
-    }      
+    .loader-bar-estimation{
+        display: none;
+    }
     .loader-settings-logs{
       right:-30px !important;
     }              
@@ -886,12 +910,27 @@
       }
       .go-back-screen-button-area{
         right:40px;
+        top:180px;        
       }
       .loader-settings-logs{
         right:-10px !important;
       }               
     }  
+    &.settings {
+      .tabbed-page-subtitle {
+        margin-left:20px;
+      }
+      .go-back-screen-button-area {
+        top: 94px;
+        left: 325px;
+      }      
+      .save-button-wrapper {
+        text-align: center;
+        width: 355px;
+      } 
+    } 
   }
+
   .advanced-daemon-row.multiple-row{
     width: 78%;
   }
@@ -925,6 +964,7 @@
     padding: 20px !important;
     display: flex;
     flex-direction: column;
+    height: calc(100% - 40px);
 
     &::before{
       background-image: var(--small-logo);
@@ -993,7 +1033,7 @@
     &.logs {
       margin-left: -10px;
       margin-right: -10px;
-      padding-top:60px;
+      padding-top: 30px;
 
       .log-area .log-area-logs{
         margin: 20px;
@@ -1002,10 +1042,16 @@
         margin-left:10px;
       }
       .go-back-screen-button-area{
-        top:130px;
+        top:85px;
         right:20px;
       }    
     }    
+    &.settings {
+      .go-back-screen-button-area {
+        top: 40px;
+        left: 325px;
+      }  
+    }    
   }