mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-04-19 01:25:55 +00:00
Fix button spinner and dialog to dark
This commit is contained in:
AlphaX-Projects
GitHub
parent
a0db12c96f
commit
a797315c94
@ -53,6 +53,8 @@ class TradePortal extends LitElement {
|
|||||||
--mdc-select-outlined-hover-border-color: var(--txtfieldhoverborder);
|
--mdc-select-outlined-hover-border-color: var(--txtfieldhoverborder);
|
||||||
--mdc-select-label-ink-color: var(--black);
|
--mdc-select-label-ink-color: var(--black);
|
||||||
--mdc-select-ink-color: var(--black);
|
--mdc-select-ink-color: var(--black);
|
||||||
|
--mdc-theme-surface: var(--white);
|
||||||
|
--mdc-dialog-content-ink-color: var(--black);
|
||||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||||
@ -66,6 +68,13 @@ class TradePortal extends LitElement {
|
|||||||
--_lumo-grid-secondary-border-color: var(--border2);
|
--_lumo-grid-secondary-border-color: var(--border2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
paper-spinner-lite {
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
--paper-spinner-color: var(--mdc-theme-primary);
|
||||||
|
--paper-spinner-stroke-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
mwc-tab-bar {
|
mwc-tab-bar {
|
||||||
--mdc-text-transform: none;
|
--mdc-text-transform: none;
|
||||||
--mdc-tab-color-default: var(--black);
|
--mdc-tab-color-default: var(--black);
|
||||||
@ -389,8 +398,9 @@ class TradePortal extends LitElement {
|
|||||||
column-gap: 0.5em;
|
column-gap: 0.5em;
|
||||||
row-gap: 0.4em;
|
row-gap: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
`;
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
@ -468,390 +478,390 @@ class TradePortal extends LitElement {
|
|||||||
// TODO: Move each template to a separate components! Maybe
|
// TODO: Move each template to a separate components! Maybe
|
||||||
historicTradesTemplate() {
|
historicTradesTemplate() {
|
||||||
return html`
|
return html`
|
||||||
<div class="historic-trades">
|
<div class="historic-trades">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<header><span>HISTORIC MARKET TRADES</span></header>
|
<header><span>HISTORIC MARKET TRADES</span></header>
|
||||||
<div class="border-wrapper">
|
<div class="border-wrapper">
|
||||||
<div class="loadingContainer" id="loadingHistoricTrades" style="display:${this.isLoadingHistoricTrades ? 'block' : 'none'}"><div class="loading"></div><span style="color: var(--black);">Loading...</span></div>
|
<div class="loadingContainer" id="loadingHistoricTrades" style="display:${this.isLoadingHistoricTrades ? 'block' : 'none'}"><div class="loading"></div><span style="color: var(--black);">Loading...</span></div>
|
||||||
<vaadin-grid theme="compact column-borders row-stripes wrap-cell-content" id="historicTradesGrid" aria-label="Historic Trades" .items="${this.listedCoins.get(this.selectedCoin).historicTrades}">
|
<vaadin-grid theme="compact column-borders row-stripes wrap-cell-content" id="historicTradesGrid" aria-label="Historic Trades" .items="${this.listedCoins.get(this.selectedCoin).historicTrades}">
|
||||||
<vaadin-grid-column auto-width resizable header="Amount (QORT)" path="qortAmount"></vaadin-grid-column>
|
<vaadin-grid-column auto-width resizable header="Amount (QORT)" path="qortAmount"></vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount))
|
const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount))
|
||||||
render(html`${price}`, root)
|
render(html`${price}`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
render(html`<span> ${data.item.foreignAmount} </span>`, root)
|
render(html`<span> ${data.item.foreignAmount} </span>`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
</vaadin-grid>
|
</vaadin-grid>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
</div>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
openTradesTemplate() {
|
openTradesTemplate() {
|
||||||
return html`
|
return html`
|
||||||
<div class="open-trades">
|
<div class="open-trades">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<header><span>OPEN MARKET SELL ORDERS</span></header>
|
<header><span>OPEN MARKET SELL ORDERS</span></header>
|
||||||
<div class="border-wrapper">
|
<div class="border-wrapper">
|
||||||
<div class="loadingContainer" id="loadingHistoricTrades" style="display:${this.isLoadingOpenTrades ? 'block' : 'none'}"><div class="loading"></div><span style="color: var(--black);">Loading...</span></div>
|
<div class="loadingContainer" id="loadingHistoricTrades" style="display:${this.isLoadingOpenTrades ? 'block' : 'none'}"><div class="loading"></div><span style="color: var(--black);">Loading...</span></div>
|
||||||
<vaadin-grid multi-sort="true" theme="compact column-borders row-stripes wrap-cell-content" id="openOrdersGrid" aria-label="Open Orders" .items="${this.listedCoins.get(this.selectedCoin).openFilteredOrders}">
|
<vaadin-grid multi-sort="true" theme="compact column-borders row-stripes wrap-cell-content" id="openOrdersGrid" aria-label="Open Orders" .items="${this.listedCoins.get(this.selectedCoin).openFilteredOrders}">
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Amount (QORT)"
|
header="Amount (QORT)"
|
||||||
id="qortAmountColumn"
|
id="qortAmountColumn"
|
||||||
path="qortAmount"
|
path="qortAmount"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
render(html`<span> ${this.round(data.item.qortAmount)} </span>`, root)
|
render(html`<span> ${this.round(data.item.qortAmount)} </span>`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
id="priceColumn"
|
id="priceColumn"
|
||||||
path="price"
|
path="price"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
render(html`<span> ${this.round(data.item.price)} </span>`, root)
|
render(html`<span> ${this.round(data.item.price)} </span>`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
render(html`<span> ${data.item.foreignAmount} </span>`, root)
|
render(html`<span> ${data.item.foreignAmount} </span>`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Seller"
|
header="Seller"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
render(html`<span> ${data.item.qortalCreator} </span>`, root)
|
render(html`<span> ${data.item.qortalCreator} </span>`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
</vaadin-grid>
|
</vaadin-grid>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
</div>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
openMarketTemplate() {
|
openMarketTemplate() {
|
||||||
return html`
|
return html`
|
||||||
<div class="open-market-container">
|
<div class="open-market-container">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<mwc-tab-bar id="tabs-1" activeIndex="0">
|
<mwc-tab-bar id="tabs-1" activeIndex="0">
|
||||||
<mwc-tab id="tab-buy" label="Buy" @click="${(e) => this.displayTabContent('buy')}"></mwc-tab>
|
<mwc-tab id="tab-buy" label="Buy" @click="${(e) => this.displayTabContent('buy')}"></mwc-tab>
|
||||||
<mwc-tab id="tab-sell" label="Sell" @click="${(e) => this.displayTabContent('sell')}"></mwc-tab>
|
<mwc-tab id="tab-sell" label="Sell" @click="${(e) => this.displayTabContent('sell')}"></mwc-tab>
|
||||||
</mwc-tab-bar>
|
</mwc-tab-bar>
|
||||||
<z id="tabs-1-content">
|
<z id="tabs-1-content">
|
||||||
<div id="tab-buy-content">
|
<div id="tab-buy-content">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div style="margin-left: auto">
|
<div style="margin-left: auto">
|
||||||
<mwc-icon-button class="btn-clear" title="Clear Form" icon="clear_all" @click="${() => this.clearBuyForm()}"></mwc-icon-button>
|
<mwc-icon-button class="btn-clear" title="Clear Form" icon="clear_all" @click="${() => this.clearBuyForm()}"></mwc-icon-button>
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
<mwc-textfield
|
|
||||||
style="width: 100%; color: var(--black);"
|
|
||||||
id="buyAmountInput"
|
|
||||||
required readOnly label="Amount (QORT)"
|
|
||||||
placeholder="0.0000"
|
|
||||||
type="text"
|
|
||||||
auto-validate="false"
|
|
||||||
outlined value="${this.initialAmount}"
|
|
||||||
>
|
|
||||||
</mwc-textfield>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<mwc-textfield
|
|
||||||
style="width: 100%; color: var(--black);"
|
|
||||||
id="buyPriceInput"
|
|
||||||
required readOnly
|
|
||||||
label="Price Ea. (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
|
||||||
placeholder="0.0000"
|
|
||||||
type="text"
|
|
||||||
auto-validate="false"
|
|
||||||
outlined value="${this.initialAmount}"
|
|
||||||
>
|
|
||||||
</mwc-textfield>
|
|
||||||
</p>
|
|
||||||
<p style="margin-bottom: 10px;">
|
|
||||||
<mwc-textfield
|
|
||||||
style="width: 100%; color: var(--black);"
|
|
||||||
id="buyTotalInput"
|
|
||||||
required readOnly
|
|
||||||
label="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
|
||||||
placeholder="0.0000"
|
|
||||||
type="text"
|
|
||||||
auto-validate="false"
|
|
||||||
outlined value="${this.initialAmount}"
|
|
||||||
>
|
|
||||||
</mwc-textfield>
|
|
||||||
<mwc-textfield
|
|
||||||
style="display: none; visibility: hidden;"
|
|
||||||
id="qortalAtAddress"
|
|
||||||
required readOnly
|
|
||||||
label="Qortal AT Address"
|
|
||||||
type="text"
|
|
||||||
auto-validate="false"
|
|
||||||
outlined
|
|
||||||
>
|
|
||||||
</mwc-textfield>
|
|
||||||
</p>
|
|
||||||
<span class="you-have">You have: ${this.listedCoins.get(this.selectedCoin).balance} ${this.listedCoins.get(this.selectedCoin).coinCode}</span>
|
|
||||||
<div class="buttons">
|
|
||||||
<div>
|
|
||||||
<mwc-button class="buy-button" ?disabled="${this.buyBtnDisable}" style="width:100%;" raised @click="${(e) => this.buyAction(e)}">
|
|
||||||
${this.isBuyLoading === false ? 'BUY' : html`<paper-spinner-lite active></paper-spinner-lite>`}
|
|
||||||
</mwc-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<p>
|
||||||
<div id="tab-sell-content">
|
<mwc-textfield
|
||||||
<div class="card">
|
style="width: 100%; color: var(--black);"
|
||||||
<div style="margin-left: auto">
|
id="buyAmountInput"
|
||||||
<mwc-icon-button class="btn-clear" title="Clear Form" icon="clear_all" @click="${() => this.clearSellForm()}"></mwc-icon-button>
|
required readOnly label="Amount (QORT)"
|
||||||
</div>
|
placeholder="0.0000"
|
||||||
<p>
|
type="text"
|
||||||
<mwc-textfield
|
auto-validate="false"
|
||||||
style="width: 100%; color: var(--black);"
|
outlined value="${this.initialAmount}"
|
||||||
id="sellAmountInput"
|
>
|
||||||
required label="Amount (QORT)"
|
</mwc-textfield>
|
||||||
placeholder="0.0000"
|
</p>
|
||||||
@input="${(e) => { this._checkSellAmount(e) }}"
|
<p>
|
||||||
type="number"
|
<mwc-textfield
|
||||||
auto-validate="false"
|
style="width: 100%; color: var(--black);"
|
||||||
outlined value="${this.initialAmount}"
|
id="buyPriceInput"
|
||||||
>
|
required readOnly
|
||||||
</mwc-textfield>
|
label="Price Ea. (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
</p>
|
placeholder="0.0000"
|
||||||
<p>
|
type="text"
|
||||||
<mwc-textfield
|
auto-validate="false"
|
||||||
style="width: 100%; color: var(--black);"
|
outlined value="${this.initialAmount}"
|
||||||
id="sellPriceInput"
|
>
|
||||||
required label="Price Ea. (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
</mwc-textfield>
|
||||||
placeholder="0.0000"
|
</p>
|
||||||
@input="${(e) => { this._checkSellAmount(e) }}"
|
<p style="margin-bottom: 10px;">
|
||||||
type="number"
|
<mwc-textfield
|
||||||
auto-validate="false"
|
style="width: 100%; color: var(--black);"
|
||||||
outlined value="${this.initialAmount}"
|
id="buyTotalInput"
|
||||||
>
|
required readOnly
|
||||||
</mwc-textfield>
|
label="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
</p>
|
placeholder="0.0000"
|
||||||
<p style="margin-bottom: 10px;">
|
type="text"
|
||||||
<mwc-textfield
|
auto-validate="false"
|
||||||
style="width: 100%; color: var(--black);"
|
outlined value="${this.initialAmount}"
|
||||||
id="sellTotalInput"
|
>
|
||||||
required readOnly
|
</mwc-textfield>
|
||||||
label="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
<mwc-textfield
|
||||||
placeholder="0.0000"
|
style="display: none; visibility: hidden;"
|
||||||
type="text"
|
id="qortalAtAddress"
|
||||||
auto-validate="false"
|
required readOnly
|
||||||
outlined value="${this.initialAmount}"
|
label="Qortal AT Address"
|
||||||
>
|
type="text"
|
||||||
</mwc-textfield>
|
auto-validate="false"
|
||||||
</p>
|
outlined
|
||||||
<span class="you-have">You have: ${this.listedCoins.get("QORTAL").balance} QORT</span>
|
>
|
||||||
<div class="buttons">
|
</mwc-textfield>
|
||||||
<div>
|
</p>
|
||||||
<mwc-button class="sell-button" ?disabled="${this.sellBtnDisable}" style="width:100%;" raised @click="${(e) => this.sellAction()}">
|
<span class="you-have">You have: ${this.listedCoins.get(this.selectedCoin).balance} ${this.listedCoins.get(this.selectedCoin).coinCode}</span>
|
||||||
${this.isSellLoading === false ? 'SELL' : html`<paper-spinner-lite active></paper-spinner-lite>`}
|
<div class="buttons">
|
||||||
</mwc-button>
|
<div>
|
||||||
</div>
|
<mwc-button class="buy-button" ?disabled="${this.buyBtnDisable}" style="width:100%;" raised @click="${(e) => this.buyAction(e)}">
|
||||||
|
${this.isBuyLoading === false ? 'BUY' : html`<paper-spinner-lite active></paper-spinner-lite>`}
|
||||||
|
</mwc-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="tab-sell-content">
|
||||||
</div>
|
<div class="card">
|
||||||
`;
|
<div style="margin-left: auto">
|
||||||
|
<mwc-icon-button class="btn-clear" title="Clear Form" icon="clear_all" @click="${() => this.clearSellForm()}"></mwc-icon-button>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<mwc-textfield
|
||||||
|
style="width: 100%; color: var(--black);"
|
||||||
|
id="sellAmountInput"
|
||||||
|
required label="Amount (QORT)"
|
||||||
|
placeholder="0.0000"
|
||||||
|
@input="${(e) => { this._checkSellAmount(e) }}"
|
||||||
|
type="number"
|
||||||
|
auto-validate="false"
|
||||||
|
outlined value="${this.initialAmount}"
|
||||||
|
>
|
||||||
|
</mwc-textfield>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<mwc-textfield
|
||||||
|
style="width: 100%; color: var(--black);"
|
||||||
|
id="sellPriceInput"
|
||||||
|
required label="Price Ea. (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
|
placeholder="0.0000"
|
||||||
|
@input="${(e) => { this._checkSellAmount(e) }}"
|
||||||
|
type="number"
|
||||||
|
auto-validate="false"
|
||||||
|
outlined value="${this.initialAmount}"
|
||||||
|
>
|
||||||
|
</mwc-textfield>
|
||||||
|
</p>
|
||||||
|
<p style="margin-bottom: 10px;">
|
||||||
|
<mwc-textfield
|
||||||
|
style="width: 100%; color: var(--black);"
|
||||||
|
id="sellTotalInput"
|
||||||
|
required readOnly
|
||||||
|
label="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
|
placeholder="0.0000"
|
||||||
|
type="text"
|
||||||
|
auto-validate="false"
|
||||||
|
outlined value="${this.initialAmount}"
|
||||||
|
>
|
||||||
|
</mwc-textfield>
|
||||||
|
</p>
|
||||||
|
<span class="you-have">You have: ${this.listedCoins.get("QORTAL").balance} QORT</span>
|
||||||
|
<div class="buttons">
|
||||||
|
<div>
|
||||||
|
<mwc-button class="sell-button" ?disabled="${this.sellBtnDisable}" style="width:100%;" raised @click="${(e) => this.sellAction()}">
|
||||||
|
${this.isSellLoading === false ? 'SELL' : html`<paper-spinner-lite active></paper-spinner-lite>`}
|
||||||
|
</mwc-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
myOpenOrdersTemplate() {
|
myOpenOrdersTemplate() {
|
||||||
return html`
|
return html`
|
||||||
<div class="my-open-orders">
|
<div class="my-open-orders">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<header><span>MY ORDERS</span><mwc-icon-button title="Stuck Orders" icon="more_vert" @click=${() => this.showStuckOrdersDialog()}></mwc-icon-button></header>
|
<header><span>MY ORDERS</span><mwc-icon-button title="Stuck Orders" icon="more_vert" @click=${() => this.showStuckOrdersDialog()}></mwc-icon-button></header>
|
||||||
<div class="border-wrapper">
|
<div class="border-wrapper">
|
||||||
<div class="loadingContainer" id="loadingHistoricTrades" style="display:${this.isLoadingMyOpenOrders ? 'block' : 'none'}"><div class="loading"></div><span style="color: var(--black);">Loading...</span></div>
|
<div class="loadingContainer" id="loadingHistoricTrades" style="display:${this.isLoadingMyOpenOrders ? 'block' : 'none'}"><div class="loading"></div><span style="color: var(--black);">Loading...</span></div>
|
||||||
<vaadin-grid multi-sort="true" theme="compact column-borders row-stripes wrap-cell-content" id="myOrdersGrid" aria-label="My Orders" .items="${this.listedCoins.get(this.selectedCoin).myOrders}">
|
<vaadin-grid multi-sort="true" theme="compact column-borders row-stripes wrap-cell-content" id="myOrdersGrid" aria-label="My Orders" .items="${this.listedCoins.get(this.selectedCoin).myOrders}">
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Date"
|
header="Date"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
const dateString = new Date(data.item.timestamp).toLocaleString()
|
const dateString = new Date(data.item.timestamp).toLocaleString()
|
||||||
render(html`${dateString}`, root)
|
render(html`${dateString}`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Status"
|
header="Status"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
render(html`<span id="${data.item.atAddress}"> ${data.item._tradeState} </span>`, root)
|
render(html`<span id="${data.item.atAddress}"> ${data.item._tradeState} </span>`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount))
|
const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount))
|
||||||
render(html`${price}`, root)
|
render(html`${price}`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Amount (QORT)" path="qortAmount"
|
header="Amount (QORT)" path="qortAmount"
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})" path="foreignAmount"
|
header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})" path="foreignAmount"
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Action"
|
header="Action"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
render(html`${this.renderCancelButton(data.item)}`, root)
|
render(html`${this.renderCancelButton(data.item)}`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
</vaadin-grid>
|
</vaadin-grid>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
</div>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
myHistoricTradesTemplate() {
|
myHistoricTradesTemplate() {
|
||||||
return html`
|
return html`
|
||||||
<div class="my-historic-trades">
|
<div class="my-historic-trades">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<header>MY TRADE HISTORY</header>
|
<header>MY TRADE HISTORY</header>
|
||||||
<div class="border-wrapper">
|
<div class="border-wrapper">
|
||||||
<vaadin-grid theme="compact column-borders row-stripes wrap-cell-content" id="myHistoricTradesGrid" aria-label="My Open Orders" .items="${this.listedCoins.get(this.selectedCoin).myHistoricTrades}">
|
<vaadin-grid theme="compact column-borders row-stripes wrap-cell-content" id="myHistoricTradesGrid" aria-label="My Open Orders" .items="${this.listedCoins.get(this.selectedCoin).myHistoricTrades}">
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Date"
|
header="Date"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
const dateString = new Date(data.item.timestamp).toLocaleString()
|
const dateString = new Date(data.item.timestamp).toLocaleString()
|
||||||
render(html`${dateString}`, root)
|
render(html`${dateString}`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Status"
|
header="Status"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
if (data.item.mode === 'SOLD') return render(html`<span style="color: red"> ${data.item.mode} </span>`, root)
|
if (data.item.mode === 'SOLD') return render(html`<span style="color: red"> ${data.item.mode} </span>`, root)
|
||||||
if (data.item.mode === 'BOUGHT') return render(html`<span style="color: green"> ${data.item.mode} </span>`, root)
|
if (data.item.mode === 'BOUGHT') return render(html`<span style="color: green"> ${data.item.mode} </span>`, root)
|
||||||
return render(html`<span> ${data.item.mode} </span>`, root)
|
return render(html`<span> ${data.item.mode} </span>`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount))
|
const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount))
|
||||||
render(html`${price}`, root)
|
render(html`${price}`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Amount (QORT)" path="qortAmount"
|
header="Amount (QORT)" path="qortAmount"
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
<vaadin-grid-column
|
<vaadin-grid-column
|
||||||
auto-width
|
auto-width
|
||||||
resizable
|
resizable
|
||||||
header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})"
|
||||||
.renderer=${(root, column, data) => {
|
.renderer=${(root, column, data) => {
|
||||||
render(html`<span> ${data.item.foreignAmount} </span>`, root)
|
render(html`<span> ${data.item.foreignAmount} </span>`, root)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</vaadin-grid-column>
|
</vaadin-grid-column>
|
||||||
</vaadin-grid>
|
</vaadin-grid>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
</div>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<div id="trade-portal-page">
|
<div id="trade-portal-page">
|
||||||
<div style="min-height: 40px; display: flex; padding-bottom: 0px; margin: 2px 2px 0px 2px ;">
|
<div style="min-height: 40px; display: flex; padding-bottom: 0px; margin: 2px 2px 0px 2px ;">
|
||||||
<h2 style="margin: 0 0 15px 0; line-height: 50px; display: inline;">Qortal Trade Portal - </h2>
|
<h2 style="margin: 0 0 15px 0; line-height: 50px; display: inline;">Qortal Trade Portal - </h2>
|
||||||
<mwc-select outlined id="coinSelectionMenu" label="Select Trading Pair">
|
<mwc-select outlined id="coinSelectionMenu" label="Select Trading Pair">
|
||||||
<mwc-list-item value="LITECOIN" selected></span><span class="coinName ltc">QORT / LTC</span></mwc-list-item>
|
<mwc-list-item value="LITECOIN" selected></span><span class="coinName ltc">QORT / LTC</span></mwc-list-item>
|
||||||
<mwc-list-item value="DOGECOIN"><span class="coinName doge">QORT / DOGE</span></mwc-list-item>
|
<mwc-list-item value="DOGECOIN"><span class="coinName doge">QORT / DOGE</span></mwc-list-item>
|
||||||
</mwc-select>
|
</mwc-select>
|
||||||
|
</div>
|
||||||
|
<div id="trade-portal">
|
||||||
|
<div id="first-trade-section">
|
||||||
|
${this.historicTradesTemplate()}
|
||||||
|
${this.myHistoricTradesTemplate()}
|
||||||
|
${this.openTradesTemplate()}
|
||||||
</div>
|
</div>
|
||||||
<div id="trade-portal">
|
<div id="second-trade-section">
|
||||||
<div id="first-trade-section">
|
${this.myOpenOrdersTemplate()}
|
||||||
${this.historicTradesTemplate()}
|
${this.openMarketTemplate()}
|
||||||
${this.myHistoricTradesTemplate()}
|
|
||||||
${this.openTradesTemplate()}
|
|
||||||
</div>
|
|
||||||
<div id="second-trade-section">
|
|
||||||
${this.myOpenOrdersTemplate()}
|
|
||||||
${this.openMarketTemplate()}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Manage Stuck Orders Dialog -->
|
</div>
|
||||||
<mwc-dialog id="manageStuckOrdersDialog" scrimClickAction="${this.cancelStuckOfferBtnDisable ? '' : 'close'}">
|
<!-- Manage Stuck Orders Dialog -->
|
||||||
<div style="text-align:center">
|
<mwc-dialog id="manageStuckOrdersDialog" scrimClickAction="${this.cancelStuckOfferBtnDisable ? '' : 'close'}">
|
||||||
<h1>Stuck Offers</h1>
|
<div style="text-align: center;">
|
||||||
<hr />
|
<h1>Stuck Offers</h1>
|
||||||
</div>
|
<hr />
|
||||||
<div>
|
</div>
|
||||||
<vaadin-grid style="width: 500px" theme="compact column-borders row-stripes wrap-cell-content" id="stuckOrdersGrid" aria-label="My Offering Orders" .items="${this.listedCoins.get(this.selectedCoin).myOfferingOrders}">
|
<div>
|
||||||
<vaadin-grid-column auto-width resizable header="Amount (QORT)" path="qortAmount"></vaadin-grid-column>
|
<vaadin-grid style="width: 500px" theme="compact column-borders row-stripes wrap-cell-content" id="stuckOrdersGrid" aria-label="My Offering Orders" .items="${this.listedCoins.get(this.selectedCoin).myOfferingOrders}">
|
||||||
<vaadin-grid-column auto-width resizable header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})" path="price"></vaadin-grid-column>
|
<vaadin-grid-column auto-width resizable header="Amount (QORT)" path="qortAmount"></vaadin-grid-column>
|
||||||
<vaadin-grid-column auto-width resizable header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})" path="expectedForeignAmount"></vaadin-grid-column>
|
<vaadin-grid-column auto-width resizable header="Price (${this.listedCoins.get(this.selectedCoin).coinCode})" path="price"></vaadin-grid-column>
|
||||||
<vaadin-grid-column auto-width resizable header="Action" .renderer=${(root, column, data) => { render(html`${this.renderCancelStuckOfferButton(data.item)}`, root) }}></vaadin-grid-column>
|
<vaadin-grid-column auto-width resizable header="Total (${this.listedCoins.get(this.selectedCoin).coinCode})" path="expectedForeignAmount"></vaadin-grid-column>
|
||||||
</vaadin-grid>
|
<vaadin-grid-column auto-width resizable header="Action" .renderer=${(root, column, data) => { render(html`${this.renderCancelStuckOfferButton(data.item)}`, root) }}></vaadin-grid-column>
|
||||||
</div>
|
</vaadin-grid>
|
||||||
<mwc-button slot="primaryAction" dialogAction="cancel" class="cancel">Close</mwc-button>
|
</div>
|
||||||
</mwc-dialog>
|
<mwc-button slot="primaryAction" dialogAction="cancel" class="cancel">Close</mwc-button>
|
||||||
`;
|
</mwc-dialog>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated() {
|
firstUpdated() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user