From 4bb5e562ea33be1168fba7d9408b9325ed669a61 Mon Sep 17 00:00:00 2001 From: Brad Davis Date: Mon, 27 Apr 2015 22:39:48 -0700 Subject: [PATCH 1/3] Browser work --- interface/resources/qml/Browser.qml | 124 +++++++++++++++--- interface/resources/qml/controls/Dialog.qml | 1 + .../resources/qml/controls/DialogBase.qml | 9 +- .../resources/qml/controls/TextInput.qml | 4 +- .../resources/qml/styles/HifiConstants.qml | 2 +- tests/ui/src/main.cpp | 2 + 6 files changed, 122 insertions(+), 20 deletions(-) diff --git a/interface/resources/qml/Browser.qml b/interface/resources/qml/Browser.qml index a439f9114c..1f33cc0d49 100644 --- a/interface/resources/qml/Browser.qml +++ b/interface/resources/qml/Browser.qml @@ -2,29 +2,121 @@ import QtQuick 2.3 import QtQuick.Controls 1.2 import QtWebKit 3.0 import "controls" +import "styles" Dialog { - title: "Browser Window" - id: testDialog - objectName: "Browser" - width: 1280 - height: 720 + id: root + HifiConstants { id: hifi } + title: "Browser" + resizable: true + contentImplicitWidth: clientArea.implicitWidth + contentImplicitHeight: clientArea.implicitHeight + + + Component.onCompleted: { + enabled = true + addressBar.text = webview.url + + } + + onParentChanged: { + if (visible && enabled) { + forceActiveFocus(); + } + } Item { id: clientArea - // The client area - anchors.fill: parent - anchors.margins: parent.margins - anchors.topMargin: parent.topMargin - + implicitHeight: 400 + implicitWidth: 600 + x: root.clientX + y: root.clientY + width: root.clientWidth + height: root.clientHeight + + Row { + id: buttons + spacing: 4 + anchors.top: parent.top + anchors.topMargin: 8 + anchors.left: parent.left + anchors.leftMargin: 8 + FontAwesome { + id: back; size: 48; enabled: webview.canGoBack; text: "\uf0a8" + MouseArea { anchors.fill: parent; onClicked: webview.goBack() } + } + FontAwesome { + id: forward; size: 48; enabled: webview.canGoForward; text: "\uf0a9" + MouseArea { anchors.fill: parent; onClicked: webview.goBack() } + } + FontAwesome { + id: reload; size: 48; text: webview.loading ? "\uf057" : "\uf021" + MouseArea { anchors.fill: parent; onClicked: webview.loading ? webview.stop() : webview.reload() } + } + } + Border { + id: border1 + height: 48 + radius: 8 + color: "gray" + anchors.top: parent.top + anchors.topMargin: 8 + anchors.right: parent.right + anchors.rightMargin: 8 + anchors.left: buttons.right + anchors.leftMargin: 8 + + Item { + id: barIcon + width: parent.height + height: parent.height + Image { + source: webview.icon; + x: (parent.height - height) / 2 + y: (parent.width - width) / 2 + verticalAlignment: Image.AlignVCenter; + horizontalAlignment: Image.AlignHCenter + onSourceChanged: console.log("Icon url: " + source) + } + } + + TextInput { + id: addressBar + anchors.right: parent.right + anchors.rightMargin: 8 + anchors.left: barIcon.right + anchors.leftMargin: 0 + anchors.verticalCenter: parent.verticalCenter + onAccepted: { + if (text.indexOf("http") != 0) { + text = "http://" + text; + } + webview.url = text + } + } + + } + ScrollView { - anchors.fill: parent + anchors.top: buttons.bottom + anchors.topMargin: 8 + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.right + Rectangle { anchors.fill: parent; color: "#7500ff00" } WebView { id: webview - url: "http://slashdot.org" + url: "http://highfidelity.com" anchors.fill: parent + onLoadingChanged: { + if (loadRequest.status == WebView.LoadSucceededStarted) { + addressBar.text = loadRequest.url + } + } + onIconChanged: { + barIcon.source = icon + } } - } - - } -} + } + } // item +} // dialog diff --git a/interface/resources/qml/controls/Dialog.qml b/interface/resources/qml/controls/Dialog.qml index 629813d3b5..01a2ae5a85 100644 --- a/interface/resources/qml/controls/Dialog.qml +++ b/interface/resources/qml/controls/Dialog.qml @@ -92,6 +92,7 @@ DialogBase { anchors.bottom: parent.bottom width: 16 height: 16 + z: 1000 hoverEnabled: true onPressed: { startX = mouseX diff --git a/interface/resources/qml/controls/DialogBase.qml b/interface/resources/qml/controls/DialogBase.qml index 050237c184..09fb8162e8 100644 --- a/interface/resources/qml/controls/DialogBase.qml +++ b/interface/resources/qml/controls/DialogBase.qml @@ -44,10 +44,18 @@ Item { anchors.left: parent.left border.color: root.frameColor clip: true + radius: 10 color: root.active ? hifi.colors.activeWindow.headerBackground : hifi.colors.inactiveWindow.headerBackground + Rectangle { + y: titleBorder.height / 2 + width: titleBorder.width + height: titleBorder.height /2 + color: titleBorder.color + } + Text { id: titleText color: root.active ? @@ -69,7 +77,6 @@ Item { anchors.topMargin: -titleBorder.border.width anchors.right: parent.right anchors.left: parent.left - clip: true } // client border } // window border diff --git a/interface/resources/qml/controls/TextInput.qml b/interface/resources/qml/controls/TextInput.qml index ceaca0c073..d533c67bd6 100644 --- a/interface/resources/qml/controls/TextInput.qml +++ b/interface/resources/qml/controls/TextInput.qml @@ -13,14 +13,14 @@ Original.TextInput { font.family: hifi.fonts.fontFamily font.pointSize: hifi.fonts.fontSize - +/* Original.Rectangle { // Render the rectangle as background z: -1 anchors.fill: parent color: hifi.colors.inputBackground } - +*/ Text { anchors.fill: parent font.pointSize: parent.font.pointSize diff --git a/interface/resources/qml/styles/HifiConstants.qml b/interface/resources/qml/styles/HifiConstants.qml index d24e9ca9be..ba82ac04d3 100644 --- a/interface/resources/qml/styles/HifiConstants.qml +++ b/interface/resources/qml/styles/HifiConstants.qml @@ -50,7 +50,7 @@ Item { QtObject { id: styles - readonly property int borderWidth: 5 + readonly property int borderWidth: 0 readonly property int borderRadius: borderWidth * 2 } diff --git a/tests/ui/src/main.cpp b/tests/ui/src/main.cpp index a5bc50b288..a05e1c68a9 100644 --- a/tests/ui/src/main.cpp +++ b/tests/ui/src/main.cpp @@ -406,6 +406,8 @@ protected: switch (event->key()) { case Qt::Key_L: if (event->modifiers() & Qt::CTRL) { + auto offscreenUi = DependencyManager::get(); + offscreenUi->load("Browser.qml"); } break; case Qt::Key_K: From f86b9f62b9c1820f233ea4f4ed1361f285d30695 Mon Sep 17 00:00:00 2001 From: Brad Davis Date: Mon, 27 Apr 2015 23:16:35 -0700 Subject: [PATCH 2/3] Adding key to trigger a browser window --- interface/src/Application.cpp | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/interface/src/Application.cpp b/interface/src/Application.cpp index 3b2173f05e..372c399040 100644 --- a/interface/src/Application.cpp +++ b/interface/src/Application.cpp @@ -1096,6 +1096,13 @@ void Application::keyPressEvent(QKeyEvent* event) { Menu::getInstance()->triggerOption(MenuOption::AddressBar); break; + case Qt::Key_B: + if (isMeta) { + auto offscreenUi = DependencyManager::get(); + offscreenUi->load("Browser.qml"); + } + break; + case Qt::Key_L: if (isShifted && isMeta) { Menu::getInstance()->triggerOption(MenuOption::Log); From 1f9f4270d70e61fd7d26e0e030a23254092c603b Mon Sep 17 00:00:00 2001 From: Brad Davis Date: Tue, 28 Apr 2015 00:24:18 -0700 Subject: [PATCH 3/3] Working on browsers and look of dialogs --- interface/resources/qml/Browser.qml | 58 ++++++++++++++----- interface/resources/qml/controls/Dialog.qml | 11 ++++ .../resources/qml/controls/DialogBase.qml | 39 +++++++++---- .../resources/qml/styles/HifiConstants.qml | 2 +- 4 files changed, 82 insertions(+), 28 deletions(-) diff --git a/interface/resources/qml/Browser.qml b/interface/resources/qml/Browser.qml index 1f33cc0d49..55a0a6a461 100644 --- a/interface/resources/qml/Browser.qml +++ b/interface/resources/qml/Browser.qml @@ -11,29 +11,37 @@ Dialog { resizable: true contentImplicitWidth: clientArea.implicitWidth contentImplicitHeight: clientArea.implicitHeight + backgroundColor: "#7f000000" Component.onCompleted: { enabled = true addressBar.text = webview.url - } onParentChanged: { if (visible && enabled) { - forceActiveFocus(); + addressBar.forceActiveFocus(); + addressBar.selectAll() } } Item { id: clientArea - implicitHeight: 400 - implicitWidth: 600 + implicitHeight: 600 + implicitWidth: 800 x: root.clientX y: root.clientY width: root.clientWidth height: root.clientHeight + Rectangle { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: scrollView.top + color: "white" + } Row { id: buttons spacing: 4 @@ -42,11 +50,13 @@ Dialog { anchors.left: parent.left anchors.leftMargin: 8 FontAwesome { - id: back; size: 48; enabled: webview.canGoBack; text: "\uf0a8" + id: back; text: "\uf0a8"; size: 48; enabled: webview.canGoBack; + color: enabled ? hifi.colors.text : hifi.colors.disabledText MouseArea { anchors.fill: parent; onClicked: webview.goBack() } } FontAwesome { - id: forward; size: 48; enabled: webview.canGoForward; text: "\uf0a9" + id: forward; text: "\uf0a9"; size: 48; enabled: webview.canGoForward; + color: enabled ? hifi.colors.text : hifi.colors.disabledText MouseArea { anchors.fill: parent; onClicked: webview.goBack() } } FontAwesome { @@ -54,11 +64,10 @@ Dialog { MouseArea { anchors.fill: parent; onClicked: webview.loading ? webview.stop() : webview.reload() } } } + Border { - id: border1 height: 48 radius: 8 - color: "gray" anchors.top: parent.top anchors.topMargin: 8 anchors.right: parent.right @@ -87,23 +96,29 @@ Dialog { anchors.left: barIcon.right anchors.leftMargin: 0 anchors.verticalCenter: parent.verticalCenter - onAccepted: { - if (text.indexOf("http") != 0) { - text = "http://" + text; + + Keys.onPressed: { + switch(event.key) { + case Qt.Key_Enter: + case Qt.Key_Return: + event.accepted = true + if (text.indexOf("http") != 0) { + text = "http://" + text + } + webview.url = text + break; } - webview.url = text } } - } - + ScrollView { + id: scrollView anchors.top: buttons.bottom anchors.topMargin: 8 anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right - Rectangle { anchors.fill: parent; color: "#7500ff00" } WebView { id: webview url: "http://highfidelity.com" @@ -119,4 +134,17 @@ Dialog { } } } // item + + Keys.onPressed: { + switch(event.key) { + case Qt.Key_L: + if (event.modifiers == Qt.ControlModifier) { + event.accepted = true + addressBar.selectAll() + addressBar.forceActiveFocus() + } + break; + } + } + } // dialog diff --git a/interface/resources/qml/controls/Dialog.qml b/interface/resources/qml/controls/Dialog.qml index 01a2ae5a85..46add1dc07 100644 --- a/interface/resources/qml/controls/Dialog.qml +++ b/interface/resources/qml/controls/Dialog.qml @@ -144,4 +144,15 @@ DialogBase { } } } + + Keys.onPressed: { + switch(event.key) { + case Qt.Key_W: + if (event.modifiers == Qt.ControlModifier) { + event.accepted = true + enabled = false + } + break; + } + } } diff --git a/interface/resources/qml/controls/DialogBase.qml b/interface/resources/qml/controls/DialogBase.qml index 09fb8162e8..a6616fc731 100644 --- a/interface/resources/qml/controls/DialogBase.qml +++ b/interface/resources/qml/controls/DialogBase.qml @@ -22,11 +22,13 @@ Item { readonly property alias titleWidth: titleBorder.width readonly property alias titleHeight: titleBorder.height + // readonly property real borderWidth: hifi.styles.borderWidth + readonly property real borderWidth: 0 property alias clientBorder: clientBorder - readonly property real clientX: clientBorder.x + hifi.styles.borderWidth - readonly property real clientY: clientBorder.y + hifi.styles.borderWidth - readonly property real clientWidth: clientBorder.width - hifi.styles.borderWidth * 2 - readonly property real clientHeight: clientBorder.height - hifi.styles.borderWidth * 2 + readonly property real clientX: clientBorder.x + borderWidth + readonly property real clientY: clientBorder.y + borderWidth + readonly property real clientWidth: clientBorder.width - borderWidth * 2 + readonly property real clientHeight: clientBorder.height - borderWidth * 2 /* * Window decorations, with a title bar and frames @@ -35,6 +37,7 @@ Item { id: windowBorder anchors.fill: parent border.color: root.frameColor + border.width: 0 color: "#00000000" Border { @@ -43,19 +46,13 @@ Item { anchors.right: parent.right anchors.left: parent.left border.color: root.frameColor + border.width: 0 clip: true - radius: 10 color: root.active ? hifi.colors.activeWindow.headerBackground : hifi.colors.inactiveWindow.headerBackground - Rectangle { - y: titleBorder.height / 2 - width: titleBorder.width - height: titleBorder.height /2 - color: titleBorder.color - } - + Text { id: titleText color: root.active ? @@ -68,8 +65,26 @@ Item { } } // header border + // These two rectangles hide the curves between the title area + // and the client area + Rectangle { + y: titleBorder.height - titleBorder.radius + height: titleBorder.radius + width: titleBorder.width + color: titleBorder.color + visible: borderWidth == 0 + } + + Rectangle { + y: titleBorder.height + width: clientBorder.width + height: clientBorder.radius + color: clientBorder.color + } + Border { id: clientBorder + border.width: 0 border.color: root.frameColor color: root.backgroundColor anchors.bottom: parent.bottom diff --git a/interface/resources/qml/styles/HifiConstants.qml b/interface/resources/qml/styles/HifiConstants.qml index ba82ac04d3..d24e9ca9be 100644 --- a/interface/resources/qml/styles/HifiConstants.qml +++ b/interface/resources/qml/styles/HifiConstants.qml @@ -50,7 +50,7 @@ Item { QtObject { id: styles - readonly property int borderWidth: 0 + readonly property int borderWidth: 5 readonly property int borderRadius: borderWidth * 2 }