add close buttons to modal dialogs

decred · Nov 2, 2020 · 6716b58 · 6716b58
1 parent c09017d
commit 6716b58
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 76 deletions.
diff --git a/client/webserver/live_test.go b/client/webserver/live_test.go
@@ -952,7 +952,7 @@ func randStr(minLen, maxLen int) string {
 
 func (c *TCore) runRandomPokes() {
 	nextWait := func() time.Duration {
-		return time.Duration(float64(time.Second)*rand.Float64()) * 5
+		return time.Duration(float64(time.Second)*rand.Float64()) * 10
 	}
 	for {
 		select {
@@ -999,7 +999,7 @@ func TestServer(t *testing.T) {
 	numSells = 50
 	feedPeriod = 500 * time.Millisecond
 	initialize := false
-	register := true
+	register := false
 	forceDisconnectWallet = true
 	gapWidthFactor = 0.2
 	randomPokes = true

diff --git a/client/webserver/site/src/css/main.scss b/client/webserver/site/src/css/main.scss
@@ -406,6 +406,22 @@ hr.dashed {
   background-color: #7775;
 }
 
+div.form-closer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  font-size: 11px;
+  cursor: pointer;
+
+  span {
+    opacity: 0.8;
+  }
+}
+
 #tooltip {
   position: absolute;
   left: -10000px;

diff --git a/client/webserver/site/src/html/forms.tmpl b/client/webserver/site/src/html/forms.tmpl
@@ -33,11 +33,12 @@
 {{end}}
 
 {{define "newWalletForm"}}
-<div class="bg2 px-2 py-1 text-center fs18">
+<div class="bg2 px-2 py-1 text-center fs18 position-relative">
   Add a
   <img id="nwAssetLogo" class="micro-icon mx-1">
   <span id="nwAssetName"></span>
   Wallet
+  <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
 </div>
 <div class="p-4">
   {{if .}}
@@ -78,11 +79,12 @@
 {{end}}
 
 {{define "unlockWalletForm"}}
-<div class="bg2 px-2 py-1 text-center fs18">
+<div class="bg2 px-2 py-1 text-center fs18 position-relative">
   Unlock
   <img id="uwAssetLogo" class="micro-icon mx-1">
   <span id="uwAssetName"></span>
   Wallet
+  <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
 </div>
 <div class="p-4">
   {{if .}}
@@ -102,7 +104,10 @@
 {{end}}
 
 {{define "dexAddrForm"}}
-<div class="bg2 px-2 py-1 text-center fs18">Add a DEX</div>
+<div class="bg2 px-2 py-1 text-center position-relative fs18">
+  Add a DEX
+  <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
+</div>
 <div class="p-4">
   <div>
     <label for="dexAddr" class="pl-1 mb-1">DEX Address</label>
@@ -125,7 +130,10 @@
 {{end}}
 
 {{define "confirmRegistrationForm"}}
-<div class="bg2 px-2 py-1 text-center fs18">Confirm Registration</div>
+<div class="bg2 px-2 py-1 text-center position-relative fs18">
+  Confirm Registration
+  <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
+</div>
 <div class="p-4">
   <div class="fs16">
     Enter your app password to confirm DEX registration.
@@ -145,8 +153,9 @@
 {{end}}
 
 {{define "cancelOrderForm"}}
-<div class="bg2 px-2 py-1 text-center fs18">
+<div class="bg2 px-2 py-1 text-center fs18 position-relative">
   Cancel Order
+  <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
 </div>
 <div class="p-3">
   Enter your password to submit a cancel order for the remaining

diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
@@ -352,54 +352,61 @@
     </form>
 
     {{- /* VERIFY ORDER */ -}}
-    <form class="card bg1 p-4 position-relative fs16 text-center d-hide" id="verifyForm" autocomplete="off">
-      <div class="echo-data">
-        You are submitting an order to
-        <div class="fs20 demi py-1">
-          <span id="vSide"></span>
-          <span id="vQty"></span>
-          <span id="vBase"></span>
-        </div>
-        <div id="verifyLimit">
-          at a rate of
+    <form class="card bg1 position-relative fs16 text-center d-hide" id="verifyForm" autocomplete="off">
+      <div class="bg2 px-2 py-1 text-center fs18 position-relative">
+        Verify Order
+        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
+      </div>
+      <div class="py-3 px-4">
+        <div class="echo-data">
+          You are submitting an order to
           <div class="fs20 demi py-1">
-            <span id="vRate"></span>
-            <sup data-unit="quote"></sup>/<sub data-unit="base"></sub>
+            <span id="vSide"></span>
+            <span id="vQty"></span>
+            <span id="vBase"></span>
           </div>
-          for a total of
-          <div class="fs20 demi py-1">
-            <span id="vTotal"></span>
-            <span id="vQuote"></span>
+          <div id="verifyLimit">
+            at a rate of
+            <div class="fs20 demi py-1">
+              <span id="vRate"></span>
+              <sup data-unit="quote"></sup>/<sub data-unit="base"></sub>
+            </div>
+            for a total of
+            <div class="fs20 demi py-1">
+              <span id="vTotal"></span>
+              <span id="vQuote"></span>
+            </div>
           </div>
-        </div>
-        <div id="verifyMarket">
-          This is a market order and will match the best available order(s) on the
-          book. Based on the current market mid-gap rate, you might receive about
-          <div class="fs20 demi py-1">
-            <span id="vmTotal"></span>
-            <span id="vmAsset"></span>
-            <span class="fs15">(<div class="d-inline" id="vmLots"></div class="d-inline"> lots)</span>
+          <div id="verifyMarket">
+            This is a market order and will match the best available order(s) on the
+            book. Based on the current market mid-gap rate, you might receive about
+            <div class="fs20 demi py-1">
+              <span id="vmTotal"></span>
+              <span id="vmAsset"></span>
+              <span class="fs15">(<div class="d-inline" id="vmLots"></div class="d-inline"> lots)</span>
+            </div>
           </div>
         </div>
-      </div>
-      <hr class="dashed my-4">
-      <div class="fs16 text-center">Authorize this order with your app password.</div>
-      <div class="d-flex mt-3">
-        <div class="col-12 p-0 text-left">
-          <label for="vPass" class="pl-1 mb-1">Password</label>
-          <input type="password" class="form-control select" id="vPass">
+        <hr class="dashed my-3">
+        <div class="fs16 text-center">Authorize this order with your app password.</div>
+        <div class="d-flex mt-3">
+          <div class="col-12 p-0 text-left">
+            <label for="vPass" class="pl-1 mb-1">Password</label>
+            <input type="password" class="form-control select" id="vPass">
+          </div>
+          <div class="col-12 p-0 text-right">
+            <div>&nbsp;</div>
+            <button id="vSubmit" type="button" class="w-75 mt-1 justify-content-center fs15 bg2 selected">Submit</button>
+          </div>
         </div>
-        <div class="col-12 p-0 text-right">
-          <div>&nbsp;</div>
-          <button id="vSubmit" type="button" class="w-75 mt-1 justify-content-center fs15 bg2 selected">Submit</button>
+        <hr class="dashed my-3">
+        <div class="disclaimer mt-2 fs14">
+          <span class="red">IMPORTANT</span>: Trades take time to settle, and you cannot turn off the DEX client software,
+          or the <span data-unit="quote"></span> or <span data-unit="base"></span> blockchain and/or wallet software, until
+          settlement is complete. Settlement can complete as quickly as a few minutes or take as long as a few hours.
         </div>
       </div>
-      <hr class="dashed my-4">
-      <div class="disclaimer mt-3 fs14">
-        <span class="red">IMPORTANT</span>: Trades take time to settle, and you cannot turn off the DEX client software,
-        or the <span data-unit="quote"></span> or <span data-unit="base"></span> blockchain and/or wallet software, until
-        settlement is complete. Settlement can complete as quickly as a few minutes or take as long as a few hours.
-      </div>
+
     </form>
 
     <form class="card bg1 d-hide" id="cancelForm" autocomplete="off">

diff --git a/client/webserver/site/src/html/wallets.tmpl b/client/webserver/site/src/html/wallets.tmpl
@@ -109,21 +109,29 @@
     </form>
 
     {{- /* DEPOSIT ADDRESS */ -}}
-    <div class="card bg1 text-center fs20 p-2 d-hide" id="deposit">
-      Deposit <span id="depositName"></span> to
-      <div class="mono d-inline bg0 p-1 mb-1 fs15" id="depositAddress"></div>
-      <div class="my-3">
-        <button id="newDepAddrBttn" type="button" class=" px-2 mt-1 justify-content-center fs15 bg2 selected">New Deposit Address</button>
+    <div class="card bg1 text-center fs20 d-hide" id="deposit">
+      <div class="bg2 px-2 py-1 text-center position-relative fs18">
+        Deposit
+        <img id="depositLogo" class="micro-icon mx-1">
+        <span id="depositName"></span>
+        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
+      </div>
+      <div class="p-2">
+        <div class="mono d-inline bg0 p-1 mb-1 fs15" id="depositAddress"></div>
+        <div class="my-3">
+          <button id="newDepAddrBttn" type="button" class=" px-2 mt-1 justify-content-center fs15 bg2 selected">New Deposit Address</button>
+        </div>
+        <div class="fs15 pt-3 text-center d-hide errcolor" id="depositErr"></div>
       </div>
-      <div class="fs15 pt-3 text-center d-hide errcolor" id="depositErr"></div>
     </div>
 
     {{- /* WITHDRAW */ -}}
     <form class="card bg1 pb-3 d-hide" id="withdrawForm" autocomplete="off">
-      <div class="bg2 px-2 py-1 text-center fs18">
+      <div class="bg2 px-2 py-1 text-center position-relative fs18">
         Withdraw
         <img id="withdrawLogo" class="micro-icon mx-1">
         <span id="withdrawName"></span>
+        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       </div>
       <div class="px-4 mt-3">
         <label for="withdrawAddr" class="pl-1 mb-1">Address</label>
@@ -156,11 +164,12 @@
 
     {{- /* RECONFIGURE WALLET */ -}}
     <form class="card bg1 pb-3 d-hide mt-3" id="walletReconfig" autocomplete="off">
-      <div class="bg2 px-2 py-1 text-center fs18">
+      <div class="bg2 px-2 py-1 text-center position-relative fs18">
         Reconfigure
         <img id="recfgAssetLogo" class="micro-icon mx-1">
         <span id="recfgAssetName"></span>
         Wallet
+        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       </div>
       <div class="px-3 py-1" id="reconfigInputs">
         {{template "walletConfigTemplates"}}
@@ -190,11 +199,12 @@
 
     {{- /* CHANGE WALLET PASSWORD */ -}}
     <form class="card bg1 pb-3 d-hide mt-3" id="walletRepw" autocomplete="off">
-      <div class="bg2 px-2 py-1 text-center fs18">
+      <div class="bg2 px-2 py-1 text-center position-relative fs18">
         Change
         <img id="repwAssetLogo" class="micro-icon mx-1">
         <span id="repwAssetName"></span>
         Wallet Password
+        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       </div>
       <div class="px-4 pt-3 fs15">
         Changing the password below does not change the password for your wallet software.

diff --git a/client/webserver/site/src/js/markets.js b/client/webserver/site/src/js/markets.js
@@ -160,21 +160,23 @@ export default class MarketsPage extends BasePage {
     // Cancel order form
     bindForm(page.cancelForm, page.cancelSubmit, async () => { this.submitCancel() })
 
+    const closePopups = () => {
+      Doc.hide(page.forms)
+      page.vPass.value = ''
+      page.cancelPass.value = ''
+    }
+
     // If the user clicks outside of a form, it should close the page overlay.
     bind(page.forms, 'mousedown', e => {
       if (!Doc.mouseInElement(e, this.currentForm)) {
-        Doc.hide(page.forms)
-        switch (this.currentForm.id) {
-          case 'verifyForm':
-            page.vPass.value = ''
-            break
-          case 'cancelForm':
-            page.cancelPass.value = ''
-            break
-        }
+        closePopups()
       }
     })
 
+    page.forms.querySelectorAll('.form-closer').forEach(el => {
+      Doc.bind(el, 'click', () => { closePopups() })
+    })
+
     // Event listeners for interactions with the various input fields.
     bind(page.lotField, 'change', () => { this.lotChanged() })
     bind(page.lotField, 'keyup', () => { this.lotChanged() })

diff --git a/client/webserver/site/src/js/register.js b/client/webserver/site/src/js/register.js
@@ -30,6 +30,9 @@ export default class RegistrationPage extends BasePage {
       'dexCertBox'
     ])
 
+    // Hide the form closers for the registration process.
+    body.querySelectorAll('.form-closer').forEach(el => Doc.hide(el))
+
     // SET APP PASSWORD
     bindForm(page.appPWForm, page.appPWSubmit, () => { this.setAppPass() })
 

diff --git a/client/webserver/site/src/js/settings.js b/client/webserver/site/src/js/settings.js
@@ -46,11 +46,18 @@ export default class SettingsPage extends BasePage {
     Doc.bind(page.addCert, 'click', () => this.page.certFile.click())
     forms.bind(page.dexAddrForm, page.submitDEXAddr, () => { this.verifyDEX() })
     forms.bind(page.confirmRegForm, page.submitConfirm, () => { this.registerDEX() })
+
+    const closePopups = () => {
+      Doc.hide(page.forms)
+      page.appPass.value = ''
+    }
+
     Doc.bind(page.forms, 'mousedown', e => {
-      if (!Doc.mouseInElement(e, this.currentForm)) {
-        Doc.hide(page.forms)
-        page.appPass.value = ''
-      }
+      if (!Doc.mouseInElement(e, this.currentForm)) { closePopups() }
+    })
+
+    page.forms.querySelectorAll('.form-closer').forEach(el => {
+      Doc.bind(el, 'click', () => { closePopups() })
     })
   }