Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 15:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add hover and selected

Browse Source
This commit is contained in:
AlphaX-Projects 2023-04-03 19:09:08 +02:00
parent 17dd6fad4c
commit 833cd05532
1 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js
View File

@ -115,6 +115,19 @@ class TradePortal extends LitElement {
--_lumo-grid-border-color: var(--border); --_lumo-grid-border-color: var(--border);
--_lumo-grid-secondary-border-color: var(--border2); --_lumo-grid-secondary-border-color: var(--border2);
} }
.myhover vaadin-grid::part(first-column-cell):hover {
background-color: var(--black);
color: var(--white);
}
.myfocused vaadin-grid::part(focused-cell) {
background-color: var(--black);
color: var(--white);
}
vaadin-grid::part(selected-row) {
background-color: var(--black);
color: var(--white);
}
paper-spinner-lite { paper-spinner-lite {
height: 30px; height: 30px;
width: 30px; width: 30px;
@ -847,19 +860,26 @@ class TradePortal extends LitElement {
openTradesTemplate() { openTradesTemplate() {
return html` return html`
<div class="open-trades"> <div class="open-trades myhover myfocused">
<div class="box"> <div class="box">
<header><span>${translate("tradepage.tchange5")}</span></header> <header><span>${translate("tradepage.tchange5")}</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);">${translate("login.loading")}</span></div> <div class="loadingContainer" id="loadingHistoricTrades" style="display:${this.isLoadingOpenTrades ? 'block' : 'none'}"><div class="loading"></div><span style="color: var(--black);">${translate("login.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="${translate("tradepage.tchange8")} (QORT)" header="${translate("tradepage.tchange8")} (QORT)"
id="qortAmountColumn" id="qortAmountColumn"
.renderer=${(root, column, data) => { .renderer=${(root, column, data) => {
render(html`<span @click="${() => this.fillBuyForm(data)}">${this.round(data.item.qortAmount)}</span>`, root) render(html`<span style="cursor: pointer;" @click="${() => this.fillBuyForm(data)}">${this.round(data.item.qortAmount)}</span>`, root)
}} }}
> >
</vaadin-grid-column> </vaadin-grid-column>