From f7cc2f2a8038182d4c2c3c76a6ca97394a22b213 Mon Sep 17 00:00:00 2001
From: Leander Beernaert <leander.beernaert@qt.io>
Date: Fri, 17 May 2019 15:21:53 +0200
Subject: Add a close button and ensure text height fitting in tabs for
 quicknanobrowser

Ensure the text can be correctly displayed vertically by reserving some
height and add a close button via a custom tabview style. This change
aloso fixes the case where all tabs are closed and new one can't be
created using the ctrl+t short cut.

Fixes: QTBUG-75291
Change-Id: I139bb832119d56d0e0f12f054e924e5d944b91d4
Reviewed-by: Michal Klocek <michal.klocek@qt.io>
---
 .../webengine/quicknanobrowser/BrowserWindow.qml   | 62 +++++++++++++++++++---
 1 file changed, 56 insertions(+), 6 deletions(-)

diff --git a/examples/webengine/quicknanobrowser/BrowserWindow.qml b/examples/webengine/quicknanobrowser/BrowserWindow.qml
index 0ac69ef24..17e7941bb 100644
--- a/examples/webengine/quicknanobrowser/BrowserWindow.qml
+++ b/examples/webengine/quicknanobrowser/BrowserWindow.qml
@@ -115,7 +115,7 @@ ApplicationWindow {
     Action {
         shortcut: StandardKey.AddTab
         onTriggered: {
-            tabs.createEmptyTab(currentWebView.profile);
+            tabs.createEmptyTab(tabs.count != 0 ? currentWebView.profile : defaultProfile);
             tabs.currentIndex = tabs.count - 1;
             addressBar.forceActiveFocus();
             addressBar.selectAll();
@@ -294,18 +294,22 @@ ApplicationWindow {
                             id: offTheRecordEnabled
                             text: "Off The Record"
                             checkable: true
-                            checked: currentWebView.profile === otrProfile
+                            checked: currentWebView && currentWebView.profile === otrProfile
                             onToggled: function(checked) {
-                                currentWebView.profile = checked ? otrProfile : defaultProfile;
+                                if (currentWebView) {
+                                    currentWebView.profile = checked ? otrProfile : defaultProfile;
+                                }
                             }
                         }
                         MenuItem {
                             id: httpDiskCacheEnabled
                             text: "HTTP Disk Cache"
-                            checkable: !currentWebView.profile.offTheRecord
-                            checked: (currentWebView.profile.httpCacheType === WebEngineProfile.DiskHttpCache)
+                            checkable: currentWebView && !currentWebView.profile.offTheRecord
+                            checked: currentWebView && (currentWebView.profile.httpCacheType === WebEngineProfile.DiskHttpCache)
                             onToggled: function(checked) {
-                                currentWebView.profile.httpCacheType = checked ? WebEngineProfile.DiskHttpCache : WebEngineProfile.MemoryHttpCache;
+                                if (currentWebView) {
+                                    currentWebView.profile.httpCacheType = checked ? WebEngineProfile.DiskHttpCache : WebEngineProfile.MemoryHttpCache;
+                                }
                             }
                         }
                         MenuItem {
@@ -373,6 +377,52 @@ ApplicationWindow {
         anchors.right: parent.right
         Component.onCompleted: createEmptyTab(defaultProfile)
 
+        // Add custom tab view style so we can customize the tabs to include a close button
+        style: TabViewStyle {
+            property color frameColor: "#999"
+            property color fillColor: "#eee"
+            property color nonSelectedColor: "#ddd"
+            frameOverlap: 1
+            frame: Rectangle {
+                color: "#eee"
+                border.color: frameColor
+            }
+            tab: Rectangle {
+                id: tabRectangle
+                color: styleData.selected ? fillColor : nonSelectedColor
+                border.width: 1
+                border.color: frameColor
+                implicitWidth: Math.max(text.width + 30, 80)
+                implicitHeight: Math.max(text.height + 10, 20)
+                Rectangle { height: 1 ; width: parent.width ; color: frameColor}
+                Rectangle { height: parent.height ; width: 1; color: frameColor}
+                Rectangle { x: parent.width - 2; height: parent.height ; width: 1; color: frameColor}
+                Text {
+                    id: text
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.leftMargin: 6
+                    text: styleData.title
+                    elide: Text.ElideRight
+                    color: styleData.selected ? "black" : frameColor
+                }
+                Button {
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.rightMargin: 4
+                    height: 12
+                    style: ButtonStyle {
+                        background: Rectangle {
+                            implicitWidth: 12
+                            implicitHeight: 12
+                            color: control.hovered ? "#ccc" : tabRectangle.color
+                            Text {text: "x" ; anchors.centerIn: parent ; color: "gray"}
+                        }}
+                    onClicked: tabs.removeTab(styleData.index);
+                }
+            }
+        }
+
         Component {
             id: tabComponent
             WebEngineView {
-- 
cgit v1.2.3