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 styled browser settings menu

This commit is contained in:
Jonathan Rainville 2020-10-09 13:56:42 -04:00 committed by Iuri Matias
parent 6c96ee4356
commit 23b8c6ab57
7 changed files with 175 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@ Rectangle {
property alias browserSettings: browserSettings
property alias addressBar: addressBar
readonly property int innerMargin: 12
property var addNewTab: function () {}
id: root
width: parent.width
@ -176,8 +177,9 @@ Rectangle {
}
}
// TODO move these to profile settings
Menu {
id: settingsMenu
id: settingsMenuOld
y: settingsMenuButton.height
x: settingsMenuButton.x
MenuItem {
@ -204,17 +206,6 @@ Rectangle {
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"
@ -259,10 +250,23 @@ Rectangle {
}
}
BrowserSettingsMenu {
id: settingsMenu
addNewTab: root.addNewTab
x: parent.width - width
y: parent.height
}
StatusIconButton {
id: settingsMenuButton
icon.name: "dots-icon"
onClicked: settingsMenu.open()
onClicked: {
if (settingsMenu.opened) {
settingsMenu.close()
} else {
settingsMenu.open()
}
}
width: 24
height: 24
Layout.rightMargin: root.innerMargin

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

@ -283,12 +283,7 @@ Rectangle {
browserHeader.addressBar.selectAll();
}
Action {
shortcut: StandardKey.AddTab
onTriggered: {
addNewTab()
}
}
Action {
shortcut: StandardKey.Close
onTriggered: {
@ -302,18 +297,7 @@ Rectangle {
findBar.visible = false;
}
}
Action {
shortcut: "Ctrl+0"
onTriggered: currentWebView.zoomFactor = 1.0
}
Action {
shortcut: StandardKey.ZoomOut
onTriggered: currentWebView.zoomFactor -= 0.1
}
Action {
shortcut: StandardKey.ZoomIn
onTriggered: currentWebView.zoomFactor += 0.1
}
Action {
shortcut: StandardKey.Copy
@ -351,13 +335,6 @@ Rectangle {
shortcut: StandardKey.Forward
onTriggered: currentWebView.triggerWebAction(WebEngineView.Forward)
}
Action {
shortcut: StandardKey.Find
onTriggered: {
if (!findBar.visible)
findBar.visible = true;
}
}
Action {
shortcut: StandardKey.FindNext
onTriggered: findBar.findNext()
@ -366,12 +343,6 @@ Rectangle {
shortcut: StandardKey.FindPrevious
onTriggered: findBar.findPrevious()
}
Action {
shortcut: "F12"
onTriggered: {
browserHeader.browserSettings.devToolsEnabled = !browserHeader.browserSettings.devToolsEnabled
}
}
BrowserHeader {
id: browserHeader
@ -379,6 +350,7 @@ Rectangle {
anchors.topMargin: tabs.tabHeight + tabs.anchors.topMargin
z: 52
visible: !downloadView.visible
addNewTab: browserWindow.addNewTab
}
QQC1.TabView {
@ -527,6 +499,13 @@ Rectangle {
}
backgroundColor: Style.current.background
function changeZoomFactor(newFactor) {
// FIXME there seems to be a bug in the WebEngine where the zoomFactor only update 1/2 times
zoomFactor = newFactor
zoomFactor = newFactor
zoomFactor = newFactor
}
settings.autoLoadImages: browserHeader.browserSettings.autoLoadImages
settings.javascriptEnabled: browserHeader.browserSettings.javaScriptEnabled
settings.errorPageEnabled: browserHeader.browserSettings.errorPageEnabled
@ -543,24 +522,19 @@ Rectangle {
onNewViewRequested: function(request) {
if (!request.userInitiated) {
print("PROUT")
print("Warning: Blocked a popup window.");
} else if (request.destination === WebEngineView.NewViewInTab) {
print("NewViewInTab")
var tab = tabs.createEmptyTab(currentWebView.profile);
tabs.currentIndex = tabs.count - 1;
request.openIn(tab.item);
} else if (request.destination === WebEngineView.NewViewInBackgroundTab) {
print("NewViewInBackgroundTab")
var backgroundTab = tabs.createEmptyTab(currentWebView.profile);
request.openIn(backgroundTab.item);
} else if (request.destination === WebEngineView.NewViewInDialog) {
print("NewViewInDialog")
var dialog = browserDialogComponent.createObject();
dialog.currentWebView.profile = currentWebView.profile;
request.openIn(dialog.currentWebView);
} else {
print("SOMETHIGN")
// Instead of opening a new window, we open a new tab
// TODO: remove "open in new window" from context menu
var tab = tabs.createEmptyTab(currentWebView.profile);
@ -769,8 +743,8 @@ Rectangle {
id: findBar
visible: false
anchors.right: parent.right
anchors.rightMargin: 10
anchors.top: parent.top
anchors.top: browserHeader.bottom
z: 60
onFindNext: {
if (text)

89
ui/app/AppLayouts/Browser/BrowserSettingsMenu.qml Normal file
View File

@ -0,0 +1,89 @@
import QtQuick 2.13
import QtQuick.Controls 2.3
import QtWebEngine 1.9
import "../../../shared"
import "../../../shared/status"
import "../../../imports"
import "../Chat/ChatColumn/ChatComponents"
PopupMenu {
property var addNewTab: function () {}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
Action {
text: qsTr("New Tab")
shortcut: StandardKey.AddTab
onTriggered: {
addNewTab()
}
}
Action {
id: offTheRecordEnabled
// TODO show an indicator on the browser or tab?
text: checked ? qsTr("Exit Incognito mode") : qsTr("Go Incognito")
checkable: true
checked: currentWebView && currentWebView.profile === otrProfile
onToggled: function(checked) {
if (currentWebView) {
currentWebView.profile = checked ? otrProfile : defaultProfile;
}
}
}
Separator {}
// TODO find a way to put both in one button
Action {
text: qsTr("Zoom In")
shortcut: StandardKey.ZoomIn
onTriggered: {
const newZoom = currentWebView.zoomFactor + 0.1
currentWebView.changeZoomFactor(newZoom)
}
}
Action {
text: qsTr("Zoom Out")
shortcut: StandardKey.ZoomOut
onTriggered: {
const newZoom = currentWebView.zoomFactor - 0.1
currentWebView.changeZoomFactor(newZoom)
}
}
Action {
shortcut: "Ctrl+0"
onTriggered: currentWebView.changeZoomFactor(1.0)
}
Separator {}
Action {
text: qsTr("Find")
shortcut: StandardKey.Find
onTriggered: {
if (!findBar.visible) {
findBar.visible = true;
findBar.forceActiveFocus()
}
}
}
Action {
text: qsTr("Developper Tools")
shortcut: "F12"
onTriggered: {
browserHeader.browserSettings.devToolsEnabled = !browserHeader.browserSettings.devToolsEnabled
}
}
Separator {}
Action {
text: qsTr("Settings")
shortcut: "Ctrl+,"
onTriggered: {
console.log('Open settings in Profile')
}
}
}

75
ui/app/AppLayouts/Browser/FindBar.qml
View File

@ -48,10 +48,13 @@
**
****************************************************************************/
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import QtQuick.Layouts 1.0
import "../../../shared"
import "../../../shared/status"
import "../../../imports"
Rectangle {
id: root
@ -69,17 +72,35 @@ Rectangle {
signal findNext()
signal findPrevious()
width: 250
height: 35
radius: 2
width: 300
height: 40
radius: Style.current.radius
border.width: 1
border.color: "black"
color: "white"
border.width: 0
color: Style.current.background
layer.enabled: true
layer.effect: DropShadow{
width: root.width
height: root.height
x: root.x
y: root.y + 10
visible: root.visible
source: root
horizontalOffset: 0
verticalOffset: 2
radius: 10
samples: 15
color: "#22000000"
}
function forceActiveFocus() {
findTextField.forceActiveFocus();
}
onVisibleChanged: {
if (visible)
findTextField.forceActiveFocus();
forceActiveFocus()
}
@ -96,14 +117,13 @@ Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
TextField {
StyledTextField {
id: findTextField
anchors.fill: parent
style: TextFieldStyle {
background: Rectangle {
color: "transparent"
}
background: Rectangle {
color: "transparent"
border.width: 0
}
onAccepted: root.findNext()
@ -114,33 +134,40 @@ Rectangle {
Label {
text: activeMatch + "/" + numberOfMatches
visible: findTextField.text != ""
visible: findTextField.text !== ""
}
Rectangle {
border.width: 1
border.color: "#ddd"
border.color: Style.current.border
width: 2
height: parent.height
anchors.topMargin: 5
anchors.bottomMargin: 5
}
ToolButton {
text: "<"
StatusIconButton {
icon.name: "caret"
enabled: numberOfMatches > 0
iconRotation: 90
onClicked: root.findPrevious()
icon.width: 14
}
ToolButton {
text: ">"
StatusIconButton {
icon.name: "caret"
enabled: numberOfMatches > 0
iconRotation: -90
onClicked: root.findNext()
icon.width: 14
}
ToolButton {
text: "x"
onClicked: root.visible = false
StatusIconButton {
icon.name: "close"
onClicked: root.visible = false
icon.width: 20
}
}
}

1
ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
View File

@ -96,7 +96,6 @@ Rectangle {
menu = groupContextMenu
}
menu.arrowX = menu.width - 40
menu.popup(moreActionsBtn.x, moreActionsBtn.height)
}

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

@ -123,6 +123,7 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
DISTFILES += \
app/AppLayouts/Browser/BrowserConnectionModal.qml \
app/AppLayouts/Browser/BrowserHeader.qml \
app/AppLayouts/Browser/BrowserSettingsMenu.qml \
app/AppLayouts/Browser/BrowserTabs.qml \
app/AppLayouts/Browser/BrowserWalletMenu.qml \
app/AppLayouts/Browser/FaviconImage.qml \

31
ui/shared/PopupMenu.qml
View File

@ -7,12 +7,11 @@ import "../shared"
Menu {
// This is to add icons to submenu items. QML doesn't have a way to add icons to those sadly so this is a workaround
property var subMenuIcons: []
property alias arrowX: bgPopupMenuTopArrow.x
property int paddingSize: 8
property bool hasArrow: true
closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnReleaseOutside | Popup.CloseOnEscape
id: popupMenu
topPadding: bgPopupMenuTopArrow.height + paddingSize
topPadding: paddingSize
bottomPadding: paddingSize
delegate: MenuItem {
@ -42,12 +41,13 @@ Menu {
implicitWidth: 200
implicitHeight: 34
font.pixelSize: 13
font.weight: checked ? Font.Medium : Font.Normal
icon.color: popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.blue
icon.source: this.subMenu ? subMenuIcons[subMenuIndex].source : popupMenuItem.action.icon.source
icon.width: this.subMenu ? subMenuIcons[subMenuIndex].width : popupMenuItem.action.icon.width
icon.height: this.subMenu ? subMenuIcons[subMenuIndex].height : popupMenuItem.action.icon.height
visible: popupMenuItem.action.enabled
height: popupMenuItem.action.enabled ? popupMenuItem.implicitHeight : 0
visible: popupMenuItem.action.enabled && !!popupMenuItem.text
height: visible ? popupMenuItem.implicitHeight : 0
arrow: SVGImage {
source: "../app/img/caret.svg"
@ -112,29 +112,6 @@ Menu {
background: Item {
id: bgPopupMenu
implicitWidth: 220
Rectangle {
id: bgPopupMenuTopArrow
visible: popupMenu.hasArrow
color: Style.current.modalBackground
height: 14
width: 14
rotation: 135
x: bgPopupMenu.width / 2 - width / 2
layer.enabled: true
layer.effect: DropShadow{
width: bgPopupMenuTopArrow.width
height: bgPopupMenuTopArrow.height
x: bgPopupMenuTopArrow.x
y: bgPopupMenuTopArrow.y + 10
visible: bgPopupMenuTopArrow.visible
source: bgPopupMenuTopArrow
horizontalOffset: 0
verticalOffset: 5
radius: 10
samples: 15
color: "#22000000"
}
}
Rectangle {
id: bgPopupMenuContent