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): def setup_canvas_area(self, parent):
"""Setup the main canvas area with modern styling""" """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 = 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", canvas_title = tk.Label(canvas_header, text="🎬 Thumbnail Preview",
font=self.fonts['heading'], bg=self.colors['bg_secondary'], font=self.fonts['heading'], bg=self.colors['bg_secondary'],
fg=self.colors['text_primary']) fg=self.colors['text_primary'])
canvas_title.pack(side="left") 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 = 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 # Calculate proper canvas size based on video dimensions
video_width, video_height = self.clip.size video_width, video_height = self.clip.size
@ -136,10 +136,10 @@ class ModernThumbnailEditor:
canvas_height = max_height canvas_height = max_height
canvas_width = int(max_height * aspect_ratio) 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, self.canvas = tk.Canvas(canvas_container, bg='#000000', highlightthickness=0,
relief="flat", bd=0, width=canvas_width, height=canvas_height) 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 # Store canvas dimensions for boundary checking
self.canvas_width = canvas_width self.canvas_width = canvas_width
@ -158,12 +158,12 @@ class ModernThumbnailEditor:
self.canvas.bind("<B1-Motion>", self.on_canvas_drag) self.canvas.bind("<B1-Motion>", self.on_canvas_drag)
self.canvas.bind("<ButtonRelease-1>", self.on_canvas_release) 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 = 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'], 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 # Modern slider styling
style = ttk.Style() style = ttk.Style()