status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: move browser header to a separate file

This commit is contained in:
Jonathan Rainville 2020-10-07 16:14:55 -04:00 committed by Iuri Matias
parent 70177b803a
commit 1316f35909
3 changed files with 276 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
ui/app/AppLayouts/Browser/BrowserHeader.qml Normal file
View File

@ -0,0 +1,261 @@
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 "../../../shared"
import "../../../imports"
Item {
property alias browserSettings: browserSettings
id: root
width: parent.width
height: 45
Settings {
id : browserSettings
property alias autoLoadImages: loadImages.checked
property alias javaScriptEnabled: javaScriptEnabled.checked
property alias errorPageEnabled: errorPageEnabled.checked
property alias pluginsEnabled: pluginsEnabled.checked
property alias autoLoadIconsForPage: autoLoadIconsForPage.checked
property alias touchIconsEnabled: touchIconsEnabled.checked
property alias webRTCPublicInterfacesOnly : webRTCPublicInterfacesOnly.checked
property alias devToolsEnabled: devToolsEnabled.checked
property alias pdfViewerEnabled: pdfViewerEnabled.checked
}
RowLayout {
anchors.fill: parent
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)
}
}
}
ToolButton {
id: backButton
icon.source: "../../img/browser/back.png"
onClicked: currentWebView.goBack()
onPressAndHold: {
if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
historyMenu.popup(backButton.x, backButton.y + backButton.height)
}
}
enabled: currentWebView && currentWebView.canGoBack
}
ToolButton {
id: forwardButton
icon.source: "../../img/browser/forward.png"
onClicked: currentWebView.goForward()
enabled: currentWebView && currentWebView.canGoForward
onPressAndHold: {
if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
historyMenu.popup(forwardButton.x, forwardButton.y + forwardButton.height)
}
}
}
ToolButton {
id: reloadButton
icon.source: currentWebView && currentWebView.loading ? "../../img/browser/stop.png" : "../../img/browser/refresh.png"
onClicked: currentWebView && currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
}
Connections {
target: currentWebView
onUrlChanged: {
var ensAddr = urlENSDictionary[web3Provider.getHost(currentWebView.url)];
addressBar.text = ensAddr ? web3Provider.replaceHostByENS(currentWebView.url, ensAddr) : currentWebView.url;
}
}
StyledTextField {
id: addressBar
Layout.fillWidth: true
background: Rectangle {
border.color: Style.current.secondaryText
border.width: 1
radius: 2
}
leftPadding: 25
Image {
anchors.verticalCenter: addressBar.verticalCenter;
x: 5
z: 2
id: faviconImage
width: 16; height: 16
sourceSize: Qt.size(width, height)
source: currentWebView && currentWebView.icon ? currentWebView.icon : ""
}
focus: true
text: ""
Keys.onPressed: {
// TODO: disable browsing local files? file://
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return){
currentWebView.url = determineRealURL(text);
}
}
}
Menu {
id: accountsMenu
Repeater {
model: walletModel.accounts
MenuItem {
visible: model.isWallet || model.walletType === "generated"
height: visible ? 40 : 0
text: model.name
onTriggered: {
web3Provider.dappsAddress = model.address;
web3Provider.clearPermissions();
for (let i = 0; i < tabs.count; ++i){
tabs.getTab(i).item.reload();
}
}
checked: {
if(web3Provider.dappsAddress === model.address){
txtAccountBtn.text = model.name.substr(0, 1);
rectAccountBtn.color = model.iconColor
return true;
}
return false;
}
}
}
}
ToolButton {
id: accountBtn
Rectangle {
id: rectAccountBtn
anchors.centerIn: parent
width: 20
height: width
radius: width / 2
color: "#ff0000"
StyledText {
id: txtAccountBtn
text: ""
opacity: 0.7
font.weight: Font.Bold
font.pixelSize: 14
color: "white"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
onClicked: accountsMenu.popup(accountBtn.x, accountBtn.y + accountBtn.height)
}
Menu {
id: settingsMenu
y: settingsMenuButton.height
x: settingsMenuButton.x
MenuItem {
id: loadImages
text: "Autoload images"
checkable: true
checked: WebEngine.settings.autoLoadImages
}
MenuItem {
id: javaScriptEnabled
text: "JavaScript On"
checkable: true
checked: WebEngine.settings.javascriptEnabled
}
MenuItem {
id: errorPageEnabled
text: "ErrorPage On"
checkable: true
checked: WebEngine.settings.errorPageEnabled
}
MenuItem {
id: pluginsEnabled
text: "Plugins On"
checkable: true
checked: true
}
MenuItem {
id: offTheRecordEnabled
text: "Off The Record"
checkable: true
checked: currentWebView && currentWebView.profile === otrProfile
onToggled: function(checked) {
if (currentWebView) {
currentWebView.profile = checked ? otrProfile : defaultProfile;
}
}
}
MenuItem {
id: httpDiskCacheEnabled
text: "HTTP Disk Cache"
checkable: currentWebView && !currentWebView.profile.offTheRecord
checked: currentWebView && (currentWebView.profile.httpCacheType === WebEngineProfile.DiskHttpCache)
onToggled: function(checked) {
if (currentWebView) {
currentWebView.profile.httpCacheType = checked ? WebEngineProfile.DiskHttpCache : WebEngineProfile.MemoryHttpCache;
}
}
}
MenuItem {
id: autoLoadIconsForPage
text: "Icons On"
checkable: true
checked: WebEngine.settings.autoLoadIconsForPage
}
MenuItem {
id: touchIconsEnabled
text: "Touch Icons On"
checkable: true
checked: WebEngine.settings.touchIconsEnabled
enabled: autoLoadIconsForPage.checked
}
MenuItem {
id: webRTCPublicInterfacesOnly
text: "WebRTC Public Interfaces Only"
checkable: true
checked: WebEngine.settings.webRTCPublicInterfacesOnly
}
MenuItem {
id: devToolsEnabled
text: "Open DevTools"
checkable: true
checked: false
}
MenuItem {
id: pdfViewerEnabled
text: "PDF viewer enabled"
checkable: true
checked: WebEngine.settings.pdfViewerEnabled
}
}
ToolButton {
id: settingsMenuButton
text: qsTr("⋮")
onClicked: settingsMenu.open()
}
}
}

274
ui/app/AppLayouts/Browser/BrowserLayout.qml
View File

@ -274,19 +274,6 @@ Item {
findBar.reset();
}
Settings {
id : browserSettings
property alias autoLoadImages: loadImages.checked
property alias javaScriptEnabled: javaScriptEnabled.checked
property alias errorPageEnabled: errorPageEnabled.checked
property alias pluginsEnabled: pluginsEnabled.checked
property alias autoLoadIconsForPage: autoLoadIconsForPage.checked
property alias touchIconsEnabled: touchIconsEnabled.checked
property alias webRTCPublicInterfacesOnly : webRTCPublicInterfacesOnly.checked
property alias devToolsEnabled: devToolsEnabled.checked
property alias pdfViewerEnabled: pdfViewerEnabled.checked
}
Action {
shortcut: "Ctrl+D"
onTriggered: {
@ -397,245 +384,12 @@ Item {
Action {
shortcut: "F12"
onTriggered: {
browserSettings.devToolsEnabled = !browserSettings.devToolsEnabled
browserHeader.browserSettings.devToolsEnabled = !browserHeader.browserSettings.devToolsEnabled
}
}
Item {
id: navigationBar
anchors.left: parent.left
anchors.right: parent.right
height: 45
RowLayout {
anchors.fill: parent
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)
}
}
}
ToolButton {
id: backButton
icon.source: "../../img/browser/back.png"
onClicked: currentWebView.goBack()
onPressAndHold: {
if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
historyMenu.popup(backButton.x, backButton.y + backButton.height)
}
}
enabled: currentWebView && currentWebView.canGoBack
}
ToolButton {
id: forwardButton
icon.source: "../../img/browser/forward.png"
onClicked: currentWebView.goForward()
enabled: currentWebView && currentWebView.canGoForward
onPressAndHold: {
if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
historyMenu.popup(forwardButton.x, forwardButton.y + forwardButton.height)
}
}
}
ToolButton {
id: reloadButton
icon.source: currentWebView && currentWebView.loading ? "../../img/browser/stop.png" : "../../img/browser/refresh.png"
onClicked: currentWebView && currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
}
Connections {
target: currentWebView
onUrlChanged: {
var ensAddr = urlENSDictionary[web3Provider.getHost(currentWebView.url)];
addressBar.text = ensAddr ? web3Provider.replaceHostByENS(currentWebView.url, ensAddr) : currentWebView.url;
}
}
StyledTextField {
id: addressBar
Layout.fillWidth: true
background: Rectangle {
border.color: Style.current.secondaryText
border.width: 1
radius: 2
}
leftPadding: 25
Image {
anchors.verticalCenter: addressBar.verticalCenter;
x: 5
z: 2
id: faviconImage
width: 16; height: 16
sourceSize: Qt.size(width, height)
source: currentWebView && currentWebView.icon ? currentWebView.icon : ""
}
focus: true
text: ""
Keys.onPressed: {
// TODO: disable browsing local files? file://
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return){
currentWebView.url = determineRealURL(text);
}
}
}
Menu {
id: accountsMenu
Repeater {
model: walletModel.accounts
MenuItem {
visible: model.isWallet || model.walletType === "generated"
height: visible ? 40 : 0
text: model.name
onTriggered: {
web3Provider.dappsAddress = model.address;
web3Provider.clearPermissions();
for (let i = 0; i < tabs.count; ++i){
tabs.getTab(i).item.reload();
}
}
checked: {
if(web3Provider.dappsAddress == model.address){
txtAccountBtn.text = model.name.substr(0, 1);
rectAccountBtn.color = model.iconColor
return true;
}
return false;
}
}
}
}
ToolButton {
id: accountBtn
Rectangle {
id: rectAccountBtn
anchors.centerIn: parent
width: 20
height: width
radius: width / 2
color: "#ff0000"
StyledText {
id: txtAccountBtn
text: ""
opacity: 0.7
font.weight: Font.Bold
font.pixelSize: 14
color: "white"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
onClicked: accountsMenu.popup(accountBtn.x, accountBtn.y + accountBtn.height)
}
Menu {
id: settingsMenu
y: settingsMenuButton.height
x: settingsMenuButton.x
MenuItem {
id: loadImages
text: "Autoload images"
checkable: true
checked: WebEngine.settings.autoLoadImages
}
MenuItem {
id: javaScriptEnabled
text: "JavaScript On"
checkable: true
checked: WebEngine.settings.javascriptEnabled
}
MenuItem {
id: errorPageEnabled
text: "ErrorPage On"
checkable: true
checked: WebEngine.settings.errorPageEnabled
}
MenuItem {
id: pluginsEnabled
text: "Plugins On"
checkable: true
checked: true
}
MenuItem {
id: offTheRecordEnabled
text: "Off The Record"
checkable: true
checked: currentWebView && currentWebView.profile === otrProfile
onToggled: function(checked) {
if (currentWebView) {
currentWebView.profile = checked ? otrProfile : defaultProfile;
}
}
}
MenuItem {
id: httpDiskCacheEnabled
text: "HTTP Disk Cache"
checkable: currentWebView && !currentWebView.profile.offTheRecord
checked: currentWebView && (currentWebView.profile.httpCacheType === WebEngineProfile.DiskHttpCache)
onToggled: function(checked) {
if (currentWebView) {
currentWebView.profile.httpCacheType = checked ? WebEngineProfile.DiskHttpCache : WebEngineProfile.MemoryHttpCache;
}
}
}
MenuItem {
id: autoLoadIconsForPage
text: "Icons On"
checkable: true
checked: WebEngine.settings.autoLoadIconsForPage
}
MenuItem {
id: touchIconsEnabled
text: "Touch Icons On"
checkable: true
checked: WebEngine.settings.touchIconsEnabled
enabled: autoLoadIconsForPage.checked
}
MenuItem {
id: webRTCPublicInterfacesOnly
text: "WebRTC Public Interfaces Only"
checkable: true
checked: WebEngine.settings.webRTCPublicInterfacesOnly
}
MenuItem {
id: devToolsEnabled
text: "Open DevTools"
checkable: true
checked: false
}
MenuItem {
id: pdfViewerEnabled
text: "PDF viewer enabled"
checkable: true
checked: WebEngine.settings.pdfViewerEnabled
}
}
ToolButton {
id: settingsMenuButton
text: qsTr("⋮")
onClicked: settingsMenu.open()
}
}
BrowserHeader {
id: browserHeader
}
QQC1.TabView {
@ -661,7 +415,7 @@ Item {
tabs.removeTab(index)
}
anchors.top: navigationBar.bottom
anchors.top: browserHeader.bottom
anchors.bottom: devToolsView.top
anchors.left: parent.left
anchors.right: parent.right
@ -724,7 +478,7 @@ Item {
focus: true
webChannel: channel
onLinkHovered: function(hoveredUrl) {
if (hoveredUrl == "")
if (hoveredUrl === "")
hideStatusText.start();
else {
statusText.text = hoveredUrl;
@ -733,14 +487,14 @@ Item {
}
}
settings.autoLoadImages: browserSettings.autoLoadImages
settings.javascriptEnabled: browserSettings.javaScriptEnabled
settings.errorPageEnabled: browserSettings.errorPageEnabled
settings.pluginsEnabled: browserSettings.pluginsEnabled
settings.autoLoadIconsForPage: browserSettings.autoLoadIconsForPage
settings.touchIconsEnabled: browserSettings.touchIconsEnabled
settings.webRTCPublicInterfacesOnly: browserSettings.webRTCPublicInterfacesOnly
settings.pdfViewerEnabled: browserSettings.pdfViewerEnabled
settings.autoLoadImages: browserHeader.browserSettings.autoLoadImages
settings.javascriptEnabled: browserHeader.browserSettings.javaScriptEnabled
settings.errorPageEnabled: browserHeader.browserSettings.errorPageEnabled
settings.pluginsEnabled: browserHeader.browserSettings.pluginsEnabled
settings.autoLoadIconsForPage: browserHeader.browserSettings.autoLoadIconsForPage
settings.touchIconsEnabled: browserHeader.browserSettings.touchIconsEnabled
settings.webRTCPublicInterfacesOnly: browserHeader.browserSettings.webRTCPublicInterfacesOnly
settings.pdfViewerEnabled: browserHeader.browserSettings.pdfViewerEnabled
onCertificateError: function(error) {
error.defer();
@ -849,7 +603,7 @@ Item {
WebEngineView {
id: devToolsView
visible: devToolsEnabled.checked
visible: browserHeader.browserSettings.devToolsEnabled
height: visible ? 400 : 0
inspectedView: visible && tabs.currentIndex < tabs.count ? tabs.getTab(tabs.currentIndex).item : null
anchors.left: parent.left

1
ui/nim-status-client.pro
View File

@ -121,6 +121,7 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
DISTFILES += \
app/AppLayouts/Browser/BrowserHeader.qml \
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml \
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandModal.qml \
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml \