From 23b8c6ab574c0fa991b7e36490c91534d3f61b34 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Fri, 9 Oct 2020 13:56:42 -0400 Subject: [PATCH] feat: add styled browser settings menu --- ui/app/AppLayouts/Browser/BrowserHeader.qml | 30 ++++--- ui/app/AppLayouts/Browser/BrowserLayout.qml | 50 +++-------- .../Browser/BrowserSettingsMenu.qml | 89 +++++++++++++++++++ ui/app/AppLayouts/Browser/FindBar.qml | 77 ++++++++++------ ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml | 1 - ui/nim-status-client.pro | 1 + ui/shared/PopupMenu.qml | 31 +------ 7 files changed, 175 insertions(+), 104 deletions(-) create mode 100644 ui/app/AppLayouts/Browser/BrowserSettingsMenu.qml diff --git a/ui/app/AppLayouts/Browser/BrowserHeader.qml b/ui/app/AppLayouts/Browser/BrowserHeader.qml index 8f8eaadce1..53c35d5bcd 100644 --- a/ui/app/AppLayouts/Browser/BrowserHeader.qml +++ b/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 diff --git a/ui/app/AppLayouts/Browser/BrowserLayout.qml b/ui/app/AppLayouts/Browser/BrowserLayout.qml index afa9cbe010..5efb622e84 100644 --- a/ui/app/AppLayouts/Browser/BrowserLayout.qml +++ b/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: parent.top + anchors.top: browserHeader.bottom + z: 60 onFindNext: { if (text) diff --git a/ui/app/AppLayouts/Browser/BrowserSettingsMenu.qml b/ui/app/AppLayouts/Browser/BrowserSettingsMenu.qml new file mode 100644 index 0000000000..f494de2b07 --- /dev/null +++ b/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') + } + } +} diff --git a/ui/app/AppLayouts/Browser/FindBar.qml b/ui/app/AppLayouts/Browser/FindBar.qml index 9d1fe655e2..dfce7669b6 100644 --- a/ui/app/AppLayouts/Browser/FindBar.qml +++ b/ui/app/AppLayouts/Browser/FindBar.qml @@ -48,10 +48,13 @@ ** ****************************************************************************/ -import QtQuick 2.5 -import QtQuick.Controls 1.4 -import QtQuick.Controls.Styles 1.4 +import QtQuick 2.13 +import QtQuick.Controls 2.13 +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 - height: 35 - radius: 2 + width: 300 + height: 40 + radius: Style.current.radius - border.width: 1 - border.color: "black" - color: "white" + border.width: 0 + color: Style.current.background + + 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" - } + 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 { - text: "<" + StatusIconButton { + icon.name: "caret" enabled: numberOfMatches > 0 + iconRotation: 90 onClicked: root.findPrevious() + icon.width: 14 } - ToolButton { - text: ">" + StatusIconButton { + icon.name: "caret" enabled: numberOfMatches > 0 + iconRotation: -90 onClicked: root.findNext() + icon.width: 14 } - ToolButton { - text: "x" - onClicked: root.visible = false + StatusIconButton { + icon.name: "close" + onClicked: root.visible = false + icon.width: 20 } + + } -} \ No newline at end of file +} diff --git a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml index 327e93608e..cb9068591e 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml +++ b/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) } diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 2ec23c7fca..d1efac2dca 100644 --- a/ui/nim-status-client.pro +++ b/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 \ diff --git a/ui/shared/PopupMenu.qml b/ui/shared/PopupMenu.qml index 38d355d791..7aea8620c5 100644 --- a/ui/shared/PopupMenu.qml +++ b/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 - height: popupMenuItem.action.enabled ? popupMenuItem.implicitHeight : 0 + visible: popupMenuItem.action.enabled && !!popupMenuItem.text + 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