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

226 lines
6.9 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 StatusQ.Controls 0.1
import shared.controls 1.0
import utils 1.0
import "../popups"
import "../controls"
Rectangle {
id: browserHeader
property alias favoriteComponent: favoritesBarLoader.sourceComponent
property alias addressBar: addressBar
property var currentUrl
property bool isLoading: false
property bool canGoBack: false
property bool canGoForward: false
property var currentFavorite
property bool currentTabConnected: false
property string dappBrowserAccName: ""
property string dappBrowserAccIcon: ""
property var settingMenu
property var walletMenu
signal addNewFavoritelClicked(var xPos)
signal launchInBrowser(var url)
signal openHistoryPopup(var xPos, var yPos)
signal goForward()
signal goBack()
signal reload()
signal stopLoading()
QtObject {
id: _internal
readonly property int innerMargin: 12
}
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: _internal.innerMargin
StatusFlatRoundButton {
id: backButton
Layout.preferredWidth: 32
Layout.preferredHeight: 32
icon.height: 20
icon.width: 20
icon.name: "left"
icon.disabledColor: Style.current.lightGrey
type: StatusFlatRoundButton.Type.Tertiary
enabled: canGoBack
Layout.leftMargin: _internal.innerMargin
onClicked: goBack()
onPressAndHold: {
if (canGoBack || canGoForward) {
openHistoryPopup(backButton.x, backButton.y + backButton.height)
}
}
}
StatusFlatRoundButton {
id: forwardButton
Layout.preferredWidth: 32
Layout.preferredHeight: 32
icon.width: 20
icon.height: 20
icon.name: "right"
icon.disabledColor: Style.current.lightGrey
type: StatusFlatRoundButton.Type.Tertiary
enabled: canGoForward
Layout.leftMargin: -_internal.innerMargin/2
onClicked: goForward()
onPressAndHold: {
if (canGoBack || canGoForward) {
openHistoryPopup(backButton.x, backButton.y + backButton.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: {
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
launchInBrowser(text)
}
}
StatusFlatRoundButton {
id: addFavoriteBtn
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
anchors.right: reloadBtn.left
anchors.rightMargin: Style.current.halfPadding
visible: !!currentUrl
icon.source: !!browserHeader.currentFavorite ? Style.svg("browser/favoriteActive") : Style.svg("browser/favorite")
color: "transparent"
type: StatusFlatRoundButton.Type.Tertiary
onClicked: addNewFavoritelClicked(addFavoriteBtn.x)
}
StatusFlatRoundButton {
id: reloadBtn
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding
icon.name: isLoading ? "close-circle" : "refresh"
color: "transparent"
type: StatusFlatRoundButton.Type.Tertiary
onClicked: isLoading ? stopLoading(): reload()
}
}
Loader {
active: true
sourceComponent: currentTabConnected ? connectedBtnComponent : notConnectedBtnCompoent
}
Component {
id: notConnectedBtnCompoent
StatusFlatRoundButton {
id: accountBtn
width: 24
height: 24
icon.width: 24
icon.height: 24
icon.name: "filled-account"
type: StatusFlatRoundButton.Type.Tertiary
onClicked: {
if (walletMenu.opened) {
walletMenu.close()
} else {
walletMenu.open()
}
}
}
}
Component {
id: connectedBtnComponent
StatusFlatButton {
id: accountBtnConnected
icon.name: "wallet"
icon.width: 18
icon.height: 18
icon.color: dappBrowserAccIcon
text: dappBrowserAccName
onClicked: {
if (walletMenu.opened) {
walletMenu.close()
} else {
walletMenu.open()
}
}
}
}
StatusFlatRoundButton {
id: settingsMenuButton
Layout.preferredHeight: 32
Layout.preferredWidth: 32
icon.width: 24
icon.height: 24
icon.name: "more"
type: StatusFlatRoundButton.Type.Tertiary
Layout.rightMargin: _internal.innerMargin
onClicked: {
if (settingMenu.opened) {
settingMenu.close()
} else {
settingMenu.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
}
}