ui: improve active order interactions (decred#2171)

* improve active order interactions Show all live orders and fill out the remainder of the table with recent orders that are retired. Show (a copy of) the button menu on hover, allowing the user to perform actions without expanding the active order entry.
martonp · Sep 2, 2023 · 883c935 · 883c935
1 parent 3987a21
commit 883c935
Show file tree

Hide file tree

Showing 15 changed files with 237 additions and 57 deletions.
diff --git a/client/core/core.go b/client/core/core.go
@@ -4847,11 +4847,20 @@ func (c *Core) Orders(filter *OrderFilter) ([]*Order, error) {
 		copy(oid[:], filter.Offset)
 	}
 
+	var mkt *db.OrderFilterMarket
+	if filter.Market != nil {
+		mkt = &db.OrderFilterMarket{
+			Base:  filter.Market.Base,
+			Quote: filter.Market.Quote,
+		}
+	}
+
 	ords, err := c.db.Orders(&db.OrderFilter{
 		N:        filter.N,
 		Offset:   oid,
 		Hosts:    filter.Hosts,
 		Assets:   filter.Assets,
+		Market:   mkt,
 		Statuses: filter.Statuses,
 	})
 	if err != nil {
@@ -4864,6 +4873,10 @@ func (c *Core) Orders(filter *OrderFilter) ([]*Order, error) {
 		if err != nil {
 			return nil, err
 		}
+		baseWallet, baseOK := c.wallet(corder.BaseID)
+		quoteWallet, quoteOK := c.wallet(corder.QuoteID)
+		corder.ReadyToTick = baseOK && baseWallet.connected() && baseWallet.unlocked() &&
+			quoteOK && quoteWallet.connected() && quoteWallet.unlocked()
 		cords = append(cords, corder)
 	}
 

diff --git a/client/core/types.go b/client/core/types.go
@@ -1092,6 +1092,10 @@ type OrderFilter struct {
 	Hosts    []string            `json:"hosts"`
 	Assets   []uint32            `json:"assets"`
 	Statuses []order.OrderStatus `json:"statuses"`
+	Market   *struct {
+		Base  uint32 `json:"baseID"`
+		Quote uint32 `json:"quoteID"`
+	} `json:"market"`
 }
 
 // Account holds data returned from AccountExport.

diff --git a/client/db/bolt/db.go b/client/db/bolt/db.go
@@ -1162,6 +1162,13 @@ func (db *BoltDB) Orders(orderFilter *dexdb.OrderFilter) (ords []*dexdb.MetaOrde
 		}
 	}
 
+	if orderFilter.Market != nil {
+		filters = append(filters, func(_ []byte, oBkt *bbolt.Bucket) bool {
+			baseID, quoteID := intCoder.Uint32(oBkt.Get(baseKey)), intCoder.Uint32(oBkt.Get(quoteKey))
+			return orderFilter.Market.Base == baseID && orderFilter.Market.Quote == quoteID
+		})
+	}
+
 	if !orderFilter.Offset.IsZero() {
 		offsetOID := orderFilter.Offset
 		var stampB []byte

diff --git a/client/db/types.go b/client/db/types.go
@@ -1192,6 +1192,11 @@ func (n *Notification) Encode() []byte {
 		AddData([]byte(n.TopicID))
 }
 
+type OrderFilterMarket struct {
+	Base  uint32
+	Quote uint32
+}
+
 // OrderFilter is used to limit the results returned by a query to (DB).Orders.
 type OrderFilter struct {
 	// N is the number of orders to return in the set.
@@ -1206,6 +1211,8 @@ type OrderFilter struct {
 	// Assets is a list of BIP IDs for acceptable assets. A zero-length Assets
 	// means all assets are accepted.
 	Assets []uint32
+	// Market limits results to a specific market.
+	Market *OrderFilterMarket
 	// Statuses is a list of acceptable statuses. A zero-length Statuses means
 	// all statuses are accepted.
 	Statuses []order.OrderStatus

diff --git a/client/webserver/locales/en-us.go b/client/webserver/locales/en-us.go
@@ -94,6 +94,8 @@ var EnUS = map[string]string{
 	"fee balance":                    "fee balance",
 	"Sell Orders":                    "Sell Orders",
 	"Your Orders":                    "Your Orders",
+	"sweep_orders":                   "Hide fully executed orders",
+	"sweep_order":                    "Hide this fully executed order",
 	"Recent Matches":                 "Recent Matches",
 	"Type":                           "Type",
 	"Side":                           "Side",

diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss
@@ -130,7 +130,6 @@ div[data-handler=markets] {
   }
 
   .user-order {
-    margin: 0 20px;
     border: 1px solid $light_border_color;
 
     &:not(:last-child) {
@@ -164,6 +163,10 @@ div[data-handler=markets] {
         &.sell {
           background-color: $sellcolor_light;
         }
+
+        &.inactive {
+          opacity: 0.5;
+        }
       }
 
       .active-indicator {
@@ -187,6 +190,7 @@ div[data-handler=markets] {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       row-gap: 10px;
+      column-gap: 5px;
       line-height: 1;
 
       .user-order-datum {
@@ -895,3 +899,27 @@ div[data-handler=markets] {
     max-height: none;
   }
 }
+
+.user-order-floaty-menu {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  z-index: 5;
+  border-style: none solid solid;
+  border-width: 0 2px 2px 1px;
+  border-color: $light_input_border;
+  background-color: $light_body_bg;
+  cursor: pointer;
+  overflow: hidden;
+
+  & > span,
+  & > a {
+    margin: 0 5px;
+    padding-right: 10px;
+    padding-left: 10px;
+
+    &:hover {
+      background-color: #7775;
+    }
+  }
+}
diff --git a/client/webserver/site/src/css/market_dark.scss b/client/webserver/site/src/css/market_dark.scss
@@ -184,6 +184,11 @@ body.dark {
     border-color: $dark_border_color;
     background-color: $dark_body_bg;
   }
+
+  .user-order-floaty-menu {
+    border-color: $dark_border_color $dark_input_border $dark_input_border $dark_input_border;
+    background-color: $dark_body_bg;
+  }
 }
 
 @include media-breakpoint-up(lg) {

diff --git a/client/webserver/site/src/html/bodybuilder.tmpl b/client/webserver/site/src/html/bodybuilder.tmpl
@@ -9,7 +9,7 @@
   <link rel="icon" href="/img/favicon.png?v=AK4XS4">
   <meta name="description" content="Decred DEX Client Web Portal">
   <title>{{.Title}}</title>
-  <link href="/css/style.css?v=ee884edb|b85eabd3" rel="stylesheet">
+  <link href="/css/style.css?v=2fc9aa03|01a695f9" rel="stylesheet">
 </head>
 <body {{if .UserInfo.DarkMode}} class="dark"{{end}}>
   <div class="popup-notes" id="popupNotes">
@@ -103,7 +103,7 @@
 {{end}}
 
 {{define "bottom"}}
-<script src="/js/entry.js?v=d7464fea|35cd087a"></script>
+<script src="/js/entry.js?v=29ba2144|89d1e8b8"></script>
 </body>
 </html>
 {{end}}
diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
@@ -193,7 +193,7 @@
 
           {{- /* ORDER FORM */ -}}
           <div class="order-panel pb-3 position-relative">
-            <div class="d-flex flex-column align-items-stretch">
+            <div id="orderScroller" class="d-flex flex-column align-items-stretch">
 
               {{- /* TOKEN APPROVAL */ -}}
               <div class="fs15 pt-1 pb-3 text-center brdrbottom d-hide" id="tokenApproval">
@@ -407,12 +407,14 @@
               </div>
 
               {{- /* USER ORDERS */ -}}
-              <div class="text-center fs20 sans-light my-1">[[[Your Orders]]]</div>
+              <div class="text-center fs20 sans-light my-1">
+                [[[Your Orders]]]
+              </div>
               <div id="unreadyOrdersMsg" class="d-hide px-3 py-1 flex-center fs16 red">[[[unready_wallets_msg]]]</div>
               <div id="userNoOrders" class="p-3 flex-center fs16 grey">no active orders</div>
-              <div id="userOrders" class="mb-3">
+              <div id="userOrders">
                 <div id="userOrderTmpl" class="user-order">
-                  <div data-tmpl="header" class="user-order-header">
+                  <div data-tmpl="header" class="user-order-header pointer">
                     <div data-tmpl="sideLight" class="side-indicator"></div>
                     <span data-tmpl="side"></span>
                     <span data-tmpl="qty" class="ms-1"></span>
@@ -428,10 +430,10 @@
                     <!-- <span class="fs11 ico-open ms-2"></span> -->
                   </div>
                   <div data-tmpl="details" class="order-details d-hide">
-                    <div class="user-order-datum full-span d-flex flex-row justify-content-start align-items-center brdrbottom fs12 p-2">
-                      <span data-tmpl="accelerateBttn" class="ico-rocket pointer hoverbg d-hide me-3" data-tooltip="[[[accelerate_order]]]"></span>
-                      <span data-tmpl="cancelBttn" class="ico-cross pointer hoverbg fs11 d-hide me-3" data-tooltip="[[[cancel_order]]]"></span>
-                      <a data-tmpl="link" class="ico-open pointer hoverbg me-3 fs13 plainlink" data-tooltip="[[[order details]]]"></a>
+                    <div class="user-order-datum full-span d-flex flex-row justify-content-start align-items-center brdrbottom fs14">
+                      <span data-tmpl="accelerateBttn" class="ico-rocket pointer hoverbg d-hide py-2 px-3 me-1" data-tooltip="[[[accelerate_order]]]"></span>
+                      <span data-tmpl="cancelBttn" class="ico-cross pointer hoverbg fs11 d-hide py-2 px-3 mx-1" data-tooltip="[[[cancel_order]]]"></span>
+                      <a data-tmpl="link" class="ico-open pointer hoverbg fs13 plainlink py-2 px-3 ms-1" data-tooltip="[[[order details]]]"></a>
                     </div>
                     <div class="user-order-datum">
                       <span>[[[Type]]]</span>
@@ -469,10 +471,10 @@
                 </div>
               </div>{{- /* END USER ORDERS */ -}}
 
-              <a href="/orders" class="flex-center my-2 plainlink">[[[view order history]]]</a>
+              <a href="/orders" class="flex-center py-1 plainlink hoverbg">[[[view order history]]]</a>
 
               {{- /* RECENT MATCHES */ -}}
-              <div id=recentMatchesBox  class="d-flex flex-column align-items-stretch px-3 pb-4 mt-2 brdrtop">
+              <div id=recentMatchesBox  class="d-flex flex-column align-items-stretch px-3 pb-4 brdrtop">
                 <div class="text-center fs20 sans-light my-3">[[[Recent Matches]]]</div>
                 <table id="recentMatchesTable" class="ordertable">
                   <thead>