Doc: Adding navigation and style fixes. Also rearranging qml elements

5 files changed, 147 insertions, 191 deletions

diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc
index 2c36d12..48eb09f 100644
--- a/doc/src/declarative/elements.qdoc
+++ b/doc/src/declarative/elements.qdoc
@@ -32,169 +32,107 @@
 
 The following table lists the QML elements provided by the \l {QtDeclarative}{Qt Declarative} module.
 
-\table 80%
-\header
-\o \bold {States}
-\o \bold {Animation and Transitions}
-\o \bold {Working with Data}
-\o \bold {Utility}
-\row
-
-\o
-\list
-\o \l State
-\o \l PropertyChanges
-\o \l StateGroup
-\o \l StateChangeScript
-\o \l ParentChange (Item-specific)
-\o \l AnchorChanges (Item-specific)
-\endlist
-
-\o
-\list
-\o \l PropertyAnimation
-\o \l NumberAnimation
-\o \l ColorAnimation
-\o \l RotationAnimation
-\o \l SequentialAnimation
-\o \l ParallelAnimation
-\o \l PauseAnimation
-\o \l ParentAnimation
-\o \l AnchorAnimation
-\o \l SmoothedAnimation
-\o \l Vector3dAnimation
-\o \l PropertyAction
-\o \l ScriptAction
-\o \l Transition
-\o \l SmoothedFollow
-\o \l SpringFollow
-\o \l Behavior
-\endlist
-
-\o
-\list
-\o \l Binding
-\o \l ListModel
-\list
-\o \l ListElement
-\endlist
-\o \l VisualItemModel
-\o \l VisualDataModel
-\o \l Package
-\o \l XmlListModel
-\list
-\o \l XmlRole
-\endlist
-\endlist
-
-\o
-\list
-\o \l Connections
-\o \l Component
-\o \l Timer
-\o \l QtObject
-\o \l WorkerScript
-\endlist
-
-\header
-\o \bold {Basic Visual Items}
-\o \bold {Basic Interaction Items}
-\o \bold {Utility}
-\o \bold {Transforms}
-
-\row
-\o
-\list
-\o \l Item
-\o \l Rectangle
-    \list
-    \o \l Gradient
-        \list
-        \o \l GradientStop
-        \endlist
-    \endlist
-\o \l Image
-\o \l BorderImage
-\o \l AnimatedImage
-\o \l Text
-\o \l TextInput
-    \list
-    \o \l IntValidator
-    \o \l DoubleValidator
-    \o \l RegExpValidator
-    \endlist
-\o \l TextEdit
-\endlist
-
-\o
-\list
-\o \l MouseArea
-\o \l FocusScope
-\o \l Flickable
-\o \l Flipable
-\o \l GestureArea (experimental)
-\endlist
-
-\o
-\list
-\o \l Loader
-\o \l Repeater
-\o \l SystemPalette
-\o \l FontLoader
-\o \l LayoutItem
-\endlist
-
-\o
-\list
-\o \l Scale
-\o \l Rotation
-\o \l Translate
-\endlist
-
-\header
-\o \bold {Views}
-\o \bold {Positioners}
-\o \bold {Effects}
-\o
-
-\row
-\o
-
-\target xmlViews
-\list
-\o \l ListView
-\o \l GridView
-\o \l PathView
-    \list
-    \o \l Path
-        \list
-        \o \l PathLine
-        \o \l PathQuad
-        \o \l PathCubic
-        \o \l PathAttribute
-        \o \l PathPercent
-        \endlist
-    \endlist
-\o \l WebView
-\endlist
-
-\o
-\list
-\o \l Column
-\o \l Row
-\o \l Grid
-\o \l Flow
-\endlist
-
-\o
-\list
-\o \l Particles (experimental)
-    \list
-    \o \l ParticleMotionLinear
-    \o \l ParticleMotionGravity
-    \o \l ParticleMotionWander
-    \endlist
-\endlist
+\table 
+\header \o {2,1} \bold {Basic Visual Items}
+\row \o \l {Item} \o Basic item element inherited by all visual items in QML
+\row \o \l {Rectangle} \o Basic visual rectangle element
+\row \o \l {Gradient} \o Defines a gradient between two or more colors
+\row \o \l {GradientStop} \o Defines a color used in a \l {Gradient}
+\row \o \l {Image} \o Allows the use of bitmaps to a scene
+\row \o \l {BorderImage} (Item-specific) \o Defines an image as a border
+\row \o \l {AnimatedImage} \o For playing animations stored as a series of frames
+\row \o \l {Text} \o Allows the use of formatted text in a scene
+\row \o \l {TextInput} \o Displays an editable line of text
+\row \o \l {IntValidator} \o Validator for integer values
+\row \o \l {DoubleValidator} \o Validator for non-integer values
+\row \o \l {RegExpValidator} \o Validator for string regular expressions
+\row \o \l {TextEdit} \o Displays multiple lines of editable formatted text
+
+\header \o {2,1} \bold {Basic Interaction Items}
+\row \o \l {MouseArea} \o Handles mouse interactions
+\row \o \l {FocusScope} \o For keyboard focus handling 
+\row \o \l {Flickable} \o Provides a surface that can be "flicked"  
+\row \o \l {Flipable} \o Provides a surface that produces flipping effects
+\row \o \l {GestureArea} (experimental) \o Enables simple gesture handling
+ 
+\header \o {2,1} \bold {States}
+\row \o \l {State} \o Defines sets of configurations of objects and properties
+\row \o \l {PropertyChanges} \o Describes property changes within a state
+\row \o \l {StateGroup} \o Contains a set of states and state transitions
+\row \o \l {StateChangeScript} \o Allows script binding in a state
+\row \o \l {ParentChange} (Item-specific) \o Re-parent an Item in a state change
+\row \o \l {AnchorChanges} \o Change the anchors of an item in a state
+
+\header \o {2,1} \bold {Animation and Transitions}
+\row \o \l {Behavior} \o Specifies a default animation for property changes
+\row \o \l {SequentialAnimation} \o Runs animations sequentially
+\row \o \l {ParallelAnimation} \o Runs animations in parallel
+\row \o \l {PropertyAnimation} \o Animates property changes
+\row \o \l {NumberAnimation} \o Animates properties of type qreal
+\row \o \l {Vector3dAnimation} \o Animates properties of type QVector3d
+\row \o \l {ColorAnimation} \o Animates color changes
+\row \o \l {RotationAnimation} \o Animates rotations
+\row \o \l {ParentAnimation} \o Animates parent changes
+\row \o \l {AnchorAnimation} \o Animates anchor changes
+\row \o \l {PauseAnimation} \o Pauses an animation 
+\row \o \l {SmoothedAnimation} \o Allows a property to smoothly track a value
+\row \o \l {PropertyAction} \o Sets immediate property changes during animation
+\row \o \l {ScriptAction} \o Runs scripts during an animation
+\row \o \l {Transition} \o Animates transitions during state changes
+\row \o \l {SpringFollow} \o Allows a property to follow value changes
+\row \o \l {SmoothedFollow} \o Allows animation to smoothly follow value changes
+
+\header \o {2,1} \bold {Working with Data}
+\row \o \l {Binding} \o Binds any value to any property
+\row \o \l {ListModel} \o Defines a list of data
+\row \o \l {ListElement} \o Defines a data item in a \l {ListModel}
+\row \o \l {VisualItemModel} \o Contains items that already defines its own visual delegate
+\row \o \l {VisualDataModel} \o Encapsulates a model and a delegate
+\row \o \l {Package} \o Collection that enables sharing of items within different views
+\row \o \l {XmlListModel} \o Specifies a model using XPath expressions 
+\row \o \l {XmlRole}  \o Specifies a role for an \l {XmlListModel}
+
+\header \o {2,1} \bold {Views}
+\row \o \l {ListView} \o Provides a list visualization of a model
+\row \o \l {GridView} \o Provides a grid visualization of a model
+\row \o \l {PathView} \o Visualizes a model's contents along a path
+\row \o \l {Path} \o Defines a path used by \l {PathView}
+\row \o \l {PathLine}  \o Defines a line in \l {Path}
+\row \o \l {PathQuad}  \o Defines a quadratic Bezier curve in a \l {Path}
+\row \o \l {PathCubic}  \o Defines a cubic Bezier curve in a \l {Path}
+\row \o \l {PathAttribute}  \o Allows the setting of attributes along a \l {Path}
+\row \o \l {PathPercent}  \o Modifies the item distribution along a \l {Path}
+\row \o \l {WebView} \o Allows the addition of web content to a canvas
+
+\header \o {2,1} \bold {Positioners}
+\row \o \l {Column} \o Arranges its children vertically
+\row \o \l {Row} \o Arranges its children horizontally
+\row \o \l {Grid} \o Positions its children in a grid
+\row \o \l {Flow} \o Positions its children with wrapping support
+
+\header \o {2,1} \bold {Utility}
+\row \o \l {Connections} \o Explicitly connects signals and signal handlers
+\row \o \l {Component} \o Encapsulate QML items as a component
+\row \o \l {Timer} \o Provides timed triggers 
+\row \o \l {QtObject} \o Basic element containing only the objectName property
+\row \o \l {WorkerScript} \o Enables the use of threads in QML
+\row \o \l {Loader} \o Controls the loading of items or components
+\row \o \l {Repeater} \o Uses a model to create multiples of components
+\row \o \l {SystemPalette} \o Provides access to the Qt palettes
+\row \o \l {FontLoader} \o Loads fonts by name or URL
+\row \o \l {LayoutItem} \o Allows declarative UI elements inside Qt's Graphics View layouts 
+
+\header \o {2,1} \bold {Transforms}
+\row \o \l {Scale} \o Assigns item scaling behaviors
+\row \o \l {Rotation} \o Assigns item rotation behaviors
+\row \o \l {Translate} \o Assigns item translation behaviors
+
+\header \o {2,1} \bold {Effects}
+\row \o \l {Particles} (experimental) \o Generates and animates particles
+\row \o \l {ParticleMotionLinear} \o Adds linear motion behavior to \l {Particles}
+\row \o \l {ParticleMotionGravity} \o Adds gravitational motion to \l {Particles}
+\row \o \l {ParticleMotionWander} \o Adds varied motions to \l {Particles}
 \endtable
 
+
 */
diff --git a/doc/src/template/images/bullet_up.png b/doc/src/template/images/bullet_up.png
index 285e741..7de2f06 100644
--- a/doc/src/template/images/bullet_up.png
+++ b/doc/src/template/images/bullet_up.png
diff --git a/doc/src/template/style/style.css b/doc/src/template/style/style.css
index 78a21f6..f1a63a9 100755
--- a/doc/src/template/style/style.css
+++ b/doc/src/template/style/style.css
@@ -490,11 +490,20 @@
     }
     .wrap .content h2
     {
-        font: 600 16px/1.2 Arial;
+    
+	border-bottom:1px solid #DDDDDD;
+	font:600 16px/1.2 Arial;
+	margin-top:15px;
+	width:100%;
+		
     }
     .wrap .content h3
     {
         font: 600 14px/1.2 Arial;
+		/*border-bottom:1px solid #DDDDDD;*/
+		font:600 16px/1.2 Arial;
+		margin-top:15px;
+		width:100%;		
     }
     .wrap .content p
     {
@@ -755,7 +764,7 @@
         font-size: 11px;
         /*min-width: 395px;*/
         margin-bottom: 25px;
-        display: inline-block;
+     /*   display: inline-block;*/
     }
     thead
     {
@@ -1219,7 +1228,15 @@ pre.highlightedCode {
 	list-style-type:decimal;
 
 	}
-
+	.navTop{ 
+	float:right;
+	padding-right:5px;
+	padding-top:15px;
+	}
+	
+	.wrap .content .toc h3{
+	border-bottom:none;
+	}
 /* end of screen media */
 
 /* start of print media */
diff --git a/tools/qdoc3/htmlgenerator.cpp b/tools/qdoc3/htmlgenerator.cpp
index 044c458..9f745c5 100644
--- a/tools/qdoc3/htmlgenerator.cpp
+++ b/tools/qdoc3/htmlgenerator.cpp
@@ -443,7 +443,7 @@ int HtmlGenerator::generateAtom(const Atom *atom,
 {
     int skipAhead = 0;
     static bool in_para = false;
-
+	
     switch (atom->type()) {
     case Atom::AbstractLeft:
         break;
@@ -1066,11 +1066,11 @@ int HtmlGenerator::generateAtom(const Atom *atom,
                 }
                 sectionNumber.last() = QString::number(sectionNumber.last().toInt() + 1);
             }
-            out() << "<a name=\"sec-" << sectionNumber.join("-") << "\"></a>\n";
+            out() << "<a name=\"sec-" << sectionNumber.join("-") << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
         }
 #else
         out() << "<a name=\"" << Doc::canonicalTitle(Text::sectionHeading(atom).toString())
-              << "\"></a>\n";
+              << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
 #endif
         break;
     case Atom::SectionRight:
@@ -1339,19 +1339,19 @@ void HtmlGenerator::generateClassLikeNode(const InnerNode *inner,
         }
         else {
             if (!s->members.isEmpty()) {
-                out() << "<hr />\n";
+               // out() << "<hr />\n";
                 out() << "<a name=\""
                       << registerRef((*s).name.toLower())
-                      << "\"></a>\n";
+                      << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
                 out() << "<h2>" << protectEnc((*s).name) << "</h2>\n";
                 generateSection(s->members, inner, marker, CodeMarker::Summary);
             }
             if (!s->reimpMembers.isEmpty()) {
                 QString name = QString("Reimplemented ") + (*s).name;
-                out() << "<hr />\n";
+              //  out() << "<hr />\n";
                 out() << "<a name=\""
                       << registerRef(name.toLower())
-                      << "\"></a>\n";
+                      << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
                 out() << "<h2>" << protectEnc(name) << "</h2>\n";
                 generateSection(s->reimpMembers, inner, marker, CodeMarker::Summary);
             }
@@ -1378,11 +1378,11 @@ void HtmlGenerator::generateClassLikeNode(const InnerNode *inner,
         out() << "</ul>\n";
     }
 
-    out() << "<a name=\"" << registerRef("details") << "\"></a>\n";
+    out() << "<a name=\"" << registerRef("details") << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
 
     if (!inner->doc().isEmpty()) {
-        out() << "<hr />\n"
-              << "<div class=\"descr\"/>\n" // QTBUG-9504
+        //out() << "<hr />\n"
+        out() << "<div class=\"descr\"/>\n" // QTBUG-9504
               << "<h2>" << "Detailed Description" << "</h2>\n";
         generateBody(inner, marker);
         out() << "</div>\n"; // QTBUG-9504
@@ -1392,7 +1392,7 @@ void HtmlGenerator::generateClassLikeNode(const InnerNode *inner,
     sections = marker->sections(inner, CodeMarker::Detailed, CodeMarker::Okay);
     s = sections.begin();
     while (s != sections.end()) {
-        out() << "<hr />\n";
+        //out() << "<hr />\n";
         if (!(*s).divClass.isEmpty())
             out() << "<div class=\"" << (*s).divClass << "\"/>\n"; // QTBUG-9504
         out() << "<h2>" << protectEnc((*s).name) << "</h2>\n";
@@ -1518,12 +1518,12 @@ void HtmlGenerator::generateFakeNode(const FakeNode *fake, CodeMarker *marker)
         generateStatus(fake, marker);
 
         if (moduleNamespaceMap.contains(fake->name())) {
-            out() << "<a name=\"" << registerRef("namespaces") << "\"></a>\n";
+            out() << "<a name=\"" << registerRef("namespaces") << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
             out() << "<h2>Namespaces</h2>\n";
             generateAnnotatedList(fake, marker, moduleNamespaceMap[fake->name()]);
         }
         if (moduleClassMap.contains(fake->name())) {
-            out() << "<a name=\"" << registerRef("classes") << "\"></a>\n";
+            out() << "<a name=\"" << registerRef("classes") << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
             out() << "<h2>Classes</h2>\n";
             generateAnnotatedList(fake, marker, moduleClassMap[fake->name()]);
         }
@@ -1586,19 +1586,19 @@ void HtmlGenerator::generateFakeNode(const FakeNode *fake, CodeMarker *marker)
         sections = marker->qmlSections(qml_cn,CodeMarker::Summary);
         s = sections.begin();
         while (s != sections.end()) {
-            out() << "<a name=\"" << registerRef((*s).name) << "\"></a>\n";
+            out() << "<a name=\"" << registerRef((*s).name) << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
             out() << "<h2>" << protectEnc((*s).name) << "</h2>\n";
             generateQmlSummary(*s,fake,marker);
             ++s;
         }
 
-        out() << "<a name=\"" << registerRef("details") << "\"></a>\n";
+        out() << "<a name=\"" << registerRef("details") << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
         out() << "<h2>" << "Detailed Description" << "</h2>\n";
         generateBody(fake, marker);
         if (cn)
             generateQmlText(cn->doc().body(), cn, marker, fake->name());
         generateAlsoList(fake, marker);
-        out() << "<hr />\n";
+        //out() << "<hr />\n";
 
         sections = marker->qmlSections(qml_cn,CodeMarker::Detailed);
         s = sections.begin();
@@ -1622,7 +1622,7 @@ void HtmlGenerator::generateFakeNode(const FakeNode *fake, CodeMarker *marker)
     sections = marker->sections(fake, CodeMarker::Summary, CodeMarker::Okay);
     s = sections.begin();
     while (s != sections.end()) {
-        out() << "<a name=\"" << registerRef((*s).name) << "\"></a>\n";
+        out() << "<a name=\"" << registerRef((*s).name) << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
         out() << "<h2>" << protectEnc((*s).name) << "</h2>\n";
         generateSectionList(*s, fake, marker, CodeMarker::Summary);
         ++s;
@@ -1630,7 +1630,7 @@ void HtmlGenerator::generateFakeNode(const FakeNode *fake, CodeMarker *marker)
 
     Text brief = fake->doc().briefText();
     if (fake->subType() == Node::Module && !brief.isEmpty()) {
-        out() << "<a name=\"" << registerRef("details") << "\"></a>\n";
+        out() << "<a name=\"" << registerRef("details") << "\"></a><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
         out() << "<div class=\"descr\"/>\n"; // QTBUG-9504
         out() << "<h2>" << "Detailed Description" << "</h2>\n";
     }
@@ -1655,7 +1655,7 @@ void HtmlGenerator::generateFakeNode(const FakeNode *fake, CodeMarker *marker)
     sections = marker->sections(fake, CodeMarker::Detailed, CodeMarker::Okay);
     s = sections.begin();
     while (s != sections.end()) {
-        out() << "<hr />\n";
+        //out() << "<hr />\n";
         out() << "<h2>" << protectEnc((*s).name) << "</h2>\n";
 
         NodeList::ConstIterator m = (*s).members.begin();
@@ -1801,9 +1801,10 @@ void HtmlGenerator::generateHeader(const QString& title,
 
     if (offlineDocs)
 	{
-		out() << "  <link rel=\"stylesheet\" type=\"text/css\" href=\"style/OfflineStyle.css\" />";
+		out() << "  <link rel=\"stylesheet\" type=\"text/css\" href=\"style/style.css\" />";
 		out() << "</head>\n";
 		out() << "<body class=\"offline narrow\" >\n"; // narrow mainly for Creator
+		out() << "  <script src=\"scripts/functions.js\" type=\"text/javascript\"></script>\n";
 	}	
     else
 		{
@@ -2039,7 +2040,7 @@ void HtmlGenerator::generateTableOfContents(const Node *node,
     inLink = true;
 
     out() << "<div class=\"toc\">\n";
-    out() << "<h3>Contents</h3>\n";
+    out() << "<h3><a name=\"toc\">Contents</a></h3>\n";
     sectionNumber.append("1");
     out() << "<ul>\n";
 
@@ -2252,7 +2253,7 @@ QString HtmlGenerator::generateLowStatusMemberFile(const InnerNode *inner,
 
     sections = marker->sections(inner, CodeMarker::Detailed, status);
     for (i = 0; i < sections.size(); ++i) {
-        out() << "<hr />\n";
+        //out() << "<hr />\n";
         out() << "<h2>" << protectEnc(sections.at(i).name) << "</h2>\n";
 
         NodeList::ConstIterator m = sections.at(i).members.begin();
@@ -2621,7 +2622,7 @@ void HtmlGenerator::generateLegaleseList(const Node *relative,
     QMap<Text, const Node *>::ConstIterator it = legaleseTexts.begin();
     while (it != legaleseTexts.end()) {
         Text text = it.key();
-        out() << "<hr />\n";
+        //out() << "<hr />\n";
         generateText(text, relative, marker);
         out() << "<ul>\n";
         do {
@@ -3828,7 +3829,7 @@ void HtmlGenerator::generateDetailedMember(const Node *node,
         out() << "<h3 class=\"fn\">";
         out() << "<a name=\"" + refForNode(node) + "\"></a>";
         generateSynopsis(node, relative, marker, CodeMarker::Detailed);
-        out() << "</h3>\n";
+        out() << "</h3><div class=\"navTop\"><a href=\"#toc\"><img src=\"./images/bullet_up.png\"></a></div>\n";
     }
 
     generateStatus(node, marker);
diff --git a/tools/qdoc3/test/qt-html-templates.qdocconf b/tools/qdoc3/test/qt-html-templates.qdocconf
index 7ad78bd..e888bc4 100644
--- a/tools/qdoc3/test/qt-html-templates.qdocconf
+++ b/tools/qdoc3/test/qt-html-templates.qdocconf
@@ -49,6 +49,7 @@ HTML.postheader         = " <div class=\"header\" id=\"qtdocheader\">\n" \
 			"			   <li><a href=\"declarativeui.html\">Device UI's &amp; Qt Quick</a></li> \n" \
 			"			   <li><a href=\"qt-gui-concepts.html\">Desktop UI components</a></li> \n" \
 			"			   <li><a href=\"platform-specific.html\">Platform-specific info</a></li> \n" \
+			"			   <li><a href=\"best-practices.html\">How-To's and Best Practices</a></li> \n" \
 			"			 </ul> \n" \
 			"		</li> \n" \
 			"		 <li><a href=\"#\">Examples</a> \n" \
@@ -57,7 +58,6 @@ HTML.postheader         = " <div class=\"header\" id=\"qtdocheader\">\n" \
 			"				 <li><a href=\"tutorials.html\">Tutorials</a></li> \n" \
 			"				 <li><a href=\"demos.html\">Demos</a></li> \n" \
 			"				 <li><a href=\"qdeclarativeexamples.html\">QML Examples</a></li> \n" \
-			"				 <li><a href=\"qdeclarativeexamples.html#Demos\">QML Demos</a></li> \n" \
 			"			 </ul> \n" \
 			"		 </li> \n" \
 			" </ul> \n" \