feat: add styled browser settings menu

ui/app/AppLayouts/Browser/BrowserHeader.qml

@@ -12,6 +12,7 @@ Rectangle {
     property alias browserSettings: browserSettings
     property alias addressBar: addressBar
     readonly property int innerMargin: 12
+    property var addNewTab: function () {}
 
     id: root
     width: parent.width
@@ -176,8 +177,9 @@ Rectangle {
             }
         }
 
+        // TODO move these to profile settings
         Menu {
-            id: settingsMenu
+            id: settingsMenuOld
             y: settingsMenuButton.height
             x: settingsMenuButton.x
             MenuItem {
@@ -204,17 +206,6 @@ Rectangle {
                 checkable: true
                 checked: true
             }
-            MenuItem {
-                id: offTheRecordEnabled
-                text: "Off The Record"
-                checkable: true
-                checked: currentWebView && currentWebView.profile === otrProfile
-                onToggled: function(checked) {
-                    if (currentWebView) {
-                        currentWebView.profile = checked ? otrProfile : defaultProfile;
-                    }
-                }
-            }
             MenuItem {
                 id: httpDiskCacheEnabled
                 text: "HTTP Disk Cache"
@@ -259,10 +250,23 @@ Rectangle {
             }
         }
 
+        BrowserSettingsMenu {
+            id: settingsMenu
+            addNewTab: root.addNewTab
+            x: parent.width - width
+            y: parent.height
+        }
+
         StatusIconButton {
             id: settingsMenuButton
             icon.name: "dots-icon"
-            onClicked: settingsMenu.open()
+            onClicked: {
+                if (settingsMenu.opened) {
+                    settingsMenu.close()
+                } else {
+                    settingsMenu.open()
+                }
+            }
             width: 24
             height: 24
             Layout.rightMargin: root.innerMargin

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -283,12 +283,7 @@ Rectangle {
         browserHeader.addressBar.selectAll();
     }
 
-    Action {
+
-        shortcut: StandardKey.AddTab
-        onTriggered: {
-            addNewTab()
-        }
-    }
     Action {
         shortcut: StandardKey.Close
         onTriggered: {
@@ -302,18 +297,7 @@ Rectangle {
                 findBar.visible = false;
         }
     }
-    Action {
+
-        shortcut: "Ctrl+0"
-        onTriggered: currentWebView.zoomFactor = 1.0
-    }
-    Action {
-        shortcut: StandardKey.ZoomOut
-        onTriggered: currentWebView.zoomFactor -= 0.1
-    }
-    Action {
-        shortcut: StandardKey.ZoomIn
-        onTriggered: currentWebView.zoomFactor += 0.1
-    }
 
     Action {
         shortcut: StandardKey.Copy
@@ -351,13 +335,6 @@ Rectangle {
         shortcut: StandardKey.Forward
         onTriggered: currentWebView.triggerWebAction(WebEngineView.Forward)
     }
-    Action {
-        shortcut: StandardKey.Find
-        onTriggered: {
-            if (!findBar.visible)
-                findBar.visible = true;
-        }
-    }
     Action {
         shortcut: StandardKey.FindNext
         onTriggered: findBar.findNext()
@@ -366,12 +343,6 @@ Rectangle {
         shortcut: StandardKey.FindPrevious
         onTriggered: findBar.findPrevious()
     }
-    Action {
-        shortcut: "F12"
-        onTriggered: {
-            browserHeader.browserSettings.devToolsEnabled = !browserHeader.browserSettings.devToolsEnabled
-        }
-    }
 
     BrowserHeader {
         id: browserHeader
@@ -379,6 +350,7 @@ Rectangle {
         anchors.topMargin: tabs.tabHeight + tabs.anchors.topMargin
         z: 52
         visible: !downloadView.visible
+        addNewTab: browserWindow.addNewTab
     }
 
     QQC1.TabView {
@@ -527,6 +499,13 @@ Rectangle {
                 }
                 backgroundColor: Style.current.background
 
+                function changeZoomFactor(newFactor) {
+                    // FIXME there seems to be a bug in the WebEngine where the zoomFactor only update 1/2 times
+                    zoomFactor = newFactor
+                    zoomFactor = newFactor
+                    zoomFactor = newFactor
+                }
+
                 settings.autoLoadImages: browserHeader.browserSettings.autoLoadImages
                 settings.javascriptEnabled: browserHeader.browserSettings.javaScriptEnabled
                 settings.errorPageEnabled: browserHeader.browserSettings.errorPageEnabled
@@ -543,24 +522,19 @@ Rectangle {
 
                 onNewViewRequested: function(request) {
                     if (!request.userInitiated) {
-                        print("PROUT")
                         print("Warning: Blocked a popup window.");
                     } else if (request.destination === WebEngineView.NewViewInTab) {
-                        print("NewViewInTab")
                         var tab = tabs.createEmptyTab(currentWebView.profile);
                         tabs.currentIndex = tabs.count - 1;
                         request.openIn(tab.item);
                     } else if (request.destination === WebEngineView.NewViewInBackgroundTab) {
-                        print("NewViewInBackgroundTab")
                         var backgroundTab = tabs.createEmptyTab(currentWebView.profile);
                         request.openIn(backgroundTab.item);
                     } else if (request.destination === WebEngineView.NewViewInDialog) {
-                        print("NewViewInDialog")
                         var dialog = browserDialogComponent.createObject();
                         dialog.currentWebView.profile = currentWebView.profile;
                         request.openIn(dialog.currentWebView);
                     } else {
-                        print("SOMETHIGN")
                         // Instead of opening a new window, we open a new tab
                         // TODO: remove "open in new window" from context menu
                         var tab = tabs.createEmptyTab(currentWebView.profile);
@@ -769,8 +743,8 @@ Rectangle {
         id: findBar
         visible: false
         anchors.right: parent.right
-        anchors.rightMargin: 10
+        anchors.top: browserHeader.bottom
-        anchors.top: parent.top
+        z: 60
 
         onFindNext: {
             if (text)

ui/app/AppLayouts/Browser/BrowserSettingsMenu.qml

@@ -0,0 +1,89 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.3
+import QtWebEngine 1.9
+import "../../../shared"
+import "../../../shared/status"
+import "../../../imports"
+import "../Chat/ChatColumn/ChatComponents"
+
+PopupMenu {
+    property var addNewTab: function () {}
+
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+
+    Action {
+        text: qsTr("New Tab")
+        shortcut: StandardKey.AddTab
+        onTriggered: {
+            addNewTab()
+        }
+    }
+
+    Action {
+        id: offTheRecordEnabled
+        // TODO show an indicator on the browser or tab?
+        text: checked ? qsTr("Exit Incognito mode") : qsTr("Go Incognito")
+        checkable: true
+        checked: currentWebView && currentWebView.profile === otrProfile
+        onToggled: function(checked) {
+            if (currentWebView) {
+                currentWebView.profile = checked ? otrProfile : defaultProfile;
+            }
+        }
+    }
+
+    Separator {}
+
+    // TODO find a way to put both in one button
+    Action {
+        text: qsTr("Zoom In")
+        shortcut: StandardKey.ZoomIn
+        onTriggered: {
+            const newZoom = currentWebView.zoomFactor + 0.1
+            currentWebView.changeZoomFactor(newZoom)
+        }
+    }
+    Action {
+        text: qsTr("Zoom Out")
+        shortcut: StandardKey.ZoomOut
+        onTriggered: {
+            const newZoom = currentWebView.zoomFactor - 0.1
+            currentWebView.changeZoomFactor(newZoom)
+        }
+    }
+    Action {
+        shortcut: "Ctrl+0"
+        onTriggered: currentWebView.changeZoomFactor(1.0)
+    }
+
+    Separator {}
+
+    Action {
+        text: qsTr("Find")
+        shortcut: StandardKey.Find
+        onTriggered: {
+            if (!findBar.visible) {
+                findBar.visible = true;
+                findBar.forceActiveFocus()
+            }
+        }
+    }
+
+    Action {
+        text: qsTr("Developper Tools")
+        shortcut: "F12"
+        onTriggered: {
+            browserHeader.browserSettings.devToolsEnabled = !browserHeader.browserSettings.devToolsEnabled
+        }
+    }
+
+    Separator {}
+
+    Action {
+        text: qsTr("Settings")
+        shortcut: "Ctrl+,"
+        onTriggered: {
+            console.log('Open settings in Profile')
+        }
+    }
+}

ui/app/AppLayouts/Browser/FindBar.qml

@@ -48,10 +48,13 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.5
+import QtQuick 2.13
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.13
-import QtQuick.Controls.Styles 1.4
+import QtGraphicalEffects 1.13
 import QtQuick.Layouts 1.0
+import "../../../shared"
+import "../../../shared/status"
+import "../../../imports"
 
 Rectangle {
     id: root
@@ -69,17 +72,35 @@ Rectangle {
     signal findNext()
     signal findPrevious()
 
-    width: 250
+    width: 300
-    height: 35
+    height: 40
-    radius: 2
+    radius: Style.current.radius
 
-    border.width: 1
+    border.width: 0
-    border.color: "black"
+    color: Style.current.background
-    color: "white"
+
+    layer.enabled: true
+    layer.effect: DropShadow{
+        width: root.width
+        height: root.height
+        x: root.x
+        y: root.y + 10
+        visible: root.visible
+        source: root
+        horizontalOffset: 0
+        verticalOffset: 2
+        radius: 10
+        samples: 15
+        color: "#22000000"
+    }
+
+    function forceActiveFocus() {
+        findTextField.forceActiveFocus();
+    }
 
     onVisibleChanged: {
         if (visible)
-            findTextField.forceActiveFocus();
+            forceActiveFocus()
     }
 
 
@@ -96,14 +117,13 @@ Rectangle {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            TextField {
+            StyledTextField {
                 id: findTextField
                 anchors.fill: parent
 
-                style: TextFieldStyle {
                 background: Rectangle {
                     color: "transparent"
-                    }
+                    border.width: 0
                 }
 
                 onAccepted: root.findNext()
@@ -114,33 +134,40 @@ Rectangle {
 
         Label {
             text: activeMatch + "/" + numberOfMatches
-            visible: findTextField.text != ""
+            visible: findTextField.text !== ""
         }
 
         Rectangle {
             border.width: 1
-            border.color: "#ddd"
+            border.color: Style.current.border
             width: 2
             height: parent.height
             anchors.topMargin: 5
             anchors.bottomMargin: 5
         }
 
-        ToolButton {
+        StatusIconButton {
-            text: "<"
+            icon.name: "caret"
             enabled: numberOfMatches > 0
+            iconRotation: 90
             onClicked: root.findPrevious()
+            icon.width: 14
         }
 
-        ToolButton {
+        StatusIconButton {
-            text: ">"
+            icon.name: "caret"
             enabled: numberOfMatches > 0
+            iconRotation: -90
             onClicked: root.findNext()
+            icon.width: 14
         }
 
-        ToolButton {
+        StatusIconButton {
-            text: "x"
+            icon.name: "close"
             onClicked:  root.visible = false
+            icon.width: 20
         }
+
+
     }
 }

ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml

@@ -96,7 +96,6 @@ Rectangle {
                     menu = groupContextMenu
                 }
 
-                menu.arrowX = menu.width - 40
                 menu.popup(moreActionsBtn.x, moreActionsBtn.height)
                
             }

ui/nim-status-client.pro

@@ -123,6 +123,7 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 DISTFILES += \
     app/AppLayouts/Browser/BrowserConnectionModal.qml \
     app/AppLayouts/Browser/BrowserHeader.qml \
+    app/AppLayouts/Browser/BrowserSettingsMenu.qml \
     app/AppLayouts/Browser/BrowserTabs.qml \
     app/AppLayouts/Browser/BrowserWalletMenu.qml \
     app/AppLayouts/Browser/FaviconImage.qml \

ui/shared/PopupMenu.qml

@@ -7,12 +7,11 @@ import "../shared"
 Menu {
     // This is to add icons to submenu items. QML doesn't have a way to add icons to those sadly so this is a workaround
     property var subMenuIcons: []
-    property alias arrowX: bgPopupMenuTopArrow.x
     property int paddingSize: 8
     property bool hasArrow: true
     closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnReleaseOutside | Popup.CloseOnEscape 
     id: popupMenu
-    topPadding: bgPopupMenuTopArrow.height + paddingSize
+    topPadding: paddingSize
     bottomPadding: paddingSize
 
     delegate: MenuItem {
@@ -42,12 +41,13 @@ Menu {
         implicitWidth: 200
         implicitHeight: 34
         font.pixelSize: 13
+        font.weight: checked ? Font.Medium : Font.Normal
         icon.color: popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.blue
         icon.source: this.subMenu ? subMenuIcons[subMenuIndex].source : popupMenuItem.action.icon.source
         icon.width: this.subMenu ? subMenuIcons[subMenuIndex].width : popupMenuItem.action.icon.width
         icon.height: this.subMenu ? subMenuIcons[subMenuIndex].height : popupMenuItem.action.icon.height
-        visible: popupMenuItem.action.enabled
+        visible: popupMenuItem.action.enabled && !!popupMenuItem.text
-        height: popupMenuItem.action.enabled ? popupMenuItem.implicitHeight : 0
+        height: visible ? popupMenuItem.implicitHeight : 0
 
         arrow: SVGImage {
             source: "../app/img/caret.svg"
@@ -112,29 +112,6 @@ Menu {
     background: Item {
         id: bgPopupMenu
         implicitWidth: 220
-        Rectangle {
-            id: bgPopupMenuTopArrow
-            visible: popupMenu.hasArrow
-            color: Style.current.modalBackground
-            height: 14
-            width: 14
-            rotation: 135
-            x: bgPopupMenu.width / 2 - width / 2
-            layer.enabled: true
-            layer.effect: DropShadow{
-                width: bgPopupMenuTopArrow.width
-                height: bgPopupMenuTopArrow.height
-                x: bgPopupMenuTopArrow.x
-                y: bgPopupMenuTopArrow.y + 10
-                visible: bgPopupMenuTopArrow.visible
-                source: bgPopupMenuTopArrow
-                horizontalOffset: 0
-                verticalOffset: 5
-                radius: 10
-                samples: 15
-                color: "#22000000"
-            }
-        }
 
         Rectangle {
             id: bgPopupMenuContent