feat: add menu for the bookmark butons

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
+    width: toolbarMode ? 345 : 480
-    height: modifiyModal ? 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") :
+               toolbarMode ?
-               qsTr("Add favorite")
+                   qsTr("Favorite added") :
+                   qsTr("Edit")
+               : qsTr("Add favorite")
 
     Column {
         width: parent.width

ui/app/AppLayouts/Browser/BrowserHeader.qml

@@ -85,21 +85,7 @@ Rectangle {
         }
 
         StyledTextField {
-            property var currentFavorite: getCurrentFavorite()
+            property var currentFavorite: currentWebView && getCurrentFavorite(currentWebView.url)
-
-            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')
-                }
-            }
 
             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

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()
+                                    }
                                 }
                             }
 

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) {

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)
+        }
+    }
+}

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)
+            }
+        }
     }
 }

ui/app/img/edit.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.50016 2.33313C7.77631 2.33313 8.00016 2.10928 8.00016 1.83313C8.00016 1.55699 7.77631 1.33313 7.50016 1.33313L4.00016 1.33313C2.5274 1.33313 1.3335 2.52704 1.3335 3.9998L1.3335 11.9998C1.3335 13.4726 2.5274 14.6665 4.00016 14.6665H12.0002C13.4729 14.6665 14.6668 13.4726 14.6668 11.9998V8.4998C14.6668 8.22366 14.443 7.9998 14.1668 7.9998C13.8907 7.9998 13.6668 8.22366 13.6668 8.4998V11.9998C13.6668 12.9203 12.9206 13.6665 12.0002 13.6665H4.00016C3.07969 13.6665 2.3335 12.9203 2.3335 11.9998L2.3335 3.9998C2.3335 3.07933 3.07969 2.33313 4.00016 2.33313L7.50016 2.33313Z" fill="#4360DF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.187 1.81291C13.5316 1.15741 12.4688 1.15741 11.8133 1.81291L6.22425 7.40194C6.00394 7.62225 5.84341 7.89507 5.75782 8.19465L5.18607 10.1958C5.13618 10.3704 5.18488 10.5583 5.31328 10.6867C5.44168 10.8151 5.62959 10.8638 5.80419 10.8139L7.80532 10.2421C8.10489 10.1566 8.37771 9.99602 8.59802 9.77571L14.187 4.18669C14.8425 3.53119 14.8426 2.46841 14.187 1.81291ZM12.5204 2.52002C12.7854 2.25505 13.215 2.25505 13.4799 2.52002C13.7449 2.785 13.7449 3.21461 13.4799 3.47958L7.89092 9.06861C7.79078 9.16875 7.66677 9.24172 7.53059 9.28062C7.03557 9.42206 6.57791 8.96439 6.71934 8.46937C6.75825 8.3332 6.83122 8.20919 6.93136 8.10905L12.5204 2.52002Z" fill="#4360DF"/>
+</svg>

ui/app/img/remove.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6668 8.49967C10.943 8.49967 11.1668 8.27582 11.1668 7.99967C11.1668 7.72353 10.943 7.49967 10.6668 7.49967L5.3335 7.49967C5.05735 7.49967 4.8335 7.72353 4.8335 7.99967C4.8335 8.27582 5.05735 8.49967 5.3335 8.49967L10.6668 8.49967Z" fill="#FF2D55"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6668 7.99967C14.6668 11.6816 11.6821 14.6663 8.00016 14.6663C4.31826 14.6663 1.3335 11.6816 1.3335 7.99967C1.3335 4.31778 4.31826 1.33301 8.00016 1.33301C11.6821 1.33301 14.6668 4.31778 14.6668 7.99967ZM13.6668 7.99967C13.6668 11.1293 11.1298 13.6663 8.00016 13.6663C4.87055 13.6663 2.3335 11.1293 2.3335 7.99967C2.3335 4.87006 4.87055 2.33301 8.00016 2.33301C11.1298 2.33301 13.6668 4.87006 13.6668 7.99967Z" fill="#FF2D55"/>
+</svg>

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 \