From 58db0f144dc18a476ba56b8518bb075661a3a569 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Thu, 29 Oct 2020 16:07:52 -0400 Subject: [PATCH] feat: add menu for the bookmark butons --- .../AppLayouts/Browser/AddFavoriteModal.qml | 14 +++-- ui/app/AppLayouts/Browser/BrowserHeader.qml | 17 +----- ui/app/AppLayouts/Browser/BrowserLayout.qml | 30 +++++++++++ .../Browser/BrowserSettingsMenu.qml | 4 +- ui/app/AppLayouts/Browser/FavoriteMenu.qml | 53 +++++++++++++++++++ .../Browser/components/BookmarkButton.qml | 12 ++++- ui/app/img/edit.svg | 4 ++ ui/app/img/remove.svg | 4 ++ ui/nim-status-client.pro | 1 + 9 files changed, 116 insertions(+), 23 deletions(-) create mode 100644 ui/app/AppLayouts/Browser/FavoriteMenu.qml create mode 100644 ui/app/img/edit.svg create mode 100644 ui/app/img/remove.svg diff --git a/ui/app/AppLayouts/Browser/AddFavoriteModal.qml b/ui/app/AppLayouts/Browser/AddFavoriteModal.qml index 893ab68be1..9360d005c8 100644 --- a/ui/app/AppLayouts/Browser/AddFavoriteModal.qml +++ b/ui/app/AppLayouts/Browser/AddFavoriteModal.qml @@ -12,12 +12,13 @@ ModalPopup { property string ogUrl property string ogName property bool modifiyModal: false + property bool toolbarMode: false id: popup - width: modifiyModal ? 345 : 480 - height: modifiyModal ? 345 : 480 + width: toolbarMode ? 345 : 480 + height: toolbarMode ? 345 : 480 - modal: !modifiyModal + modal: !toolbarMode background: Rectangle { id: bgPopup @@ -62,6 +63,7 @@ ModalPopup { function reset() { modifiyModal = false + toolbarMode = false urlError = "" nameError = "" ogUrl = "" @@ -71,8 +73,10 @@ ModalPopup { } title: modifiyModal ? - qsTr("Favorite added") : - qsTr("Add favorite") + toolbarMode ? + qsTr("Favorite added") : + qsTr("Edit") + : qsTr("Add favorite") Column { width: parent.width diff --git a/ui/app/AppLayouts/Browser/BrowserHeader.qml b/ui/app/AppLayouts/Browser/BrowserHeader.qml index da573e97ae..e4c1e2ea1b 100644 --- a/ui/app/AppLayouts/Browser/BrowserHeader.qml +++ b/ui/app/AppLayouts/Browser/BrowserHeader.qml @@ -85,21 +85,7 @@ Rectangle { } StyledTextField { - property var currentFavorite: getCurrentFavorite() - - function getCurrentFavorite() { - if (!currentWebView || !currentWebView.url) { - return false - } - const index = browserModel.bookmarks.getBookmarkIndexByUrl(currentWebView.url) - if (index === -1) { - return null - } - return { - url: currentWebView.url, - name: browserModel.bookmarks.rowData(index, 'name') - } - } + property var currentFavorite: currentWebView && getCurrentFavorite(currentWebView.url) id: addressBar height: 40 @@ -135,6 +121,7 @@ Rectangle { } addFavoriteModal.modifiyModal = true + addFavoriteModal.toolbarMode = true addFavoriteModal.x = addFavoriteBtn.x + addFavoriteBtn.width / 2 - addFavoriteBtn.width / 2 addFavoriteModal.y = root.y + root.height + 4 addFavoriteModal.ogUrl = addressBar.currentFavorite ? addressBar.currentFavorite.url : currentWebView.url diff --git a/ui/app/AppLayouts/Browser/BrowserLayout.qml b/ui/app/AppLayouts/Browser/BrowserLayout.qml index bc69a70921..281768a815 100644 --- a/ui/app/AppLayouts/Browser/BrowserLayout.qml +++ b/ui/app/AppLayouts/Browser/BrowserLayout.qml @@ -91,10 +91,32 @@ Rectangle { standardButtons: StandardButton.Ok } + function getCurrentFavorite(url) { + if (!url) { + return null + } + const index = browserModel.bookmarks.getBookmarkIndexByUrl(url) + if (index === -1) { + return null + } + return { + url: url, + name: browserModel.bookmarks.rowData(index, 'name') + } + } + AddFavoriteModal { id: addFavoriteModal } + FavoriteMenu { + id: favoriteMenu + openInNewTab: function (url) { + browserWindow.addNewTab() + currentWebView.url = url + } + } + QtObject { id: provider WebChannel.id: "backend" @@ -618,6 +640,7 @@ Rectangle { } Item { + id: bookmarkListContainer anchors.horizontalCenter: emptyPageImage.horizontalCenter anchors.top: emptyPageImage.bottom anchors.topMargin: 30 @@ -632,8 +655,15 @@ Rectangle { anchors.horizontalCenterOffset: -(addBookmarkBtn.width + spacing) /2 width: Math.min(childrenRect.width, parent.width - addBookmarkBtn.width - spacing) delegate: BookmarkButton { + id: bookmarkBtn text: name onClicked: currentWebView.url = url + onRightClicked: { + favoriteMenu.url = url + favoriteMenu.x = bookmarkList.x + bookmarkBtn.x + mouse.x + favoriteMenu.y = Qt.binding(function () {return bookmarkListContainer.y + mouse.y + favoriteMenu.height}) + favoriteMenu.open() + } } } diff --git a/ui/app/AppLayouts/Browser/BrowserSettingsMenu.qml b/ui/app/AppLayouts/Browser/BrowserSettingsMenu.qml index f4ee5e754b..6eff7cffa0 100644 --- a/ui/app/AppLayouts/Browser/BrowserSettingsMenu.qml +++ b/ui/app/AppLayouts/Browser/BrowserSettingsMenu.qml @@ -23,7 +23,9 @@ PopupMenu { Action { id: offTheRecordEnabled // TODO show an indicator on the browser or tab? - text: checked ? qsTr("Exit Incognito mode") : qsTr("Go Incognito") + text: checked ? + qsTr("Exit Incognito mode") : + qsTr("Go Incognito") checkable: true checked: currentWebView && currentWebView.profile === otrProfile onToggled: function(checked) { diff --git a/ui/app/AppLayouts/Browser/FavoriteMenu.qml b/ui/app/AppLayouts/Browser/FavoriteMenu.qml new file mode 100644 index 0000000000..dcc2b74762 --- /dev/null +++ b/ui/app/AppLayouts/Browser/FavoriteMenu.qml @@ -0,0 +1,53 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.3 +import QtWebEngine 1.9 +import "../../../shared" +import "../../../shared/status" +import "../../../imports" +import "../Chat/ChatColumn/ChatComponents" +import "../Profile/LeftTab/constants.js" as ProfileConstants + +PopupMenu { + property var openInNewTab: function () {} + property string url + property var currentFavorite: getCurrentFavorite(url) + + id: root + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside + + Action { + text: qsTr("Open in new Tab") + icon.source: "../../img/generate_account.svg" + icon.width: 12 + icon.height: 12 + onTriggered: { + openInNewTab(root.url) + } + } + + Separator {} + + Action { + text: qsTr("Edit") + icon.source: "../../img/edit.svg" + icon.width: 16 + icon.height: 16 + onTriggered: { + addFavoriteModal.modifiyModal = true + addFavoriteModal.ogUrl = root.currentFavorite ? root.currentFavorite.url : currentWebView.url + addFavoriteModal.ogName = root.currentFavorite ? root.currentFavorite.name : currentWebView.title + addFavoriteModal.open() + } + } + + Action { + text: qsTr("Remove") + icon.source: "../../img/remove.svg" + icon.color: Style.current.danger + icon.width: 16 + icon.height: 16 + onTriggered: { + browserModel.removeBookmark(root.url) + } + } +} diff --git a/ui/app/AppLayouts/Browser/components/BookmarkButton.qml b/ui/app/AppLayouts/Browser/components/BookmarkButton.qml index 69b8ded2dd..0450f8fff3 100644 --- a/ui/app/AppLayouts/Browser/components/BookmarkButton.qml +++ b/ui/app/AppLayouts/Browser/components/BookmarkButton.qml @@ -6,7 +6,8 @@ import "../../../../imports" Item { property url source: "../../../img/globe.svg" property string text - signal clicked + signal clicked(mouse: var) + signal rightClicked(mouse: var) id: root width: 74 @@ -33,6 +34,13 @@ Item { MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor - onClicked: root.clicked() + acceptedButtons: Qt.LeftButton | Qt.RightButton + onClicked: { + if (mouse.button == Qt.RightButton) { + root.rightClicked(mouse) + } else { + root.clicked(mouse) + } + } } } diff --git a/ui/app/img/edit.svg b/ui/app/img/edit.svg new file mode 100644 index 0000000000..aa4d44b729 --- /dev/null +++ b/ui/app/img/edit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/app/img/remove.svg b/ui/app/img/remove.svg new file mode 100644 index 0000000000..1beba3157f --- /dev/null +++ b/ui/app/img/remove.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 00442436ff..828d1f26ff 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -131,6 +131,7 @@ DISTFILES += \ app/AppLayouts/Browser/DownloadBar.qml \ app/AppLayouts/Browser/DownloadElement.qml \ app/AppLayouts/Browser/FaviconImage.qml \ + app/AppLayouts/Browser/FavoriteMenu.qml \ app/AppLayouts/Browser/components/BookmarkButton.qml \ app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml \ app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandModal.qml \