feat: Themed reader menus (#1072)

src/components/UITheme.cpp

@@ -53,6 +53,7 @@ void UITheme::setTheme(CrossPointSettings::UI_THEME type) {
 int UITheme::getNumberOfItemsPerPage(const GfxRenderer& renderer, bool hasHeader, bool hasTabBar, bool hasButtonHints,
                                      bool hasSubtitle, int extraReservedHeight) {
   const ThemeMetrics& metrics = UITheme::getInstance().getMetrics();
+  auto orientation = renderer.getOrientation();
   int reservedHeight = metrics.topPadding;
   if (hasHeader) {
     reservedHeight += metrics.headerHeight + metrics.verticalSpacing;
@@ -60,7 +61,8 @@ int UITheme::getNumberOfItemsPerPage(const GfxRenderer& renderer, bool hasHeader
   if (hasTabBar) {
     reservedHeight += metrics.tabBarHeight;
   }
-  if (hasButtonHints) {
+  if (hasButtonHints && orientation != GfxRenderer::Orientation::LandscapeClockwise &&
+      orientation != GfxRenderer::Orientation::LandscapeCounterClockwise) {
     reservedHeight += metrics.verticalSpacing + metrics.buttonHintsHeight;
   }
   const int availableHeight = renderer.getScreenHeight() - reservedHeight - extraReservedHeight;
@@ -68,6 +70,39 @@ int UITheme::getNumberOfItemsPerPage(const GfxRenderer& renderer, bool hasHeader
   return availableHeight / rowHeight;
 }
 
+// Screen area excluding the button hints
+Rect UITheme::getScreenSafeArea(const GfxRenderer& renderer, bool hasFrontButtonHints, bool hasSideButtonHints) {
+  auto orientation = renderer.getOrientation();
+  const int screenWidth = renderer.getScreenWidth();
+  const int screenHeight = renderer.getScreenHeight();
+  Rect safeArea = Rect{0, 0, screenWidth, screenHeight};
+  switch (orientation) {
+    case GfxRenderer::Orientation::Portrait:
+      if (hasFrontButtonHints) {
+        safeArea.height -= currentMetrics->buttonHintsHeight;
+      }
+      break;
+    case GfxRenderer::Orientation::LandscapeClockwise:
+      if (hasFrontButtonHints) {
+        safeArea.x += currentMetrics->buttonHintsHeight;
+        safeArea.width -= currentMetrics->buttonHintsHeight;
+      }
+      break;
+    case GfxRenderer::Orientation::PortraitInverted:
+      if (hasFrontButtonHints) {
+        safeArea.y += currentMetrics->buttonHintsHeight;
+        safeArea.height -= currentMetrics->buttonHintsHeight;
+      }
+      break;
+    case GfxRenderer::Orientation::LandscapeCounterClockwise:
+      if (hasFrontButtonHints) {
+        safeArea.width -= currentMetrics->buttonHintsHeight;
+      }
+      break;
+  }
+  return safeArea;
+}
+
 std::string UITheme::getCoverThumbPath(std::string coverBmpPath, int coverHeight) {
   size_t pos = coverBmpPath.find("[HEIGHT]", 0);
   if (pos != std::string::npos) {
@@ -111,3 +146,10 @@ int UITheme::getProgressBarHeight() {
       SETTINGS.statusBarProgressBar != CrossPointSettings::STATUS_BAR_PROGRESS_BAR::HIDE_PROGRESS;
   return (showProgressBar ? (((SETTINGS.statusBarProgressBarThickness + 1) * 2) + metrics.progressBarMarginTop) : 0);
 }
+
+// Centered text implementation that takes the safe area into account
+void UITheme::drawCenteredText(const GfxRenderer& renderer, Rect screen, int fontId, int y, const char* text,
+                               bool black, EpdFontFamily::Style style) {
+  const int x = screen.x + (screen.width - renderer.getTextWidth(fontId, text, style)) / 2;
+  renderer.drawText(fontId, x, y, text, black, style);
+}

src/components/UITheme.h

@@ -1,5 +1,7 @@
 #pragma once
 
+#include <EpdFontFamily.h>
+
 #include <functional>
 #include <memory>
 
@@ -16,6 +18,10 @@ class UITheme {
 
   const ThemeMetrics& getMetrics() const { return *currentMetrics; }
   const BaseTheme& getTheme() const { return *currentTheme; }
+  Rect getScreenSafeArea(const GfxRenderer& renderer, bool hasFrontButtonHints = false,
+                         bool hasSideButtonHints = false);
+  static void drawCenteredText(const GfxRenderer& renderer, Rect screen, int fontId, int y, const char* text,
+                               bool black = true, EpdFontFamily::Style style = EpdFontFamily::REGULAR);
   void reload();
   void setTheme(CrossPointSettings::UI_THEME type);
   static int getNumberOfItemsPerPage(const GfxRenderer& renderer, bool hasHeader, bool hasTabBar, bool hasButtonHints,

src/components/themes/BaseTheme.cpp

@@ -266,7 +266,7 @@ void BaseTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
   // Draw selection
   int contentWidth = rect.width - 5;
   if (selectedIndex >= 0) {
-    renderer.fillRect(0, rect.y + selectedIndex % pageItems * rowHeight - 2, rect.width, rowHeight);
+    renderer.fillRect(rect.x, rect.y + selectedIndex % pageItems * rowHeight - 2, rect.width, rowHeight);
   }
   constexpr int maxValueWidth = 200;
   constexpr int minValueGap = 10;

src/components/themes/lyra/LyraTheme.cpp

@@ -233,9 +233,9 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
       rect.width -
       (totalPages > 1 ? (LyraMetrics::values.scrollBarWidth + LyraMetrics::values.scrollBarRightOffset) : 1);
   if (selectedIndex >= 0) {
-    renderer.fillRoundedRect(LyraMetrics::values.contentSidePadding, rect.y + selectedIndex % pageItems * rowHeight,
-                             contentWidth - LyraMetrics::values.contentSidePadding * 2, rowHeight, cornerRadius,
-                             Color::LightGray);
+    renderer.fillRoundedRect(
+        rect.x + LyraMetrics::values.contentSidePadding, rect.y + selectedIndex % pageItems * rowHeight,
+        contentWidth - LyraMetrics::values.contentSidePadding * 2, rowHeight, cornerRadius, Color::LightGray);
   }
 
   int textX = rect.x + LyraMetrics::values.contentSidePadding + hPaddingInSelection;
@@ -297,7 +297,7 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
     if (!valueText.empty()) {
       if (i == selectedIndex && highlightValue) {
         renderer.fillRoundedRect(
-            contentWidth - LyraMetrics::values.contentSidePadding - hPaddingInSelection - valueWidth, itemY,
+            rect.x + contentWidth - LyraMetrics::values.contentSidePadding - hPaddingInSelection - valueWidth, itemY,
             valueWidth + hPaddingInSelection, rowHeight, cornerRadius, Color::Black);
       }