feat(wallets): redesign the modal layout — content-sized, framed, aligned
Act on the design review of the Wallets modal (all six points): 1. Content-sized card — size the card to the wallet count (up to 8 rows, then the list scrolls) instead of a fixed 620px, killing the huge empty void a short list floated in. Computed from the KNOWN row count, so it stays a fixed-height dialog (no auto-height feedback — that's what slid content off-screen on a monitor move). 2. Framed wallet list — BordersOuter + PadOuterX so the list reads as a contained panel with room to grow, not loose rows on the backdrop. 3. Right-aligned numeric columns (Size / Addresses / Balance) and their headers, via a custom header row + a right-aligned cell helper, so the numbers line up. 4. Consistent action column — the active wallet's row gets a subtle green tint and an "Active" chip (badge), distinct from the Open/Import buttons. 5. De-cluttered bottom — "Create wallet" stays the primary action; the folder-scan is tucked behind a "+ Scan another folder…" toggle. 6. Polish — the external-file marker is now a real info icon + tooltip (was ICON_MD_FOLDER rendering as a "?" tofu, since that glyph isn't in the subset); Refresh is an icon-only button, de-emphasized next to Close. New i18n keys (wallets_add_folder_toggle, wallets_external_tt) + 8 langs; CJK subset rebuilt. Verified via the headless sweep at 100% and font_scale 1.5. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -48,20 +48,39 @@ public:
|
||||
using namespace material;
|
||||
App* app = s_app;
|
||||
const float dp = Layout::dpiScale();
|
||||
ImGuiStyle& style = ImGui::GetStyle();
|
||||
|
||||
if (s_needScan) { scan(); s_needScan = false; }
|
||||
|
||||
// FIXED cardHeight (not the auto-height overload): the table below sizes itself from
|
||||
// GetContentRegionAvail().y, which is only stable when the dialog's content child is
|
||||
// fixed-height. Auto-height makes that read self-referential and it diverges across a
|
||||
// monitor move (dpiScale jump), sliding the create/footer rows off-screen. See Manage
|
||||
// Portfolio (market_tab.cpp) for the same fixed-height pattern.
|
||||
// ---- #1 Content-sized card (bounded) -----------------------------------------------------
|
||||
// Size the card to the wallet count (up to kMaxVisibleRows, then the list scrolls) so a short
|
||||
// list doesn't float in a sea of empty space. Computed from the KNOWN row count, so it stays a
|
||||
// fixed-height dialog (no auto-height feedback — that slid content off-screen on a monitor move).
|
||||
const int kMaxVisibleRows = 8;
|
||||
const int visRows = std::min(std::max(1, (int)s_rows.size()), kMaxVisibleRows);
|
||||
const float tableRowH = ImGui::GetFrameHeight() + style.CellPadding.y * 2.0f;
|
||||
const float tableHdrH = ImGui::GetTextLineHeight() + style.CellPadding.y * 2.0f;
|
||||
const float tableH = tableHdrH + visRows * tableRowH + 4.0f * dp;
|
||||
|
||||
const float ctrlRow = ImGui::GetFrameHeightWithSpacing();
|
||||
const float capRow = Type().caption()->LegacySize + style.ItemSpacing.y;
|
||||
const float belowH = 3.0f * Layout::spacingSm()
|
||||
+ (capRow + ctrlRow) // Create label + input row
|
||||
+ (s_showAddFolder ? (capRow + ctrlRow) : capRow) // folder row OR toggle link
|
||||
+ (style.ItemSpacing.y + 1.0f) // separator
|
||||
+ ctrlRow // footer buttons
|
||||
+ 6.0f * style.ItemSpacing.y; // uncounted inter-item gaps
|
||||
const float headH = Type().h6()->LegacySize + Layout::spacingXs() // framework h6 title
|
||||
+ Type().caption()->LegacySize + Layout::spacingSm(); // intro + gap
|
||||
const float padV = 48.0f; // content-child padding (top+bottom) + margin
|
||||
const float cardH = (headH + tableH + belowH + padV) / dp;
|
||||
|
||||
OverlayDialogSpec ov;
|
||||
ov.title = TR("wallets_title");
|
||||
ov.p_open = &s_open;
|
||||
ov.style = OverlayStyle::BlurFloat;
|
||||
ov.cardWidth = 780.0f;
|
||||
ov.cardHeight = 620.0f;
|
||||
ov.cardHeight = cardH;
|
||||
ov.idSuffix = "wallets";
|
||||
if (BeginOverlayDialog(ov)) {
|
||||
Type().textColored(TypeStyle::Caption, OnSurfaceMedium(), TR("wallets_intro"));
|
||||
@@ -69,36 +88,52 @@ public:
|
||||
|
||||
const std::string active = app->settings() ? app->settings()->getActiveWalletFile() : "wallet.dat";
|
||||
|
||||
// Reserve room below the table for the create-wallet + add-folder rows (each a label +
|
||||
// an input row), the separator, and the footer buttons — computed from real widget
|
||||
// metrics so nothing clips at any DPI (a fixed px reserve was too small at 150%).
|
||||
const float rowH = ImGui::GetFrameHeightWithSpacing();
|
||||
const float lblH = Type().caption()->LegacySize + ImGui::GetStyle().ItemSpacing.y;
|
||||
const float belowH = 3.0f * Layout::spacingSm() + 2.0f * lblH + 3.0f * rowH + Layout::spacingMd();
|
||||
float tableH = ImGui::GetContentRegionAvail().y - belowH;
|
||||
if (tableH < 120.0f * dp) tableH = 120.0f * dp;
|
||||
|
||||
// ---- #2 Framed wallet list ------------------------------------------------------------
|
||||
const ImGuiTableFlags tflags = ImGuiTableFlags_ScrollY | ImGuiTableFlags_RowBg |
|
||||
ImGuiTableFlags_BordersInnerH;
|
||||
ImGuiTableFlags_BordersInnerH | ImGuiTableFlags_BordersOuter |
|
||||
ImGuiTableFlags_PadOuterX;
|
||||
if (ImGui::BeginTable("##wallets", 6, tflags, ImVec2(0, tableH))) {
|
||||
ImGui::TableSetupColumn(TR("wallets_col_name"), ImGuiTableColumnFlags_WidthStretch);
|
||||
ImGui::TableSetupColumn(TR("wallets_col_size"), ImGuiTableColumnFlags_WidthFixed, 90.0f * dp);
|
||||
ImGui::TableSetupColumn(TR("wallets_col_addresses"), ImGuiTableColumnFlags_WidthFixed, 80.0f * dp);
|
||||
ImGui::TableSetupColumn(TR("wallets_col_addresses"), ImGuiTableColumnFlags_WidthFixed, 90.0f * dp);
|
||||
ImGui::TableSetupColumn(TR("wallets_col_balance"), ImGuiTableColumnFlags_WidthFixed, 130.0f * dp);
|
||||
ImGui::TableSetupColumn(TR("wallets_col_opened"), ImGuiTableColumnFlags_WidthFixed, 120.0f * dp);
|
||||
ImGui::TableSetupColumn("##action", ImGuiTableColumnFlags_WidthFixed, 110.0f * dp);
|
||||
ImGui::TableSetupColumn("##action", ImGuiTableColumnFlags_WidthFixed, 100.0f * dp);
|
||||
ImGui::TableSetupScrollFreeze(0, 1);
|
||||
ImGui::TableHeadersRow();
|
||||
|
||||
// ---- #3 Right-aligned headers for the numeric columns (Size / Addresses / Balance).
|
||||
ImGui::TableNextRow(ImGuiTableRowFlags_Headers);
|
||||
for (int c = 0; c < 6; ++c) {
|
||||
ImGui::TableSetColumnIndex(c);
|
||||
const char* cn = ImGui::TableGetColumnName(c);
|
||||
if (c == 5 || !cn || !cn[0]) continue;
|
||||
if (c >= 1 && c <= 3) {
|
||||
float w = ImGui::CalcTextSize(cn).x;
|
||||
ImGui::SetCursorPosX(ImGui::GetCursorPosX() + ImGui::GetContentRegionAvail().x - w);
|
||||
ImGui::TextUnformatted(cn);
|
||||
} else {
|
||||
ImGui::TableHeader(cn);
|
||||
}
|
||||
}
|
||||
|
||||
auto rcell = [&](const std::string& s, bool muted) {
|
||||
float w = ImGui::CalcTextSize(s.c_str()).x;
|
||||
ImGui::SetCursorPosX(ImGui::GetCursorPosX() + ImGui::GetContentRegionAvail().x - w);
|
||||
if (muted) ImGui::TextDisabled("%s", s.c_str()); else ImGui::TextUnformatted(s.c_str());
|
||||
};
|
||||
const char* kDash = "\xE2\x80\x94";
|
||||
|
||||
char nb[32];
|
||||
for (std::size_t i = 0; i < s_rows.size(); ++i) {
|
||||
const WalletRow& r = s_rows[i];
|
||||
const data::WalletIndexEntry* meta = app->walletIndex().find(r.fileName);
|
||||
const bool isCurrent = r.inDatadir && r.fileName == active;
|
||||
|
||||
ImGui::TableNextRow();
|
||||
if (isCurrent) ImGui::TableSetBgColor(ImGuiTableBgTarget_RowBg0, WithAlpha(Success(), 26));
|
||||
ImGui::PushID(static_cast<int>(i));
|
||||
|
||||
// Name — + "current" badge, or a folder marker for out-of-datadir files.
|
||||
// Name (+ #4 current badge / #6 external-file info icon)
|
||||
ImGui::TableNextColumn();
|
||||
ImGui::TextUnformatted(r.fileName.c_str());
|
||||
if (isCurrent) {
|
||||
@@ -106,38 +141,45 @@ public:
|
||||
ImGui::TextColored(ImGui::ColorConvertU32ToFloat4(Success()), "%s", TR("wallets_current"));
|
||||
} else if (!r.inDatadir) {
|
||||
ImGui::SameLine(0, 8.0f * dp);
|
||||
ImGui::TextColored(ImGui::ColorConvertU32ToFloat4(OnSurfaceMedium()), "%s", ICON_MD_FOLDER);
|
||||
if (ImGui::IsItemHovered()) Tooltip("%s", r.dir.c_str());
|
||||
ImGui::PushFont(Type().iconSmall());
|
||||
ImGui::TextColored(ImGui::ColorConvertU32ToFloat4(OnSurfaceMedium()), "%s", ICON_MD_INFO);
|
||||
ImGui::PopFont();
|
||||
if (ImGui::IsItemHovered()) Tooltip("%s\n%s", TR("wallets_external_tt"), r.dir.c_str());
|
||||
}
|
||||
|
||||
ImGui::TableNextColumn();
|
||||
ImGui::TextUnformatted(util::Platform::formatFileSize(static_cast<uint64_t>(r.sizeBytes)).c_str());
|
||||
rcell(util::Platform::formatFileSize(static_cast<uint64_t>(r.sizeBytes)), false);
|
||||
|
||||
ImGui::TableNextColumn();
|
||||
if (meta && meta->cachedAddressCount >= 0) ImGui::Text("%lld", meta->cachedAddressCount);
|
||||
else ImGui::TextDisabled("—");
|
||||
if (meta && meta->cachedAddressCount >= 0) { snprintf(nb, sizeof(nb), "%lld", (long long)meta->cachedAddressCount); rcell(nb, false); }
|
||||
else rcell(kDash, true);
|
||||
|
||||
ImGui::TableNextColumn();
|
||||
if (meta && meta->cachedBalance >= 0.0) ImGui::Text("%.4f", meta->cachedBalance);
|
||||
else ImGui::TextDisabled("—");
|
||||
if (meta && meta->cachedBalance >= 0.0) { snprintf(nb, sizeof(nb), "%.4f", meta->cachedBalance); rcell(nb, false); }
|
||||
else rcell(kDash, true);
|
||||
|
||||
ImGui::TableNextColumn();
|
||||
if (meta && meta->lastOpenedEpoch > 0)
|
||||
ImGui::TextUnformatted(util::formatTimeAgo(meta->lastOpenedEpoch).c_str());
|
||||
else ImGui::TextDisabled("%s", TR("wallets_never"));
|
||||
|
||||
// Action
|
||||
// ---- #4 Action column (Active as a chip; Open/Import as buttons) ---------------
|
||||
ImGui::TableNextColumn();
|
||||
if (isCurrent) {
|
||||
ImGui::TextDisabled("%s", TR("wallets_active"));
|
||||
const char* al = TR("wallets_active");
|
||||
ImVec2 ts = ImGui::CalcTextSize(al);
|
||||
ImVec2 p = ImGui::GetCursorScreenPos();
|
||||
float cx = 8.0f * dp, cy = 3.0f * dp;
|
||||
ImDrawList* cdl = ImGui::GetWindowDrawList();
|
||||
cdl->AddRectFilled(p, ImVec2(p.x + ts.x + cx * 2, p.y + ts.y + cy * 2), WithAlpha(Success(), 34), 4.0f * dp);
|
||||
cdl->AddText(ImVec2(p.x + cx, p.y + cy), Success(), al);
|
||||
ImGui::Dummy(ImVec2(ts.x + cx * 2, ts.y + cy * 2));
|
||||
} else if (r.inDatadir) {
|
||||
if (StyledButton(TR("wallets_open"), ImVec2(90.0f * dp, 0))) {
|
||||
app->switchToWallet(r.fileName);
|
||||
s_open = false; // node restarts; the main UI shows the reconnect overlay
|
||||
s_open = false;
|
||||
}
|
||||
} else {
|
||||
// Out-of-datadir wallets can't be loaded directly (the daemon rejects paths).
|
||||
// Import = copy into the datadir under a wallet-*.dat name, then switch to it.
|
||||
if (StyledButton(TR("wallets_import"), ImVec2(90.0f * dp, 0)))
|
||||
importAndOpen(app, r);
|
||||
if (ImGui::IsItemHovered()) Tooltip("%s", TR("wallets_import_tt"));
|
||||
@@ -149,7 +191,7 @@ public:
|
||||
|
||||
ImGui::Dummy(ImVec2(0, Layout::spacingSm()));
|
||||
|
||||
// Create a fresh named wallet — the daemon mints it (with a seed phrase) on first load.
|
||||
// ---- #5 Create a new wallet (primary) -------------------------------------------------
|
||||
Type().textColored(TypeStyle::Caption, OnSurfaceMedium(), TR("wallets_new_label"));
|
||||
ImGui::SetNextItemWidth(-150.0f * dp);
|
||||
ImGui::InputTextWithHint("##newWalletName", TR("wallets_new_hint"), s_newName, sizeof(s_newName));
|
||||
@@ -164,33 +206,51 @@ public:
|
||||
} else {
|
||||
s_newName[0] = '\0';
|
||||
Notifications::instance().info(TR("wallets_creating"));
|
||||
app->switchToWallet(name); // daemon creates it on start (-usemnemonic=1 -> seed-backed)
|
||||
app->switchToWallet(name);
|
||||
s_open = false;
|
||||
}
|
||||
}
|
||||
|
||||
ImGui::Dummy(ImVec2(0, Layout::spacingSm()));
|
||||
|
||||
// Add a folder to also scan for wallet files (no native picker — a validated path input).
|
||||
Type().textColored(TypeStyle::Caption, OnSurfaceMedium(), TR("wallets_add_folder"));
|
||||
ImGui::SetNextItemWidth(-150.0f * dp);
|
||||
ImGui::InputTextWithHint("##walletFolder", TR("wallets_folder_hint"), s_newFolder, sizeof(s_newFolder));
|
||||
ImGui::SameLine();
|
||||
if (StyledButton(TR("wallets_add"), ImVec2(120.0f * dp, 0))) {
|
||||
std::error_code ec;
|
||||
std::string dir = s_newFolder;
|
||||
if (!dir.empty() && std::filesystem::is_directory(dir, ec)) {
|
||||
if (app->walletIndex().addExtraFolder(dir)) app->walletIndex().save();
|
||||
s_newFolder[0] = '\0';
|
||||
s_needScan = true;
|
||||
} else {
|
||||
Notifications::instance().warning(TR("wallets_folder_invalid"));
|
||||
// ---- #5 Add-folder tucked behind a toggle so it doesn't compete with Create -----------
|
||||
if (!s_showAddFolder) {
|
||||
ImGui::PushStyleColor(ImGuiCol_Text, OnSurfaceMedium());
|
||||
ImGui::TextUnformatted(TR("wallets_add_folder_toggle"));
|
||||
ImGui::PopStyleColor();
|
||||
if (ImGui::IsItemHovered()) ImGui::SetMouseCursor(ImGuiMouseCursor_Hand);
|
||||
if (ImGui::IsItemClicked()) s_showAddFolder = true;
|
||||
} else {
|
||||
Type().textColored(TypeStyle::Caption, OnSurfaceMedium(), TR("wallets_add_folder"));
|
||||
ImGui::SetNextItemWidth(-150.0f * dp);
|
||||
ImGui::InputTextWithHint("##walletFolder", TR("wallets_folder_hint"), s_newFolder, sizeof(s_newFolder));
|
||||
ImGui::SameLine();
|
||||
if (StyledButton(TR("wallets_add"), ImVec2(120.0f * dp, 0))) {
|
||||
std::error_code ec;
|
||||
std::string dir = s_newFolder;
|
||||
if (!dir.empty() && std::filesystem::is_directory(dir, ec)) {
|
||||
if (app->walletIndex().addExtraFolder(dir)) app->walletIndex().save();
|
||||
s_newFolder[0] = '\0';
|
||||
s_needScan = true;
|
||||
} else {
|
||||
Notifications::instance().warning(TR("wallets_folder_invalid"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ImGui::Dummy(ImVec2(0, Layout::spacingSm()));
|
||||
ImGui::Separator();
|
||||
if (StyledButton(TR("refresh"), ImVec2(110.0f * dp, 0))) s_needScan = true;
|
||||
// ---- #6 Refresh: icon-only, de-emphasized next to the text actions --------------------
|
||||
{
|
||||
float bh = ImGui::GetFrameHeight();
|
||||
IconButtonStyle rst;
|
||||
rst.color = OnSurfaceMedium();
|
||||
rst.hoverBg = StateHover();
|
||||
rst.bgRounding = 4.0f * dp;
|
||||
rst.tooltip = TR("refresh");
|
||||
if (IconButton("##walletsRefresh", ICON_MD_REFRESH, Type().iconSmall(), ImVec2(bh, bh), rst))
|
||||
s_needScan = true;
|
||||
}
|
||||
ImGui::SameLine();
|
||||
if (StyledButton(TR("wallets_reveal"), ImVec2(150.0f * dp, 0)))
|
||||
util::Platform::openFolder(util::Platform::getDragonXDataDir());
|
||||
@@ -279,6 +339,7 @@ private:
|
||||
static inline bool s_needScan = false;
|
||||
static inline char s_newFolder[512] = "";
|
||||
static inline char s_newName[128] = "";
|
||||
static inline bool s_showAddFolder = false;
|
||||
static inline std::vector<WalletRow> s_rows;
|
||||
};
|
||||
|
||||
|
||||
@@ -267,6 +267,8 @@ void I18n::loadBuiltinEnglish()
|
||||
strings_["wallets_import_hint"] = "Import to open";
|
||||
strings_["wallets_import_tt"] = "This wallet is outside the data directory. Opening it will copy it in first (coming soon).";
|
||||
strings_["wallets_add_folder"] = "Also scan another folder for wallet files:";
|
||||
strings_["wallets_add_folder_toggle"] = "+ Scan another folder for wallets\xE2\x80\xA6";
|
||||
strings_["wallets_external_tt"] = "Outside your data directory \xE2\x80\x94 Import to copy it in.";
|
||||
strings_["wallets_folder_hint"] = "/path/to/folder with wallet .dat files";
|
||||
strings_["wallets_add"] = "Add folder";
|
||||
strings_["wallets_folder_invalid"] = "That folder doesn't exist.";
|
||||
|
||||
Reference in New Issue
Block a user