From f16c0e52fd45c53b12975647cc4f59e97b27d98a Mon Sep 17 00:00:00 2001 From: Bram Schulting Date: Thu, 19 Feb 2026 10:23:34 +0100 Subject: [PATCH] feat: Tweak Lyra popup UI (#768) ## Summary I want to preface this PR by stating that the proposed changes are subjective to people's opinions. The following is just my suggestion, but I'm of course open to changes. The popups in the currently implemented version of the Lyra theme feel a bit out of place. This PR suggests an updated version which looks a bit more polished and in line with the rest of the theme. I've also taken the liberty to remove the ellipsis behind the text of the popups, as they made the popup feel a bit off balance (example below). With the applied changes, popups will look like this. ![IMG_0012](https://github.com/user-attachments/assets/a954de12-97b8-4102-be17-a702c0fe7d1e) The vertical position is (more or less) aligned to be in line with the sleep button. I'm aware the popup is used for other purposes aside from the sleep message, but this still felt like a good place. It's also a place where your eyes naturally 'rest'. The popup has a small 2px white outline, neatly separating it from whatever is behind it. ### Alternatives considered and rationale behind proposal Initially I started out worked off the Figma design for the Lyra theme, which [moves the popups](https://www.figma.com/design/UhxoV4DgUnfrDQgMPPTXog/Lyra-Theme?node-id=2011-19296&t=Ppj6B2MrFRfUo9YX-1) to the bottom of the screen. To me, this results in popups that are much too easy to miss: ![IMG_0006](https://github.com/user-attachments/assets/b8ce3632-94a9-494e-8256-d87a6ee60cdf) After this, I tried moving the popup back up (to the position of the sleep button), but to me it still kinda disappeared into the text of the book: ![IMG_0008](https://github.com/user-attachments/assets/4b05df7c-932e-432b-9c10-130da3109050) Inverting the colors of the popup made things stand out the perfect amount in my opinion. The white outline separates the popup from what is behind it. ![IMG_0011](https://github.com/user-attachments/assets/77b1e8cc-0a57-4f4b-9abb-a9d10988d919) This looked much better to me. The only thing that felt a bit off to me, was the balance due to the ellipsis at the end of the popup text. Also, "Entering Sleep..." felt a bit.. engineer-y. I felt something a bit more 'conversational' makes at all feel a bit more human-centric. But I'm no copywriter, and English is not even my native language. So feel free to chip in! After tweaking that, I ended up with the final result: _(Same picture as the first one shown in this PR)_ ![IMG_0012](https://github.com/user-attachments/assets/a954de12-97b8-4102-be17-a702c0fe7d1e) ## Additional Context * Figma design: https://www.figma.com/design/UhxoV4DgUnfrDQgMPPTXog/Lyra-Theme?node-id=2011-19296&t=Ppj6B2MrFRfUo9YX-1 --- ### 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? _**NO**_ --- lib/I18n/I18nKeys.h | 1 + lib/I18n/translations/czech.yaml | 5 ++-- lib/I18n/translations/english.yaml | 5 ++-- lib/I18n/translations/french.yaml | 5 ++-- lib/I18n/translations/german.yaml | 5 ++-- lib/I18n/translations/portuguese.yaml | 5 ++-- lib/I18n/translations/russian.yaml | 5 ++-- lib/I18n/translations/spanish.yaml | 5 ++-- lib/I18n/translations/swedish.yaml | 5 ++-- src/activities/home/HomeActivity.cpp | 4 +-- src/components/themes/lyra/LyraTheme.cpp | 38 ++++++++++++++++++------ src/components/themes/lyra/LyraTheme.h | 1 + 12 files changed, 57 insertions(+), 27 deletions(-) diff --git a/lib/I18n/I18nKeys.h b/lib/I18n/I18nKeys.h index 536e219a..a7bcb3e2 100644 --- a/lib/I18n/I18nKeys.h +++ b/lib/I18n/I18nKeys.h @@ -59,6 +59,7 @@ enum class StrId : uint16_t { STR_EMPTY_FILE, STR_OUT_OF_BOUNDS, STR_LOADING, + STR_LOADING_POPUP, STR_LOAD_XTC_FAILED, STR_LOAD_TXT_FAILED, STR_LOAD_EPUB_FAILED, diff --git a/lib/I18n/translations/czech.yaml b/lib/I18n/translations/czech.yaml index 4ce1b645..1820af62 100644 --- a/lib/I18n/translations/czech.yaml +++ b/lib/I18n/translations/czech.yaml @@ -5,7 +5,7 @@ _order: "4" STR_CROSSPOINT: "CrossPoint" STR_BOOTING: "SPUŠTĚNÍ" STR_SLEEPING: "SPÁNEK" -STR_ENTERING_SLEEP: "Vstup do režimu spánku..." +STR_ENTERING_SLEEP: "Vstup do režimu spánku" STR_BROWSE_FILES: "Procházet soubory" STR_FILE_TRANSFER: "Přenos souborů" STR_SETTINGS_TITLE: "Nastavení" @@ -19,12 +19,13 @@ STR_SELECT_CHAPTER: "Vybrat kapitolu" STR_NO_CHAPTERS: "Žádné kapitoly" STR_END_OF_BOOK: "Konec knihy" STR_EMPTY_CHAPTER: "Prázdná kapitola" -STR_INDEXING: "Indexování..." +STR_INDEXING: "Indexování" STR_MEMORY_ERROR: "Chyba paměti" STR_PAGE_LOAD_ERROR: "Chyba načítání stránky" STR_EMPTY_FILE: "Prázdný soubor" STR_OUT_OF_BOUNDS: "Mimo hranice" STR_LOADING: "Načítání..." +STR_LOADING_POPUP: "Načítání" STR_LOAD_XTC_FAILED: "Nepodařilo se načíst XTC" STR_LOAD_TXT_FAILED: "Nepodařilo se načíst TXT" STR_LOAD_EPUB_FAILED: "Nepodařilo se načíst EPUB" diff --git a/lib/I18n/translations/english.yaml b/lib/I18n/translations/english.yaml index eb0e4b26..77841cf3 100644 --- a/lib/I18n/translations/english.yaml +++ b/lib/I18n/translations/english.yaml @@ -5,7 +5,7 @@ _order: "0" STR_CROSSPOINT: "CrossPoint" STR_BOOTING: "BOOTING" STR_SLEEPING: "SLEEPING" -STR_ENTERING_SLEEP: "Entering Sleep..." +STR_ENTERING_SLEEP: "Going to sleep" STR_BROWSE_FILES: "Browse Files" STR_FILE_TRANSFER: "File Transfer" STR_SETTINGS_TITLE: "Settings" @@ -19,12 +19,13 @@ STR_SELECT_CHAPTER: "Select Chapter" STR_NO_CHAPTERS: "No chapters" STR_END_OF_BOOK: "End of book" STR_EMPTY_CHAPTER: "Empty chapter" -STR_INDEXING: "Indexing..." +STR_INDEXING: "Indexing" STR_MEMORY_ERROR: "Memory error" STR_PAGE_LOAD_ERROR: "Page load error" STR_EMPTY_FILE: "Empty file" STR_OUT_OF_BOUNDS: "Out of bounds" STR_LOADING: "Loading..." +STR_LOADING_POPUP: "Loading" STR_LOAD_XTC_FAILED: "Failed to load XTC" STR_LOAD_TXT_FAILED: "Failed to load TXT" STR_LOAD_EPUB_FAILED: "Failed to load EPUB" diff --git a/lib/I18n/translations/french.yaml b/lib/I18n/translations/french.yaml index 00af367c..fd3a87b6 100644 --- a/lib/I18n/translations/french.yaml +++ b/lib/I18n/translations/french.yaml @@ -5,7 +5,7 @@ _order: "2" STR_CROSSPOINT: "CrossPoint" STR_BOOTING: "DÉMARRAGE EN COURS" STR_SLEEPING: "VEILLE" -STR_ENTERING_SLEEP: "Mise en veille…" +STR_ENTERING_SLEEP: "Mise en veille" STR_BROWSE_FILES: "Fichiers" STR_FILE_TRANSFER: "Transfert" STR_SETTINGS_TITLE: "Réglages" @@ -19,12 +19,13 @@ STR_SELECT_CHAPTER: "Choix du chapitre" STR_NO_CHAPTERS: "Aucun chapitre" STR_END_OF_BOOK: "Fin du livre" STR_EMPTY_CHAPTER: "Chapitre vide" -STR_INDEXING: "Indexation en cours…" +STR_INDEXING: "Indexation en cours" STR_MEMORY_ERROR: "Erreur de mémoire" STR_PAGE_LOAD_ERROR: "Erreur de chargement" STR_EMPTY_FILE: "Fichier vide" STR_OUT_OF_BOUNDS: "Dépassement de mémoire" STR_LOADING: "Chargement…" +STR_LOADING_POPUP: "Chargement" STR_LOAD_XTC_FAILED: "Erreur de chargement du fichier XTC" STR_LOAD_TXT_FAILED: "Erreur de chargement du fichier TXT" STR_LOAD_EPUB_FAILED: "Erreur de chargement du fichier EPUB" diff --git a/lib/I18n/translations/german.yaml b/lib/I18n/translations/german.yaml index 0879c925..497cb76c 100644 --- a/lib/I18n/translations/german.yaml +++ b/lib/I18n/translations/german.yaml @@ -5,7 +5,7 @@ _order: "3" STR_CROSSPOINT: "CrossPoint" STR_BOOTING: "STARTEN" STR_SLEEPING: "STANDBY" -STR_ENTERING_SLEEP: "Standby..." +STR_ENTERING_SLEEP: "Standby" STR_BROWSE_FILES: "Durchsuchen" STR_FILE_TRANSFER: "Datentransfer" STR_SETTINGS_TITLE: "Einstellungen" @@ -19,12 +19,13 @@ STR_SELECT_CHAPTER: "Kapitel auswählen" STR_NO_CHAPTERS: "Keine Kapitel" STR_END_OF_BOOK: "Buchende" STR_EMPTY_CHAPTER: "Kapitelende" -STR_INDEXING: "Indexieren…" +STR_INDEXING: "Indexieren" STR_MEMORY_ERROR: "Speicherfehler" STR_PAGE_LOAD_ERROR: "Seitenladefehler" STR_EMPTY_FILE: "Leere Datei" STR_OUT_OF_BOUNDS: "Zu groß" STR_LOADING: "Laden…" +STR_LOADING_POPUP: "Laden" STR_LOAD_XTC_FAILED: "Ladefehler bei XTC" STR_LOAD_TXT_FAILED: "Ladefehler bei TXT" STR_LOAD_EPUB_FAILED: "Ladefehler bei EPUB" diff --git a/lib/I18n/translations/portuguese.yaml b/lib/I18n/translations/portuguese.yaml index 484a33f1..30498907 100644 --- a/lib/I18n/translations/portuguese.yaml +++ b/lib/I18n/translations/portuguese.yaml @@ -5,7 +5,7 @@ _order: "5" STR_CROSSPOINT: "CrossPoint" STR_BOOTING: "INICIANDO" STR_SLEEPING: "EM REPOUSO" -STR_ENTERING_SLEEP: "Entrando em repouso..." +STR_ENTERING_SLEEP: "Entrando em repouso" STR_BROWSE_FILES: "Arquivos" STR_FILE_TRANSFER: "Transferência" STR_SETTINGS_TITLE: "Configurações" @@ -19,12 +19,13 @@ STR_SELECT_CHAPTER: "Escolher capítulo" STR_NO_CHAPTERS: "Sem capítulos" STR_END_OF_BOOK: "Fim do livro" STR_EMPTY_CHAPTER: "Capítulo vazio" -STR_INDEXING: "Indexando..." +STR_INDEXING: "Indexando" STR_MEMORY_ERROR: "Erro de memória" STR_PAGE_LOAD_ERROR: "Erro página" STR_EMPTY_FILE: "Arquivo vazio" STR_OUT_OF_BOUNDS: "Fora dos limites" STR_LOADING: "Carregando..." +STR_LOADING_POPUP: "Carregando" STR_LOAD_XTC_FAILED: "Falha ao carregar XTC" STR_LOAD_TXT_FAILED: "Falha ao carregar TXT" STR_LOAD_EPUB_FAILED: "Falha ao carregar EPUB" diff --git a/lib/I18n/translations/russian.yaml b/lib/I18n/translations/russian.yaml index 18727e32..5b698283 100644 --- a/lib/I18n/translations/russian.yaml +++ b/lib/I18n/translations/russian.yaml @@ -5,7 +5,7 @@ _order: "6" STR_CROSSPOINT: "CrossPoint" STR_BOOTING: "Загрузка" STR_SLEEPING: "Спящий режим" -STR_ENTERING_SLEEP: "Переход в сон..." +STR_ENTERING_SLEEP: "Переход в сон" STR_BROWSE_FILES: "Обзор файлов" STR_FILE_TRANSFER: "Передача файлов" STR_SETTINGS_TITLE: "Настройки" @@ -19,12 +19,13 @@ STR_SELECT_CHAPTER: "Выберите главу" STR_NO_CHAPTERS: "Глав нет" STR_END_OF_BOOK: "Конец книги" STR_EMPTY_CHAPTER: "Пустая глава" -STR_INDEXING: "Индексация..." +STR_INDEXING: "Индексация" STR_MEMORY_ERROR: "Ошибка памяти" STR_PAGE_LOAD_ERROR: "Ошибка загрузки страницы" STR_EMPTY_FILE: "Пустой файл" STR_OUT_OF_BOUNDS: "Выход за пределы" STR_LOADING: "Загрузка..." +STR_LOADING_POPUP: "Загрузка" STR_LOAD_XTC_FAILED: "Не удалось загрузить XTC" STR_LOAD_TXT_FAILED: "Не удалось загрузить TXT" STR_LOAD_EPUB_FAILED: "Не удалось загрузить EPUB" diff --git a/lib/I18n/translations/spanish.yaml b/lib/I18n/translations/spanish.yaml index 4556aad6..329e6102 100644 --- a/lib/I18n/translations/spanish.yaml +++ b/lib/I18n/translations/spanish.yaml @@ -5,7 +5,7 @@ _order: "1" STR_CROSSPOINT: "CrossPoint" STR_BOOTING: "BOOTING" STR_SLEEPING: "SLEEPING" -STR_ENTERING_SLEEP: "ENTERING SLEEP..." +STR_ENTERING_SLEEP: "ENTERING SLEEP" STR_BROWSE_FILES: "Buscar archivos" STR_FILE_TRANSFER: "Transferencia de archivos" STR_SETTINGS_TITLE: "Configuración" @@ -19,12 +19,13 @@ STR_SELECT_CHAPTER: "Seleccionar capítulo" STR_NO_CHAPTERS: "Sin capítulos" STR_END_OF_BOOK: "Fin del libro" STR_EMPTY_CHAPTER: "Capítulo vacío" -STR_INDEXING: "Indexando..." +STR_INDEXING: "Indexando" STR_MEMORY_ERROR: "Error de memoria" STR_PAGE_LOAD_ERROR: "Error al cargar la página" STR_EMPTY_FILE: "Archivo vacío" STR_OUT_OF_BOUNDS: "Out of bounds" STR_LOADING: "Cargando..." +STR_LOADING_POPUP: "Cargando" STR_LOAD_XTC_FAILED: "Error al cargar XTC" STR_LOAD_TXT_FAILED: "Error al cargar TXT" STR_LOAD_EPUB_FAILED: "Error al cargar EPUB" diff --git a/lib/I18n/translations/swedish.yaml b/lib/I18n/translations/swedish.yaml index 7cf2795b..6e484e43 100644 --- a/lib/I18n/translations/swedish.yaml +++ b/lib/I18n/translations/swedish.yaml @@ -5,7 +5,7 @@ _order: "7" STR_CROSSPOINT: "Crosspoint" STR_BOOTING: "STARTAR" STR_SLEEPING: "VILA" -STR_ENTERING_SLEEP: "Går i vila…" +STR_ENTERING_SLEEP: "Går i vila" STR_BROWSE_FILES: "Bläddra filer…" STR_FILE_TRANSFER: "Filöverföring" STR_SETTINGS_TITLE: "Inställningar" @@ -19,12 +19,13 @@ STR_SELECT_CHAPTER: "Välj kapitel" STR_NO_CHAPTERS: "Inga kapitel" STR_END_OF_BOOK: "Slutet på boken" STR_EMPTY_CHAPTER: "Tomt kapitel" -STR_INDEXING: "Indexerar…" +STR_INDEXING: "Indexerar" STR_MEMORY_ERROR: "Minnesfel" STR_PAGE_LOAD_ERROR: "Sidladdningsfel" STR_EMPTY_FILE: "Tom fil" STR_OUT_OF_BOUNDS: "Utanför gränserna" STR_LOADING: "Laddar…" +STR_LOADING_POPUP: "Laddar" STR_LOAD_XTC_FAILED: "Misslyckades ladda XTC" STR_LOAD_TXT_FAILED: "Misslyckades ladda TCT" STR_LOAD_EPUB_FAILED: "Misslyckades ladda EPUB" diff --git a/src/activities/home/HomeActivity.cpp b/src/activities/home/HomeActivity.cpp index 3fff5b11..cd8bcdf1 100644 --- a/src/activities/home/HomeActivity.cpp +++ b/src/activities/home/HomeActivity.cpp @@ -70,7 +70,7 @@ void HomeActivity::loadRecentCovers(int coverHeight) { // Try to generate thumbnail image for Continue Reading card if (!showingLoading) { showingLoading = true; - popupRect = GUI.drawPopup(renderer, tr(STR_LOADING)); + popupRect = GUI.drawPopup(renderer, tr(STR_LOADING_POPUP)); } GUI.fillPopupProgress(renderer, popupRect, 10 + progress * (90 / recentBooks.size())); bool success = epub.generateThumbBmp(coverHeight); @@ -88,7 +88,7 @@ void HomeActivity::loadRecentCovers(int coverHeight) { // Try to generate thumbnail image for Continue Reading card if (!showingLoading) { showingLoading = true; - popupRect = GUI.drawPopup(renderer, tr(STR_LOADING)); + popupRect = GUI.drawPopup(renderer, tr(STR_LOADING_POPUP)); } GUI.fillPopupProgress(renderer, popupRect, 10 + progress * (90 / recentBooks.size())); bool success = xtc.generateThumbBmp(coverHeight); diff --git a/src/components/themes/lyra/LyraTheme.cpp b/src/components/themes/lyra/LyraTheme.cpp index 8698da5f..bc9d2b63 100644 --- a/src/components/themes/lyra/LyraTheme.cpp +++ b/src/components/themes/lyra/LyraTheme.cpp @@ -18,6 +18,8 @@ constexpr int batteryPercentSpacing = 4; constexpr int hPaddingInSelection = 8; constexpr int cornerRadius = 6; constexpr int topHintButtonY = 345; +constexpr int popupMarginX = 16; +constexpr int popupMarginY = 12; } // namespace void LyraTheme::drawBatteryLeft(const GfxRenderer& renderer, Rect rect, const bool showPercentage) const { @@ -395,20 +397,38 @@ void LyraTheme::drawButtonMenu(GfxRenderer& renderer, Rect rect, int buttonCount } Rect LyraTheme::drawPopup(const GfxRenderer& renderer, const char* message) const { - constexpr int margin = 15; - constexpr int y = 60; + constexpr int y = 132; + constexpr int outline = 2; const int textWidth = renderer.getTextWidth(UI_12_FONT_ID, message, EpdFontFamily::REGULAR); const int textHeight = renderer.getLineHeight(UI_12_FONT_ID); - const int w = textWidth + margin * 2; - const int h = textHeight + margin * 2; + const int w = textWidth + popupMarginX * 2; + const int h = textHeight + popupMarginY * 2; const int x = (renderer.getScreenWidth() - w) / 2; - renderer.fillRect(x - 5, y - 5, w + 10, h + 10, false); - renderer.drawRect(x, y, w, h, true); + renderer.fillRoundedRect(x - outline, y - outline, w + outline * 2, h + outline * 2, cornerRadius + outline, + Color::White); + renderer.fillRoundedRect(x, y, w, h, cornerRadius, Color::Black); const int textX = x + (w - textWidth) / 2; - const int textY = y + margin - 2; - renderer.drawText(UI_12_FONT_ID, textX, textY, message, true, EpdFontFamily::REGULAR); + const int textY = y + popupMarginY - 2; + renderer.drawText(UI_12_FONT_ID, textX, textY, message, false, EpdFontFamily::REGULAR); renderer.displayBuffer(); + return Rect{x, y, w, h}; -} \ No newline at end of file +} + +void LyraTheme::fillPopupProgress(const GfxRenderer& renderer, const Rect& layout, const int progress) const { + constexpr int barHeight = 4; + + // Twice the margin in drawPopup to match text width + const int barWidth = layout.width - popupMarginX * 2; + const int barX = layout.x + (layout.width - barWidth) / 2; + // Center inside the margin of drawPopup. The - 1 is added to account for the - 2 in drawPopup. + const int barY = layout.y + layout.height - popupMarginY / 2 - barHeight / 2 - 1; + + int fillWidth = barWidth * progress / 100; + + renderer.fillRect(barX, barY, fillWidth, barHeight, false); + + renderer.displayBuffer(HalDisplay::FAST_REFRESH); +} diff --git a/src/components/themes/lyra/LyraTheme.h b/src/components/themes/lyra/LyraTheme.h index 0a76471a..1d80358a 100644 --- a/src/components/themes/lyra/LyraTheme.h +++ b/src/components/themes/lyra/LyraTheme.h @@ -56,4 +56,5 @@ class LyraTheme : public BaseTheme { const int selectorIndex, bool& coverRendered, bool& coverBufferStored, bool& bufferRestored, std::function storeCoverBuffer) const override; Rect drawPopup(const GfxRenderer& renderer, const char* message) const override; + void fillPopupProgress(const GfxRenderer& renderer, const Rect& layout, const int progress) const override; };