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: root 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 signal addNewFavoritelClicked(var xPos) signal launchInBrowser(var url) signal openHistoryPopup(var xPos, var yPos) signal goForward() signal goBack() signal reload() signal stopLoading() signal openWalletMenu() 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: "arrow-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: "arrow-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 placeholderText: qsTr("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: !!root.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 { Layout.preferredWidth: 44 Layout.preferredHeight: 44 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 onPressed: { root.openWalletMenu() } } } Component { id: connectedBtnComponent StatusFlatButton { id: accountBtnConnected icon.name: "wallet" icon.width: 18 icon.height: 18 icon.color: dappBrowserAccIcon text: dappBrowserAccName onPressed: { root.openWalletMenu(); } } } 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 } }