MkDocs: Add views screenshots to their description pages + extract them and put to overview page (#595)

* Frontend initialize

* update style

* Fix card grid spacing: ensure consistent fixed gap between cards in all rows

* Do not make it too wide

* try to place second page for debug to learn generation of view-cards page

* refactor

* refactor

* adjust styles

* drop redundant page

* Show 1 card on small screen, 2 on tablet, 3 on pc

* make Vertical margin between text adaaptive

* fix width of each view card

* keep only 2 cards shown max

* keep Vertical margin same

* fixup

* remove margins and widths/heights

* keep small bottom margin between cards

* Make mouse click area over whole card, not just picture

* Repair href for view-cards

* Place images next to .h brief descriptions

* Refer to brief description to extract image reference for card-view

* Repair generation of AView

* Gather page url by namespace

* wip

* wip

* wip

* wip

---------

Co-authored-by: Saikari <lin@sz.cn.eu.org>

Author: Alex2772

aui.views/src/AUI/View/A2FingerTransformArea.h

@@ -31,7 +31,10 @@ struct A2DTransform {
 
 /**
  * @brief Handles and processes the multitouch scale, transform and rotation events based on two-finger gestures.
- * @ingroup useful_views
+ *
+ * ![](imgs/views/A2FingerTransformArea.png)
+ *
+ * @ingroup views_containment
  * @details
  * Represents a translucent area that handles and processes multi-finger transformation gestures (i.e. pinch-to-zoom,
  * move, rotate). A2FingerTransformArea is a container, so the transformed view should be somewhere inside.

aui.views/src/AUI/View/AButton.h

@@ -23,7 +23,10 @@
 
 /**
  * @brief Button with text, which can be pushed to make some action.
- * @ingroup useful_views
+ *
+ * ![](imgs/views/AButton.png)
+ *
+ * @ingroup views_actions
  * @details
  * Button is a fundamental view which can be pushed to make some action.
  *

aui.views/src/AUI/View/ACheckBox.h

@@ -18,7 +18,10 @@
 
 /**
  * @brief A check box (without label).
- * @ingroup useful_views
+ *
+ * ![](imgs/views/ACheckBox.png)
+ *
+ * @ingroup views_input
  * @details
  * Checkbox is a checkable button that is typically used to enable/disable some action.
  *
@@ -75,7 +78,9 @@ class API_AUI_VIEWS ACheckBox : public AView, public ass::ISelectable {
 
 /**
  * @brief View container with a checkbox.
- * @ingroup useful_views
+ *
+ * ![](imgs/views/ACheckBoxWrapper.png)
+ * @ingroup views_input
  * @details
  * For a checkbox itself, see [ACheckBox].
  */

aui.views/src/AUI/View/ACircleProgressBar.h

@@ -16,7 +16,10 @@
 
 /**
  * @brief A circle-shaped progress bar.
- * @ingroup useful_views
+ *
+ * ![](imgs/views/ACircleProgressBar.png)
+ *
+ * @ingroup views_indication
  * @details
  * A progress bar is used to express a long operation (i.e. file copy) with known progress and reassure the user that
  * application is still running.

aui.views/src/AUI/View/ADoubleNumberPicker.h

@@ -19,7 +19,10 @@
 
 /**
  * @brief A text field for numbers with increase/decrease buttons.
- * @ingroup useful_views
+ *
+ * ![](imgs/views/ADoubleNumberPicker.png)
+ *
+ * @ingroup views_input
  */
 class API_AUI_VIEWS ADoubleNumberPicker : public AViewContainerBase {
    private:

aui.views/src/AUI/View/ADragArea.h

@@ -20,8 +20,11 @@
 
 /**
  * @brief Wrapping container to drag views inside of it.
+ *
+ * ![](imgs/views/ADragArea.png)
+ *
  * @details Contained views must be either wrapped by convertToDraggable or have an ADragArea::ADraggableHandle inside.
- * @ingroup useful_views
+ * @ingroup views_containment
  */
 class API_AUI_VIEWS ADragArea: public AViewContainer {
 private:

aui.views/src/AUI/View/ADrawableView.h

@@ -21,7 +21,10 @@
 
 /**
  * @brief Simple view to draw an IDrawable.
- * @ingroup useful_views
+ *
+ * ![](imgs/views/ADrawableView.png)
+ *
+ * @ingroup views_indication
  * @details
  * ADrawableView brings you more control over the drawable. This is useful for drawables with extended interface
  * (i.e., AAnimatedImage).

aui.views/src/AUI/View/ADropdownList.h

@@ -22,7 +22,10 @@
 
 /**
  * @brief A button with dropdown list.
- * @ingroup useful_views
+ *
+ * ![](imgs/views/ADropdownList.png)
+ *
+ * @ingroup views_input
  */
 class API_AUI_VIEWS ADropdownList: public AButton {
 private:

aui.views/src/AUI/View/AForEachUI.h

@@ -129,7 +129,10 @@ concept RangeFactory = requires(Factory&& factory) {
 
 /**
  * @brief Customizable lists display.
- * @ingroup useful_views
+ *
+ * ![](imgs/views/AForEachUI.png)
+ *
+ * @ingroup views_containment
  * @details
  * Used to lazily present possibly large or infinite linear non-hierarchical sequences of data.
  *

aui.views/src/AUI/View/AGridSplitter.h

@@ -18,7 +18,10 @@
 
 /**
  * @brief A resizable grid layout.
- * @ingroup useful_views
+ *
+ * ![](imgs/views/AGridSplitter.png)
+ *
+ * @ingroup views_containment
  * @details
  * AGridSplitter represents a grid layout which can be resized by user. Unlike ASplitter, works in both directions.
  * AGridSplitter can be constructed with AGridSplitter::Builder.