From 7a4a7c984da4b9705e53b9e6bb7a935052540e12 Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Mon, 2 Dec 2024 15:42:27 +0100 Subject: [PATCH] move tutorials images --- doc/generate-website.md | 3 +- .../tutorials}/architecture-simple.png | Bin .../tutorials}/architecture.png | Bin .../tutorials}/buttons-example.png | Bin .../tutorials}/compositing-controls.png | Bin .../tutorials}/control-with-skinlet.png | Bin .../tutorials}/horizontal-layout.gif | Bin .../tutorials}/iotdashboard-wasm.png | Bin .../tutorials}/layout-grid.png | Bin .../tutorials}/layout-horizontal.png | Bin .../tutorials}/layout-stack.png | Bin .../tutorials}/layout-vertical.png | Bin .../nesting-layouts-architecture.png | Bin .../nesting-layouts-item-tree-1.png | Bin .../nesting-layouts-item-tree-2.png | Bin .../nesting-layouts-item-tree-3.png | Bin .../nesting-layouts-item-tree-4.png | Bin .../tutorials}/nesting-layouts.png | Bin .../tutorials}/object-hierarchy.png | Bin .../tutorials}/scalable-graphics-1.png | Bin .../tutorials}/scalable-graphics-2.png | Bin .../tutorials}/scalable-graphics-3.png | Bin .../tutorials}/size-hints-1.png | Bin .../tutorials}/size-hints-2.png | Bin .../tutorials}/size-hints-calculation.png | Bin .../size-policies-horizontal-minimum-1.png | Bin .../size-policies-horizontal-minimum-2.png | Bin .../size-policies-horizontal-minimum-3.png | Bin .../size-policies-horizontal-minimum-4.png | Bin .../tutorials}/skin-factory.png | Bin .../tutorials}/skin-hints-states-1.png | Bin .../tutorials}/skin-hints-states-2.png | Bin .../tutorials}/skin-hints.png | Bin .../tutorials}/skinlets-button-1.png | Bin .../tutorials}/skinlets-button-2.png | Bin .../images => images/tutorials}/skins-1.png | Bin .../images => images/tutorials}/skins-2.png | Bin .../images => images/tutorials}/skins-3.png | Bin .../tutorials}/skins-sg-1.png | Bin .../tutorials}/skins-sg-2.png | Bin .../tutorials}/stretch-factors-1.png | Bin .../tutorials}/stretch-factors-2.png | Bin .../tutorials}/stretch-factors-3.png | Bin .../subclassing-existing-controls.png | Bin .../tutorials}/writing-first-application.png | Bin doc/tutorials/01-What-is-QSkinny.md | 2 +- .../03-writing-your-first-application.md | 2 +- doc/tutorials/04-Layouts.md | 91 ++++++------------ doc/tutorials/05-Skins.md | 20 ++-- doc/tutorials/06-scalable-graphics.md | 6 +- doc/tutorials/08-qskinny-and-qml.md | 2 +- doc/tutorials/09-writing-own-controls.md | 8 +- doc/tutorials/10-scene-graph.md | 4 +- doc/tutorials/11-How-to-build-for-Wasm.md | 2 +- 54 files changed, 57 insertions(+), 83 deletions(-) rename doc/{tutorials/images => images/tutorials}/architecture-simple.png (100%) rename doc/{tutorials/images => images/tutorials}/architecture.png (100%) rename doc/{tutorials/images => images/tutorials}/buttons-example.png (100%) rename doc/{tutorials/images => images/tutorials}/compositing-controls.png (100%) rename doc/{tutorials/images => images/tutorials}/control-with-skinlet.png (100%) rename doc/{tutorials/images => images/tutorials}/horizontal-layout.gif (100%) rename doc/{tutorials/images => images/tutorials}/iotdashboard-wasm.png (100%) rename doc/{tutorials/images => images/tutorials}/layout-grid.png (100%) rename doc/{tutorials/images => images/tutorials}/layout-horizontal.png (100%) rename doc/{tutorials/images => images/tutorials}/layout-stack.png (100%) rename doc/{tutorials/images => images/tutorials}/layout-vertical.png (100%) rename doc/{tutorials/images => images/tutorials}/nesting-layouts-architecture.png (100%) rename doc/{tutorials/images => images/tutorials}/nesting-layouts-item-tree-1.png (100%) rename doc/{tutorials/images => images/tutorials}/nesting-layouts-item-tree-2.png (100%) rename doc/{tutorials/images => images/tutorials}/nesting-layouts-item-tree-3.png (100%) rename doc/{tutorials/images => images/tutorials}/nesting-layouts-item-tree-4.png (100%) rename doc/{tutorials/images => images/tutorials}/nesting-layouts.png (100%) rename doc/{tutorials/images => images/tutorials}/object-hierarchy.png (100%) rename doc/{tutorials/images => images/tutorials}/scalable-graphics-1.png (100%) rename doc/{tutorials/images => images/tutorials}/scalable-graphics-2.png (100%) rename doc/{tutorials/images => images/tutorials}/scalable-graphics-3.png (100%) rename doc/{tutorials/images => images/tutorials}/size-hints-1.png (100%) rename doc/{tutorials/images => images/tutorials}/size-hints-2.png (100%) rename doc/{tutorials/images => images/tutorials}/size-hints-calculation.png (100%) rename doc/{tutorials/images => images/tutorials}/size-policies-horizontal-minimum-1.png (100%) rename doc/{tutorials/images => images/tutorials}/size-policies-horizontal-minimum-2.png (100%) rename doc/{tutorials/images => images/tutorials}/size-policies-horizontal-minimum-3.png (100%) rename doc/{tutorials/images => images/tutorials}/size-policies-horizontal-minimum-4.png (100%) rename doc/{tutorials/images => images/tutorials}/skin-factory.png (100%) rename doc/{tutorials/images => images/tutorials}/skin-hints-states-1.png (100%) rename doc/{tutorials/images => images/tutorials}/skin-hints-states-2.png (100%) rename doc/{tutorials/images => images/tutorials}/skin-hints.png (100%) rename doc/{tutorials/images => images/tutorials}/skinlets-button-1.png (100%) rename doc/{tutorials/images => images/tutorials}/skinlets-button-2.png (100%) rename doc/{tutorials/images => images/tutorials}/skins-1.png (100%) rename doc/{tutorials/images => images/tutorials}/skins-2.png (100%) rename doc/{tutorials/images => images/tutorials}/skins-3.png (100%) rename doc/{tutorials/images => images/tutorials}/skins-sg-1.png (100%) rename doc/{tutorials/images => images/tutorials}/skins-sg-2.png (100%) rename doc/{tutorials/images => images/tutorials}/stretch-factors-1.png (100%) rename doc/{tutorials/images => images/tutorials}/stretch-factors-2.png (100%) rename doc/{tutorials/images => images/tutorials}/stretch-factors-3.png (100%) rename doc/{tutorials/images => images/tutorials}/subclassing-existing-controls.png (100%) rename doc/{tutorials/images => images/tutorials}/writing-first-application.png (100%) diff --git a/doc/generate-website.md b/doc/generate-website.md index 6dbd5d0b..2d5ee171 100644 --- a/doc/generate-website.md +++ b/doc/generate-website.md @@ -75,7 +75,8 @@ cp doxygen-awesome.css ~/dev/qskinny/doc/ First copy the generated files from above to the website repo: ``` -cp -r api ~/dev/qskinny-website/docs/ +cp -r html ~/dev/qskinny-website/docs/ +cp -r images ~/dev/qskinny-website/docs/ ``` Then test the website locally: diff --git a/doc/tutorials/images/architecture-simple.png b/doc/images/tutorials/architecture-simple.png similarity index 100% rename from doc/tutorials/images/architecture-simple.png rename to doc/images/tutorials/architecture-simple.png diff --git a/doc/tutorials/images/architecture.png b/doc/images/tutorials/architecture.png similarity index 100% rename from doc/tutorials/images/architecture.png rename to doc/images/tutorials/architecture.png diff --git a/doc/tutorials/images/buttons-example.png b/doc/images/tutorials/buttons-example.png similarity index 100% rename from doc/tutorials/images/buttons-example.png rename to doc/images/tutorials/buttons-example.png diff --git a/doc/tutorials/images/compositing-controls.png b/doc/images/tutorials/compositing-controls.png similarity index 100% rename from doc/tutorials/images/compositing-controls.png rename to doc/images/tutorials/compositing-controls.png diff --git a/doc/tutorials/images/control-with-skinlet.png b/doc/images/tutorials/control-with-skinlet.png similarity index 100% rename from doc/tutorials/images/control-with-skinlet.png rename to doc/images/tutorials/control-with-skinlet.png diff --git a/doc/tutorials/images/horizontal-layout.gif b/doc/images/tutorials/horizontal-layout.gif similarity index 100% rename from doc/tutorials/images/horizontal-layout.gif rename to doc/images/tutorials/horizontal-layout.gif diff --git a/doc/tutorials/images/iotdashboard-wasm.png b/doc/images/tutorials/iotdashboard-wasm.png similarity index 100% rename from doc/tutorials/images/iotdashboard-wasm.png rename to doc/images/tutorials/iotdashboard-wasm.png diff --git a/doc/tutorials/images/layout-grid.png b/doc/images/tutorials/layout-grid.png similarity index 100% rename from doc/tutorials/images/layout-grid.png rename to doc/images/tutorials/layout-grid.png diff --git a/doc/tutorials/images/layout-horizontal.png b/doc/images/tutorials/layout-horizontal.png similarity index 100% rename from doc/tutorials/images/layout-horizontal.png rename to doc/images/tutorials/layout-horizontal.png diff --git a/doc/tutorials/images/layout-stack.png b/doc/images/tutorials/layout-stack.png similarity index 100% rename from doc/tutorials/images/layout-stack.png rename to doc/images/tutorials/layout-stack.png diff --git a/doc/tutorials/images/layout-vertical.png b/doc/images/tutorials/layout-vertical.png similarity index 100% rename from doc/tutorials/images/layout-vertical.png rename to doc/images/tutorials/layout-vertical.png diff --git a/doc/tutorials/images/nesting-layouts-architecture.png b/doc/images/tutorials/nesting-layouts-architecture.png similarity index 100% rename from doc/tutorials/images/nesting-layouts-architecture.png rename to doc/images/tutorials/nesting-layouts-architecture.png diff --git a/doc/tutorials/images/nesting-layouts-item-tree-1.png b/doc/images/tutorials/nesting-layouts-item-tree-1.png similarity index 100% rename from doc/tutorials/images/nesting-layouts-item-tree-1.png rename to doc/images/tutorials/nesting-layouts-item-tree-1.png diff --git a/doc/tutorials/images/nesting-layouts-item-tree-2.png b/doc/images/tutorials/nesting-layouts-item-tree-2.png similarity index 100% rename from doc/tutorials/images/nesting-layouts-item-tree-2.png rename to doc/images/tutorials/nesting-layouts-item-tree-2.png diff --git a/doc/tutorials/images/nesting-layouts-item-tree-3.png b/doc/images/tutorials/nesting-layouts-item-tree-3.png similarity index 100% rename from doc/tutorials/images/nesting-layouts-item-tree-3.png rename to doc/images/tutorials/nesting-layouts-item-tree-3.png diff --git a/doc/tutorials/images/nesting-layouts-item-tree-4.png b/doc/images/tutorials/nesting-layouts-item-tree-4.png similarity index 100% rename from doc/tutorials/images/nesting-layouts-item-tree-4.png rename to doc/images/tutorials/nesting-layouts-item-tree-4.png diff --git a/doc/tutorials/images/nesting-layouts.png b/doc/images/tutorials/nesting-layouts.png similarity index 100% rename from doc/tutorials/images/nesting-layouts.png rename to doc/images/tutorials/nesting-layouts.png diff --git a/doc/tutorials/images/object-hierarchy.png b/doc/images/tutorials/object-hierarchy.png similarity index 100% rename from doc/tutorials/images/object-hierarchy.png rename to doc/images/tutorials/object-hierarchy.png diff --git a/doc/tutorials/images/scalable-graphics-1.png b/doc/images/tutorials/scalable-graphics-1.png similarity index 100% rename from doc/tutorials/images/scalable-graphics-1.png rename to doc/images/tutorials/scalable-graphics-1.png diff --git a/doc/tutorials/images/scalable-graphics-2.png b/doc/images/tutorials/scalable-graphics-2.png similarity index 100% rename from doc/tutorials/images/scalable-graphics-2.png rename to doc/images/tutorials/scalable-graphics-2.png diff --git a/doc/tutorials/images/scalable-graphics-3.png b/doc/images/tutorials/scalable-graphics-3.png similarity index 100% rename from doc/tutorials/images/scalable-graphics-3.png rename to doc/images/tutorials/scalable-graphics-3.png diff --git a/doc/tutorials/images/size-hints-1.png b/doc/images/tutorials/size-hints-1.png similarity index 100% rename from doc/tutorials/images/size-hints-1.png rename to doc/images/tutorials/size-hints-1.png diff --git a/doc/tutorials/images/size-hints-2.png b/doc/images/tutorials/size-hints-2.png similarity index 100% rename from doc/tutorials/images/size-hints-2.png rename to doc/images/tutorials/size-hints-2.png diff --git a/doc/tutorials/images/size-hints-calculation.png b/doc/images/tutorials/size-hints-calculation.png similarity index 100% rename from doc/tutorials/images/size-hints-calculation.png rename to doc/images/tutorials/size-hints-calculation.png diff --git a/doc/tutorials/images/size-policies-horizontal-minimum-1.png b/doc/images/tutorials/size-policies-horizontal-minimum-1.png similarity index 100% rename from doc/tutorials/images/size-policies-horizontal-minimum-1.png rename to doc/images/tutorials/size-policies-horizontal-minimum-1.png diff --git a/doc/tutorials/images/size-policies-horizontal-minimum-2.png b/doc/images/tutorials/size-policies-horizontal-minimum-2.png similarity index 100% rename from doc/tutorials/images/size-policies-horizontal-minimum-2.png rename to doc/images/tutorials/size-policies-horizontal-minimum-2.png diff --git a/doc/tutorials/images/size-policies-horizontal-minimum-3.png b/doc/images/tutorials/size-policies-horizontal-minimum-3.png similarity index 100% rename from doc/tutorials/images/size-policies-horizontal-minimum-3.png rename to doc/images/tutorials/size-policies-horizontal-minimum-3.png diff --git a/doc/tutorials/images/size-policies-horizontal-minimum-4.png b/doc/images/tutorials/size-policies-horizontal-minimum-4.png similarity index 100% rename from doc/tutorials/images/size-policies-horizontal-minimum-4.png rename to doc/images/tutorials/size-policies-horizontal-minimum-4.png diff --git a/doc/tutorials/images/skin-factory.png b/doc/images/tutorials/skin-factory.png similarity index 100% rename from doc/tutorials/images/skin-factory.png rename to doc/images/tutorials/skin-factory.png diff --git a/doc/tutorials/images/skin-hints-states-1.png b/doc/images/tutorials/skin-hints-states-1.png similarity index 100% rename from doc/tutorials/images/skin-hints-states-1.png rename to doc/images/tutorials/skin-hints-states-1.png diff --git a/doc/tutorials/images/skin-hints-states-2.png b/doc/images/tutorials/skin-hints-states-2.png similarity index 100% rename from doc/tutorials/images/skin-hints-states-2.png rename to doc/images/tutorials/skin-hints-states-2.png diff --git a/doc/tutorials/images/skin-hints.png b/doc/images/tutorials/skin-hints.png similarity index 100% rename from doc/tutorials/images/skin-hints.png rename to doc/images/tutorials/skin-hints.png diff --git a/doc/tutorials/images/skinlets-button-1.png b/doc/images/tutorials/skinlets-button-1.png similarity index 100% rename from doc/tutorials/images/skinlets-button-1.png rename to doc/images/tutorials/skinlets-button-1.png diff --git a/doc/tutorials/images/skinlets-button-2.png b/doc/images/tutorials/skinlets-button-2.png similarity index 100% rename from doc/tutorials/images/skinlets-button-2.png rename to doc/images/tutorials/skinlets-button-2.png diff --git a/doc/tutorials/images/skins-1.png b/doc/images/tutorials/skins-1.png similarity index 100% rename from doc/tutorials/images/skins-1.png rename to doc/images/tutorials/skins-1.png diff --git a/doc/tutorials/images/skins-2.png b/doc/images/tutorials/skins-2.png similarity index 100% rename from doc/tutorials/images/skins-2.png rename to doc/images/tutorials/skins-2.png diff --git a/doc/tutorials/images/skins-3.png b/doc/images/tutorials/skins-3.png similarity index 100% rename from doc/tutorials/images/skins-3.png rename to doc/images/tutorials/skins-3.png diff --git a/doc/tutorials/images/skins-sg-1.png b/doc/images/tutorials/skins-sg-1.png similarity index 100% rename from doc/tutorials/images/skins-sg-1.png rename to doc/images/tutorials/skins-sg-1.png diff --git a/doc/tutorials/images/skins-sg-2.png b/doc/images/tutorials/skins-sg-2.png similarity index 100% rename from doc/tutorials/images/skins-sg-2.png rename to doc/images/tutorials/skins-sg-2.png diff --git a/doc/tutorials/images/stretch-factors-1.png b/doc/images/tutorials/stretch-factors-1.png similarity index 100% rename from doc/tutorials/images/stretch-factors-1.png rename to doc/images/tutorials/stretch-factors-1.png diff --git a/doc/tutorials/images/stretch-factors-2.png b/doc/images/tutorials/stretch-factors-2.png similarity index 100% rename from doc/tutorials/images/stretch-factors-2.png rename to doc/images/tutorials/stretch-factors-2.png diff --git a/doc/tutorials/images/stretch-factors-3.png b/doc/images/tutorials/stretch-factors-3.png similarity index 100% rename from doc/tutorials/images/stretch-factors-3.png rename to doc/images/tutorials/stretch-factors-3.png diff --git a/doc/tutorials/images/subclassing-existing-controls.png b/doc/images/tutorials/subclassing-existing-controls.png similarity index 100% rename from doc/tutorials/images/subclassing-existing-controls.png rename to doc/images/tutorials/subclassing-existing-controls.png diff --git a/doc/tutorials/images/writing-first-application.png b/doc/images/tutorials/writing-first-application.png similarity index 100% rename from doc/tutorials/images/writing-first-application.png rename to doc/images/tutorials/writing-first-application.png diff --git a/doc/tutorials/01-What-is-QSkinny.md b/doc/tutorials/01-What-is-QSkinny.md index 58da78df..895902b9 100644 --- a/doc/tutorials/01-What-is-QSkinny.md +++ b/doc/tutorials/01-What-is-QSkinny.md @@ -16,4 +16,4 @@ into the Qt architecture is depicted below: **QSkinny sits on top of QtQuick, while QML is optional** -![QSkinny architecture](/doc/tutorials/images/architecture-simple.png) +![QSkinny architecture](/doc/images/tutorials/architecture-simple.png) diff --git a/doc/tutorials/03-writing-your-first-application.md b/doc/tutorials/03-writing-your-first-application.md index 0a68e777..30ad3df5 100644 --- a/doc/tutorials/03-writing-your-first-application.md +++ b/doc/tutorials/03-writing-your-first-application.md @@ -145,7 +145,7 @@ int main( int argc, char* argv[] ) Now the app is displaying the two buttons: -![An app showing two buttons](/doc/tutorials/images/writing-first-application.png) +![An app showing two buttons](/doc/images/tutorials/writing-first-application.png) That’s it; you just created a QSkinny application from scratch. diff --git a/doc/tutorials/04-Layouts.md b/doc/tutorials/04-Layouts.md index 25e2ecc6..99178ff6 100644 --- a/doc/tutorials/04-Layouts.md +++ b/doc/tutorials/04-Layouts.md @@ -22,7 +22,7 @@ margins: **implicit horizontal size hint of a button** -![implicit horizontal size hint of a button](/doc/tutorials/images/size-hints-calculation.png) +![implicit horizontal size hint of a button](/doc/images/tutorials/size-hints-calculation.png) The implicit width of a composited UI element containing a graphic on the left and a text on the right would be the sum of the elements’ @@ -70,7 +70,7 @@ label1->setBackgroundColor( Qt::magenta ); **control without explicit size hint** -![Image without explicit size hint](/doc/tutorials/images/size-hints-1.png) +![Image without explicit size hint](/doc/images/tutorials/size-hints-1.png) If we set an explicit size hint of 150x60 pixels ourselves for the preferred size, the control will be rendered differently: @@ -81,7 +81,7 @@ label1->setExplicitSizeHint( Qt::PreferredSize, { 150, 60 } ); **control with explicit size hint** -![Image with explicit size hint](/doc/tutorials/images/size-hints-2.png) +![Image with explicit size hint](/doc/images/tutorials/size-hints-2.png) When dealing with standard controls or layouts, the size hints don’t need to be specified explicitly, as it can be deduced from its standard @@ -105,48 +105,21 @@ The size policies of QSkinny correspond to the *https://doc.qt.io/qt-5/qsizepolicy.html#Policy-enum[size policies from QtWidgets]*: -|======================================================================= -|`QskSizePolicy::Policy` |description -|`Fixed` |The control has a fixed size and can neither grow nor shrink. - -|`Minimum` |The control cannot shrink beyond its minimum size, but it -can grow if needed. - -|`Maximum` |The control cannot grow beyond its maximum size, but it can -shrink if needed. - -|`Preferred` |The control can grow and shrink, but it should be of the -size given by `sizeHint()`. - -|`MinimumExpanding` |The control cannot shrink beyond its minimum size, -but it can grow and should get as much space as possible. - -|`Expanding` |The control can shrink and grow, and it should get as much -space as possible. - -|`Ignored` |The `sizeHint()` is ignored, and the control will get as -much space as possible. - -|`Constrained` |The size of the control depends on a constraint, -i.e. the width is depending on the height or vice versa. For this policy -and the other `Constrained*` ones below, `QskControl::widthForHeight()` -or `QskControl::heightForWidth()` will be queried. - -|`ConstrainedMinimum` |The size of the control depends on a constraint, -but it can grow if needed. - -|`ConstrainedMaximum` |The size of the control depends on a constraint, -but it can shrink if needed. - -|`ConstrainedPreferred` |The size of the control depends on a -constraint, but it can grow and srhink if needed. - -|`ConstrainedMinimumExpanding` |The size of the control depends on a -constraint, but it can grow and should get as much space as possible. - -|`ConstrainedExpanding` |The size of the control depends on a -constraint, and it should get as much space as possible. -|======================================================================= +|`QskSizePolicy::Policy` | description | +| ---------------------- | ----------- | +|`Fixed` |The control has a fixed size and can neither grow nor shrink. | +|`Minimum` |The control cannot shrink beyond its minimum size, but it can grow if needed. | +|`Maximum` |The control cannot grow beyond its maximum size, but it can shrink if needed. | +|`Preferred` |The control can grow and shrink, but it should be of the size given by `sizeHint()`. | +|`MinimumExpanding` |The control cannot shrink beyond its minimum size, but it can grow and should get as much space as possible. | +|`Expanding` |The control can shrink and grow, and it should get as much space as possible. | +|`Ignored` |The `sizeHint()` is ignored, and the control will get as much space as possible. | +|`Constrained` |The size of the control depends on a constraint, i.e. the width is depending on the height or vice versa. For this policy and the other `Constrained*` ones below, `QskControl::widthForHeight()` or `QskControl::heightForWidth()` will be queried. | +|`ConstrainedMinimum` |The size of the control depends on a constraint, but it can grow if needed. | +|`ConstrainedMaximum` |The size of the control depends on a constraint, but it can shrink if needed. | +|`ConstrainedPreferred` |The size of the control depends on a constraint, but it can grow and srhink if needed. | +|`ConstrainedMinimumExpanding` |The size of the control depends on a constraint, but it can grow and should get as much space as possible. | +|`ConstrainedExpanding` |The size of the control depends on a constraint, and it should get as much space as possible. | All the `Constrained*` policies correspond to Qt’s [QSizePolicy::hasHeightForWidth()](https://doc.qt.io/qt-5/qsizepolicy.html#hasHeightForWidth) @@ -180,7 +153,7 @@ margins: **Size policies with preferred size** -![Fixed vs. Minimum size policy](/doc/tutorials/images/size-policies-horizontal-minimum-1.png) +![Fixed vs. Minimum size policy](/doc/images/tutorials/size-policies-horizontal-minimum-1.png) After growing the window horizontally, the button with the Fixed horizontal size policy keeps its width, while the button with the @@ -188,7 +161,7 @@ Minimum policy will grow: **Size policies when increasing window width** -![Fixed vs. Minimum size policy](/doc/tutorials/images/size-policies-horizontal-minimum-2.png) +![Fixed vs. Minimum size policy](/doc/images/tutorials/size-policies-horizontal-minimum-2.png) When shrinking the window below its original size, both buttons stay with their width: The one on the left because of its `Fixed` size policy, @@ -197,7 +170,7 @@ due to the `Minimum` size policy. **Size policies when shrinking window width** -![Fixed vs. Minimum size policy](/doc/tutorials/images/size-policies-horizontal-minimum-3.png) +![Fixed vs. Minimum size policy](/doc/images/tutorials/size-policies-horizontal-minimum-3.png) If we change the policy of the right button to `Preferred`, it will shrink below its original size (even though the text is too wide now): @@ -209,7 +182,7 @@ label2->setText( "size policy: preferred" ); **Size policies when changing to preferred size policy** -![Fixed vs. Minimum size policy](/doc/tutorials/images/size-policies-horizontal-minimum-4.png) +![Fixed vs. Minimum size policy](/doc/images/tutorials/size-policies-horizontal-minimum-4.png) ### Types of layouts @@ -238,7 +211,7 @@ horizontalBox->addItem( label3 ); **Horizontal layout** -![Horizontal layout](/doc/tutorials/images/layout-horizontal.png) +![Horizontal layout](/doc/images/tutorials/layout-horizontal.png) ``` auto verticalBox = new QskLinearBox( Qt::Vertical ); @@ -256,7 +229,7 @@ verticalBox->addItem( label3 ); **Vertical layout** -![Vertical layout](/doc/tutorials/images/layout-vertical.png) +![Vertical layout](/doc/images/tutorials/layout-vertical.png) #### Grid layouts (QskGridBox) @@ -290,7 +263,7 @@ gridBox->addItem( label7, 2, 1, 1, 2 ); **Grid layout** -![Grid layout](/doc/tutorials/images/layout-grid.png) +![Grid layout](/doc/images/tutorials/layout-grid.png) #### Stack layouts (QskStackBox) @@ -319,12 +292,12 @@ stackBox->setCurrentIndex( 2 ); **Stack layout (symbolized)** -![Stack layout](/doc/tutorials/images/layout-stack.png) +![Stack layout](/doc/images/tutorials/layout-stack.png) In this example, "control 3" is stacked on top of the blue and the cyan control. Controls in a stacked layout can be of different sizes. -**📌 NOTE**\ +**NOTE**: The image above is just for illustrating purposes. In practice the topmost control ("control 3" here) is completely covering the ones below it. @@ -365,13 +338,13 @@ are rendered with their preferred size: **Stretch factors with preferred size** -![Stretch factors preferred size](/doc/tutorials/images/stretch-factors-1.png) +![Stretch factors preferred size](/doc/images/tutorials/stretch-factors-1.png) When the layout gets more width, the stretch factors come into play: **A stretch factor of 1:2** -![Stretch factors increasing width](/doc/tutorials/images/stretch-factors-2.png) +![Stretch factors increasing width](/doc/images/tutorials/stretch-factors-2.png) No matter how wide the layout is, the aspect ratio of 1:2 will always be kept, meaning that the label on the left will get 33% of the space, and @@ -379,7 +352,7 @@ the label on the right 67%: **A stretch factor of 1:2 with different widths** -![Stretch factors even more width](/doc/tutorials/images/stretch-factors-3.png) +![Stretch factors even more width](/doc/images/tutorials/stretch-factors-3.png) Stretch factors in QSkinny are the same as in the Qt Graphics View Framework, see @@ -394,7 +367,7 @@ on the left: **A UI with nested layouts** -![Nested layouts](/doc/tutorials/images/nesting-layouts.png) +![Nested layouts](/doc/images/tutorials/nesting-layouts.png) The code to produce the above UI could look like this (setting colors etc. omitted for brevity): @@ -430,7 +403,7 @@ The following diagram makes the layouts visible: **The layout structure of the UI** -![Nested layouts architecture](/doc/tutorials/images/nesting-layouts-architecture.png) +![Nested layouts architecture](/doc/images/tutorials/nesting-layouts-architecture.png) ### Anchoring in QSkinny diff --git a/doc/tutorials/05-Skins.md b/doc/tutorials/05-Skins.md index c9419b91..0b97b3ee 100644 --- a/doc/tutorials/05-Skins.md +++ b/doc/tutorials/05-Skins.md @@ -9,7 +9,7 @@ itself as well as read the skin hints from the skin: **Skinlets query the control and the skin** -![Styling controls](/doc/tutorials/images/skins-1.png) +![Styling controls](/doc/images/tutorials/skins-1.png) For instance, a button skinlet will read the margins from the skin and the text to render from the button. @@ -39,11 +39,11 @@ often found in mobile devices. **desktop style button** -![desktop style button](/doc/tutorials/images/skinlets-button-1.png) +![desktop style button](/doc/images/tutorials/skinlets-button-1.png) **flat button** -![flat button](/doc/tutorials/images/skinlets-button-2.png) +![flat button](/doc/images/tutorials/skinlets-button-2.png) ### Skin hints @@ -81,7 +81,7 @@ public: **A button styled with skin hints** -![Button with skin hints](/doc/tutorials/images/skin-hints.png) +![Button with skin hints](/doc/images/tutorials/skin-hints.png) When writing a new skin, a developer needs to know which hints to set for which control. This usually depends on the control itself; however, @@ -149,11 +149,11 @@ public: **button in normal state** -![button in normal state](/doc/tutorials/images/skin-hints-states-1.png) +![button in normal state](/doc/images/tutorials/skin-hints-states-1.png) **button in hovered state** -![button in hovered state](/doc/tutorials/images/skin-hints-states-2.png) +![button in hovered state](/doc/images/tutorials/skin-hints-states-2.png) #### Local skin hints @@ -177,7 +177,7 @@ diagram now looks like this: **Skinlets can also read from local skinlets and animators** -![Animators and local skin hints](/doc/tutorials/images/skins-2.png) +![Animators and local skin hints](/doc/images/tutorials/skins-2.png) ### Skinlets @@ -211,7 +211,7 @@ diagram looks like this: **There is one skinlet for each atomic control** -![Animators and local skin hints](/doc/tutorials/images/skins-3.png) +![Animators and local skin hints](/doc/images/tutorials/skins-3.png) ### Skin factories and switching between skins @@ -293,8 +293,8 @@ instances: **button in `MySkin` (as above)** -![button in normal state](/doc/tutorials/images/skin-hints-states-1.png) +![button in normal state](/doc/images/tutorials/skin-hints-states-1.png) **button in `OtherSkin`** -![Styling controls](/doc/tutorials/images/skin-factory.png) +![Styling controls](/doc/images/tutorials/skin-factory.png) diff --git a/doc/tutorials/06-scalable-graphics.md b/doc/tutorials/06-scalable-graphics.md index 60765455..b7444c1e 100644 --- a/doc/tutorials/06-scalable-graphics.md +++ b/doc/tutorials/06-scalable-graphics.md @@ -27,18 +27,18 @@ label2->setSizePolicy( QskSizePolicy::ConstrainedPreferred, QskSizePolicy::Expan **graphics with preferred size** -![Scalable graphics default](/doc/tutorials/images/scalable-graphics-1.png) +![Scalable graphics default](/doc/images/tutorials/scalable-graphics-1.png) When resizing the window, the graphics will scale according to the size available in the layout: **graphics bounded by width** -![Scalable graphics bounded by width](/doc/tutorials/images/scalable-graphics-2.png) +![Scalable graphics bounded by width](/doc/images/tutorials/scalable-graphics-2.png) **graphics bounded by height** -![Scalable graphics bounded by height](/doc/tutorials/images/scalable-graphics-3.png) +![Scalable graphics bounded by height](/doc/images/tutorials/scalable-graphics-3.png) Since we set the horizontal size policy of the graphics to `ConstrainedPreferred`, the scaling is done through QskGraphic’s diff --git a/doc/tutorials/08-qskinny-and-qml.md b/doc/tutorials/08-qskinny-and-qml.md index 5984436e..0f32b878 100644 --- a/doc/tutorials/08-qskinny-and-qml.md +++ b/doc/tutorials/08-qskinny-and-qml.md @@ -49,7 +49,7 @@ The full Buttons example is depicted below. **The buttons example shows how to mix QSkinny and QML** -![Buttons example](/doc/tutorials/images/buttons-example.png) +![Buttons example](/doc/images/tutorials/buttons-example.png) For more information on using C++ classes from QML, see the article about exposing attributes of {cpp} types to QML in the [Qt documentation](https://doc.qt.io/qt-5/qtqml-cppintegration-exposecppattributes.html). diff --git a/doc/tutorials/09-writing-own-controls.md b/doc/tutorials/09-writing-own-controls.md index 1d628f90..bbad8596 100644 --- a/doc/tutorials/09-writing-own-controls.md +++ b/doc/tutorials/09-writing-own-controls.md @@ -30,7 +30,7 @@ public: **A subclassed control with local skin hints** -![Subclassing existing controls](/doc/tutorials/images/subclassing-existing-controls.png) +![Subclassing existing controls](/doc/images/tutorials/subclassing-existing-controls.png) Then there is no need to set the margins and background color for every instance of the custom text label. @@ -87,7 +87,7 @@ public: **A subclassed control with skin hints defined in the skin** -![Subclassing existing controls](/doc/tutorials/images/subclassing-existing-controls.png) +![Subclassing existing controls](/doc/images/tutorials/subclassing-existing-controls.png) The styling described above has the same effect as in the simpler example, but now the `TextLabel` control can be given a different style @@ -142,7 +142,7 @@ auto* textAndGraphic = new TextAndGraphic( "Text", "cloud" ); **A composited control** -![Compositing controls](/doc/tutorials/images/compositing-controls.png) +![Compositing controls](/doc/images/tutorials/compositing-controls.png) ### Writing controls with a skinlet @@ -300,4 +300,4 @@ colors etc. can be written with less code. **A class with an own skinlet** -![Control with skinlet](/doc/tutorials/images/control-with-skinlet.png) +![Control with skinlet](/doc/images/tutorials/control-with-skinlet.png) diff --git a/doc/tutorials/10-scene-graph.md b/doc/tutorials/10-scene-graph.md index 741b47e3..d8bdd659 100644 --- a/doc/tutorials/10-scene-graph.md +++ b/doc/tutorials/10-scene-graph.md @@ -21,7 +21,7 @@ For this example, the scene graph will contain the following nodes: **Scene graph representation of a button** -![Scene graph nodes for a button](/doc/tutorials/images/skins-sg-1.png) +![Scene graph nodes for a button](/doc/images/tutorials/skins-sg-1.png) The top two nodes (root and Quick root item) are created for every QtQuick application. The button itself consists of 5 nodes in our case: @@ -54,7 +54,7 @@ Then the scene graph has the following structure: **Scene graph representation of a button inside a box** -![Scene graph nodes for a button in a box](/doc/tutorials/images/skins-sg-2.png) +![Scene graph nodes for a button in a box](/doc/images/tutorials/skins-sg-2.png) Here we can see that since the box is a parent of the button, the `box node` is also a parent of the `button node` in the scene graph. Also, the diff --git a/doc/tutorials/11-How-to-build-for-Wasm.md b/doc/tutorials/11-How-to-build-for-Wasm.md index d57d0649..91f1c59c 100644 --- a/doc/tutorials/11-How-to-build-for-Wasm.md +++ b/doc/tutorials/11-How-to-build-for-Wasm.md @@ -39,4 +39,4 @@ Qt creates the HTML wrappers automatically, so there is not much to do except le **The IOT dashboard example in a browser** -![The IOT dashboard example in a browser](/doc/tutorials/images/iotdashboard-wasm.png) +![The IOT dashboard example in a browser](/doc/images/tutorials/iotdashboard-wasm.png)