texteditor: add touch UI

Task-number: QTBUG-54952 Change-Id: I14fe95608c4393b928edc80fc93ebaa843ce478f Reviewed-by: J-P Nurmi <jpnurmi@qt.io>
author: Mitch Curtis <mitch.curtis@qt.io> 2016-07-26 14:15:31 +0200
committer: Mitch Curtis <mitch.curtis@qt.io> 2016-08-24 08:09:24 +0000
commit: a80f50ab9bba8f6f9d19d1edb2eeafce9dcee799 (patch)
tree: a0af6c8bdc1837e01fc3cd0cedd60077d03d2006 /examples
parent: 0524ddb9489cd9816fadc330f75efc7b40994013 (diff)
9 files changed, 351 insertions, 18 deletions
diff --git a/examples/quickcontrols2/texteditor/+touch/texteditor.html b/examples/quickcontrols2/texteditor/+touch/texteditor.html
new file mode 100644
index 00000000..b5f03f25
--- /dev/null
+++ b/examples/quickcontrols2/texteditor/+touch/texteditor.html
@@ -0,0 +1,19 @@
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="qrichtext" content="1">
+    <title>Text Editor Example</title>
+</head>
+<body>
+<body>
+    <p align="center">
+        <img src="qrc:/images/qt-logo.png" />
+    </p>
+    <h2 align="center">
+        Qt Quick Controls 2
+    </h2>
+    <p align="center">
+        This example demonstrates a modern rich text editor.
+    </p>
+</body>
+</html>
diff --git a/examples/quickcontrols2/texteditor/documenthandler.cpp b/examples/quickcontrols2/texteditor/documenthandler.cpp
index 45c0f4cb..e57946fd 100644
--- a/examples/quickcontrols2/texteditor/documenthandler.cpp
+++ b/examples/quickcontrols2/texteditor/documenthandler.cpp
@@ -52,7 +52,9 @@
 
 #include <QFile>
 #include <QFileInfo>
+#include <QFileSelector>
 #include <QQmlFile>
+#include <QQmlFileSelector>
 #include <QQuickTextDocument>
 #include <QTextCharFormat>
 #include <QTextCodec>
@@ -277,7 +279,14 @@ void DocumentHandler::load(const QUrl &fileUrl)
     if (fileUrl == m_fileUrl)
         return;
 
-    QString fileName = QQmlFile::urlToLocalFileOrQrc(fileUrl);
+    QQmlEngine *engine = qmlEngine(this);
+    if (!engine) {
+        qWarning() << "load() called before DocumentHandler has QQmlEngine";
+        return;
+    }
+
+    const QUrl path = QQmlFileSelector::get(engine)->selector()->select(fileUrl);
+    const QString fileName = QQmlFile::urlToLocalFileOrQrc(path);
     if (QFile::exists(fileName)) {
         QFile file(fileName);
         if (file.open(QFile::ReadOnly)) {
diff --git a/examples/quickcontrols2/texteditor/fonts/fontello.ttf b/examples/quickcontrols2/texteditor/fonts/fontello.ttf
index d2914494..db957652 100644
--- a/examples/quickcontrols2/texteditor/fonts/fontello.ttf
+++ b/examples/quickcontrols2/texteditor/fonts/fontello.ttf
diff --git a/examples/quickcontrols2/texteditor/qml/+touch/texteditor.qml b/examples/quickcontrols2/texteditor/qml/+touch/texteditor.qml
new file mode 100644
index 00000000..a6c339fd
--- /dev/null
+++ b/examples/quickcontrols2/texteditor/qml/+touch/texteditor.qml
@@ -0,0 +1,286 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtGraphicalEffects 1.0
+import QtQuick 2.8
+import QtQuick.Controls 2.1
+import QtQuick.Controls.Material 2.1
+import QtQuick.Layouts 1.3
+import QtQuick.Window 2.0
+
+import io.qt.examples.texteditor 1.0
+
+// TODO:
+// - make designer-friendly
+
+ApplicationWindow {
+    id: window
+    visible: true
+    title: document.fileName + " - Text Editor Example"
+
+    header: ToolBar {
+        leftPadding: 5
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 0
+
+            ToolButton {
+                id: doneEditingButton
+                font.family: "fontello"
+                text: "\uE80A" // icon-ok
+                opacity: !textArea.readOnly ? 1 : 0
+                onClicked: textArea.readOnly = true
+
+                Material.foreground: Material.accent
+            }
+
+            Label {
+                text: qsTr("Text Editor Example")
+                font.bold: true
+                font.pixelSize: 20
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            ToolButton {
+                font.family: "fontello"
+                text: "\uF142" // icon-ellipsis-vert
+                onClicked: menu.open()
+
+                Menu {
+                    id: menu
+
+                    MenuItem {
+                        text: qsTr("About")
+                        onTriggered: aboutDialog.open()
+                    }
+                }
+            }
+        }
+    }
+
+    DocumentHandler {
+        id: document
+        document: textArea.textDocument
+        cursorPosition: textArea.cursorPosition
+        selectionStart: textArea.selectionStart
+        selectionEnd: textArea.selectionEnd
+        // textColor: TODO
+        // TODO: if we don't do this, e.g. the bold button won't be checked
+        // when it should be (the title is bold)
+        Component.onCompleted: document.load("qrc:/texteditor.html")
+        onLoaded: {
+            textArea.text = text
+        }
+        onError: {
+            errorDialog.text = message
+            errorDialog.visible = true
+        }
+    }
+
+    Flickable {
+        id: flickable
+        flickableDirection: Flickable.VerticalFlick
+        anchors.fill: parent
+
+        TextArea.flickable: TextArea {
+            id: textArea
+            textFormat: Qt.RichText
+            wrapMode: TextArea.Wrap
+            readOnly: true
+            persistentSelection: true
+            // Different styles have different padding and background
+            // decorations, but since this editor is almost taking up the
+            // entire window, we don't need them.
+            leftPadding: 6
+            rightPadding: 6
+            topPadding: 0
+            bottomPadding: 0
+            background: null
+
+            onLinkActivated: Qt.openUrlExternally(link)
+        }
+
+        ScrollBar.vertical: ScrollBar {}
+    }
+
+    footer: ToolBar {
+        visible: !textArea.readOnly && textArea.activeFocus
+
+        Material.primary: "#E0E0E0"
+        Material.elevation: 0
+
+        Flickable {
+            anchors.fill: parent
+            contentWidth: rowLayout.implicitWidth
+            contentHeight: rowLayout.height
+            flickableDirection: Qt.Horizontal
+            boundsBehavior: Flickable.StopAtBounds
+
+            RowLayout {
+                id: rowLayout
+                height: parent.height
+
+                RowLayout {
+                    ToolButton {
+                        id: boldButton
+                        text: "\uE800" // icon-bold
+                        font.family: "fontello"
+                        // Don't want to close the virtual keyboard when this is clicked.
+                        focusPolicy: Qt.NoFocus
+                        checkable: true
+                        checked: document.bold
+                        onClicked: document.bold = !document.bold
+                    }
+                    ToolButton {
+                        id: italicButton
+                        text: "\uE801" // icon-italic
+                        font.family: "fontello"
+                        focusPolicy: Qt.NoFocus
+                        checkable: true
+                        checked: document.italic
+                        onClicked: document.italic = !document.italic
+                    }
+                    ToolButton {
+                        id: underlineButton
+                        text: "\uF0CD" // icon-underline
+                        font.family: "fontello"
+                        focusPolicy: Qt.NoFocus
+                        checkable: true
+                        checked: document.underline
+                        onClicked: document.underline = !document.underline
+                    }
+                }
+
+                ToolSeparator {}
+
+                RowLayout {
+                    ToolButton {
+                        id: alignLeftButton
+                        text: "\uE803" // icon-align-left
+                        font.family: "fontello"
+                        focusPolicy: Qt.NoFocus
+                        checkable: true
+                        checked: document.alignment == Qt.AlignLeft
+                        onClicked: document.alignment = Qt.AlignLeft
+                    }
+                    ToolButton {
+                        id: alignCenterButton
+                        text: "\uE804" // icon-align-center
+                        font.family: "fontello"
+                        focusPolicy: Qt.NoFocus
+                        checkable: true
+                        checked: document.alignment == Qt.AlignHCenter
+                        onClicked: document.alignment = Qt.AlignHCenter
+                    }
+                    ToolButton {
+                        id: alignRightButton
+                        text: "\uE805" // icon-align-right
+                        font.family: "fontello"
+                        focusPolicy: Qt.NoFocus
+                        checkable: true
+                        checked: document.alignment == Qt.AlignRight
+                        onClicked: document.alignment = Qt.AlignRight
+                    }
+                    ToolButton {
+                        id: alignJustifyButton
+                        text: "\uE806" // icon-align-justify
+                        font.family: "fontello"
+                        focusPolicy: Qt.NoFocus
+                        checkable: true
+                        checked: document.alignment == Qt.AlignJustify
+                        onClicked: document.alignment = Qt.AlignJustify
+                    }
+                }
+            }
+        }
+    }
+
+    Button {
+        id: editButton
+        font.family: "fontello"
+        text: "\uE809" // icon-pencil
+        width: 48
+        height: width
+        // Don't want to use anchors for the y position, because it will anchor
+        // to the footer, leaving a large vertical gap.
+        y: parent.height - height - 12
+        anchors.right: parent.right
+        anchors.margins: 12
+        visible: textArea.readOnly
+
+        Material.foreground: "white"
+
+        onClicked: {
+            textArea.readOnly = false
+            // Force focus on the text area so the cursor and footer show up.
+            textArea.forceActiveFocus()
+        }
+
+        background: Rectangle {
+            implicitWidth: parent.width
+            implicitHeight: parent.height
+            radius: width / 2
+            color: parent.down ? Qt.darker(Material.accent) : Material.accent
+
+            layer.enabled: editButton.enabled
+            layer.effect: DropShadow {
+                color: "#44000000"
+                verticalOffset: 2
+                samples: 16
+            }
+        }
+    }
+
+    Dialog {
+        id: aboutDialog
+        standardButtons: Dialog.Ok
+        modal: true
+        x: parent.width / 2 - width / 2
+        y: parent.height / 2 - height / 2
+
+        contentItem: Label {
+            text: qsTr("Qt Quick Controls 2 - Text Editor Example")
+        }
+    }
+}
diff --git a/examples/quickcontrols2/texteditor/qml/texteditor.qml b/examples/quickcontrols2/texteditor/qml/texteditor.qml
index 66bea215..6d01ec84 100644
--- a/examples/quickcontrols2/texteditor/qml/texteditor.qml
+++ b/examples/quickcontrols2/texteditor/qml/texteditor.qml
@@ -41,11 +41,13 @@
 import QtQuick 2.8
 import QtQuick.Controls 2.1
 import QtQuick.Window 2.0
-import QtQuick.Controls.Material 2.1
 import Qt.labs.platform 1.0
 
 import io.qt.examples.texteditor 1.0
 
+// TODO:
+// - make designer-friendly
+
 ApplicationWindow {
     id: window
     width: 1024
@@ -202,7 +204,7 @@ ApplicationWindow {
                 id: fileRow
                 ToolButton {
                     id: openButton
-                    text: "\uF115"
+                    text: "\uF115" // icon-folder-open-empty
                     font.family: "fontello"
                     onClicked: openDialog.open()
                 }
@@ -215,7 +217,7 @@ ApplicationWindow {
                 id: editRow
                 ToolButton {
                     id: copyButton
-                    text: "\uF0C5"
+                    text: "\uF0C5" // icon-docs
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     enabled: textArea.selectedText
@@ -223,7 +225,7 @@ ApplicationWindow {
                 }
                 ToolButton {
                     id: cutButton
-                    text: "\uE802"
+                    text: "\uE802" // icon-scissors
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     enabled: textArea.selectedText
@@ -231,7 +233,7 @@ ApplicationWindow {
                 }
                 ToolButton {
                     id: pasteButton
-                    text: "\uF0EA"
+                    text: "\uF0EA" // icon-paste
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     enabled: textArea.canPaste
@@ -246,7 +248,7 @@ ApplicationWindow {
                 id: formatRow
                 ToolButton {
                     id: boldButton
-                    text: "\uE800"
+                    text: "\uE800" // icon-bold
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     checkable: true
@@ -255,7 +257,7 @@ ApplicationWindow {
                 }
                 ToolButton {
                     id: italicButton
-                    text: "\uE801"
+                    text: "\uE801" // icon-italic
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     checkable: true
@@ -264,7 +266,7 @@ ApplicationWindow {
                 }
                 ToolButton {
                     id: underlineButton
-                    text: "\uF0CD"
+                    text: "\uF0CD" // icon-underline
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     checkable: true
@@ -273,7 +275,7 @@ ApplicationWindow {
                 }
                 ToolButton {
                     id: fontFamilyToolButton
-                    text: qsTr("\uE808")
+                    text: qsTr("\uE808") // icon-font
                     font.family: "fontello"
                     font.bold: document.bold
                     font.italic: document.italic
@@ -286,7 +288,7 @@ ApplicationWindow {
                 }
                 ToolButton {
                     id: textColorButton
-                    text: "\uF1FC"
+                    text: "\uF1FC" // icon-brush
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     onClicked: colorDialog.open()
@@ -316,7 +318,7 @@ ApplicationWindow {
                 id: alignRow
                 ToolButton {
                     id: alignLeftButton
-                    text: "\uE803"
+                    text: "\uE803" // icon-align-left
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     checkable: true
@@ -325,7 +327,7 @@ ApplicationWindow {
                 }
                 ToolButton {
                     id: alignCenterButton
-                    text: "\uE804"
+                    text: "\uE804" // icon-align-center
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     checkable: true
@@ -334,7 +336,7 @@ ApplicationWindow {
                 }
                 ToolButton {
                     id: alignRightButton
-                    text: "\uE805"
+                    text: "\uE805" // icon-align-right
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     checkable: true
@@ -343,7 +345,7 @@ ApplicationWindow {
                 }
                 ToolButton {
                     id: alignJustifyButton
-                    text: "\uE806"
+                    text: "\uE806" // icon-align-justify
                     font.family: "fontello"
                     focusPolicy: Qt.TabFocus
                     checkable: true
diff --git a/examples/quickcontrols2/texteditor/qtquickcontrols2.conf b/examples/quickcontrols2/texteditor/qtquickcontrols2.conf
index 496037be..ecac617f 100644
--- a/examples/quickcontrols2/texteditor/qtquickcontrols2.conf
+++ b/examples/quickcontrols2/texteditor/qtquickcontrols2.conf
@@ -2,7 +2,8 @@
 Style=Material
 
 [Material]
-Primary=BlueGrey
+Primary=White
+Foreground=#444444
 Accent=Blue
 Theme=System
 
diff --git a/examples/quickcontrols2/texteditor/texteditor.cpp b/examples/quickcontrols2/texteditor/texteditor.cpp
index 9af4cc3b..7fda4fa9 100644
--- a/examples/quickcontrols2/texteditor/texteditor.cpp
+++ b/examples/quickcontrols2/texteditor/texteditor.cpp
@@ -38,13 +38,17 @@
 **
 ****************************************************************************/
 
+#ifdef QT_WIDGETS_LIB
 #include <QApplication>
+#else
+#include <QGuiApplication>
+#endif
 #include <QFontDatabase>
 #include <QDebug>
 #include <QQmlApplicationEngine>
 #include <QQmlContext>
+#include <QQmlFileSelector>
 #include <QQuickStyle>
-#include <QFileSelector>
 
 #include "documenthandler.h"
 
@@ -54,7 +58,11 @@ int main(int argc, char *argv[])
     QGuiApplication::setOrganizationName("QtProject");
     QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 
+#ifdef QT_WIDGETS_LIB
     QApplication app(argc, argv);
+#else
+    QGuiApplication app(argc, argv);
+#endif
 
     QFontDatabase fontDatabase;
     if (fontDatabase.addApplicationFont(":/fonts/fontello.ttf") == -1)
@@ -63,6 +71,9 @@ int main(int argc, char *argv[])
     qmlRegisterType<DocumentHandler>("io.qt.examples.texteditor", 1, 0, "DocumentHandler");
 
     QQmlApplicationEngine engine;
+#ifdef QT_EXTRA_FILE_SELECTOR
+    QQmlFileSelector::get(&engine)->setExtraSelectors(QStringList() << QT_EXTRA_FILE_SELECTOR);
+#endif
     engine.load(QUrl("qrc:/qml/texteditor.qml"));
     if (engine.rootObjects().isEmpty())
         return -1;
diff --git a/examples/quickcontrols2/texteditor/texteditor.pro b/examples/quickcontrols2/texteditor/texteditor.pro
index ed645ca7..deb24576 100644
--- a/examples/quickcontrols2/texteditor/texteditor.pro
+++ b/examples/quickcontrols2/texteditor/texteditor.pro
@@ -1,6 +1,9 @@
 TEMPLATE = app
 TARGET = texteditor
-QT += quick quickcontrols2 widgets
+QT += quick quickcontrols2
+qtHaveModule(widgets): QT += widgets
+
+cross_compile: DEFINES += QT_EXTRA_FILE_SELECTOR=\\\"touch\\\"
 
 HEADERS += \
     documenthandler.h
diff --git a/examples/quickcontrols2/texteditor/texteditor.qrc b/examples/quickcontrols2/texteditor/texteditor.qrc
index 92f317fa..8f2da843 100644
--- a/examples/quickcontrols2/texteditor/texteditor.qrc
+++ b/examples/quickcontrols2/texteditor/texteditor.qrc
@@ -5,5 +5,7 @@
         <file>fonts/fontello.ttf</file>
         <file>qml/texteditor.qml</file>
         <file>texteditor.html</file>
+        <file>qml/+touch/texteditor.qml</file>
+        <file>+touch/texteditor.html</file>
     </qresource>
 </RCC>
author	Mitch Curtis <mitch.curtis@qt.io>	2016-07-26 14:15:31 +0200
committer	Mitch Curtis <mitch.curtis@qt.io>	2016-08-24 08:09:24 +0000
commit	a80f50ab9bba8f6f9d19d1edb2eeafce9dcee799 (patch)
tree	a0af6c8bdc1837e01fc3cd0cedd60077d03d2006 /examples
parent	0524ddb9489cd9816fadc330f75efc7b40994013 (diff)