aboutsummaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
authorTopi Reinio <topi.reinio@theqtcompany.com>2016-09-21 11:07:34 +0200
committerTopi Reiniƶ <topi.reinio@theqtcompany.com>2016-09-27 07:10:13 +0000
commit1ba9feea60bae12febdb6d640eb5f2617c8d4b79 (patch)
treed475cddf969183d3e47f290aa93baf323faf78fd /examples
parente1b1191e8df727f546bdbbb7da6b14e897c70e7c (diff)
Doc: Add drop shadow for tutorial images
...Using the new \borderedimage macro. Change-Id: I6a15944e898cd9b70bd8fd0999399d405dde9e59 Reviewed-by: J-P Nurmi <jpnurmi@qt.io>
Diffstat (limited to 'examples')
-rw-r--r--examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc38
1 files changed, 19 insertions, 19 deletions
diff --git a/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc b/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
index fe339133..afdac5a3 100644
--- a/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
+++ b/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
@@ -187,7 +187,7 @@ This line determines where the example will be copied to when running
Now we can build and run the application:
-\image qtquickcontrols2-chattutorial-chapter1.png
+\borderedimage qtquickcontrols2-chattutorial-chapter1.png
\section1 Chapter 2: Lists
@@ -261,7 +261,7 @@ The image will be \c 40 pixels wide and \c 40 pixels high. We'll base the
height of the delegate on the image's height, so that we don't have any empty
vertical space.
-\image qtquickcontrols2-chattutorial-chapter2.png
+\borderedimage qtquickcontrols2-chattutorial-chapter2.png
\section1 Chapter 3: Navigation
@@ -312,7 +312,7 @@ In chapter 2, we added a ListView below the header. If you run the application
for that chapter, you'll see that the contents of the view can be scrolled over
the top of the header:
-\image qtquickcontrols2-chattutorial-chapter2-listview-header.gif
+\borderedimage qtquickcontrols2-chattutorial-chapter2-listview-header.gif
This is not that nice, especially if the text in the
delegates is long enough that it reaches the text in the header. What we
@@ -332,7 +332,7 @@ usual, comes from the application style. Here it is in action:
\printuntil }
\printuntil }
-\image qtquickcontrols2-chattutorial-chapter3-listview-header.gif
+\borderedimage qtquickcontrols2-chattutorial-chapter3-listview-header.gif
It has no layout of its own, so we center the label within it ourselves.
@@ -433,7 +433,7 @@ After filling the width and height of its parent, we also set some margins on
the view. This gives us a nice alignment with the placeholder text in the
"compose message" field:
-\image qtquickcontrols2-chattutorial-chapter3-view-margins.png
+\borderedimage qtquickcontrols2-chattutorial-chapter3-view-margins.png
Next, we set \l {ListView::}{displayMarginBeginning} and \l
{ListView::}{displayMarginEnd}. These properties ensure that the delegates
@@ -485,7 +485,7 @@ does not go outside of the screen.
Finally, the button is only enabled when there is actually a message to send.
-\image qtquickcontrols2-chattutorial-chapter3.gif
+\borderedimage qtquickcontrols2-chattutorial-chapter3.gif
\section1 Chapter 4: Models
@@ -663,7 +663,7 @@ timestamp that we want to display below every message:
\printuntil }
\printuntil }
-\image qtquickcontrols2-chattutorial-chapter4-message-timestamp.png
+\borderedimage qtquickcontrols2-chattutorial-chapter4-message-timestamp.png
Now that we have a proper model, we can use its \c recipient role in the
expression for the \c sentByMe property.
@@ -685,7 +685,7 @@ smaller value. However, in the image below, the message text is quite long, so
the smaller value (the width of the view) is chosen, ensuring that the text
stops at the opposite edge of the screen:
-\image qtquickcontrols2-chattutorial-chapter4-long-message.png
+\borderedimage qtquickcontrols2-chattutorial-chapter4-long-message.png
In order to display the timestamp for each message that we discussed earlier,
we use a Label. The date and time are formatted with
@@ -701,7 +701,7 @@ First, we call the invokable \c sendMessage() function of the model, which
inserts a new row into the Conversations database table. Then, we clear the
text field to make way for future input.
-\image qtquickcontrols2-chattutorial-chapter4.gif
+\borderedimage qtquickcontrols2-chattutorial-chapter4.gif
\section1 Chapter 5: Styling
@@ -714,12 +714,12 @@ So far, we've just been testing the application with the Default style. If we
run it with the \l {Material Style}, for example, we'll immediately see some issues.
Here is the Contacts page:
-\image qtquickcontrols2-chattutorial-chapter5-contacts-material-test.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-material-test.png
The header text is black on a dark blue background, which is very difficult to
read. The same thing occurs with the Conversations page:
-\image qtquickcontrols2-chattutorial-chapter5-conversations-material-test.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-material-test.png
The solution is to tell the toolbar that it should use the \e "Dark" theme, so
that this information is propagated to its children, allowing them to switch
@@ -789,13 +789,13 @@ We'll make the same changes to \c ConversationPage.qml:
Now both pages look correct:
-\image qtquickcontrols2-chattutorial-chapter5-contacts-material.png
-\image qtquickcontrols2-chattutorial-chapter5-conversations-material.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-material.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-material.png
Let's try out the Universal style:
-\image qtquickcontrols2-chattutorial-chapter5-contacts-universal.png
-\image qtquickcontrols2-chattutorial-chapter5-conversations-universal.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-universal.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-universal.png
No issues there. For a relatively simple application such as this one, there
should be very few adjustments necessary when switching styles.
@@ -814,8 +814,8 @@ Theme=Dark
Once this is done, build and run the application. This is what you should see:
-\image qtquickcontrols2-chattutorial-chapter5-contacts-material-dark.png
-\image qtquickcontrols2-chattutorial-chapter5-conversations-material-dark.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-material-dark.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-material-dark.png
Both pages look fine. Now add an entry for the Universal style:
@@ -826,8 +826,8 @@ Theme=Dark
After building and running the application, you should see these results:
-\image qtquickcontrols2-chattutorial-chapter5-contacts-universal-dark.png
-\image qtquickcontrols2-chattutorial-chapter5-conversations-universal-dark.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-contacts-universal-dark.png
+\borderedimage qtquickcontrols2-chattutorial-chapter5-conversations-universal-dark.png
\section1 Summary