From 71d5491233007421c01cfba8665a296906a70045 Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Thu, 17 Jul 2025 20:32:54 -0300 Subject: [PATCH 1/3] Improve the CSS and the code for the photo sidebar --- src/pilgrim/ui/screens/edit_entry_screen.py | 30 ++++++++--------- src/pilgrim/ui/styles/pilgrim.css | 37 +++++++++------------ 2 files changed, 29 insertions(+), 38 deletions(-) diff --git a/src/pilgrim/ui/screens/edit_entry_screen.py b/src/pilgrim/ui/screens/edit_entry_screen.py index e2902c1..7c11556 100644 --- a/src/pilgrim/ui/screens/edit_entry_screen.py +++ b/src/pilgrim/ui/screens/edit_entry_screen.py @@ -87,7 +87,7 @@ class EditEntryScreen(Screen): self.text_entry = TextArea(id="text_entry", classes="EditEntryScreen-text-entry") # Sidebar widgets - self.sidebar_title = Static("📸 Photos", classes="EditEntryScreen-sidebar-title") + self.sidebar_title = Static("Photos", classes="EditEntryScreen-sidebar-title") self.photo_list = OptionList(id="photo_list", classes="EditEntryScreen-sidebar-photo-list") self.photo_info = Static("", classes="EditEntryScreen-sidebar-photo-info") self.help_text = Static("", classes="EditEntryScreen-sidebar-help") @@ -296,30 +296,28 @@ class EditEntryScreen(Screen): if not self.cached_photos: self.photo_info.update("No photos found for this diary") - self.help_text.update("📸 No photos available\n\nUse Photo Manager to add photos") + self.help_text.update("No photos available\n\nUse Photo Manager to add photos") return # Add photos to the list with hash for photo in self.cached_photos: # Show name and hash in the list photo_hash = str(photo.photo_hash)[:8] - self.photo_list.add_option(f"📷 {photo.name} \\[{photo_hash}\]") + self.photo_list.add_option(f"{photo.name} \\[{photo_hash}\]") - self.photo_info.update(f"📸 {len(self.cached_photos)} photos in diary") + self.photo_info.update(f"{len(self.cached_photos)} photos in diary") # Updated help a text with hash information help_text = ( - "[b]⌨️ Sidebar Shortcuts[/b]\n" + "[b]Sidebar Shortcuts[/b]\n" "[b][green]i[/green][/b]: Insert photo into entry\n" "[b][green]n[/green][/b]: Add new photo\n" "[b][green]d[/green][/b]: Delete selected photo\n" "[b][green]e[/green][/b]: Edit selected photo\n" "[b][yellow]Tab[/yellow][/b]: Back to editor\n" "[b][yellow]F8[/yellow][/b]: Show/hide sidebar\n" - "[b][yellow]F9[/yellow][/b]: Switch focus (if needed)\n\n" "[b]📝 Photo References[/b]\n" - "Use: \\[\\[photo:name:hash\\]\\]\n" - "Or: \\[\\[photo::hash\\]\\]" + "\\[\\[photo::hash\\]\\]" ) self.help_text.update(help_text) except Exception as e: @@ -429,9 +427,7 @@ class EditEntryScreen(Screen): photo_details += f"🔗 {photo_hash}\n" photo_details += f"📅 {selected_photo.addition_date}\n" photo_details += f"💬 {selected_photo.caption or 'No caption'}\n" - photo_details += f"📁 {selected_photo.filepath}\n\n" photo_details += f"[b]Reference formats:[/b]\n" - photo_details += f"\\[\\[photo:{selected_photo.name}:{photo_hash}\\]\\]\n" photo_details += f"\\[\\[photo::{photo_hash}\\]\\]" self.photo_info.update(photo_details) @@ -742,15 +738,15 @@ class EditEntryScreen(Screen): self.notify(f"Selected photo: {selected_photo.name} \\[{photo_hash}\\]") # Update photo info with details including hash - photo_details = f"📷 {selected_photo.name}\n" - photo_details += f"🔗 {photo_hash}\n" - photo_details += f"📅 {selected_photo.addition_date}\n" + photo_details = f"Name: {selected_photo.name}\n" + photo_details += f"Hash: {photo_hash}\n" + photo_details += f"Date: {selected_photo.addition_date}\n" if selected_photo.caption: - photo_details += f"💬 {selected_photo.caption}\n" - photo_details += f"📁 {selected_photo.filepath}\n\n" + photo_details += f"Caption: {selected_photo.caption}\n" + else: + photo_details += f"Caption: No Caption\n" photo_details += f"[b]Reference formats:[/b]\n" - photo_details += f"\\[\\[photo:{selected_photo.name}:{photo_hash}\\]\\]\n" - photo_details += f"\\[\\[photo::{photo_hash}\\]\\]" + photo_details += f"\\[\\[photo::{photo_hash}]]" self.photo_info.update(photo_details) diff --git a/src/pilgrim/ui/styles/pilgrim.css b/src/pilgrim/ui/styles/pilgrim.css index 5b52192..b36a146 100644 --- a/src/pilgrim/ui/styles/pilgrim.css +++ b/src/pilgrim/ui/styles/pilgrim.css @@ -389,22 +389,9 @@ Screen.-modal { width: 1fr; } -.EditEntryScreen-sidebar { - width: 40; - min-height: 10; - border-left: solid green; - padding: 1; - background: $surface-darken-2; - color: $primary; - text-style: bold; - content-align: left top; +.EditEntryScreen-sidebar{ + background: $primary-darken-1; } - -.EditEntryScreen-content-container { - layout: horizontal; - height: 1fr; -} - .EditEntryScreen-sidebar-title { text-align: center; text-style: bold; @@ -417,30 +404,38 @@ Screen.-modal { .EditEntryScreen-sidebar-content { height: 1fr; layout: vertical; + margin-left: 2; + margin-right: 2; + } .EditEntryScreen-sidebar-photo-list { - height: 1fr; + height: 0.5fr; /* Pega o espaço restante disponível */ + min-height: 10; /* Garante altura mínima para não sumir */ border: solid $accent; margin-bottom: 1; + overflow-y: auto; /* Adiciona scroll vertical se necessário */ } .EditEntryScreen-sidebar-photo-info { - height: auto; - min-height: 3; + height: 0.5fr; + max-height: 15; /* Limita altura máxima */ + min-height: 6; border: solid $warning; - padding: 1; margin-bottom: 1; background: $surface-darken-1; + overflow-y: auto; /* Adiciona scroll se exceder max-height */ } .EditEntryScreen-sidebar-help { - height: auto; - min-height: 8; + height: 1fr; + max-height: 10; /* Altura máxima menor que info */ + min-height: 8; /* Altura mínima menor */ border: solid $success; padding: 1; background: $surface-darken-1; text-style: italic; + overflow-y: auto; /* Adiciona scroll se exceder max-height */ } /* Photo Modal Styles */ From 165bc10a631fb4b0d0e5a62693fec04e00ed808d Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Thu, 17 Jul 2025 20:48:59 -0300 Subject: [PATCH 2/3] Change the CSS to fit the text better and also limited the width of the sidebar --- src/pilgrim/ui/styles/pilgrim.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pilgrim/ui/styles/pilgrim.css b/src/pilgrim/ui/styles/pilgrim.css index b36a146..2d1b7f9 100644 --- a/src/pilgrim/ui/styles/pilgrim.css +++ b/src/pilgrim/ui/styles/pilgrim.css @@ -391,6 +391,7 @@ Screen.-modal { .EditEntryScreen-sidebar{ background: $primary-darken-1; + width: 35%; } .EditEntryScreen-sidebar-title { text-align: center; @@ -411,7 +412,7 @@ Screen.-modal { .EditEntryScreen-sidebar-photo-list { height: 0.5fr; /* Pega o espaço restante disponível */ - min-height: 10; /* Garante altura mínima para não sumir */ + min-height: 8; /* Garante altura mínima para não sumir */ border: solid $accent; margin-bottom: 1; overflow-y: auto; /* Adiciona scroll vertical se necessário */ @@ -419,8 +420,8 @@ Screen.-modal { .EditEntryScreen-sidebar-photo-info { height: 0.5fr; - max-height: 15; /* Limita altura máxima */ - min-height: 6; + max-height: 13; /* Limita altura máxima */ + min-height: 5; border: solid $warning; margin-bottom: 1; background: $surface-darken-1; @@ -429,7 +430,7 @@ Screen.-modal { .EditEntryScreen-sidebar-help { height: 1fr; - max-height: 10; /* Altura máxima menor que info */ + max-height: 12; /* Altura máxima menor que info */ min-height: 8; /* Altura mínima menor */ border: solid $success; padding: 1; From 1d08f4e40df9cca2ac5465a4ca1d32986f11fa1b Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Thu, 17 Jul 2025 21:39:05 -0300 Subject: [PATCH 3/3] Change the CSS to better distribute the elements of the sidebar --- src/pilgrim/ui/styles/pilgrim.css | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/pilgrim/ui/styles/pilgrim.css b/src/pilgrim/ui/styles/pilgrim.css index 2d1b7f9..5b9bf3b 100644 --- a/src/pilgrim/ui/styles/pilgrim.css +++ b/src/pilgrim/ui/styles/pilgrim.css @@ -391,7 +391,7 @@ Screen.-modal { .EditEntryScreen-sidebar{ background: $primary-darken-1; - width: 35%; + width: 45%; } .EditEntryScreen-sidebar-title { text-align: center; @@ -405,23 +405,24 @@ Screen.-modal { .EditEntryScreen-sidebar-content { height: 1fr; layout: vertical; - margin-left: 2; - margin-right: 2; + margin-left: 1; + margin-right: 1; } .EditEntryScreen-sidebar-photo-list { - height: 0.5fr; /* Pega o espaço restante disponível */ - min-height: 8; /* Garante altura mínima para não sumir */ + height: 2fr; /* Pega o espaço restante disponível */ + min-height: 5; /* Garante altura mínima para não sumir */ border: solid $accent; margin-bottom: 1; overflow-y: auto; /* Adiciona scroll vertical se necessário */ } .EditEntryScreen-sidebar-photo-info { - height: 0.5fr; - max-height: 13; /* Limita altura máxima */ - min-height: 5; + height: 1fr; + max-height: 15; /* Limita altura máxima */ + min-height: 13; + padding: 1; border: solid $warning; margin-bottom: 1; background: $surface-darken-1; @@ -430,7 +431,7 @@ Screen.-modal { .EditEntryScreen-sidebar-help { height: 1fr; - max-height: 12; /* Altura máxima menor que info */ + max-height: 10; /* Altura máxima menor que info */ min-height: 8; /* Altura mínima menor */ border: solid $success; padding: 1;