Refactor thumbnail editor layout for improved aesthetics

- Reduced top padding in canvas header for a more compact look.
- Adjusted canvas container to minimize empty space by changing expand behavior.
- Centered the canvas within its container for better positioning.
- Decreased bottom padding in timeline frame and label for a cleaner interface.
This commit is contained in:
klop51 2025-08-10 16:56:58 +02:00
parent 5375a4af9b
commit caf64b9815
2 changed files with 661 additions and 224 deletions

File diff suppressed because it is too large Load Diff

View File

@ -108,18 +108,18 @@ class ModernThumbnailEditor:
def setup_canvas_area(self, parent):
"""Setup the main canvas area with modern styling"""
# Canvas header
# Canvas header (reduced top padding)
canvas_header = tk.Frame(parent, bg=self.colors['bg_secondary'])
canvas_header.pack(fill="x", padx=20, pady=(20, 10))
canvas_header.pack(fill="x", padx=20, pady=(10, 5)) # Reduced from (20, 10) to (10, 5)
canvas_title = tk.Label(canvas_header, text="🎬 Thumbnail Preview",
font=self.fonts['heading'], bg=self.colors['bg_secondary'],
fg=self.colors['text_primary'])
canvas_title.pack(side="left")
# Canvas container
# Canvas container (reduced expand behavior to minimize empty space)
canvas_container = tk.Frame(parent, bg=self.colors['bg_tertiary'], relief="flat", bd=2)
canvas_container.pack(fill="both", expand=True, padx=20, pady=(0, 20))
canvas_container.pack(fill="x", padx=20, pady=(0, 5)) # Further reduced bottom padding from 10 to 5
# Calculate proper canvas size based on video dimensions
video_width, video_height = self.clip.size
@ -136,10 +136,10 @@ class ModernThumbnailEditor:
canvas_height = max_height
canvas_width = int(max_height * aspect_ratio)
# Modern canvas with proper video proportions
# Modern canvas with proper video proportions (centered)
self.canvas = tk.Canvas(canvas_container, bg='#000000', highlightthickness=0,
relief="flat", bd=0, width=canvas_width, height=canvas_height)
self.canvas.pack(padx=10, pady=10) # Remove expand=True to maintain fixed size
self.canvas.pack(anchor="center", padx=5, pady=5) # Added anchor="center" for better positioning
# Store canvas dimensions for boundary checking
self.canvas_width = canvas_width
@ -158,12 +158,12 @@ class ModernThumbnailEditor:
self.canvas.bind("<B1-Motion>", self.on_canvas_drag)
self.canvas.bind("<ButtonRelease-1>", self.on_canvas_release)
# Frame timeline slider
# Frame timeline slider (reduced spacing)
timeline_frame = tk.Frame(parent, bg=self.colors['bg_secondary'])
timeline_frame.pack(fill="x", padx=20, pady=(0, 20))
timeline_frame.pack(fill="x", padx=20, pady=(0, 5)) # Further reduced bottom padding from 10 to 5
tk.Label(timeline_frame, text="⏱️ Timeline", font=self.fonts['subheading'],
bg=self.colors['bg_secondary'], fg=self.colors['text_primary']).pack(anchor="w", pady=(0, 10))
bg=self.colors['bg_secondary'], fg=self.colors['text_primary']).pack(anchor="w", pady=(0, 5)) # Reduced from 10 to 5
# Modern slider styling
style = ttk.Style()