texteditor: use a wrapping Flow for the toolbar

A proper toolbar extension would be better, but this is a workaround
to make the window scalable/resizable until we have a better solution
available.

The font button was moved together with the other formatting
buttons, because it looked a bit awkward when it was wrapping
alone on the second row, and in general it caused things looking
somehow mis-aligned when actions were wrapped on multiple rows.

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

1 files changed, 36 insertions, 35 deletions

diff --git a/examples/quickcontrols2/texteditor/qml/texteditor.qml b/examples/quickcontrols2/texteditor/qml/texteditor.qml
index e2c8ad59..ab56ae2b 100644
--- a/examples/quickcontrols2/texteditor/qml/texteditor.qml
+++ b/examples/quickcontrols2/texteditor/qml/texteditor.qml
@@ -39,7 +39,6 @@
 ****************************************************************************/
 
 import QtQuick 2.8
-import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.1
 import QtQuick.Window 2.0
 import QtQuick.Controls.Material 2.1
@@ -194,20 +193,25 @@ ApplicationWindow {
     header: ToolBar {
         leftPadding: 8
 
-        RowLayout {
-            anchors.fill: parent
-            spacing: 0
+        Flow {
+            id: flow
+            width: parent.width
 
-            ToolButton {
-                id: openButton
-                text: "\uF115"
-                font.family: "fontello"
-                onClicked: openDialog.open()
+            Row {
+                id: fileRow
+                ToolButton {
+                    id: openButton
+                    text: "\uF115"
+                    font.family: "fontello"
+                    onClicked: openDialog.open()
+                }
+                ToolSeparator {
+                    contentItem.visible: fileRow.y === editRow.y
+                }
             }
 
-            ToolSeparator {}
-
             Row {
+                id: editRow
                 ToolButton {
                     id: copyButton
                     text: "\uF0C5"
@@ -232,11 +236,13 @@ ApplicationWindow {
                     enabled: textArea.canPaste
                     onClicked: textArea.paste()
                 }
+                ToolSeparator {
+                    contentItem.visible: editRow.y === formatRow.y
+                }
             }
 
-            ToolSeparator {}
-
             Row {
+                id: formatRow
                 ToolButton {
                     id: boldButton
                     text: "\uE800"
@@ -287,11 +293,26 @@ ApplicationWindow {
                         }
                     }
                 }
+                ToolButton {
+                    id: fontFamilyToolButton
+                    text: qsTr("F")
+                    font.family: document.fontFamily
+                    font.bold: document.bold
+                    font.italic: document.italic
+                    font.underline: document.underline
+                    onClicked: {
+                        fontDialog.currentFont.family = document.fontFamily;
+                        fontDialog.currentFont.pointSize = document.fontSize;
+                        fontDialog.open();
+                    }
+                }
+                ToolSeparator {
+                    contentItem.visible: formatRow.y === alignRow.y
+                }
             }
 
-            ToolSeparator {}
-
             Row {
+                id: alignRow
                 ToolButton {
                     id: alignLeftButton
                     text: "\uE803"
@@ -329,26 +350,6 @@ ApplicationWindow {
                     onClicked: document.alignment = Qt.AlignJustify
                 }
             }
-
-            ToolSeparator {}
-
-            ToolButton {
-                id: fontFamilyToolButton
-                text: qsTr("F")
-                font.family: document.fontFamily
-                font.bold: document.bold
-                font.italic: document.italic
-                font.underline: document.underline
-                onClicked: {
-                    fontDialog.currentFont.family = document.fontFamily;
-                    fontDialog.currentFont.pointSize = document.fontSize;
-                    fontDialog.open();
-                }
-            }
-
-            Item {
-                Layout.fillWidth: true
-            }
         }
     }