From ee68989e2a2f467f5c5ebcd4bda78cc333d25ced Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Wed, 24 Apr 2019 16:18:49 +0200 Subject: [PATCH] Doc: Add anchor button images and use them in the docs Also needed in the Qt Design Studio tutorials. Change-Id: I3efe391660480b02d010327afd583070b1fa1a33 Reviewed-by: Thomas Hartmann --- doc/images/anchor-bottom.png | Bin 0 -> 98 bytes doc/images/anchor-fill.png | Bin 0 -> 108 bytes doc/images/anchor-horizontal-center.png | Bin 0 -> 95 bytes doc/images/anchor-left.png | Bin 0 -> 97 bytes doc/images/anchor-right.png | Bin 0 -> 97 bytes doc/images/anchor-top.png | Bin 0 -> 99 bytes doc/images/anchor-vertical-center.png | Bin 0 -> 96 bytes .../creator-mobile-app-tutorial.qdoc | 2 +- .../creator-only/qtquick-app-tutorial.qdoc | 30 +++++++++++------- doc/src/qtquick/qtquick-buttons.qdoc | 15 ++++----- doc/src/qtquick/qtquick-components.qdoc | 2 +- 11 files changed, 28 insertions(+), 21 deletions(-) create mode 100644 doc/images/anchor-bottom.png create mode 100644 doc/images/anchor-fill.png create mode 100644 doc/images/anchor-horizontal-center.png create mode 100644 doc/images/anchor-left.png create mode 100644 doc/images/anchor-right.png create mode 100644 doc/images/anchor-top.png create mode 100644 doc/images/anchor-vertical-center.png diff --git a/doc/images/anchor-bottom.png b/doc/images/anchor-bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..3a96c98107a076bcac363606d73fbe1e5183345f GIT binary patch literal 98 zcmeAS@N?(olHy`uVBq!ia0y~yVBlt8VBle7W?*3GOTT)Tfq{W7z$e6&fq~)w|Nl#G z&IgHzd%8G=aL6X-L>$=hUr~%jnh6!Yz(Cz1?B_@3Dq(%Ffe$! L`njxgN@xNAEc6{` literal 0 HcmV?d00001 diff --git a/doc/images/anchor-horizontal-center.png b/doc/images/anchor-horizontal-center.png new file mode 100644 index 0000000000000000000000000000000000000000..984fa0eb6800d39cf68e70f6e37cc4f6686ea656 GIT binary patch literal 95 zcmeAS@N?(olHy`uVBq!ia0y~yVBln6VBltCW?*2LKHW5efq{W7z$e6&fq~)w|Nl#G z&cDmRz#!u3;uyjqoBZS60S1<*Hv|IyR5LSVIItO9d>>@Uz`(%Z>FVdQ&MBb@00`##-p#f8JDi(;*o!@Y{bC8z~JfX=d#Wzp$Py# Ct{Kh% literal 0 HcmV?d00001 diff --git a/doc/images/anchor-right.png b/doc/images/anchor-right.png new file mode 100644 index 0000000000000000000000000000000000000000..7fa48d4f75a8cd0d0f92999c58cc3189e410dfcd GIT binary patch literal 97 zcmeAS@N?(olHy`uVBq!ia0y~yVBle3VBltCW?*0_-1kq0fq{W7z$e6&fq~)w|Nl#G z&cDmRz#!)7;uyjqoBZQ{L!)BjLOE%suK)E64C^_#X7q0fyUM`8z~JfX=d#Wzp$PzF C>lI~9 literal 0 HcmV?d00001 diff --git a/doc/images/anchor-vertical-center.png b/doc/images/anchor-vertical-center.png new file mode 100644 index 0000000000000000000000000000000000000000..a82090c1edbc188352881f46a40e22b4752bce50 GIT binary patch literal 96 zcmeAS@N?(olHy`uVBq!ia0y~yVBlt8VBlnAW?*2rx5_1tfq{W7z$e6&fq~)w|Nl#G z&cDmRz#!`B;uyjqo17DIV8?$&5kmuo8@${Mi)47XZhzMUDP{0<^>bP0l+XkK7abW5 literal 0 HcmV?d00001 diff --git a/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc b/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc index 380192d9dd7..6f8b571bf89 100644 --- a/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc +++ b/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc @@ -100,7 +100,7 @@ to reference the rectangle from other places. \li Select the \uicontrol Layout tab, and then click - the \inlineimage anchor_fill.png + the \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the rectangle to the item. diff --git a/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc index 0ac4cc85d0b..55fe9f421c8 100644 --- a/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc +++ b/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc @@ -117,22 +117,24 @@ \li In the \uicontrol {Border color} field, set the border color to \e #808080. - \li Click \uicontrol {Layout}, and then click the top and left - anchor buttons to anchor the rectangle to the top left corner of - the page. - - \image qmldesigner-tutorial-topleftrect-layout.png "Layout tab" + \li Click \uicontrol {Layout}, and then click the + \inlineimage anchor-top.png + (\uicontrol Top) and \inlineimage anchor-left.png + (\uicontrol Left) anchor buttons to anchor the + rectangle to the top left corner of the page. \li In the \uicontrol Margin field, select \e 20 for the top anchor and \e 10 for the left anchor. + \image qmldesigner-tutorial-topleftrect-layout.png "Anchor margins" + \endlist \li Drag and drop a \uicontrol {Mouse Area} type from the \uicontrol Library to \e topLeftRect in the navigator. \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_fill.png + \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the mouse area to the rectangle. @@ -147,9 +149,12 @@ \li In the \uicontrol Id field, enter \e middleRightRect. - \li In \uicontrol {Layout}, select the vertical center anchor button and - then the right anchor button to - anchor the rectangle to the middle right margin of its parent. + \li In \uicontrol {Layout}, select the + \inlineimage anchor-vertical-center.png + (\uicontrol {Vertical Center} anchor button and then the + \inlineimage anchor-right.png + (\uicontrol Right) anchor button to anchor the rectangle + to the middle right margin of its parent. \li In the \uicontrol Margin field, select \e 10 for the right anchor and \e 0 for the vertical center anchor. @@ -162,8 +167,11 @@ \li In the \uicontrol Id field, enter \e bottomLeftRect. - \li In \uicontrol {Layout}, select the bottom and left anchor buttons to - anchor the rectangle to the bottom left margin of its parent. + \li In \uicontrol {Layout}, select the + \inlineimage anchor-bottom.png + (\uicontrol Bottom) and \inlineimage anchor-left.png + (\uicontrol Left) anchor buttons to anchor the rectangle + to the bottom left margin of its parent. \li In the \uicontrol Margin field, select \e 20 for the bottom anchor and \e 10 for the left anchor. diff --git a/doc/src/qtquick/qtquick-buttons.qdoc b/doc/src/qtquick/qtquick-buttons.qdoc index 0f7c5f5235e..104605a7b86 100644 --- a/doc/src/qtquick/qtquick-buttons.qdoc +++ b/doc/src/qtquick/qtquick-buttons.qdoc @@ -76,7 +76,7 @@ the rectangle and produce rounded corners for the button. \li Select \uicontrol {Layout}, and then select the - \inlineimage anchor_fill.png + \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the rectangle to the item. @@ -208,7 +208,7 @@ for example button_up.png. \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_fill.png + \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the border image to the \uicontrol Item. @@ -258,12 +258,11 @@ \endlist \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_vertical.png - (\uicontrol {Set Vertical Anchor}) and - \inlineimage anchor_horizontal.png - (\uicontrol {Set Horizontal Anchor}) - buttons to inherit the vertical and horizontal centering from - the parent. + \inlineimage anchor-vertical-center.png + (\uicontrol {Vertical Center}) and + \inlineimage anchor-horizontal-center.png + (\uicontrol {Horizontal Center}) buttons to inherit the + vertical and horizontal centering from the parent. \endlist diff --git a/doc/src/qtquick/qtquick-components.qdoc b/doc/src/qtquick/qtquick-components.qdoc index 5eea22926c5..36190f81060 100644 --- a/doc/src/qtquick/qtquick-components.qdoc +++ b/doc/src/qtquick/qtquick-components.qdoc @@ -212,7 +212,7 @@ \image qmldesigner-anchor-buttons.png "Anchor buttons" - For convenience, you can click the \inlineimage anchor_fill.png + For convenience, you can click the \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) toolbar button to apply fill anchors to an item and the \inlineimage qtcreator-anchors-reset-icon.png (\uicontrol {Reset Anchors}) button to reset the anchors to their saved