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

feat: add tabs at the top of the url bar

This commit is contained in:
Jonathan Rainville 2020-10-08 14:08:50 -04:00 committed by Iuri Matias
parent aa2e2dea64
commit f711d0a899
6 changed files with 85 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/app/AppLayouts/Browser/BrowserDialog.qml
View File

@ -48,8 +48,8 @@
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.1 import QtQuick 2.13
import QtQuick.Window 2.2 import QtQuick.Window 2.13
import QtWebEngine 1.9 import QtWebEngine 1.9
Window { Window {
@ -71,4 +71,4 @@ Window {
window.height = geometry.height window.height = geometry.height
} }
} }
} }

14
ui/app/AppLayouts/Browser/BrowserHeader.qml
View File

@ -10,6 +10,7 @@ import "../../../imports"
Rectangle { Rectangle {
property alias browserSettings: browserSettings property alias browserSettings: browserSettings
property alias addressBar: addressBar
readonly property int innerMargin: 12 readonly property int innerMargin: 12
id: root id: root
@ -120,17 +121,6 @@ Rectangle {
} }
} }
// TODO move this to the tab
// 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 : ""
// }
StatusIconButton { StatusIconButton {
id: chatCommandsBtn id: chatCommandsBtn
icon.name: currentWebView && currentWebView.loading ? "close" : "browser/refresh" icon.name: currentWebView && currentWebView.loading ? "close" : "browser/refresh"
@ -160,8 +150,6 @@ Rectangle {
} }
checked: { checked: {
if(web3Provider.dappsAddress === model.address){ if(web3Provider.dappsAddress === model.address){
txtAccountBtn.text = model.name.substr(0, 1);
rectAccountBtn.color = model.iconColor
return true; return true;
} }
return false; return false;

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

@ -8,14 +8,17 @@ import Qt.labs.settings 1.0
import QtQuick.Controls.Styles 1.0 import QtQuick.Controls.Styles 1.0
import QtQuick.Dialogs 1.2 import QtQuick.Dialogs 1.2
import "../../../shared" import "../../../shared"
import "../../../shared/status"
import "../../../imports" import "../../../imports"
import "../Chat/ChatColumn/ChatComponents" import "../Chat/ChatColumn/ChatComponents"
// Code based on https://code.qt.io/cgit/qt/qtwebengine.git/tree/examples/webengine/quicknanobrowser/BrowserWindow.qml?h=5.15 // Code based on https://code.qt.io/cgit/qt/qtwebengine.git/tree/examples/webengine/quicknanobrowser/BrowserWindow.qml?h=5.15
// Licensed under BSD // Licensed under BSD
Item { Rectangle {
id: browserWindow id: browserWindow
color: Style.current.inputBackground
border.width: 0
property Item currentWebView: tabs.currentIndex < tabs.count ? tabs.getTab(tabs.currentIndex).item : null property Item currentWebView: tabs.currentIndex < tabs.count ? tabs.getTab(tabs.currentIndex).item : null
@ -284,8 +287,8 @@ Item {
id: focus id: focus
shortcut: "Ctrl+L" shortcut: "Ctrl+L"
onTriggered: { onTriggered: {
addressBar.forceActiveFocus(); browserHeader.addressBar.forceActiveFocus();
addressBar.selectAll(); browserHeader.addressBar.selectAll();
} }
} }
Action { Action {
@ -300,8 +303,8 @@ Item {
onTriggered: { onTriggered: {
tabs.createEmptyTab(tabs.count != 0 ? currentWebView.profile : defaultProfile); tabs.createEmptyTab(tabs.count != 0 ? currentWebView.profile : defaultProfile);
tabs.currentIndex = tabs.count - 1; tabs.currentIndex = tabs.count - 1;
addressBar.forceActiveFocus(); browserHeader.addressBar.forceActiveFocus();
addressBar.selectAll(); browserHeader.addressBar.selectAll();
} }
} }
Action { Action {
@ -388,11 +391,18 @@ Item {
} }
} }
BrowserHeader { BrowserHeader {
id: browserHeader id: browserHeader
anchors.top: parent.top
// TODO Replace with tab height
anchors.topMargin: tabs.tabHeight + tabs.anchors.topMargin
z: 52
} }
QQC1.TabView { QQC1.TabView {
property int tabHeight: 40
id: tabs id: tabs
function createEmptyTab(profile) { function createEmptyTab(profile) {
var tab = addTab("", tabComponent); var tab = addTab("", tabComponent);
@ -405,7 +415,7 @@ Item {
function indexOfView(view) { function indexOfView(view) {
for (let i = 0; i < tabs.count; ++i) for (let i = 0; i < tabs.count; ++i)
if (tabs.getTab(i).item == view) if (tabs.getTab(i).item === view)
return i return i
return -1 return -1
} }
@ -415,7 +425,9 @@ Item {
tabs.removeTab(index) tabs.removeTab(index)
} }
anchors.top: browserHeader.bottom z: 50
anchors.top: parent.top
anchors.topMargin: Style.current.halfPadding
anchors.bottom: devToolsView.top anchors.bottom: devToolsView.top
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
@ -426,48 +438,69 @@ Item {
// Add custom tab view style so we can customize the tabs to include a close button // Add custom tab view style so we can customize the tabs to include a close button
style: TabViewStyle { style: TabViewStyle {
property color frameColor: "#999" property color fillColor: Style.current.background
property color fillColor: "#eee" property color nonSelectedColor: Style.current.modalBackground
property color nonSelectedColor: "#ddd"
frameOverlap: 1 frameOverlap: 1
tabsMovable: true
frame: Rectangle { frame: Rectangle {
color: "#eee" color: Style.current.transparent
border.color: frameColor border.width: 0
} }
leftCorner: Rectangle {
color: "red"
width: 5
height: 5
}
tab: Rectangle { tab: Rectangle {
id: tabRectangle id: tabRectangle
color: styleData.selected ? fillColor : nonSelectedColor color: styleData.selected ? fillColor : nonSelectedColor
border.width: 1 border.width: 0
border.color: frameColor implicitWidth: Math.max(faviconImage.width + text.width + Style.current.halfPadding * 4 + closeTabBtn.width, 240)
implicitWidth: Math.max(text.width + 30, 80) implicitHeight: tabs.tabHeight + 5 // The additional height is to hide the weird rounded corner
implicitHeight: Math.max(text.height + 10, 20) radius: Style.current.radius
Rectangle { height: 1 ; width: parent.width ; color: frameColor}
Rectangle { height: parent.height ; width: 1; color: frameColor}
Rectangle { x: parent.width - 2; height: parent.height ; width: 1; color: frameColor}
Text {
id: text
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 6
text: styleData.title
elide: Text.ElideRight
color: styleData.selected ? "black" : frameColor
}
Image { Image {
visible: tabs.count > 1 id: faviconImage
source: "../../img/browser/close.png" anchors.verticalCenter: parent.verticalCenter;
width: 12 anchors.left: parent.left
height: 16 anchors.leftMargin: Style.current.halfPadding
anchors.right: parent.right width: 24
anchors.verticalCenter: parent.verticalCenter height: 24
anchors.rightMargin: 4 sourceSize: Qt.size(width, height)
MouseArea { // TODO find a better default favicon
anchors.fill: parent source: {
enabled: tabs.count > 1 const thisTab = tabs.getTab(styleData.index) && tabs.getTab(styleData.index).item
onClicked: tabs.removeView(styleData.index) return thisTab && !!thisTab.icon.toString() ? thisTab.icon : "../../img/globe.svg"
} }
} }
StyledText {
id: text
anchors.verticalCenter: parent.verticalCenter
anchors.left: faviconImage.right
anchors.leftMargin: Style.current.halfPadding
text: styleData.title
// TODO the elide probably doesn't work. Set a Max width
elide: Text.ElideRight
color: Style.current.textColor
}
StatusIconButton {
id: closeTabBtn
visible: tabs.count > 1
enabled: visible
icon.name: "browser/close"
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding
onClicked: tabs.removeView(styleData.index)
width: 16
height: 16
}
} }
} }
@ -475,6 +508,8 @@ Item {
id: tabComponent id: tabComponent
WebEngineView { WebEngineView {
id: webEngineView id: webEngineView
anchors.top: parent.top
anchors.topMargin: browserHeader.height - 4
focus: true focus: true
webChannel: channel webChannel: channel
onLinkHovered: function(hoveredUrl) { onLinkHovered: function(hoveredUrl) {
@ -573,7 +608,7 @@ Item {
} }
onLoadingChanged: function(loadRequest) { onLoadingChanged: function(loadRequest) {
if (loadRequest.status == WebEngineView.LoadStartedStatus) if (loadRequest.status === WebEngineView.LoadStartedStatus)
findBar.reset(); findBar.reset();
} }

1
ui/app/AppMain.qml
View File

@ -7,6 +7,7 @@ import "./AppLayouts"
RowLayout { RowLayout {
id: appMain id: appMain
spacing: 0
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.fillWidth: true

4
ui/app/img/browser/close.svg Normal file
View File

@ -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="M12.0655 4.99469C12.3584 4.70179 12.3584 4.22692 12.0655 3.93403C11.7726 3.64113 11.2977 3.64113 11.0048 3.93403L12.0655 4.99469ZM3.93376 11.0051C3.64087 11.298 3.64087 11.7729 3.93376 12.0658C4.22665 12.3586 4.70153 12.3586 4.99442 12.0658L3.93376 11.0051ZM11.0048 3.93403L3.93376 11.0051L4.99442 12.0658L12.0655 4.99469L11.0048 3.93403Z" fill="black"/>
<path d="M11.0048 12.066C11.2977 12.3589 11.7726 12.3589 12.0655 12.066C12.3584 11.7731 12.3584 11.2982 12.0655 11.0053L11.0048 12.066ZM4.99442 3.93425C4.70153 3.64135 4.22665 3.64135 3.93376 3.93425C3.64087 4.22714 3.64087 4.70201 3.93376 4.99491L4.99442 3.93425ZM12.0655 11.0053L4.99442 3.93425L3.93376 4.99491L11.0048 12.066L12.0655 11.0053Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 828 B

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

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