refactor: move Export Private Key into overflow menu
Some checks are pending
check / check (push) Waiting to run
Some checks are pending
check / check (push) Waiting to run
Replace the muted text link at the bottom of AddressDetail with a '···' overflow/more button in the action button row. Clicking it opens a dropdown with 'Export Private Key' as an option. Clicking outside closes the dropdown. The pattern is reusable for future secondary actions.
This commit is contained in:
@@ -305,6 +305,26 @@
|
|||||||
>
|
>
|
||||||
+ Token
|
+ Token
|
||||||
</button>
|
</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button
|
||||||
|
id="btn-more-menu"
|
||||||
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
|
aria-label="More actions"
|
||||||
|
>
|
||||||
|
···
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
id="more-menu-dropdown"
|
||||||
|
class="hidden absolute right-0 top-full mt-1 border border-border bg-bg z-50 min-w-[10rem]"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
id="btn-export-privkey"
|
||||||
|
class="block w-full text-left px-3 py-2 text-sm hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
|
>
|
||||||
|
Export Private Key
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- transactions -->
|
<!-- transactions -->
|
||||||
@@ -316,13 +336,6 @@
|
|||||||
<div class="text-muted text-xs py-1">Loading...</div>
|
<div class="text-muted text-xs py-1">Loading...</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center">
|
|
||||||
<span
|
|
||||||
id="btn-export-privkey"
|
|
||||||
class="text-xs text-muted underline decoration-dashed cursor-pointer hover:text-fg"
|
|
||||||
>Export private key</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ============ EXPORT PRIVATE KEY VIEW ============ -->
|
<!-- ============ EXPORT PRIVATE KEY VIEW ============ -->
|
||||||
|
|||||||
@@ -264,7 +264,22 @@ function init(_ctx) {
|
|||||||
|
|
||||||
$("btn-add-token").addEventListener("click", ctx.showAddTokenView);
|
$("btn-add-token").addEventListener("click", ctx.showAddTokenView);
|
||||||
|
|
||||||
|
// More menu dropdown
|
||||||
|
const moreBtn = $("btn-more-menu");
|
||||||
|
const moreDropdown = $("more-menu-dropdown");
|
||||||
|
moreBtn.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
moreDropdown.classList.toggle("hidden");
|
||||||
|
});
|
||||||
|
document.addEventListener("click", () => {
|
||||||
|
moreDropdown.classList.add("hidden");
|
||||||
|
});
|
||||||
|
moreDropdown.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
$("btn-export-privkey").addEventListener("click", () => {
|
$("btn-export-privkey").addEventListener("click", () => {
|
||||||
|
moreDropdown.classList.add("hidden");
|
||||||
const wallet = state.wallets[state.selectedWallet];
|
const wallet = state.wallets[state.selectedWallet];
|
||||||
const addr = wallet.addresses[state.selectedAddress];
|
const addr = wallet.addresses[state.selectedAddress];
|
||||||
const title = addressTitle(addr.address, state.wallets);
|
const title = addressTitle(addr.address, state.wallets);
|
||||||
|
|||||||
Reference in New Issue
Block a user