Skip to content

Commit b26439b

Browse files
ec1oudec1oud
committed
doc: Improve BorderImage; make snippets scaleable, detailed; screenshots
- This started with QTBUG-112322: introduce the border property next to the first snippet where it's used. - Give declarative-scalegrid.png a white background rather than transparent, to be consistent with the screenshots and to look better with a dark documentation style. - Make the snippets resizable so that it's possible to test the effects of the horizontalTileMode and verticalTileMode properties. - Get the borderframe.svg and .png files from the qtdoc repo (which ought to have been in this repo already, but perhaps not). - Resize borderframe.svg to 120x120 and set document size to match (in Inkscape); this makes it possible to use the svg directly in BorderImage, to test that QTBUG-25244 is really fixed. - Make the snippets match the screenshots (all 182px wide, with grey rectangle borders as shown). - It seems our scaling is smoother (less jagged) than in the old screenshots, so the new ones make a better impression. - Add region index labels to snippets and screenshots to be a bit less confusing next to the paragraphs that are talking about "parts of image in regions 2 and 8" and so on. Too bad they have to be so tiny. - Use \value rather than \li for enum values. Amends 1a84b19 Pick-to: 6.2 6.5 Task-number: QTBUG-25244 Fixes: QTBUG-112322 Change-Id: I697ae1356eee62990b7903601cc493a04d3647a2 Reviewed-by: Andreas Eliasson <[email protected]> Reviewed-by: Paul Wicking <[email protected]>
1 parent 583b826 commit b26439b

11 files changed

+433
-56
lines changed

‎src/quick/doc/images/declarative-scalegrid.png

3.4 KB
Loading

‎src/quick/doc/images/qml-borderimage-rounded.png

5.59 KB
Loading

‎src/quick/doc/images/qml-borderimage-scaled.png

4.01 KB
Loading

‎src/quick/doc/images/qml-borderimage-tiled.png

3.26 KB
Loading

‎src/quick/doc/snippets/qml/borderimage/borderimage-rounded.qml

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
// Copyright (C) 2023 The Qt Company Ltd.
2+
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
3+
4+
import QtQuick 2.0
5+
6+
Rectangle {
7+
id: page
8+
color: "white"
9+
width: 182; height: 164
10+
11+
//! [tiled border image]
12+
BorderImage {
13+
anchors { fill: parent; margins: 6 }
14+
border { left: 30; top: 30; right: 30; bottom: 30 }
15+
horizontalTileMode: BorderImage.Round
16+
verticalTileMode: BorderImage.Round
17+
source: "pics/borderframe.png"
18+
}
19+
//! [tiled border image]
20+
21+
Rectangle {
22+
anchors.fill: parent
23+
anchors.margins: 5
24+
color: "transparent"
25+
border.color: "gray"
26+
27+
Rectangle {
28+
x: 30; y: 0
29+
width: 1; height: parent.height
30+
color: "gray"
31+
32+
Text {
33+
text: "1"
34+
font.pixelSize: 9
35+
color: "red"
36+
anchors.right: parent.right
37+
anchors.rightMargin: 1
38+
y: 20
39+
}
40+
41+
Text {
42+
text: "4"
43+
font.pixelSize: 9
44+
color: "red"
45+
anchors.verticalCenter: parent.verticalCenter
46+
anchors.right: parent.right
47+
anchors.rightMargin: 1
48+
}
49+
50+
Text {
51+
text: "7"
52+
font.pixelSize: 9
53+
color: "red"
54+
y: parent.height - 30
55+
anchors.right: parent.right
56+
anchors.rightMargin: 1
57+
}
58+
}
59+
60+
Rectangle {
61+
x: parent.width - 30; y: 0
62+
width: 1; height: parent.height
63+
color: "gray"
64+
65+
Text {
66+
text: "3"
67+
font.pixelSize: 9
68+
color: "red"
69+
x: 1
70+
y: 20
71+
}
72+
73+
Text {
74+
text: "6"
75+
font.pixelSize: 9
76+
color: "red"
77+
x: 1
78+
anchors.verticalCenter: parent.verticalCenter
79+
}
80+
81+
Text {
82+
text: "9"
83+
font.pixelSize: 9
84+
color: "red"
85+
x: 1
86+
y: parent.height - 30
87+
}
88+
}
89+
90+
Text {
91+
text: "5"
92+
font.pixelSize: 9
93+
color: "red"
94+
anchors.centerIn: parent
95+
}
96+
97+
Rectangle {
98+
x: 0; y: 30
99+
width: parent.width; height: 1
100+
color: "gray"
101+
102+
Text {
103+
text: "2"
104+
font.pixelSize: 9
105+
color: "red"
106+
anchors.horizontalCenter: parent.horizontalCenter
107+
y: -10
108+
}
109+
}
110+
111+
Rectangle {
112+
x: 0; y: parent.height - 30
113+
width: parent.width; height: 1
114+
color: "gray"
115+
116+
Text {
117+
text: "8"
118+
font.pixelSize: 9
119+
color: "red"
120+
anchors.horizontalCenter: parent.horizontalCenter
121+
}
122+
}
123+
}
124+
}

‎src/quick/doc/snippets/qml/borderimage/borderimage-scaled.qml

Lines changed: 82 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import QtQuick 2.0
66
Rectangle {
77
id: page
88
color: "white"
9-
width: 180; height: 180
9+
width: 182; height: 182
10+
border.color: "gray"
1011

1112
//! [scaled border image]
1213
BorderImage {
13-
width: 180; height: 180
14+
anchors { fill: parent; margins: 1 }
1415
border { left: 30; top: 30; right: 30; bottom: 30 }
1516
horizontalTileMode: BorderImage.Stretch
1617
verticalTileMode: BorderImage.Stretch
@@ -20,25 +21,98 @@ BorderImage {
2021

2122
Rectangle {
2223
x: 30; y: 0
23-
width: 1; height: 180
24+
width: 1; height: parent.height
2425
color: "gray"
26+
27+
Text {
28+
text: "1"
29+
font.pixelSize: 9
30+
color: "red"
31+
anchors.right: parent.right
32+
anchors.rightMargin: 1
33+
y: 20
34+
}
35+
36+
Text {
37+
text: "4"
38+
font.pixelSize: 9
39+
color: "red"
40+
anchors.verticalCenter: parent.verticalCenter
41+
anchors.right: parent.right
42+
anchors.rightMargin: 1
43+
}
44+
45+
Text {
46+
text: "7"
47+
font.pixelSize: 9
48+
color: "red"
49+
y: parent.height - 30
50+
anchors.right: parent.right
51+
anchors.rightMargin: 1
52+
}
2553
}
2654

2755
Rectangle {
28-
x: 150; y: 0
29-
width: 1; height: 180
56+
x: parent.width - 30; y: 0
57+
width: 1; height: parent.height
3058
color: "gray"
59+
60+
Text {
61+
text: "3"
62+
font.pixelSize: 9
63+
color: "red"
64+
x: 1
65+
y: 20
66+
}
67+
68+
Text {
69+
text: "6"
70+
font.pixelSize: 9
71+
color: "red"
72+
x: 1
73+
anchors.verticalCenter: parent.verticalCenter
74+
}
75+
76+
Text {
77+
text: "9"
78+
font.pixelSize: 9
79+
color: "red"
80+
x: 1
81+
y: parent.height - 30
82+
}
83+
}
84+
85+
Text {
86+
text: "5"
87+
font.pixelSize: 9
88+
color: "red"
89+
anchors.centerIn: parent
3190
}
3291

3392
Rectangle {
3493
x: 0; y: 30
35-
width: 180; height: 1
94+
width: parent.width; height: 1
3695
color: "gray"
96+
97+
Text {
98+
text: "2"
99+
font.pixelSize: 9
100+
color: "red"
101+
anchors.horizontalCenter: parent.horizontalCenter
102+
y: -10
103+
}
37104
}
38105

39106
Rectangle {
40-
x: 0; y: 150
41-
width: 180; height: 1
107+
x: 0; y: parent.height - 30
108+
width: parent.width; height: 1
42109
color: "gray"
110+
111+
Text {
112+
text: "8"
113+
font.pixelSize: 9
114+
color: "red"
115+
anchors.horizontalCenter: parent.horizontalCenter
116+
}
43117
}
44118
}

‎src/quick/doc/snippets/qml/borderimage/borderimage-tiled.qml

Lines changed: 82 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import QtQuick 2.0
66
Rectangle {
77
id: page
88
color: "white"
9-
width: 180; height: 180
9+
width: 182; height: 182
10+
border.color: "gray"
1011

1112
//! [tiled border image]
1213
BorderImage {
13-
width: 180; height: 180
14+
anchors { fill: parent; margins: 1 }
1415
border { left: 30; top: 30; right: 30; bottom: 30 }
1516
horizontalTileMode: BorderImage.Repeat
1617
verticalTileMode: BorderImage.Repeat
@@ -20,25 +21,98 @@ BorderImage {
2021

2122
Rectangle {
2223
x: 30; y: 0
23-
width: 1; height: 180
24+
width: 1; height: parent.height
2425
color: "gray"
26+
27+
Text {
28+
text: "1"
29+
font.pixelSize: 9
30+
color: "red"
31+
anchors.right: parent.right
32+
anchors.rightMargin: 1
33+
y: 20
34+
}
35+
36+
Text {
37+
text: "4"
38+
font.pixelSize: 9
39+
color: "red"
40+
anchors.verticalCenter: parent.verticalCenter
41+
anchors.right: parent.right
42+
anchors.rightMargin: 1
43+
}
44+
45+
Text {
46+
text: "7"
47+
font.pixelSize: 9
48+
color: "red"
49+
y: parent.height - 30
50+
anchors.right: parent.right
51+
anchors.rightMargin: 1
52+
}
2553
}
2654

2755
Rectangle {
28-
x: 150; y: 0
29-
width: 1; height: 180
56+
x: parent.width - 30; y: 0
57+
width: 1; height: parent.height
3058
color: "gray"
59+
60+
Text {
61+
text: "3"
62+
font.pixelSize: 9
63+
color: "red"
64+
x: 1
65+
y: 20
66+
}
67+
68+
Text {
69+
text: "6"
70+
font.pixelSize: 9
71+
color: "red"
72+
x: 1
73+
anchors.verticalCenter: parent.verticalCenter
74+
}
75+
76+
Text {
77+
text: "9"
78+
font.pixelSize: 9
79+
color: "red"
80+
x: 1
81+
y: parent.height - 30
82+
}
83+
}
84+
85+
Text {
86+
text: "5"
87+
font.pixelSize: 9
88+
color: "red"
89+
anchors.centerIn: parent
3190
}
3291

3392
Rectangle {
3493
x: 0; y: 30
35-
width: 180; height: 1
94+
width: parent.width; height: 1
3695
color: "gray"
96+
97+
Text {
98+
text: "2"
99+
font.pixelSize: 9
100+
color: "red"
101+
anchors.horizontalCenter: parent.horizontalCenter
102+
y: -10
103+
}
37104
}
38105

39106
Rectangle {
40-
x: 0; y: 150
41-
width: 180; height: 1
107+
x: 0; y: parent.height - 30
108+
width: parent.width; height: 1
42109
color: "gray"
110+
111+
Text {
112+
text: "8"
113+
font.pixelSize: 9
114+
color: "red"
115+
anchors.horizontalCenter: parent.horizontalCenter
116+
}
43117
}
44118
}

0 commit comments

Comments
 (0)