diff options
author | Michal Klocek <michal.klocek@theqtcompany.com> | 2016-06-13 12:38:51 +0200 |
---|---|---|
committer | Michal Klocek <michal.klocek@qt.io> | 2016-08-18 09:23:03 +0000 |
commit | baeb20b2e720f5c683cf3810116d827e1561c4b2 (patch) | |
tree | abaf7c153e369c2043b46621ab78fbe42ce74421 /src/webengine/ui2 | |
parent | 6534b09073791398bad99863821740e986915bff (diff) |
Add Qt Quick Controls 2 support for dialogs
QtQuickControls1 does not handle embedded
platforms too well. In case of eglfs platform
we crash badly - only one window is supported.
QtQuickControls2 on the other hand lacks the native
look on desktop. Therefore on desktop platforms
keep using QtQuickControls1, and on eglfs use
QtQuickControls2.
QtQuick.Dialogs are not implemented for QtQuickControls2,
moreover required authentication dialog and prompt
dialog are neither implemented in QtQuickControls1.
As a workaround make new dialogs to give
consistent look and feel.
Replace close() with reject() signal in java script
prompt dialog to unify handling between qqc1 and qqc2
[ChangeLog][QtWebEngine][General] Qt WebEngine (QML)
now optionally uses Qt Quick 2 Controls to show standard dialogs.
Task-number: QTBUG-53467
Task-number: QTBUG-51177
Change-Id: I42f9506357bbb82d4f04465f30a18c8013439e25
Reviewed-by: Kai Koehne <kai.koehne@qt.io>
Diffstat (limited to 'src/webengine/ui2')
-rw-r--r-- | src/webengine/ui2/AlertDialog.qml | 98 | ||||
-rw-r--r-- | src/webengine/ui2/AuthenticationDialog.qml | 135 | ||||
-rw-r--r-- | src/webengine/ui2/ConfirmDialog.qml | 111 | ||||
-rw-r--r-- | src/webengine/ui2/Menu.qml | 57 | ||||
-rw-r--r-- | src/webengine/ui2/MenuItem.qml | 44 | ||||
-rw-r--r-- | src/webengine/ui2/MenuSeparator.qml | 42 | ||||
-rw-r--r-- | src/webengine/ui2/PromptDialog.qml | 114 | ||||
-rw-r--r-- | src/webengine/ui2/information.png | bin | 0 -> 254 bytes | |||
-rw-r--r-- | src/webengine/ui2/qmldir | 2 | ||||
-rw-r--r-- | src/webengine/ui2/question.png | bin | 0 -> 257 bytes | |||
-rw-r--r-- | src/webengine/ui2/ui2.pro | 17 |
11 files changed, 620 insertions, 0 deletions
diff --git a/src/webengine/ui2/AlertDialog.qml b/src/webengine/ui2/AlertDialog.qml new file mode 100644 index 000000000..4f63c5b70 --- /dev/null +++ b/src/webengine/ui2/AlertDialog.qml @@ -0,0 +1,98 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtWebEngine module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl-3.0.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or (at your option) the GNU General +** Public license version 3 or any later version approved by the KDE Free +** Qt Foundation. The licenses are as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-2.0.html and +** https://www.gnu.org/licenses/gpl-3.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.5 +import QtQuick.Controls 2.0 as Controls +import QtQuick.Dialogs 1.2 +import QtQuick.Layouts 1.0 + +Dialog { + property alias text: message.text + property bool handled: false + signal accepted() + signal rejected() + title: qsTr("Alert Dialog") + modality: Qt.NonModal + + //handle the case where users simply closes the dialog + onVisibilityChanged: { + if (visible == false && handled == false) { + handled = true; + rejected(); + } else { + handled = false; + } + } + + function acceptDialog() { + accepted(); + handled = true; + close(); + } + + contentItem: ColumnLayout { + id: rootLayout + anchors.fill: parent + anchors.margins: 4 + property int minimumWidth: rootLayout.implicitWidth + rootLayout.doubleMargins + property int minimumHeight: rootLayout.implicitHeight + rootLayout.doubleMargins + property int doubleMargins: anchors.margins * 2 + SystemPalette { id: palette; colorGroup: SystemPalette.Active } + RowLayout { + Layout.alignment: Qt.AlignRight + spacing: 8 + Image { + source: "information.png" + } + Text { + id: message + Layout.fillWidth: true + color: palette.windowText + } + } + Item { + Layout.fillHeight: true + } + Controls.Button { + Layout.alignment: Qt.AlignHCenter + text: qsTr("OK") + onClicked: acceptDialog() + } + } +} diff --git a/src/webengine/ui2/AuthenticationDialog.qml b/src/webengine/ui2/AuthenticationDialog.qml new file mode 100644 index 000000000..52fcce3f1 --- /dev/null +++ b/src/webengine/ui2/AuthenticationDialog.qml @@ -0,0 +1,135 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtWebEngine module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl-3.0.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or (at your option) the GNU General +** Public license version 3 or any later version approved by the KDE Free +** Qt Foundation. The licenses are as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-2.0.html and +** https://www.gnu.org/licenses/gpl-3.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.5 +import QtQuick.Controls 2.0 as Controls +import QtQuick.Dialogs 1.2 +import QtQuick.Layouts 1.0 + +Dialog { + property alias text: message.text + property bool handled: false + signal accepted(string user, string password) + signal rejected() + title: qsTr("Authentication Required") + modality: Qt.NonModal + + //handle the case where users simply closes the dialog + onVisibilityChanged: { + if (visible == false && handled == false) { + handled = true; + rejected(); + } else { + handled = false; + } + } + + function acceptDialog() { + accepted(userField.text, passwordField.text); + handled = true; + close(); + } + + function rejectDialog() { + rejected(); + handled = true; + close(); + } + + contentItem: ColumnLayout { + id: rootLayout + anchors.fill: parent + anchors.margins: 4 + property int minimumWidth: rootLayout.implicitWidth + rootLayout.doubleMargins + property int minimumHeight: rootLayout.implicitHeight + rootLayout.doubleMargins + + property int doubleMargins: anchors.margins * 2 + + SystemPalette { id: palette; colorGroup: SystemPalette.Active } + Text { + id: message + color: palette.windowText + } + GridLayout { + columns: 2 + Controls.Label { + text: qsTr("Username:") + color: palette.windowText + } + Controls.TextField { + id: userField + focus: true + Layout.fillWidth: true + onAccepted: { + if (userField.text && passwordField.text) + acceptDialog(); + } + } + Controls.Label { + text: qsTr("Password:") + color: palette.windowText + } + Controls.TextField { + id: passwordField + Layout.fillWidth: true + echoMode: TextInput.Password + onAccepted: { + if (userField.text && passwordField.text) + acceptDialog(); + } + } + } + Item { + Layout.fillHeight: true + } + RowLayout { + Layout.alignment: Qt.AlignRight + spacing: 8 + Controls.Button { + id: cancelButton + text: qsTr("Cancel") + onClicked: rejectDialog() + } + Controls.Button { + text: qsTr("Log In") + onClicked: acceptDialog() + } + } + } +} diff --git a/src/webengine/ui2/ConfirmDialog.qml b/src/webengine/ui2/ConfirmDialog.qml new file mode 100644 index 000000000..0649d3654 --- /dev/null +++ b/src/webengine/ui2/ConfirmDialog.qml @@ -0,0 +1,111 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtWebEngine module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl-3.0.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or (at your option) the GNU General +** Public license version 3 or any later version approved by the KDE Free +** Qt Foundation. The licenses are as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-2.0.html and +** https://www.gnu.org/licenses/gpl-3.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.5 +import QtQuick.Controls 2.0 as Controls +import QtQuick.Dialogs 1.2 +import QtQuick.Layouts 1.0 + +Dialog { + property alias text: message.text + property bool handled: false + signal accepted() + signal rejected() + title: qsTr("Alert Dialog") + modality: Qt.NonModal + + //handle the case where users simply closes the dialog + onVisibilityChanged: { + if (visible == false && handled == false) { + handled = true; + rejected(); + } else { + handled = false; + } + } + + function acceptDialog() { + accepted(); + handled = true; + close(); + } + + function rejectDialog() { + rejected(); + handled = true; + close(); + } + + contentItem: ColumnLayout { + id: rootLayout + anchors.fill: parent + anchors.margins: 4 + property int minimumWidth: rootLayout.implicitWidth + rootLayout.doubleMargins + property int minimumHeight: rootLayout.implicitHeight + rootLayout.doubleMargins + property int doubleMargins: anchors.margins * 2 + SystemPalette { id: palette; colorGroup: SystemPalette.Active } + RowLayout { + Layout.alignment: Qt.AlignRight + spacing: 8 + Image { + source: "question.png" + } + Text { + id: message + Layout.fillWidth: true + color: palette.windowText + } + } + Item { + Layout.fillHeight: true + } + RowLayout { + Layout.alignment: Qt.AlignRight + spacing: 8 + Controls.Button { + text: qsTr("OK") + onClicked: acceptDialog() + } + Controls.Button { + text: qsTr("Cancel") + onClicked: rejectDialog() + } + } + } +} diff --git a/src/webengine/ui2/Menu.qml b/src/webengine/ui2/Menu.qml new file mode 100644 index 000000000..0e7b869f5 --- /dev/null +++ b/src/webengine/ui2/Menu.qml @@ -0,0 +1,57 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtWebEngine module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl-3.0.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or (at your option) the GNU General +** Public license version 3 or any later version approved by the KDE Free +** Qt Foundation. The licenses are as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-2.0.html and +** https://www.gnu.org/licenses/gpl-3.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.5 +import QtQuick.Controls 2.0 as Controls + +Controls.Menu { + id: menu + signal done() + + // Use private API for now + onAboutToHide: doneTimer.start() + + // WORKAROUND On Mac the Menu may be destroyed before the MenuItem + // is actually triggered (see qtbase commit 08cc9b9991ae9ab51) + Timer { + id: doneTimer + interval: 100 + onTriggered: menu.done() + } +} diff --git a/src/webengine/ui2/MenuItem.qml b/src/webengine/ui2/MenuItem.qml new file mode 100644 index 000000000..9bf8aac5e --- /dev/null +++ b/src/webengine/ui2/MenuItem.qml @@ -0,0 +1,44 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtWebEngine module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl-3.0.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or (at your option) the GNU General +** Public license version 3 or any later version approved by the KDE Free +** Qt Foundation. The licenses are as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-2.0.html and +** https://www.gnu.org/licenses/gpl-3.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.5 +import QtQuick.Controls 2.0 as Controls + +Controls.MenuItem { } + diff --git a/src/webengine/ui2/MenuSeparator.qml b/src/webengine/ui2/MenuSeparator.qml new file mode 100644 index 000000000..0c664084a --- /dev/null +++ b/src/webengine/ui2/MenuSeparator.qml @@ -0,0 +1,42 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtWebEngine module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl-3.0.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or (at your option) the GNU General +** Public license version 3 or any later version approved by the KDE Free +** Qt Foundation. The licenses are as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-2.0.html and +** https://www.gnu.org/licenses/gpl-3.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.5 + +Item { id: dummy } diff --git a/src/webengine/ui2/PromptDialog.qml b/src/webengine/ui2/PromptDialog.qml new file mode 100644 index 000000000..880213e36 --- /dev/null +++ b/src/webengine/ui2/PromptDialog.qml @@ -0,0 +1,114 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtWebEngine module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl-3.0.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or (at your option) the GNU General +** Public license version 3 or any later version approved by the KDE Free +** Qt Foundation. The licenses are as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-2.0.html and +** https://www.gnu.org/licenses/gpl-3.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.5 +import QtQuick.Controls 2.0 as Controls +import QtQuick.Layouts 1.0 +import QtQuick.Dialogs 1.2 + +Dialog { + property alias text: message.text + property alias prompt: field.text + property bool handled: false + signal input(string text) + signal accepted() + signal rejected() + title: qsTr("Prompt Dialog") + modality: Qt.NonModal + + //handle the case where users simply closes the dialog + onVisibilityChanged: { + if (visible == false && handled == false) { + handled = true; + rejected(); + } else { + handled = false; + } + } + + function acceptDialog() { + input(field.text); + accepted(); + handled = true; + close(); + } + + function rejectDialog() { + rejected(); + handled = true; + close(); + } + + contentItem: ColumnLayout { + id: rootLayout + anchors.fill: parent + anchors.margins: 4 + property int minimumWidth: rootLayout.implicitWidth + rootLayout.doubleMargins + property int minimumHeight: rootLayout.implicitHeight + rootLayout.doubleMargins + property int doubleMargins: anchors.margins * 2 + SystemPalette { id: palette; colorGroup: SystemPalette.Active } + Text { + id: message + Layout.fillWidth: true + color: palette.windowText + } + Controls.TextField { + id:field + focus: true + Layout.fillWidth: true + onAccepted: acceptDialog() + } + Item { + Layout.fillHeight: true + } + RowLayout { + Layout.alignment: Qt.AlignRight + spacing: 8 + Controls.Button { + text: qsTr("OK") + onClicked: acceptDialog() + } + Controls.Button { + text: qsTr("Cancel") + onClicked: rejectDialog() + } + } + } + +} diff --git a/src/webengine/ui2/information.png b/src/webengine/ui2/information.png Binary files differnew file mode 100644 index 000000000..0a2eb87d1 --- /dev/null +++ b/src/webengine/ui2/information.png diff --git a/src/webengine/ui2/qmldir b/src/webengine/ui2/qmldir new file mode 100644 index 000000000..8ab0d3671 --- /dev/null +++ b/src/webengine/ui2/qmldir @@ -0,0 +1,2 @@ +# Internal module +module QtWebEngine/Controls2Delegates diff --git a/src/webengine/ui2/question.png b/src/webengine/ui2/question.png Binary files differnew file mode 100644 index 000000000..2dd92fd79 --- /dev/null +++ b/src/webengine/ui2/question.png diff --git a/src/webengine/ui2/ui2.pro b/src/webengine/ui2/ui2.pro new file mode 100644 index 000000000..612999929 --- /dev/null +++ b/src/webengine/ui2/ui2.pro @@ -0,0 +1,17 @@ +TARGETPATH = QtWebEngine/Controls2Delegates + +QML_FILES += \ + # Authentication Dialog + AuthenticationDialog.qml \ + # JS Dialogs + AlertDialog.qml \ + ConfirmDialog.qml \ + PromptDialog.qml \ + # Menus. Based on Qt Quick Controls + Menu.qml \ + MenuItem.qml \ + MenuSeparator.qml \ + information.png \ + question.png + +load(qml_module) |