From 320a7a8522ccff5155cbb9563428b26071266ebc Mon Sep 17 00:00:00 2001 From: Szabolcs David Date: Fri, 27 Sep 2019 17:43:04 +0200 Subject: Add example for QQuickWebEngineTooltipRequest Implement an example usage in customdialogs application and extend the documentation. Change-Id: Ibc240cf94ac939335455f4eac3d52ffec2ba7ff6 Reviewed-by: Leena Miettinen Reviewed-by: Allan Sandfeld Jensen --- examples/webengine/customdialogs/WebView.qml | 44 ++++++++++++++++++++- .../doc/images/customdialogs-auth1.png | Bin 6453 -> 4923 bytes .../doc/images/customdialogs-auth2.png | Bin 7983 -> 5064 bytes .../doc/images/customdialogs-color1.png | Bin 20401 -> 22018 bytes .../doc/images/customdialogs-color2.png | Bin 6609 -> 3952 bytes .../doc/images/customdialogs-file1.png | Bin 15736 -> 10101 bytes .../doc/images/customdialogs-file2.png | Bin 9036 -> 6773 bytes .../doc/images/customdialogs-prompt1.png | Bin 5509 -> 2597 bytes .../doc/images/customdialogs-prompt2.png | Bin 7839 -> 4764 bytes .../doc/images/customdialogs-tooltip.png | Bin 0 -> 1617 bytes .../customdialogs/doc/images/customdialogs.png | Bin 11764 -> 9093 bytes .../customdialogs/doc/src/customdialogs.qdoc | 32 +++++++++++++++ examples/webengine/customdialogs/index.html | 3 ++ 13 files changed, 78 insertions(+), 1 deletion(-) create mode 100644 examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png (limited to 'examples/webengine') diff --git a/examples/webengine/customdialogs/WebView.qml b/examples/webengine/customdialogs/WebView.qml index 0715bc709..d754ea7dc 100644 --- a/examples/webengine/customdialogs/WebView.qml +++ b/examples/webengine/customdialogs/WebView.qml @@ -49,7 +49,7 @@ ****************************************************************************/ import QtQuick 2.0 -import QtWebEngine 1.4 +import QtWebEngine 1.10 WebEngineView { @@ -57,6 +57,32 @@ WebEngineView { property bool useDefaultDialogs: true signal openForm(var form) + Rectangle { + id: tooltip + width: 200 + height: 30 + z: 50 + visible: false + color: "gray" + border.color: "black" + border.width: 2 + radius: 3 + + property string text: "" + + Text { + x: 0 + y: 0 + color: "#ffffff" + text: parent.text + font.pointSize: 12 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + font.bold: false + } + + } + onContextMenuRequested: function(request) { // we only show menu for links with #openMenu if (!request.linkUrl.toString().endsWith("#openMenu")) { @@ -72,6 +98,22 @@ WebEngineView { properties: {"request": request}}); } + onTooltipRequested: function(request) { + if (useDefaultDialogs) + return; + + if (request.type == TooltipRequest.Show) { + tooltip.visible = true; + tooltip.x = request.x; + tooltip.y = request.y; + tooltip.text = request.text; + } else { + tooltip.visible = false; + } + + request.accepted = true; + } + onAuthenticationDialogRequested: function(request) { if (useDefaultDialogs) return; diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png b/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png index 2bde8bd8e..5e8f8d6bd 100644 Binary files a/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png and b/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png differ diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png b/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png index ce358fca0..41828d36d 100644 Binary files a/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png and b/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png differ diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-color1.png b/examples/webengine/customdialogs/doc/images/customdialogs-color1.png index a51d1bdd3..9208045b2 100644 Binary files a/examples/webengine/customdialogs/doc/images/customdialogs-color1.png and b/examples/webengine/customdialogs/doc/images/customdialogs-color1.png differ diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-color2.png b/examples/webengine/customdialogs/doc/images/customdialogs-color2.png index 3b0b2e986..9087fdf14 100644 Binary files a/examples/webengine/customdialogs/doc/images/customdialogs-color2.png and b/examples/webengine/customdialogs/doc/images/customdialogs-color2.png differ diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-file1.png b/examples/webengine/customdialogs/doc/images/customdialogs-file1.png index 0ff39bf38..ba8bdf78c 100644 Binary files a/examples/webengine/customdialogs/doc/images/customdialogs-file1.png and b/examples/webengine/customdialogs/doc/images/customdialogs-file1.png differ diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-file2.png b/examples/webengine/customdialogs/doc/images/customdialogs-file2.png index e56078c44..aa25579d7 100644 Binary files a/examples/webengine/customdialogs/doc/images/customdialogs-file2.png and b/examples/webengine/customdialogs/doc/images/customdialogs-file2.png differ diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png b/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png index 988b4deea..e36ba4a13 100644 Binary files a/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png and b/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png differ diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png b/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png index 085339378..2c8d92649 100644 Binary files a/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png and b/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png differ diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png b/examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png new file mode 100644 index 000000000..498de9595 Binary files /dev/null and b/examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png differ diff --git a/examples/webengine/customdialogs/doc/images/customdialogs.png b/examples/webengine/customdialogs/doc/images/customdialogs.png index 13322d2f6..c42114a16 100644 Binary files a/examples/webengine/customdialogs/doc/images/customdialogs.png and b/examples/webengine/customdialogs/doc/images/customdialogs.png differ diff --git a/examples/webengine/customdialogs/doc/src/customdialogs.qdoc b/examples/webengine/customdialogs/doc/src/customdialogs.qdoc index 5c550ed5e..6319ce53b 100644 --- a/examples/webengine/customdialogs/doc/src/customdialogs.qdoc +++ b/examples/webengine/customdialogs/doc/src/customdialogs.qdoc @@ -140,6 +140,38 @@ To keep things simple, we do not provide any logic on component completion, and we simply close the form on any action. + \section2 Tooltip Requests + + \l [QML]{TooltipRequest} is a request object that is passed as a + parameter of the WebEngineView::tooltipRequested signal. We use the + \c onTooltipRequested signal handler to handle requests for + custom tooltip menus at specific positions: + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto WebEngineView + \printuntil { + \dots 4 + \skipto onTooltipRequested + \printuntil } + \printuntil } + \printuntil } + \dots 4 + \skipuntil onFileDialogRequested + \skipuntil }}); + \skipuntil } + \skipto } + \printline } + + The second text field from the top on our page triggers the request. Next, + we check whether we should use the default menu. If not, we accept the + request and show a custom QML element as tooltip: + + \image customdialogs-tooltip.png + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto Rectangle + \printuntil } + \section2 Authentication Dialog Requests \image customdialogs-auth1.png diff --git a/examples/webengine/customdialogs/index.html b/examples/webengine/customdialogs/index.html index 490dd79fd..69c0e6b21 100644 --- a/examples/webengine/customdialogs/index.html +++ b/examples/webengine/customdialogs/index.html @@ -10,6 +10,9 @@
Right click on text to see link context menu
+ +

Hover this text to display a tooltip

+ -- cgit v1.2.1