From 8c3746e2f2250960d47d9792fadcf3bab5589cd1 Mon Sep 17 00:00:00 2001 From: Lennart De Graef Date: Wed, 25 Jan 2023 02:47:04 +0100 Subject: [PATCH] Update the GUI container tutorial to use new terminology and add update image (#6636) Update GUI container docs to new terminology and add an updated image --- tutorials/ui/gui_containers.rst | 30 +++++++++++------- tutorials/ui/img/container_size_flags.png | Bin 7920 -> 0 bytes .../ui/img/container_sizing_options.webp | Bin 0 -> 3018 bytes 3 files changed, 18 insertions(+), 12 deletions(-) delete mode 100644 tutorials/ui/img/container_size_flags.png create mode 100755 tutorials/ui/img/container_sizing_options.webp diff --git a/tutorials/ui/gui_containers.rst b/tutorials/ui/gui_containers.rst index 7a53f0f84..761a20a82 100644 --- a/tutorials/ui/gui_containers.rst +++ b/tutorials/ui/gui_containers.rst @@ -34,24 +34,30 @@ Example of *HBoxContainer* resizing children buttons. The real strength of containers is that they can be nested (as nodes), allowing the creation of very complex layouts that resize effortlessly. -Size flags ----------- +Sizing options +-------------- -When adding a node to a container, the way the container treats each child depends mainly on their *size flags*. These flags -can be found by inspecting any control that is a child of a *Container*. +When adding a node to a container, the way the container treats each child depends mainly on their *container sizing options*. These options +can be found by inspecting the layout of any *Control* that is a child of a *Container*. - .. image:: img/container_size_flags.png + .. image:: img/container_sizing_options.webp -Size flags are independent for vertical and horizontal sizing and not all containers make use of them (but most do): +Sizing options are independent for vertical and horizontal sizing and not all containers make use of them (but most do): * **Fill**: Ensures the control *fills* the designated area within the container. No matter if a control *expands* or not (see below), it will only *fill* the designated area when this is toggled on (it is by default). * **Expand**: Attempts to use as much space as possible in the parent container (in each axis). Controls that don't expand will be pushed away by those that do. Between expanding controls, the - amount of space they take from each other is determined by the *Ratio* (see below). -* **Shrink Center** When expanding (and if not filling), try to remain at the center of the expanded - area (by default it remains at the left or top). -* **Ratio**: The ratio of how much expanded controls take up the available space in relation to each + amount of space they take from each other is determined by the *Stretch Ratio* (see below). + This option is only available when the parent Container is of the right type, for example the *HBoxContainer* has this option + for horizontal sizing. +* **Shrink Begin** When expanding, try to remain at the left or top of the expanded + area. +* **Shrink Center** When expanding, try to remain at the center of the expanded + area. +* **Shrink End** When expanding, try to remain at the right or bottom of the expanded + area. +* **Stretch Ratio**: The ratio of how much expanded controls take up the available space in relation to each other. A control with "2", will take up twice as much available space as one with "1". Experimenting with these flags and different containers is recommended to get a better grasp on how they work. @@ -129,7 +135,7 @@ PanelContainer A container that draws a *StyleBox*, then expands children to cover its whole area (via :ref:`PanelContainer `, respecting the *StyleBox* margins). -It respects both the horizontal and vertical size flags. +It respects both the horizontal and vertical sizing options. .. image:: img/containers_panel.png @@ -140,7 +146,7 @@ ScrollContainer Accepts a single child node. If this node is bigger than the container, scrollbars will be added to allow panning the node around (via :ref:`ScrollContainer `). Both -vertical and horizontal size flags are respected, and the behavior can be turned on or off +vertical and horizontal size options are respected, and the behavior can be turned on or off per axis in the properties. .. image:: img/containers_scroll.png diff --git a/tutorials/ui/img/container_size_flags.png b/tutorials/ui/img/container_size_flags.png deleted file mode 100644 index d2c64050bd44ffa270d7199e0a0fd286e9f418b7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7920 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 jy8+juxJo6=Ci4FPsL7{j diff --git a/tutorials/ui/img/container_sizing_options.webp b/tutorials/ui/img/container_sizing_options.webp new file mode 100755 index 0000000000000000000000000000000000000000..8e9f66ae3416388db5223867e5bf6b245bdd14d7 GIT binary patch literal 3018 zcmV;*3pMmoNk&G(3jhFDMM6+kP&iDr3jhEwDS;#a^>~}MUzHR8|DMYjZgCgf-Q6LM zdq{A1*LZ@vyF-HAn)ma`?zLBkq9)4YU70UM(pS+cpv;IXr0DR^8oy{~@t$BJJ!~cmX@*E1sy1v z+Rc!%jAyO>4!KUYjJR0y=i1(e6q@V=8CcRi(L3Fd5i-c+o+!pxPfMIAAM zjm-*D8rikQKH+sFBs7E@rFt@!=1GXw4pDR?#~BM#%@3tNPs3O>Mk4vX9bSBc5E6&L zT&F(?5_`tUH5o7G`d31#GM=Yovzo6CW2}!QHklj==-7i^+$8Br<4(0o(L7|S|UAxsR3`S(m~yN%SNqKLyb#)OA|U5%;5)c0b` z_6b+0Km>#k6^yKSs>An5%~Gr6vuDo`14;6o&pi{A4H>=<8)<5~)`rp{#m3QsY(~hx z+NGwE$cP&05>6YtWeMb=R#rZAu!ImYJ7_Lej0ulGP3pKr9vbfwhE79 zYegFed%O;<*(^NorDuD*j~IBQ;bMlMJDtSsp38ALlTB#lWoBcqy|mL~Zo@%ib~K|z~yzgNK;%nYpSVQXQJW>Zmj z?~MciY;PBdW`fx^oF(RMqp~T%4sN+0I}B%P?0!_R0GA{?hL}^eIely&R#tZW@B6Tk z6K%}^)6slR>F4VUnuTxF{EzaxS z6}Z*yhz78-4GRLzDW@Xa7RAB{4(?)P*OpF}+i=@XW=kM)DkjLK5al>Z)d~Q*s4kkF-MIgnH5sax@G;o zh*&H=Y!%mEK{>m*=iyZHQTd_}=9{uOi&{4I9fp|t2646jmOV-|%~^ViNmz)u5q23H zGZtjRzfy=UO9=v7k0g3v>ybo~yHt_}c6j+<(zBDoj?(aY_W%2*gtL8rQd*J@GIL|9 z)F+g_Sr}Q^pyDT^q#&jA-C37Tk9pFDhyw|5wA8S)ne{GDX}E9Hu|``iHZ7cqzlWz& z%*q9P)apeXB{c$o+vn@lyiD1$!JwNwuJbLt!E9kEZfvlol<)`z9gMbtGigN z3UpTFWxDfhyeRmMx2x$>DSdwqF-lGQw&Q`E?t73T(XQ*k0RVX3Hknvhd_-^+knoRvMEZ09eylCeY`4m^%900{&9)vj*6X@Rh# zuzQtqSIaz+AA+?;QDNFW5==PNCIDJQ84D2SdM~H?Yg7OL!`cP|KN*?JAwL9bjiM8t z_tG)w62%>W%RSel&vD^`_r2oOUnz^{RH_+-4p+5yjPB8^_eg#S)*40NB$cZLdL3F5 zz~y^aR9uqopj~{6=PXANZKGaEH6a6&BZ9R?5#-d9_a!g%R#Bw_0058sk(r_FY?}Z8 z*rG{|00pU>5VSRlAo0%S*p<%#z-OMv6@&R!y@ltSqbX;Koy0lMdsgSk!L!+8;$IKvfeaU2Ka8 zs6teudENEckZcB^bV+6;!o7a+?i418W{+O|l7@YBDZ9dsjR8=|wI~7B<9K!Mv+hTY z8i3LzSrIeBxEi6Ni<)!D*&+2uXwNcUT~cA^eNUrtIRFZ}PVuN)WM=-#+Xmu(+$w8% z4g$dO-Usk{m+`K$CWhboET~yiJDO?p4S|wy*Xy_sNTR}k*RzaYmsG||cJk7w!qjAD zQ|$@C&+|D|4&9xB;pBHN2fue2rg(zi`Yh;woMrPZ0tM1y_oH1Dp-FcbM*vfogxX|Z z(Lv1$05?io45QgT91OpA83v~HnZg1gx!IHB>5s^Mq%9z$?ipoC+E_mKMXkXW2>W{E>Nr`r!e%A@x4CT9^-gnh6ybQE#+ Mx9hc{C(8{{0Q0)V#sB~S literal 0 HcmV?d00001