feat: add tabs at the top of the url bar
This commit is contained in:
Jonathan Rainville
Iuri Matias
parent
aa2e2dea64
commit
f711d0a899
|
|
@ -48,8 +48,8 @@
|
|||
**
|
||||
****************************************************************************/
|
||||
|
||||
import QtQuick 2.1
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Window 2.13
|
||||
import QtWebEngine 1.9
|
||||
|
||||
Window {
|
||||
|
|
@ -71,4 +71,4 @@ Window {
|
|||
window.height = geometry.height
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import "../../../imports"
|
|||
|
||||
Rectangle {
|
||||
property alias browserSettings: browserSettings
|
||||
property alias addressBar: addressBar
|
||||
readonly property int innerMargin: 12
|
||||
|
||||
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 {
|
||||
id: chatCommandsBtn
|
||||
icon.name: currentWebView && currentWebView.loading ? "close" : "browser/refresh"
|
||||
|
|
@ -160,8 +150,6 @@ Rectangle {
|
|||
}
|
||||
checked: {
|
||||
if(web3Provider.dappsAddress === model.address){
|
||||
txtAccountBtn.text = model.name.substr(0, 1);
|
||||
rectAccountBtn.color = model.iconColor
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -8,14 +8,17 @@ import Qt.labs.settings 1.0
|
|||
import QtQuick.Controls.Styles 1.0
|
||||
import QtQuick.Dialogs 1.2
|
||||
import "../../../shared"
|
||||
import "../../../shared/status"
|
||||
import "../../../imports"
|
||||
import "../Chat/ChatColumn/ChatComponents"
|
||||
|
||||
// Code based on https://code.qt.io/cgit/qt/qtwebengine.git/tree/examples/webengine/quicknanobrowser/BrowserWindow.qml?h=5.15
|
||||
// Licensed under BSD
|
||||
|
||||
Item {
|
||||
Rectangle {
|
||||
id: browserWindow
|
||||
color: Style.current.inputBackground
|
||||
border.width: 0
|
||||
|
||||
property Item currentWebView: tabs.currentIndex < tabs.count ? tabs.getTab(tabs.currentIndex).item : null
|
||||
|
||||
|
|
@ -284,8 +287,8 @@ Item {
|
|||
id: focus
|
||||
shortcut: "Ctrl+L"
|
||||
onTriggered: {
|
||||
addressBar.forceActiveFocus();
|
||||
addressBar.selectAll();
|
||||
browserHeader.addressBar.forceActiveFocus();
|
||||
browserHeader.addressBar.selectAll();
|
||||
}
|
||||
}
|
||||
Action {
|
||||
|
|
@ -300,8 +303,8 @@ Item {
|
|||
onTriggered: {
|
||||
tabs.createEmptyTab(tabs.count != 0 ? currentWebView.profile : defaultProfile);
|
||||
tabs.currentIndex = tabs.count - 1;
|
||||
addressBar.forceActiveFocus();
|
||||
addressBar.selectAll();
|
||||
browserHeader.addressBar.forceActiveFocus();
|
||||
browserHeader.addressBar.selectAll();
|
||||
}
|
||||
}
|
||||
Action {
|
||||
|
|
@ -388,11 +391,18 @@ Item {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
BrowserHeader {
|
||||
id: browserHeader
|
||||
anchors.top: parent.top
|
||||
// TODO Replace with tab height
|
||||
anchors.topMargin: tabs.tabHeight + tabs.anchors.topMargin
|
||||
z: 52
|
||||
}
|
||||
|
||||
QQC1.TabView {
|
||||
property int tabHeight: 40
|
||||
|
||||
id: tabs
|
||||
function createEmptyTab(profile) {
|
||||
var tab = addTab("", tabComponent);
|
||||
|
|
@ -405,7 +415,7 @@ Item {
|
|||
|
||||
function indexOfView(view) {
|
||||
for (let i = 0; i < tabs.count; ++i)
|
||||
if (tabs.getTab(i).item == view)
|
||||
if (tabs.getTab(i).item === view)
|
||||
return i
|
||||
return -1
|
||||
}
|
||||
|
|
@ -415,7 +425,9 @@ Item {
|
|||
tabs.removeTab(index)
|
||||
}
|
||||
|
||||
anchors.top: browserHeader.bottom
|
||||
z: 50
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Style.current.halfPadding
|
||||
anchors.bottom: devToolsView.top
|
||||
anchors.left: parent.left
|
||||
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
|
||||
style: TabViewStyle {
|
||||
property color frameColor: "#999"
|
||||
property color fillColor: "#eee"
|
||||
property color nonSelectedColor: "#ddd"
|
||||
property color fillColor: Style.current.background
|
||||
property color nonSelectedColor: Style.current.modalBackground
|
||||
frameOverlap: 1
|
||||
tabsMovable: true
|
||||
|
||||
frame: Rectangle {
|
||||
color: "#eee"
|
||||
border.color: frameColor
|
||||
color: Style.current.transparent
|
||||
border.width: 0
|
||||
}
|
||||
|
||||
leftCorner: Rectangle {
|
||||
color: "red"
|
||||
width: 5
|
||||
height: 5
|
||||
}
|
||||
|
||||
tab: Rectangle {
|
||||
id: tabRectangle
|
||||
color: styleData.selected ? fillColor : nonSelectedColor
|
||||
border.width: 1
|
||||
border.color: frameColor
|
||||
implicitWidth: Math.max(text.width + 30, 80)
|
||||
implicitHeight: Math.max(text.height + 10, 20)
|
||||
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
|
||||
}
|
||||
border.width: 0
|
||||
implicitWidth: Math.max(faviconImage.width + text.width + Style.current.halfPadding * 4 + closeTabBtn.width, 240)
|
||||
implicitHeight: tabs.tabHeight + 5 // The additional height is to hide the weird rounded corner
|
||||
radius: Style.current.radius
|
||||
|
||||
Image {
|
||||
visible: tabs.count > 1
|
||||
source: "../../img/browser/close.png"
|
||||
width: 12
|
||||
height: 16
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.rightMargin: 4
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
enabled: tabs.count > 1
|
||||
onClicked: tabs.removeView(styleData.index)
|
||||
id: faviconImage
|
||||
anchors.verticalCenter: parent.verticalCenter;
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.halfPadding
|
||||
width: 24
|
||||
height: 24
|
||||
sourceSize: Qt.size(width, height)
|
||||
// TODO find a better default favicon
|
||||
source: {
|
||||
const thisTab = tabs.getTab(styleData.index) && tabs.getTab(styleData.index).item
|
||||
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
|
||||
WebEngineView {
|
||||
id: webEngineView
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: browserHeader.height - 4
|
||||
focus: true
|
||||
webChannel: channel
|
||||
onLinkHovered: function(hoveredUrl) {
|
||||
|
|
@ -573,7 +608,7 @@ Item {
|
|||
}
|
||||
|
||||
onLoadingChanged: function(loadRequest) {
|
||||
if (loadRequest.status == WebEngineView.LoadStartedStatus)
|
||||
if (loadRequest.status === WebEngineView.LoadStartedStatus)
|
||||
findBar.reset();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import "./AppLayouts"
|
|||
|
||||
RowLayout {
|
||||
id: appMain
|
||||
spacing: 0
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 828 B |
|
|
@ -122,6 +122,7 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
|
|||
|
||||
DISTFILES += \
|
||||
app/AppLayouts/Browser/BrowserHeader.qml \
|
||||
app/AppLayouts/Browser/BrowserTabs.qml \
|
||||
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml \
|
||||
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandModal.qml \
|
||||
app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml \
|
||||
|
|
|
|||
Loading…
Reference in New Issue