From 1f9f4270d70e61fd7d26e0e030a23254092c603b Mon Sep 17 00:00:00 2001 From: Brad Davis Date: Tue, 28 Apr 2015 00:24:18 -0700 Subject: [PATCH] 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 }