Doc: revise the custom menu example

Use a single example for the whole menu. We can now use Actions and the
delegate property to use the styled menu item for the whole menu. The same
structure will be used for the upcoming MenuBar example.

Change-Id: Idbaa38cc536b27a4d64eb9ad72c07936bf160d6e
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

6 files changed, 110 insertions, 55 deletions

diff --git a/src/imports/controls/doc/images/qtquickcontrols2-menu-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-menu-custom.png
index 7121fd0a..b631d871 100644
--- a/src/imports/controls/doc/images/qtquickcontrols2-menu-custom.png
+++ b/src/imports/controls/doc/images/qtquickcontrols2-menu-custom.png
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-menu-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-menu-custom.qml
index 7298b4d3..7caa5a0e 100644
--- a/src/imports/controls/doc/snippets/qtquickcontrols2-menu-custom.qml
+++ b/src/imports/controls/doc/snippets/qtquickcontrols2-menu-custom.qml
@@ -25,36 +25,109 @@
 **
 ****************************************************************************/
 
-//! [file]
-import QtQuick 2.6
-import QtQuick.Controls 2.1
+import QtQuick 2.9
+import QtQuick.Controls 2.3
 
-Item {
+ApplicationWindow {
     id: window
-    width: menu.contentItem.width
-    height: menu.contentItem.height
+    width: menu.width
+    height: menu.height
     visible: true
 
+    Component.onCompleted: menu.popup(menu.itemAt(1))
+
 // Indent it like this so that the indenting in the generated doc is normal.
 Menu {
     id: menu
-    contentItem.parent: window
-    background: Rectangle {
-        implicitWidth: 200
-        implicitHeight: 200
-        color: "#ffffff"
-        border.color: "#353637"
+
+    Action { text: qsTr("Tool Bar"); checkable: true }
+    Action { text: qsTr("Side Bar"); checkable: true; checked: true }
+    Action { text: qsTr("Status Bar"); checkable: true; checked: true }
+
+    MenuSeparator {
+        contentItem: Rectangle {
+            implicitWidth: 200
+            implicitHeight: 1
+            color: "#21be2b"
+        }
     }
 
-    MenuItem {
-        text: qsTr("New...")
+    Menu {
+        title: qsTr("Advanced")
+        // ...
     }
-    MenuItem {
-        text: qsTr("Open...")
+
+    topPadding: 2
+    bottomPadding: 2
+
+    delegate: MenuItem {
+        id: menuItem
+        implicitWidth: 200
+        implicitHeight: 40
+
+        arrow: Canvas {
+            x: parent.width - width
+            implicitWidth: 40
+            implicitHeight: 40
+            visible: menuItem.subMenu
+            onPaint: {
+                var ctx = getContext("2d")
+                ctx.fillStyle = menuItem.highlighted ? "#ffffff" : "#21be2b"
+                ctx.moveTo(15, 15)
+                ctx.lineTo(width - 15, height / 2)
+                ctx.lineTo(15, height - 15)
+                ctx.closePath()
+                ctx.fill()
+            }
+        }
+
+        indicator: Item {
+            implicitWidth: 40
+            implicitHeight: 40
+            Rectangle {
+                width: 26
+                height: 26
+                anchors.centerIn: parent
+                visible: menuItem.checkable
+                border.color: "#21be2b"
+                radius: 3
+                Rectangle {
+                    width: 14
+                    height: 14
+                    anchors.centerIn: parent
+                    visible: menuItem.checked
+                    color: "#21be2b"
+                    radius: 2
+                }
+            }
+        }
+
+        contentItem: Text {
+            leftPadding: menuItem.indicator.width
+            rightPadding: menuItem.arrow.width
+            text: menuItem.text
+            font: menuItem.font
+            opacity: enabled ? 1.0 : 0.3
+            color: menuItem.highlighted ? "#ffffff" : "#21be2b"
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+
+        background: Rectangle {
+            implicitWidth: 200
+            implicitHeight: 40
+            opacity: enabled ? 1 : 0.3
+            color: menuItem.highlighted ? "#21be2b" : "transparent"
+        }
     }
-    MenuItem {
-        text: qsTr("Save")
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+        color: "#ffffff"
+        border.color: "#21be2b"
+        radius: 2
     }
 }
-}
-//! [file]
+} //! [eof]
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
index c2b1e640..46d8a0c6 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
@@ -542,42 +542,24 @@
 
     \section2 Customizing Menu
 
-        Menu consists of a \l {Popup::}{contentItem}.
+        \list
+            \li \l Menu consists of a visual \l {Popup::background}{background} item.
+            \li \l MenuItem consists of four visual items: \l {Control::background}{background},
+                \l {Control::contentItem}{content item}, \l {AbstractButton::}{indicator}, and
+                \l {MenuItem::}{arrow}.
+            \li \l MenuSeparator consists of a visual \l {Control::background}{background} and
+                \l {Control::contentItem}{content item}.
+        \endlist
+
+        \image qtquickcontrols2-menu-custom.png
 
         \quotefromfile qtquickcontrols2-menu-custom.qml
-        \skipto import QtQuick 2.6
-        \printuntil import QtQuick.Controls 2.1
+        \skipto import QtQuick 2.9
+        \printuntil import QtQuick.Controls 2.3
         \skipto Menu
-        \printto contentItem.parent: window
-        \skipline contentItem.parent: window
-        \printuntil text: qsTr("Save")
-        \printuntil }
-        \printuntil }
-
-
-    \section2 Customizing MenuItem
-
-        MenuItem can be customized in the same manner as
-        \l {Customizing Button}{Button}.
+        \printto eof
 
 
-    \section2 Customizing MenuSeparator
-
-        MenuSeparator consists of two visual items: \l {Control::background}{background}
-        and \l {Control::contentItem}{content item}.
-
-        \image qtquickcontrols2-menuseparator-custom.png
-
-        \quotefromfile qtquickcontrols2-menuseparator-custom.qml
-        \skipto import QtQuick 2.6
-        \printuntil import QtQuick.Controls 2.1
-        \skipto Menu
-        \printto contentItem.parent: window
-        \skipline contentItem.parent: window
-        \printuntil text: qsTr("Exit")
-        \printuntil }
-        \printuntil }
-
     \section2 Customizing PageIndicator
 
         PageIndicator consists of a \l {Control::background}{background}, \l {Control::contentItem}{content item}, and \l {PageIndicator::delegate}{delegate}.
diff --git a/src/quicktemplates2/qquickmenu.cpp b/src/quicktemplates2/qquickmenu.cpp
index 8ac7e303..f91498fd 100644
--- a/src/quicktemplates2/qquickmenu.cpp
+++ b/src/quicktemplates2/qquickmenu.cpp
@@ -167,7 +167,7 @@ static const int SUBMENU_DELAY = 225;
     Although \l {MenuItem}{MenuItems} are most commonly used with Menu, it can
     contain any type of item.
 
-    \sa {Customizing Menu}, {Menu Controls}, {Popup Controls}
+    \sa {Customizing Menu}, MenuItem, {Menu Controls}, {Popup Controls}
 */
 
 static const QQuickPopup::ClosePolicy defaultMenuClosePolicy = QQuickPopup::CloseOnEscape | QQuickPopup::CloseOnPressOutside;
diff --git a/src/quicktemplates2/qquickmenuitem.cpp b/src/quicktemplates2/qquickmenuitem.cpp
index c682e13a..3a43dbfa 100644
--- a/src/quicktemplates2/qquickmenuitem.cpp
+++ b/src/quicktemplates2/qquickmenuitem.cpp
@@ -85,7 +85,7 @@ QT_BEGIN_NAMESPACE
     }
     \endcode
 
-    \sa {Customizing MenuItem}, {Menu Controls}
+    \sa {Customizing Menu}, Menu, {Menu Controls}
 */
 
 QQuickMenuItemPrivate::QQuickMenuItemPrivate()
@@ -179,7 +179,7 @@ void QQuickMenuItem::setHighlighted(bool highlighted)
 
     This property holds the sub-menu arrow item.
 
-    \sa {Customizing MenuItem}
+    \sa {Customizing Menu}
 */
 QQuickItem *QQuickMenuItem::arrow() const
 {
diff --git a/src/quicktemplates2/qquickmenuseparator.cpp b/src/quicktemplates2/qquickmenuseparator.cpp
index f80cc775..dee5287a 100644
--- a/src/quicktemplates2/qquickmenuseparator.cpp
+++ b/src/quicktemplates2/qquickmenuseparator.cpp
@@ -63,7 +63,7 @@ QT_BEGIN_NAMESPACE
     \printuntil }
     \printuntil }
 
-    \sa {Customizing MenuSeparator}, {Separator Controls}
+    \sa {Customizing Menu}, Menu, {Separator Controls}
 */
 
 QQuickMenuSeparator::QQuickMenuSeparator(QQuickItem *parent)