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: style address bar and surrounding buttons

This commit is contained in:
Jonathan Rainville 2020-10-08 11:31:53 -04:00 committed by Iuri Matias
parent 1316f35909
commit aa2e2dea64
7 changed files with 84 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,15 +3,20 @@ 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 "../../../shared"
import "../../../shared/status"
import "../../../imports"
Item {
Rectangle {
property alias browserSettings: browserSettings
readonly property int innerMargin: 12
id: root
width: parent.width
height: 45
color: Style.current.background
border.width: 0
Settings {
id : browserSettings
@ -28,6 +33,7 @@ Item {
RowLayout {
anchors.fill: parent
spacing: root.innerMargin
Menu {
id: historyMenu
@ -49,9 +55,10 @@ Item {
}
}
ToolButton {
StatusIconButton {
id: backButton
icon.source: "../../img/browser/back.png"
icon.name: "leave_chat"
disabledColor: Style.current.lightGrey
onClicked: currentWebView.goBack()
onPressAndHold: {
if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
@ -59,24 +66,27 @@ Item {
}
}
enabled: currentWebView && currentWebView.canGoBack
width: 24
height: 24
Layout.leftMargin: root.innerMargin
padding: 6
}
ToolButton {
StatusIconButton {
id: forwardButton
icon.source: "../../img/browser/forward.png"
icon.name: "leave_chat"
iconRotation: 180
disabledColor: Style.current.lightGrey
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()
enabled: currentWebView && currentWebView.canGoForward
width: 24
height: 24
Layout.leftMargin: -root.innerMargin/2
}
Connections {
@ -90,30 +100,47 @@ Item {
StyledTextField {
id: addressBar
height: 40
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 : ""
color: Style.current.inputBackground
border.color: Style.current.inputBorderFocus
border.width: activeFocus ? 1 : 0
radius: 20
}
leftPadding: Style.current.padding
placeholderText: qsTr("Enter URL")
focus: true
text: ""
color: Style.current.textColor
Keys.onPressed: {
// TODO: disable browsing local files? file://
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return){
currentWebView.url = determineRealURL(text);
}
}
// 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"
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding
onClicked: currentWebView && currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
width: 24
height: 24
}
}
Menu {
@ -143,27 +170,13 @@ Item {
}
}
ToolButton {
StatusIconButton {
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
}
}
icon.name: "walletIcon"
onClicked: accountsMenu.popup(accountBtn.x, accountBtn.y + accountBtn.height)
width: 24
height: 24
padding: 6
}
Menu {
@ -249,13 +262,23 @@ Item {
}
}
ToolButton {
StatusIconButton {
id: settingsMenuButton
text: qsTr("⋮")
icon.name: "dots-icon"
onClicked: settingsMenu.open()
width: 24
height: 24
Layout.rightMargin: root.innerMargin
padding: 6
}
}
}
/*##^##
Designer {
D{i:0;width:700}
}
##^##*/

BIN
ui/app/img/browser/back.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 184 B

BIN
ui/app/img/browser/close.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 389 B

BIN
ui/app/img/browser/forward.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 173 B

BIN
ui/app/img/browser/refresh.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 372 B

3
ui/app/img/browser/refresh.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6.25C16.2802 6.25 19.75 9.71979 19.75 14C19.75 18.2802 16.2802 21.75 12 21.75C7.71979 21.75 4.25 18.2802 4.25 14C4.25 13.5858 4.58579 13.25 5 13.25C5.41421 13.25 5.75 13.5858 5.75 14C5.75 17.4518 8.54822 20.25 12 20.25C15.4518 20.25 18.25 17.4518 18.25 14C18.25 10.5482 15.4518 7.75 12 7.75H11.0178C10.5723 7.75 10.3492 8.28857 10.6642 8.60355L12.5303 10.4697C12.8232 10.7626 12.8232 11.2374 12.5303 11.5303C12.2374 11.8232 11.7626 11.8232 11.4697 11.5303L7.46967 7.53033C7.17678 7.23744 7.17678 6.76256 7.46967 6.46967L11.4697 2.46967C11.7626 2.17678 12.2374 2.17678 12.5303 2.46967C12.8232 2.76256 12.8232 3.23744 12.5303 3.53033L10.6642 5.39645C10.3492 5.71143 10.5723 6.25 11.0178 6.25H12Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 828 B

14
ui/shared/status/StatusIconButton.qml
View File

@ -8,13 +8,21 @@ RoundButton {
id: control
property string type: "primary"
property color disabledColor: Style.current.secondaryText
property int iconRotation: 0
implicitHeight: 32
implicitWidth: 32
icon.height: 20
icon.width: 20
icon.color: (hovered || highlighted) ? Style.current.blue : Style.current.darkGrey
icon.color: {
if (!enabled) {
return control.disabledColor
}
return (hovered || highlighted) ? Style.current.blue : Style.current.secondaryText
}
radius: Style.current.radius
onIconChanged: {
@ -44,15 +52,17 @@ RoundButton {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
rotation: control.iconRotation
}
ColorOverlay {
anchors.fill: iconImg
source: iconImg
color: control.icon.color
antialiasing: true
smooth: true
rotation: control.iconRotation
}
}
MouseArea {