status-desktop/ui/app/AppLayouts/Browser/panels/BrowserHeader.qml

281 lines
11 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import Qt.labs.settings 1.0
import QtQuick.Controls.Styles 1.0
import QtWebEngine 1.10
import utils 1.0
import shared.controls 1.0
import StatusQ.Controls 0.1 as StatusQControls
import shared 1.0
import shared.panels 1.0
import shared.status 1.0
import "../popups"
import "../controls"
Rectangle {
id: browserHeader
property alias favoriteComponent: favoritesBarLoader.sourceComponent
property alias addressBar: addressBar
readonly property int innerMargin: 12
property var currentFavorite
property var addNewTab: function () {}
property string dappBrowserAccName: ""
property string dappBrowserAccIcon: ""
signal addNewFavoritelClicked(var xPos)
width: parent.width
height: barRow.height + (favoritesBarLoader.active ? favoritesBarLoader.height : 0)
color: Style.current.background
border.width: 0
RowLayout {
id: barRow
width: parent.width
height: 45
spacing: browserHeader.innerMargin
Menu {
id: historyMenu
Instantiator {
model: currentWebView && currentWebView.navigationHistory.items
MenuItem {
text: model.title
onTriggered: currentWebView.goBackOrForward(model.offset)
checkable: !enabled
checked: !enabled
enabled: model.offset
}
onObjectAdded: function(index, object) {
historyMenu.insertItem(index, object)
}
onObjectRemoved: function(index, object) {
historyMenu.removeItem(object)
}
}
}
StatusQControls.StatusFlatRoundButton {
id: backButton
Layout.preferredWidth: 32
Layout.preferredHeight: 32
icon.height: 20
icon.width: 20
icon.name: "left"
icon.disabledColor: Style.current.lightGrey
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
enabled: currentWebView && currentWebView.canGoBack
Layout.leftMargin: browserHeader.innerMargin
onClicked: currentWebView.goBack()
onPressAndHold: {
if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
historyMenu.popup(backButton.x, backButton.y + backButton.height)
}
}
}
StatusQControls.StatusFlatRoundButton {
id: forwardButton
Layout.preferredWidth: 32
Layout.preferredHeight: 32
icon.width: 20
icon.height: 20
icon.name: "right"
icon.disabledColor: Style.current.lightGrey
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
enabled: currentWebView && currentWebView.canGoForward
Layout.leftMargin: -browserHeader.innerMargin/2
onClicked: currentWebView.goForward()
onPressAndHold: {
if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
historyMenu.popup(forwardButton.x, forwardButton.y + forwardButton.height)
}
}
}
StyledTextField {
id: addressBar
Layout.preferredHeight: 40
Layout.fillWidth: true
background: Rectangle {
color: Style.current.inputBackground
border.color: Style.current.inputBorderFocus
border.width: activeFocus ? 1 : 0
radius: 20
}
leftPadding: Style.current.padding
rightPadding: addFavoriteBtn.width + reloadBtn.width + Style.current.bigPadding
//% "Enter URL"
placeholderText: qsTrId("enter-url")
focus: true
text: ""
color: Style.current.textColor
onActiveFocusChanged: {
if (activeFocus) {
addressBar.selectAll()
}
}
Keys.onPressed: {
// TODO: disable browsing local files? file://
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
if (localAccountSensitiveSettings.useBrowserEthereumExplorer !== Constants.browserEthereumExplorerNone && text.startsWith("0x")) {
switch (localAccountSensitiveSettings.useBrowserEthereumExplorer) {
case Constants.browserEthereumExplorerEtherscan:
if (text.length > 42) {
currentWebView.url = "https://etherscan.io/tx/" + text; break;
} else {
currentWebView.url = "https://etherscan.io/address/" + text; break;
}
case Constants.browserEthereumExplorerEthplorer:
if (text.length > 42) {
currentWebView.url = "https://ethplorer.io/tx/" + text; break;
} else {
currentWebView.url = "https://ethplorer.io/address/" + text; break;
}
case Constants.browserEthereumExplorerBlockchair:
if (text.length > 42) {
currentWebView.url = "https://blockchair.com/ethereum/transaction/" + text; break;
} else {
currentWebView.url = "https://blockchair.com/ethereum/address/" + text; break;
}
}
return
}
if (localAccountSensitiveSettings.shouldShowBrowserSearchEngine !== Constants.browserSearchEngineNone && !Utils.isURL(text) && !Utils.isURLWithOptionalProtocol(text)) {
switch (localAccountSensitiveSettings.shouldShowBrowserSearchEngine) {
case Constants.browserSearchEngineGoogle: currentWebView.url = "https://www.google.com/search?q=" + text; break;
case Constants.browserSearchEngineYahoo: currentWebView.url = "https://search.yahoo.com/search?p=" + text; break;
case Constants.browserSearchEngineDuckDuckGo: currentWebView.url = "https://duckduckgo.com/?q=" + text; break;
}
return
} else if (Utils.isURLWithOptionalProtocol(text)) {
text = "https://" + text
}
currentWebView.url = determineRealURL(text);
}
}
StatusQControls.StatusFlatRoundButton {
id: addFavoriteBtn
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
anchors.right: reloadBtn.left
anchors.rightMargin: Style.current.halfPadding
visible: !!currentWebView && !!currentWebView.url
icon.source: !!browserHeader.currentFavorite ? Style.svg("browser/favoriteActive") : Style.svg("browser/favorite")
color: "transparent"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
onClicked: addNewFavoritelClicked(addFavoriteBtn.x)
}
StatusQControls.StatusFlatRoundButton {
id: reloadBtn
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding
icon.name: currentWebView && currentWebView.loading ? "close-circle" : "refresh"
color: "transparent"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
onClicked: currentWebView && currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
}
}
BrowserWalletMenu {
id: browserWalletMenu
y: browserHeader.height + browserHeader.anchors.topMargin
x: parent.width - width - Style.current.halfPadding
}
Loader {
active: true
sourceComponent: currentTabConnected ? connectedBtnComponent : notConnectedBtnCompoent
}
Component {
id: notConnectedBtnCompoent
StatusQControls.StatusFlatRoundButton {
id: accountBtn
width: 24
height: 24
icon.width: 24
icon.height: 24
icon.name: "filled-account"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
onClicked: {
if (browserWalletMenu.opened) {
browserWalletMenu.close()
} else {
browserWalletMenu.open()
}
}
}
}
Component {
id: connectedBtnComponent
StatusQControls.StatusFlatButton {
id: accountBtnConnected
icon.name: "wallet"
icon.width: 18
icon.height: 18
icon.color: dappBrowserAccIcon
text: dappBrowserAccName
onClicked: {
if (browserWalletMenu.opened) {
browserWalletMenu.close()
} else {
browserWalletMenu.open()
}
}
}
}
BrowserSettingsMenu {
id: settingsMenu
addNewTab: browserHeader.addNewTab
x: parent.width - width
y: parent.height
}
StatusQControls.StatusFlatRoundButton {
id: settingsMenuButton
Layout.preferredHeight: 32
Layout.preferredWidth: 32
icon.width: 24
icon.height: 24
icon.name: "more"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
Layout.rightMargin: browserHeader.innerMargin
onClicked: {
if (settingsMenu.opened) {
settingsMenu.close()
} else {
settingsMenu.open()
}
}
}
}
Loader {
id: favoritesBarLoader
active: localAccountSensitiveSettings.shouldShowFavoritesBar
anchors.top: barRow.bottom
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
}
}