aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
diff options
context:
space:
mode:
authorJ-P Nurmi <jpnurmi@qt.io>2016-10-03 11:20:14 +0200
committerJ-P Nurmi <jpnurmi@qt.io>2016-10-03 13:31:32 +0000
commitb13bafec9ca34aa12b4ba9fbc6bf0165957f9b37 (patch)
tree8a16936c25ee40baea19146da2ec9e04b6cdeda2 /examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
parent8aaa72c1035940eb290de9ba16513b2dafe5248c (diff)
parentb6cfb4a1e30598a6176f9bbfdbd1495b37c7f59a (diff)
Merge remote-tracking branch 'origin/5.7' into 5.8
Conflicts: examples/quickcontrols2/gallery/gallery.qrc src/imports/calendar/doc/snippets/qtlabscalendar-calendarmodel.qml src/imports/calendar/doc/snippets/qtlabscalendar-dayofweekrow-layout.qml src/imports/calendar/doc/snippets/qtlabscalendar-dayofweekrow.qml src/imports/calendar/doc/snippets/qtlabscalendar-monthgrid-layout.qml src/imports/calendar/doc/snippets/qtlabscalendar-monthgrid.qml src/imports/calendar/doc/snippets/qtlabscalendar-weeknumbercolumn-layout.qml src/imports/calendar/doc/snippets/qtlabscalendar-weeknumbercolumn.qml src/imports/controls/doc/qtquickcontrols2.qdocconf src/imports/controls/doc/snippets/qtlabscalendar-calendarmodel.qml src/imports/controls/doc/snippets/qtlabscalendar-dayofweekrow-layout.qml src/imports/controls/doc/snippets/qtlabscalendar-dayofweekrow.qml src/imports/controls/doc/snippets/qtlabscalendar-monthgrid-layout.qml src/imports/controls/doc/snippets/qtlabscalendar-monthgrid.qml src/imports/controls/doc/snippets/qtlabscalendar-weeknumbercolumn-layout.qml src/imports/controls/doc/snippets/qtlabscalendar-weeknumbercolumn.qml src/imports/controls/doc/snippets/screenshots/qtlabscalendar-calendarmodel.qml src/imports/controls/doc/snippets/screenshots/qtlabscalendar-dayofweekrow-layout.qml src/imports/controls/doc/snippets/screenshots/qtlabscalendar-dayofweekrow.qml src/imports/controls/doc/snippets/screenshots/qtlabscalendar-monthgrid-layout.qml src/imports/controls/doc/snippets/screenshots/qtlabscalendar-monthgrid.qml src/imports/controls/doc/snippets/screenshots/qtlabscalendar-weeknumbercolumn-layout.qml src/imports/controls/doc/snippets/screenshots/qtlabscalendar-weeknumbercolumn.qml src/imports/controls/qtquickcontrols2plugin.cpp src/quicktemplates2/qquicktooltip.cpp src/quicktemplates2/qquicktooltip_p.h src/quicktemplates2/qquicktumbler.cpp tests/auto/controls/data/tst_spinbox.qml tests/auto/controls/data/tst_tumbler.qml tests/auto/qquickmaterialstyle/data/tst_material.qml Change-Id: I25b7473b47739043b6f768603bece30b18021318
Diffstat (limited to 'examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc')
-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 2450d495..5c80587d 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