Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ui: improve active order interactions #2171

Merged
merged 4 commits into from Sep 2, 2023
Merged

ui: improve active order interactions #2171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
73360bb
improve active order interactions
buck54321 Feb 18, 2023
d094af4
remove sweeper. show inactive orders. handle unsupported assets
buck54321 Jul 31, 2023
b3d660c
always show all active orders
buck54321 Jul 31, 2023
3e4b5e9
ensure old but active orders are shown
buck54321 Jul 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 13 additions & 0 deletions client/core/core.go
View file
Open in desktop
Expand Up @@ -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 {
Expand All @@ -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)
}

Expand Down
4 changes: 4 additions & 0 deletions client/core/types.go
View file
Open in desktop
Expand Up @@ -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.
Expand Down
7 changes: 7 additions & 0 deletions client/db/bolt/db.go
View file
Open in desktop
Expand Up @@ -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
Expand Down
7 changes: 7 additions & 0 deletions client/db/types.go
View file
Open in desktop
Expand Up @@ -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.
Expand All @@ -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
Expand Down
2 changes: 2 additions & 0 deletions client/webserver/locales/en-us.go
View file
Open in desktop
Expand Up @@ -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",
Expand Down
30 changes: 29 additions & 1 deletion client/webserver/site/src/css/market.scss
View file
Open in desktop
Expand Up @@ -130,7 +130,6 @@ div[data-handler=markets] {
}

.user-order {
margin: 0 20px;
border: 1px solid $light_border_color;

&:not(:last-child) {
Expand Down Expand Up @@ -164,6 +163,10 @@ div[data-handler=markets] {
&.sell {
background-color: $sellcolor_light;
}

&.inactive {
opacity: 0.5;
}
}

.active-indicator {
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}
5 changes: 5 additions & 0 deletions client/webserver/site/src/css/market_dark.scss
View file
Open in desktop
Expand Up @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions client/webserver/site/src/html/bodybuilder.tmpl
View file
Open in desktop
Expand Up @@ -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">
Expand Down Expand Up @@ -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}}
22 changes: 12 additions & 10 deletions client/webserver/site/src/html/markets.tmpl
View file
Open in desktop
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down