Implements all 26 confirmed UI/UX audit findings plus the 4 dashboard/timeline tile labels. Verified across full-node + Lite + Windows builds (ctest green) and an adversarial diff review (one market-tab delete regression caught + fixed). i18n coverage: - Balance hero/quick-actions/toasts + dashboard & timeline tiles (Total Balance, Shielded, Transparent, Quick Send, Quick Receive, Click to open, Market) - Send: Review Send / Cancel / Paste / view-only tooltip / memo byte counter - Settings: Lite lifecycle errors, plaintext-RPC security warning, 8 toasts - Mining pool-payout tooltip - Resolve daemon_update_title double-assignment collision (new daemon_update_prompt_title) - 23 new keys translated into all 8 locales; CJK subset font rebuilt HiDPI: DPI-scale the Send amount bar, mining thread-tile clamp bounds, receive loading skeleton, and sidebar notification-badge insets. Light theme: theme-aware material::SurfaceOverlay() for balance bar tracks and row-hover highlights; contacts active-pill foreground uses OnPrimary(). Destructive actions: arm/confirm for portfolio-group delete, saved pool/worker remove, and avatar-image delete. Interaction/overflow: route balance star/eye buttons and the console fold-toggle through popup-safe guards; clip peer addr/subver; truncate the balance custom label; measure Settings tool-button widths; mining stepper disabled-state feedback; +/- stepper buttons restyled to match the thread tiles. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
222 lines
8.0 KiB
C++
222 lines
8.0 KiB
C++
// DragonX Wallet - ImGui Edition
|
|
// Copyright 2024-2026 The Hush Developers
|
|
// Released under the GPLv3
|
|
|
|
// ============================================================================
|
|
// Material Design Color Tokens
|
|
// ============================================================================
|
|
//
|
|
// This header provides convenient access to Material Design color tokens.
|
|
// Use these instead of hardcoded colors to maintain theme consistency.
|
|
//
|
|
// Usage:
|
|
// #include "ui/material/colors.h"
|
|
//
|
|
// // Get surface colors at different elevations
|
|
// ImU32 cardBg = dragonx::ui::material::Surface(4); // 4dp elevation
|
|
//
|
|
// // Get state colors
|
|
// ImU32 hovered = dragonx::ui::material::Primary() | dragonx::ui::material::StateHover();
|
|
//
|
|
// // Use in ImGui
|
|
// ImGui::PushStyleColor(ImGuiCol_ChildBg, ImGui::ColorConvertU32ToFloat4(cardBg));
|
|
|
|
#pragma once
|
|
|
|
#include "color_theme.h"
|
|
#include "../schema/ui_schema.h"
|
|
|
|
namespace dragonx {
|
|
namespace ui {
|
|
namespace material {
|
|
|
|
// ============================================================================
|
|
// Color Token Accessors (Inline for performance)
|
|
// ============================================================================
|
|
|
|
// Primary colors
|
|
inline ImU32 Primary() { return GetCurrentColorTheme().primary; }
|
|
inline ImU32 PrimaryVariant() { return GetCurrentColorTheme().primaryVariant; }
|
|
inline ImU32 PrimaryLight() { return GetCurrentColorTheme().primaryLight; }
|
|
|
|
// Secondary colors
|
|
inline ImU32 Secondary() { return GetCurrentColorTheme().secondary; }
|
|
inline ImU32 SecondaryVariant() { return GetCurrentColorTheme().secondaryVariant; }
|
|
inline ImU32 SecondaryLight() { return GetCurrentColorTheme().secondaryLight; }
|
|
|
|
// Surface colors (semi-transparent when OS backdrop is active)
|
|
inline ImU32 Background() {
|
|
ImU32 bg = GetCurrentColorTheme().background;
|
|
if (!IsBackdropActive()) return bg;
|
|
float alpha = dragonx::ui::schema::UI().drawElement("backdrop", "background-inline-alpha").size;
|
|
if (alpha < 0) alpha = 0.30f;
|
|
return WithAlphaF(bg, alpha);
|
|
}
|
|
inline ImU32 Surface() {
|
|
ImU32 s = GetCurrentColorTheme().surface;
|
|
if (!IsBackdropActive()) return s;
|
|
float alpha = dragonx::ui::schema::UI().drawElement("backdrop", "surface-inline-alpha").size;
|
|
if (alpha < 0) alpha = 0.55f;
|
|
return WithAlphaF(s, alpha);
|
|
}
|
|
inline ImU32 SurfaceVariant() { return GetCurrentColorTheme().surfaceVariant; }
|
|
|
|
// Elevated surfaces - use for cards, dialogs, menus
|
|
inline ImU32 Surface(int dp) {
|
|
ImU32 s = GetElevatedSurface(GetCurrentColorTheme(), dp);
|
|
if (!IsBackdropActive()) return s;
|
|
float alpha = dragonx::ui::schema::UI().drawElement("backdrop", "surface-inline-alpha").size;
|
|
if (alpha < 0) alpha = 0.55f;
|
|
return WithAlphaF(s, alpha);
|
|
}
|
|
inline ImU32 SurfaceAt(Elevation level) { return GetElevatedSurface(GetCurrentColorTheme(), level); }
|
|
|
|
// "On" colors (text on various backgrounds)
|
|
inline ImU32 OnPrimary() { return GetCurrentColorTheme().onPrimary; }
|
|
inline ImU32 OnSecondary() { return GetCurrentColorTheme().onSecondary; }
|
|
inline ImU32 OnBackground() { return GetCurrentColorTheme().onBackground; }
|
|
inline ImU32 OnSurface() { return GetCurrentColorTheme().onSurface; }
|
|
inline ImU32 OnSurfaceMedium() { return GetCurrentColorTheme().onSurfaceMedium; }
|
|
inline ImU32 OnSurfaceDisabled() { return GetCurrentColorTheme().onSurfaceDisabled; }
|
|
|
|
// Semantic colors
|
|
inline ImU32 Error() { return GetCurrentColorTheme().error; }
|
|
inline ImU32 OnError() { return GetCurrentColorTheme().onError; }
|
|
inline ImU32 Success() { return GetCurrentColorTheme().success; }
|
|
inline ImU32 OnSuccess() { return GetCurrentColorTheme().onSuccess; }
|
|
inline ImU32 Warning() { return GetCurrentColorTheme().warning; }
|
|
inline ImU32 OnWarning() { return GetCurrentColorTheme().onWarning; }
|
|
|
|
// State overlay colors (use with BlendOverlay)
|
|
inline ImU32 StateHover() { return GetCurrentColorTheme().stateHover; }
|
|
inline ImU32 StateFocus() { return GetCurrentColorTheme().stateFocus; }
|
|
inline ImU32 StatePressed() { return GetCurrentColorTheme().statePressed; }
|
|
inline ImU32 StateSelected() { return GetCurrentColorTheme().stateSelected; }
|
|
inline ImU32 StateDragged() { return GetCurrentColorTheme().stateDragged; }
|
|
|
|
// UI structure
|
|
inline ImU32 Divider() { return GetCurrentColorTheme().divider; }
|
|
inline ImU32 Outline() { return GetCurrentColorTheme().outline; }
|
|
inline ImU32 Scrim() { return GetCurrentColorTheme().scrim; }
|
|
|
|
// ============================================================================
|
|
// ImVec4 Variants (for direct use with ImGui style colors)
|
|
// ============================================================================
|
|
|
|
inline ImVec4 PrimaryVec4() { return ImGui::ColorConvertU32ToFloat4(Primary()); }
|
|
inline ImVec4 SecondaryVec4() { return ImGui::ColorConvertU32ToFloat4(Secondary()); }
|
|
inline ImVec4 SurfaceVec4() { return ImGui::ColorConvertU32ToFloat4(Surface()); }
|
|
inline ImVec4 SurfaceVec4(int dp) { return ImGui::ColorConvertU32ToFloat4(Surface(dp)); }
|
|
inline ImVec4 OnSurfaceVec4() { return ImGui::ColorConvertU32ToFloat4(OnSurface()); }
|
|
inline ImVec4 ErrorVec4() { return ImGui::ColorConvertU32ToFloat4(Error()); }
|
|
inline ImVec4 SuccessVec4() { return ImGui::ColorConvertU32ToFloat4(Success()); }
|
|
inline ImVec4 WarningVec4() { return ImGui::ColorConvertU32ToFloat4(Warning()); }
|
|
|
|
// ============================================================================
|
|
// Convenience Functions for Common Patterns
|
|
// ============================================================================
|
|
|
|
/**
|
|
* @brief Theme-aware translucent overlay for tracks / hover fills / dividers.
|
|
*
|
|
* A raw white overlay (IM_COL32(255,255,255,a)) reads on dark skins but vanishes
|
|
* on light/pastel skins (white-on-white). This picks a dark overlay on light
|
|
* themes and a white overlay on dark themes so the alpha reads either way.
|
|
* (Self-contained luminance check so colors.h stays free of draw_helpers.h.)
|
|
*
|
|
* @param alpha 0-255 opacity of the overlay
|
|
*/
|
|
inline ImU32 SurfaceOverlay(int alpha)
|
|
{
|
|
ImU32 bg = Background();
|
|
float r = ((bg >> IM_COL32_R_SHIFT) & 0xFF) / 255.0f;
|
|
float g = ((bg >> IM_COL32_G_SHIFT) & 0xFF) / 255.0f;
|
|
float b = ((bg >> IM_COL32_B_SHIFT) & 0xFF) / 255.0f;
|
|
bool light = (0.299f * r + 0.587f * g + 0.114f * b) > 0.5f;
|
|
return light ? IM_COL32(0, 0, 0, alpha) : IM_COL32(255, 255, 255, alpha);
|
|
}
|
|
|
|
/**
|
|
* @brief Get color with applied state overlay
|
|
*
|
|
* @param base Base color
|
|
* @param state State overlay (StateHover, StateFocus, etc.)
|
|
* @return Color with state applied
|
|
*
|
|
* Usage:
|
|
* ImU32 hoveredButton = WithState(Primary(), StateHover());
|
|
*/
|
|
inline ImU32 WithState(ImU32 base, ImU32 state)
|
|
{
|
|
return BlendOverlay(base, state, 1.0f);
|
|
}
|
|
|
|
/**
|
|
* @brief Get button color for current state
|
|
*
|
|
* @param isHovered Button is hovered
|
|
* @param isActive Button is pressed
|
|
* @return Appropriate button color
|
|
*/
|
|
inline ImU32 ButtonColor(bool isHovered, bool isActive)
|
|
{
|
|
if (isActive) return WithState(Primary(), StatePressed());
|
|
if (isHovered) return WithState(Primary(), StateHover());
|
|
return Primary();
|
|
}
|
|
|
|
/**
|
|
* @brief Get surface color for card at specified elevation
|
|
*
|
|
* @param elevation Elevation in dp (0-24)
|
|
* @return Surface color with elevation overlay
|
|
*/
|
|
inline ImU32 CardSurface(int elevation = 2)
|
|
{
|
|
return Surface(elevation);
|
|
}
|
|
|
|
/**
|
|
* @brief Get surface color for dialog/modal
|
|
*
|
|
* @return Surface color at 24dp elevation
|
|
*/
|
|
inline ImU32 DialogSurface()
|
|
{
|
|
return SurfaceAt(Elevation::Dp24);
|
|
}
|
|
|
|
/**
|
|
* @brief Get surface color for menu/popup
|
|
*
|
|
* @return Surface color at 8dp elevation
|
|
*/
|
|
inline ImU32 MenuSurface()
|
|
{
|
|
return SurfaceAt(Elevation::Dp8);
|
|
}
|
|
|
|
/**
|
|
* @brief Get surface color for app bar/toolbar
|
|
*
|
|
* @return Surface color at 4dp elevation
|
|
*/
|
|
inline ImU32 AppBarSurface()
|
|
{
|
|
return SurfaceAt(Elevation::Dp4);
|
|
}
|
|
|
|
/**
|
|
* @brief Get surface color for nav drawer
|
|
*
|
|
* @return Surface color at 16dp elevation
|
|
*/
|
|
inline ImU32 NavDrawerSurface()
|
|
{
|
|
return SurfaceAt(Elevation::Dp16);
|
|
}
|
|
|
|
} // namespace material
|
|
} // namespace ui
|
|
} // namespace dragonx
|