Issues solved: #729 and #739 ## Summary * **What is the goal of this PR?** Currently, the battery icon and charge percentage were aligned to the left even for the UI, where they were positioned on the right side of the screen. This meant that when changing values of different numbers of digits, the battery would shift, creating a block of icons and text that was illegible. * **What changes are included?** - Add drawBatteryUi() method for right-aligned battery display in UI headers - Keep drawBattery() for left-aligned display in reader mode - Extract drawBatteryIcon() helper to reduce code duplication - Battery icon now stays fixed at right edge regardless of percentage digits - Text adjusts to left of icon in UI mode, to right of icon in reader mode ## Additional Context * Add any other information that might be helpful for the reviewer * This fix applies to both themes (Base and Lyra). --- ### AI Usage While CrossPoint doesn't have restrictions on AI tools in contributing, please be transparent about their usage as it helps set the right context for reviewers. Did you use AI tools to help write this code? _**< YES >**_
60 lines
3.4 KiB
C++
60 lines
3.4 KiB
C++
#pragma once
|
|
|
|
#include "components/themes/BaseTheme.h"
|
|
|
|
class GfxRenderer;
|
|
|
|
// Lyra theme metrics (zero runtime cost)
|
|
namespace LyraMetrics {
|
|
constexpr ThemeMetrics values = {.batteryWidth = 16,
|
|
.batteryHeight = 12,
|
|
.topPadding = 5,
|
|
.batteryBarHeight = 40,
|
|
.headerHeight = 84,
|
|
.verticalSpacing = 16,
|
|
.contentSidePadding = 20,
|
|
.listRowHeight = 40,
|
|
.listWithSubtitleRowHeight = 60,
|
|
.menuRowHeight = 64,
|
|
.menuSpacing = 8,
|
|
.tabSpacing = 8,
|
|
.tabBarHeight = 40,
|
|
.scrollBarWidth = 4,
|
|
.scrollBarRightOffset = 5,
|
|
.homeTopPadding = 56,
|
|
.homeCoverHeight = 226,
|
|
.homeCoverTileHeight = 287,
|
|
.homeRecentBooksCount = 3,
|
|
.buttonHintsHeight = 40,
|
|
.sideButtonHintsWidth = 30,
|
|
.versionTextRightX = 20,
|
|
.versionTextY = 55,
|
|
.bookProgressBarHeight = 4};
|
|
}
|
|
|
|
class LyraTheme : public BaseTheme {
|
|
public:
|
|
// Component drawing methods
|
|
// void drawProgressBar(const GfxRenderer& renderer, Rect rect, size_t current, size_t total) override;
|
|
void drawBatteryLeft(const GfxRenderer& renderer, Rect rect, bool showPercentage = true) const override;
|
|
void drawBatteryRight(const GfxRenderer& renderer, Rect rect, bool showPercentage = true) const override;
|
|
void drawHeader(const GfxRenderer& renderer, Rect rect, const char* title) const override;
|
|
void drawTabBar(const GfxRenderer& renderer, Rect rect, const std::vector<TabInfo>& tabs,
|
|
bool selected) const override;
|
|
void drawList(const GfxRenderer& renderer, Rect rect, int itemCount, int selectedIndex,
|
|
const std::function<std::string(int index)>& rowTitle,
|
|
const std::function<std::string(int index)>& rowSubtitle,
|
|
const std::function<std::string(int index)>& rowIcon,
|
|
const std::function<std::string(int index)>& rowValue) const override;
|
|
void drawButtonHints(GfxRenderer& renderer, const char* btn1, const char* btn2, const char* btn3,
|
|
const char* btn4) const override;
|
|
void drawSideButtonHints(const GfxRenderer& renderer, const char* topBtn, const char* bottomBtn) const override;
|
|
void drawButtonMenu(GfxRenderer& renderer, Rect rect, int buttonCount, int selectedIndex,
|
|
const std::function<std::string(int index)>& buttonLabel,
|
|
const std::function<std::string(int index)>& rowIcon) const override;
|
|
void drawRecentBookCover(GfxRenderer& renderer, Rect rect, const std::vector<RecentBook>& recentBooks,
|
|
const int selectorIndex, bool& coverRendered, bool& coverBufferStored, bool& bufferRestored,
|
|
std::function<bool()> storeCoverBuffer) const override;
|
|
Rect drawPopup(const GfxRenderer& renderer, const char* message) const override;
|
|
};
|