[DOC] Updated documentation with screenshots

healkeiser · healkeiser · commit 27255688d1d6 · 2026-01-05T18:09:26.000+01:00
diff --git a/docs/how-to/styling.md b/docs/how-to/styling.md
@@ -42,8 +42,6 @@ application.setStyle(fxstyle.FXProxyStyle())
     The `FXApplication` class found inside [fxwidgets](../technical/widgets/index.md) already applies this custom style.
 
 
-![Screenshot](../images/screenshot_built_in_icons.png)
-
 You can now use the icons by doing:
 
 ```python
diff --git a/docs/images/widgets/file_path_widget.png b/docs/images/widgets/file_path_widget.png
diff --git a/docs/images/widgets/notification_banner.png b/docs/images/widgets/notification_banner.png
diff --git a/docs/images/widgets/status_bar.png b/docs/images/widgets/status_bar.png
diff --git a/docs/images/widgets/tooltip.png b/docs/images/widgets/tooltip.png
diff --git a/docs/technical/widgets/accordion.md b/docs/technical/widgets/accordion.md
@@ -2,7 +2,10 @@
 
 The accordion widget provides a container with multiple collapsible sections, where only one or multiple sections can be expanded at a time.
 
-![FXAccordion](../../images/widgets/accordion.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXAccordion](../../images/widgets/accordion.png)
+    </p>
 
 ## Classes
 
diff --git a/docs/technical/widgets/breadcrumb.md b/docs/technical/widgets/breadcrumb.md
@@ -2,7 +2,10 @@
 
 The breadcrumb widget provides hierarchical navigation with clickable path segments.
 
-![FXBreadcrumb](../../images/widgets/breadcrumb.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXBreadcrumb](../../images/widgets/breadcrumb.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXBreadcrumb
     options:
diff --git a/docs/technical/widgets/collapsible.md b/docs/technical/widgets/collapsible.md
@@ -2,7 +2,10 @@
 
 The collapsible widget provides a single expandable/collapsible section with a header and content area.
 
-![FXCollapsibleWidget](../../images/widgets/collapsible.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXCollapsibleWidget](../../images/widgets/collapsible.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXCollapsibleWidget
     options:
diff --git a/docs/technical/widgets/delegates.md b/docs/technical/widgets/delegates.md
@@ -2,7 +2,10 @@
 
 Custom item delegates for Qt views (QListView, QTreeView, QTableView).
 
-![FXDelegates](../../images/widgets/delegates.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXDelegates](../../images/widgets/delegates.png)
+    </p>
 
 ## Classes
 
diff --git a/docs/technical/widgets/dialogs.md b/docs/technical/widgets/dialogs.md
@@ -2,7 +2,10 @@
 
 Dialog widgets for modal and non-modal user interactions.
 
-![FXDialogs](../../images/widgets/dialogs.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXDialogs](../../images/widgets/dialogs.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXFloatingDialog
     options:
diff --git a/docs/technical/widgets/file_path_widget.md b/docs/technical/widgets/file_path_widget.md
@@ -2,7 +2,10 @@
 
 A widget for selecting file or folder paths with a browse button and path validation.
 
-![FXFilePathWidget](../../images/widgets/file_path_widget.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXFilePathWidget](../../images/widgets/file_path_widget.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXFilePathWidget
     options:
diff --git a/docs/technical/widgets/inputs.md b/docs/technical/widgets/inputs.md
@@ -2,7 +2,10 @@
 
 Enhanced line edit widgets with additional functionality.
 
-![FXInputs](../../images/widgets/inputs.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXInputs](../../images/widgets/inputs.png)
+    </p>
 
 ## Classes
 
diff --git a/docs/technical/widgets/labels.md b/docs/technical/widgets/labels.md
@@ -2,7 +2,10 @@
 
 Enhanced label widgets with additional functionality.
 
-![FXLabels](../../images/widgets/labels.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXLabels](../../images/widgets/labels.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXElidedLabel
     options:
diff --git a/docs/technical/widgets/loading_spinner.md b/docs/technical/widgets/loading_spinner.md
@@ -2,7 +2,10 @@
 
 Widgets for displaying loading states and progress indicators.
 
-![FXLoadingSpinner](../../images/widgets/loading_spinner.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXLoadingSpinner](../../images/widgets/loading_spinner.png)
+    </p>
 
 ## Classes
 
diff --git a/docs/technical/widgets/log_widget.md b/docs/technical/widgets/log_widget.md
@@ -2,7 +2,10 @@
 
 Widgets for displaying and handling log output.
 
-![FXLogWidget](../../images/widgets/log_widget.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXLogWidget](../../images/widgets/log_widget.png)
+    </p>
 
 ## Classes
 
diff --git a/docs/technical/widgets/main_window.md b/docs/technical/widgets/main_window.md
@@ -2,7 +2,10 @@
 
 An enhanced QMainWindow with built-in theme support, status bar, and DCC integration.
 
-![FXMainWindow](../../images/widgets/main_window.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXMainWindow](../../images/widgets/main_window.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXMainWindow
     options:
diff --git a/docs/technical/widgets/notification_banner.md b/docs/technical/widgets/notification_banner.md
@@ -2,7 +2,10 @@
 
 A notification banner widget for displaying alerts and messages.
 
-![FXNotificationBanner](../../images/widgets/notification_banner.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXNotificationBanner](../../images/widgets/notification_banner.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXNotificationBanner
     options:
diff --git a/docs/technical/widgets/progress_card.md b/docs/technical/widgets/progress_card.md
@@ -2,7 +2,10 @@
 
 A card widget displaying progress with title, description, and progress bar.
 
-![FXProgressCard](../../images/widgets/progress_card.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXProgressCard](../../images/widgets/progress_card.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXProgressCard
     options:
diff --git a/docs/technical/widgets/range_slider.md b/docs/technical/widgets/range_slider.md
@@ -2,7 +2,10 @@
 
 A dual-handle slider for selecting a range of values.
 
-![FXRangeSlider](../../images/widgets/range_slider.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXRangeSlider](../../images/widgets/range_slider.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXRangeSlider
     options:
diff --git a/docs/technical/widgets/rating_widget.md b/docs/technical/widgets/rating_widget.md
@@ -2,7 +2,10 @@
 
 A star rating input widget for collecting user ratings.
 
-![FXRatingWidget](../../images/widgets/rating_widget.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXRatingWidget](../../images/widgets/rating_widget.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXRatingWidget
     options:
diff --git a/docs/technical/widgets/scroll_area.md b/docs/technical/widgets/scroll_area.md
@@ -2,7 +2,10 @@
 
 An enhanced scroll area that automatically resizes based on content.
 
-![FXScrollArea](../../images/widgets/scroll_area.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXScrollArea](../../images/widgets/scroll_area.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXResizedScrollArea
     options:
diff --git a/docs/technical/widgets/search_bar.md b/docs/technical/widgets/search_bar.md
@@ -2,7 +2,10 @@
 
 A search input widget with optional suggestions and filtering.
 
-![FXSearchBar](../../images/widgets/search_bar.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXSearchBar](../../images/widgets/search_bar.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXSearchBar
     options:
diff --git a/docs/technical/widgets/status_bar.md b/docs/technical/widgets/status_bar.md
@@ -2,7 +2,10 @@
 
 An enhanced status bar with additional features and styling.
 
-![FXStatusBar](../../images/widgets/status_bar.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXStatusBar](../../images/widgets/status_bar.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXStatusBar
     options:
diff --git a/docs/technical/widgets/tag_input.md b/docs/technical/widgets/tag_input.md
@@ -2,7 +2,10 @@
 
 A tag/chip input widget for entering and managing multiple tags.
 
-![FXTagInput](../../images/widgets/tag_input.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXTagInput](../../images/widgets/tag_input.png)
+    </p>
 
 ## Classes
 
diff --git a/docs/technical/widgets/timeline_slider.md b/docs/technical/widgets/timeline_slider.md
@@ -2,7 +2,10 @@
 
 A timeline slider with markers for frame-based or time-based navigation.
 
-![FXTimelineSlider](../../images/widgets/timeline_slider.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXTimelineSlider](../../images/widgets/timeline_slider.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXTimelineSlider
     options:
diff --git a/docs/technical/widgets/toggle_switch.md b/docs/technical/widgets/toggle_switch.md
@@ -2,7 +2,10 @@
 
 An iOS-style toggle switch widget for boolean input.
 
-![FXToggleSwitch](../../images/widgets/toggle_switch.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXToggleSwitch](../../images/widgets/toggle_switch.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXToggleSwitch
     options:
diff --git a/docs/technical/widgets/tooltip.md b/docs/technical/widgets/tooltip.md
@@ -2,7 +2,10 @@
 
 Enhanced tooltips with custom positioning and styling.
 
-![FXTooltip](../../images/widgets/tooltip.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXTooltip](../../images/widgets/tooltip.png)
+    </p>
 
 ## Classes
 
diff --git a/docs/technical/widgets/tree_items.md b/docs/technical/widgets/tree_items.md
@@ -2,7 +2,10 @@
 
 Custom tree widget items with enhanced functionality.
 
-![FXTreeItems](../../images/widgets/tree_items.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXTreeItems](../../images/widgets/tree_items.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXSortedTreeWidgetItem
     options:
diff --git a/docs/technical/widgets/validators.md b/docs/technical/widgets/validators.md
@@ -2,7 +2,10 @@
 
 Input validators for enforcing text formatting rules.
 
-![FXValidators](../../images/widgets/validators.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXValidators](../../images/widgets/validators.png)
+    </p>
 
 ## Classes
 
diff --git a/docs/technical/widgets/widget.md b/docs/technical/widgets/widget.md
@@ -2,7 +2,10 @@
 
 The base widget class with theme support and common functionality.
 
-![FXWidget](../../images/widgets/widget.png)
+??? quote "Preview"
+    <p align="center">
+    ![FXWidget](../../images/widgets/widget.png)
+    </p>
 
 ::: fxgui.fxwidgets.FXWidget
     options:
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -25,6 +25,8 @@ theme:
   logo: images/fxgui_logo_light.svg
   icon:
     repo: material/github
+    admonition:
+      quote: material/image-outline
   features:
     - announce.dismiss
     - navigation.tabs
