status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-01-22 04:21:44 +00:00
Code Issues Projects Releases Wiki Activity

refactor: move browser Tab to its own component

Browse Source
This commit is contained in:
Jonathan Rainville 2020-10-21 14:49:49 -04:00 committed by Iuri Matias
parent 6f929c3665
commit ac8f476f44
3 changed files with 95 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -392,93 +392,7 @@ Rectangle {
tab.item.url = determineRealURL("https://simpledapp.eth");
}
style: TabViewStyle {
property color fillColor: Style.current.background
property color nonSelectedColor: Qt.darker(Style.current.background, 1.2)
frameOverlap: 1
tabsMovable: true
frame: Rectangle {
color: Style.current.transparent
border.width: 0
}
tab: Item {
implicitWidth: tabRectangle.implicitWidth + 5 + (newTabloader.active ? newTabloader.width + Style.current.halfPadding : 0)
implicitHeight: tabRectangle.implicitHeight
Rectangle {
id: tabRectangle
color: styleData.selected ? fillColor : nonSelectedColor
border.width: 0
implicitWidth: 240
implicitHeight: tabs.tabHeight
radius: Style.current.radius
// This rectangle is to hide the bottom radius
Rectangle {
width: parent.implicitWidth
height: 5
color: parent.color
border.width: 0
anchors.bottom: parent.bottom
}
FaviconImage {
id: faviconImage
currentTab: tabs.getTab(styleData.index) && tabs.getTab(styleData.index).item
anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left
anchors.leftMargin: Style.current.halfPadding
}
StyledText {
id: text
anchors.verticalCenter: parent.verticalCenter
anchors.left: faviconImage.right
anchors.leftMargin: Style.current.halfPadding
anchors.right: closeTabBtn.left
anchors.rightMargin: 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"
iconColor: Style.current.textColor
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding
onClicked: tabs.removeView(styleData.index)
width: 16
height: 16
}
}
Loader {
id: newTabloader
active: styleData.index === tabs.count - 1
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
sourceComponent: Component {
StatusIconButton {
icon.name: "browser/close"
iconColor: Style.current.textColor
iconRotation: 45
onClicked: addNewTab()
width: 16
height: 16
}
}
}
}
}
style: BrowserTabStyle {}
Component {
id: tabComponent

93
ui/app/AppLayouts/Browser/BrowserTabStyle.qml Normal file
View File

@ -0,0 +1,93 @@
import QtQuick 2.13
import QtQuick.Controls.Styles 1.0
import "../../../shared"
import "../../../shared/status"
import "../../../imports"
TabViewStyle {
property color fillColor: Style.current.background
property color nonSelectedColor: Qt.darker(Style.current.background, 1.2)
frameOverlap: 1
tabsMovable: true
frame: Rectangle {
color: Style.current.transparent
border.width: 0
}
tab: Item {
implicitWidth: tabRectangle.implicitWidth + 5 + (newTabloader.active ? newTabloader.width + Style.current.halfPadding : 0)
implicitHeight: tabRectangle.implicitHeight
Rectangle {
id: tabRectangle
color: styleData.selected ? fillColor : nonSelectedColor
border.width: 0
implicitWidth: 240
implicitHeight: tabs.tabHeight
radius: Style.current.radius
// This rectangle is to hide the bottom radius
Rectangle {
width: parent.implicitWidth
height: 5
color: parent.color
border.width: 0
anchors.bottom: parent.bottom
}
FaviconImage {
id: faviconImage
currentTab: tabs.getTab(styleData.index) && tabs.getTab(styleData.index).item
anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left
anchors.leftMargin: Style.current.halfPadding
}
StyledText {
id: text
anchors.verticalCenter: parent.verticalCenter
anchors.left: faviconImage.right
anchors.leftMargin: Style.current.halfPadding
anchors.right: closeTabBtn.left
anchors.rightMargin: 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"
iconColor: Style.current.textColor
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding
onClicked: tabs.removeView(styleData.index)
width: 16
height: 16
}
}
Loader {
id: newTabloader
active: styleData.index === tabs.count - 1
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
sourceComponent: Component {
StatusIconButton {
icon.name: "browser/close"
iconColor: Style.current.textColor
iconRotation: 45
onClicked: addNewTab()
width: 16
height: 16
}
}
}
}
}

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

@ -124,6 +124,7 @@ DISTFILES += \
app/AppLayouts/Browser/BrowserConnectionModal.qml \
app/AppLayouts/Browser/BrowserHeader.qml \
app/AppLayouts/Browser/BrowserSettingsMenu.qml \
app/AppLayouts/Browser/BrowserTabStyle.qml \
app/AppLayouts/Browser/BrowserTabs.qml \
app/AppLayouts/Browser/BrowserWalletMenu.qml \
app/AppLayouts/Browser/FaviconImage.qml \