diff --git a/interface/resources/qml/hifi/Card.qml b/interface/resources/qml/hifi/Card.qml index f6f7e88d0c..3d1ae0e64b 100644 --- a/interface/resources/qml/hifi/Card.qml +++ b/interface/resources/qml/hifi/Card.qml @@ -129,7 +129,7 @@ Rectangle { property int dropSamples: 9; property int dropSpread: 0; DropShadow { - visible: showPlace && (desktop ? desktop.gradientsSupported : false) + visible: true; source: place; anchors.fill: place; horizontalOffset: dropHorizontalOffset; @@ -139,12 +139,12 @@ Rectangle { color: hifi.colors.black; spread: dropSpread; } - RalewaySemiBold { + RalewayLight { id: place; visible: showPlace; text: placeName; color: hifi.colors.white; - size: textSize; + size: 38; elide: Text.ElideRight; // requires constrained width anchors { top: parent.top; @@ -153,7 +153,8 @@ Rectangle { margins: textPadding; } } - Row { + + Row { FiraSansRegular { id: users; visible: isConcurrency; @@ -216,6 +217,12 @@ Rectangle { margins: smallMargin; } } + DropShadow { + anchors.fill: actionIcon + radius: 8.0 + color: "#80000000" + source: actionIcon + } MouseArea { id: messageArea; width: parent.width; diff --git a/interface/resources/qml/hifi/TabletTextButton.qml b/interface/resources/qml/hifi/TabletTextButton.qml new file mode 100644 index 0000000000..12e53eb217 --- /dev/null +++ b/interface/resources/qml/hifi/TabletTextButton.qml @@ -0,0 +1,58 @@ +// +// TabletTextButton.qml +// +// Created by Dante Ruiz on 2017/3/23 +// Copyright 2015 High Fidelity, Inc. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html +// + +import Hifi 1.0 +import QtQuick 2.4 +import "../styles-uit" + +Rectangle { + property alias text: label.text + property alias pixelSize: label.font.pixelSize; + property bool selected: false + property int spacing: 2 + property var action: function () {} + property string highlightColor: hifi.colors.blueHighlight; + width: label.width + 64 + height: 32 + color: hifi.colors.white + HifiConstants { id: hifi } + RalewaySemiBold { + id: label; + color: hifi.colors.blueHighlight; + font.pixelSize: 15; + anchors { + horizontalCenter: parent.horizontalCenter; + verticalCenter: parent.verticalCenter; + } + } + + + Rectangle { + id: indicator + width: parent.width + height: 3 + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + color: hifi.colors.blueHighlight + visible: parent.selected + } + + MouseArea { + id: clickArea; + anchors.fill: parent; + acceptedButtons: Qt.LeftButton; + onClicked: action(parent); + hoverEnabled: true; + } +} + diff --git a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml index 952a1f7faa..623054f233 100644 --- a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml +++ b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml @@ -1,7 +1,7 @@ // // TabletAddressDialog.qml // -// Created by Dante Ruiz on 2016/07/16 +// Created by Dante Ruiz on 2017/03/16 // Copyright 2015 High Fidelity, Inc. // // Distributed under the Apache License, Version 2.0. @@ -9,7 +9,8 @@ // import Hifi 1.0 -import QtQuick 2.4 +import QtQuick 2.5 +import QtQuick.Controls 1.4 import QtGraphicalEffects 1.0 import "../../controls" import "../../styles" @@ -19,21 +20,23 @@ import "../toolbars" import "../../styles-uit" as HifiStyles import "../../controls-uit" as HifiControls -Item { +StackView { id: root HifiConstants { id: hifi } HifiStyles.HifiConstants { id: hifiStyleConstants } - + initialItem: addressBarDialog width: parent.width height: parent.height property var allStories: []; - property int cardWidth: 370; + property int cardWidth: 460; property int cardHeight: 320; property string metaverseBase: addressBarDialog.metaverseServerUrl + "/api/v1/"; - + Component { id: tabletStoryCard; TabletStoryCard {} } Component.onCompleted: { + root.currentItem.focus = true; + root.currentItem.forceActiveFocus(); fillDestinations(); updateLocationText(); root.parentChanged.connect(center); @@ -54,6 +57,9 @@ Item { } function goCard(targetString) { if (0 !== targetString.indexOf('hifi://')) { + var card = tabletStoryCard.createObject(); + card.setUrl(addressBarDialog.metaverseServerUrl + targetString); + root.push(card); return; } addressLine.text = targetString; @@ -83,38 +89,155 @@ Item { onMetaverseServerUrlChanged: updateLocationTextTimer.start(); Rectangle { - id: topBar - height: 90 - gradient: Gradient { - GradientStop { - position: 0 - color: "#2b2b2b" - - } + id: navBar + width: 480 + height: 70 + color: hifiStyleConstants.colors.white + anchors { + top: parent.top + right: parent.right + rightMargin: 0 + left: parent.left + leftMargin: 0 + } - GradientStop { - position: 1 - color: "#1e1e1e" + ToolbarButton { + id: homeButton + imageURL: "../../../images/home.svg" + onClicked: { + addressBarDialog.loadHome(); + root.shown = false; + } + anchors { + left: parent.left + verticalCenter: parent.verticalCenter } } + ToolbarButton { + id: backArrow; + imageURL: "../../../images/backward.svg"; + onClicked: addressBarDialog.loadBack(); + anchors { + left: homeButton.right + verticalCenter: parent.verticalCenter + } + } + ToolbarButton { + id: forwardArrow; + imageURL: "../../../images/forward.svg"; + onClicked: addressBarDialog.loadForward(); + anchors { + left: backArrow.right + verticalCenter: parent.verticalCenter + } + } + } + + Rectangle { + id: addressBar + width: 480 + height: 70 + anchors { + top: navBar.bottom + right: parent.right + rightMargin: 16 + left: parent.left + leftMargin: 16 + } + + property int inputAreaHeight: 70 + property int inputAreaStep: (height - inputAreaHeight) / 2 + + HifiStyles.RalewayLight { + id: notice; + font.pixelSize: hifi.fonts.pixelSize * 0.50; + anchors { + top: parent.top + topMargin: parent.inputAreaStep + 12 + left: addressLine.left + right: addressLine.right + } + } + HifiStyles.FiraSansRegular { + id: location; + font.pixelSize: addressLine.font.pixelSize; + color: "gray"; + clip: true; + anchors.fill: addressLine; + visible: addressLine.text.length === 0 + } + + TextInput { + id: addressLine + focus: true + anchors { + bottom: parent.bottom + left: parent.left + right: parent.right + leftMargin: 0 + rightMargin: 0 + topMargin: parent.inputAreaStep + (2 * hifi.layout.spacing) + bottomMargin: parent.inputAreaStep + } + font.pixelSize: hifi.fonts.pixelSize * 0.75 + cursorVisible: false + onTextChanged: { + filterChoicesByText(); + updateLocationText(text.length > 0); + if (!isCursorVisible && text.length > 0) { + isCursorVisible = true; + cursorVisible = true; + } + } + onAccepted: { + addressBarDialog.keyboardEnabled = false; + } + onActiveFocusChanged: { + cursorVisible = isCursorVisible && focus; + } + MouseArea { + // If user clicks in address bar show cursor to indicate ability to enter address. + anchors.fill: parent + onClicked: { + isCursorVisible = true; + parent.cursorVisible = true; + parent.focus = true; + parent.forceActiveFocus(); + addressBarDialog.keyboardEnabled = HMD.active + tabletRoot.playButtonClickSound(); + } + } + } + + Rectangle { + anchors.fill: addressLine + color: hifiStyleConstants.colors.lightGray + opacity: 0.1 + } + } + Rectangle { + id: topBar + height: 37 + color: hifiStyleConstants.colors.white anchors.right: parent.right anchors.rightMargin: 0 anchors.left: parent.left anchors.leftMargin: 0 anchors.topMargin: 0 - anchors.top: parent.top + anchors.top: addressBar.bottom Row { id: thing - spacing: 2 * hifi.layout.spacing + spacing: 5 * hifi.layout.spacing anchors { top: parent.top; left: parent.left + leftMargin: 25 } - TextButton { + TabletTextButton { id: allTab; text: "ALL"; property string includeActions: 'snapshot, concurrency'; @@ -122,7 +245,7 @@ Item { action: tabSelect; } - TextButton { + TabletTextButton { id: placeTab; text: "PLACES"; property string includeActions: 'concurrency'; @@ -131,7 +254,7 @@ Item { } - TextButton { + TabletTextButton { id: snapTab; text: "SNAP"; property string includeActions: 'snapshot'; @@ -144,21 +267,8 @@ Item { Rectangle { id: bgMain - gradient: Gradient { - GradientStop { - position: 0 - color: "#2b2b2b" - - } - - GradientStop { - position: 1 - color: "#0f212e" - } - } - - - anchors.bottom: backgroundImage.top + color: hifiStyleConstants.colors.white + anchors.bottom: parent.keyboardEnabled ? keyboard.top : parent.bottom anchors.bottomMargin: 0 anchors.right: parent.right anchors.rightMargin: 0 @@ -172,7 +282,7 @@ Item { ListView { id: scroll - property int stackedCardShadowHeight: 10; + property int stackedCardShadowHeight: 0; clip: true spacing: 14 anchors { @@ -180,7 +290,9 @@ Item { top: parent.top left: parent.left right: parent.right - leftMargin: 50 + leftMargin: 10 + verticalCenter: parent.verticalCenter; + horizontalCenter: parent.horizontalCenter; } model: suggestions orientation: ListView.Vertical @@ -210,109 +322,7 @@ Item { } } - Rectangle { - id: backgroundImage - width: 480 - height: 70 - - gradient: Gradient { - GradientStop { - position: 0 - color: "#c2ced8" - - } - - GradientStop { - position: 1 - color: "#c2ced8" - } - } - - anchors { - bottom: parent.keyboardEnabled ? keyboard.top : parent.bottom - right: parent.right - left: parent.left - } - - - ToolbarButton { - id: homeButton - imageURL: "../../../images/home.svg" - onClicked: { - addressBarDialog.loadHome(); - root.shown = false; - } - anchors { - left: parent.left - leftMargin: homeButton.width / 2 - verticalCenter: parent.verticalCenter - } - } - property int inputAreaHeight: 70 - property int inputAreaStep: (height - inputAreaHeight) / 2 - - HifiStyles.RalewayLight { - id: notice; - font.pixelSize: hifi.fonts.pixelSize * 0.50; - anchors { - top: parent.top - topMargin: parent.inputAreaStep + 12 - left: addressLine.left - right: addressLine.right - } - } - HifiStyles.FiraSansRegular { - id: location; - font.pixelSize: addressLine.font.pixelSize; - color: "gray"; - clip: true; - anchors.fill: addressLine; - visible: addressLine.text.length === 0 - } - - TextInput { - id: addressLine - focus: true - anchors { - bottom: parent.bottom - left: homeButton.right - right: parent.right - leftMargin: homeButton.width - rightMargin: homeButton.width / 2 - topMargin: parent.inputAreaStep + (2 * hifi.layout.spacing) - bottomMargin: parent.inputAreaStep - } - font.pixelSize: hifi.fonts.pixelSize * 0.75 - cursorVisible: false - onTextChanged: { - filterChoicesByText(); - updateLocationText(text.length > 0); - if (!isCursorVisible && text.length > 0) { - isCursorVisible = true; - cursorVisible = true; - } - } - onAccepted: { - addressBarDialog.keyboardEnabled = false; - } - onActiveFocusChanged: { - cursorVisible = isCursorVisible && focus; - } - MouseArea { - // If user clicks in address bar show cursor to indicate ability to enter address. - anchors.fill: parent - onClicked: { - isCursorVisible = true; - //parent.cursorVisible = true; - parent.forceActiveFocus(); - addressBarDialog.keyboardEnabled = HMD.active - tabletRoot.playButtonClickSound(); - } - } - } - } - - Timer { + Timer { // Delay updating location text a bit to avoid flicker of content and so that connection status is valid. id: updateLocationTextTimer running: false diff --git a/interface/resources/qml/hifi/tablet/TabletRoot.qml b/interface/resources/qml/hifi/tablet/TabletRoot.qml index febb2793ec..8037c1280e 100644 --- a/interface/resources/qml/hifi/tablet/TabletRoot.qml +++ b/interface/resources/qml/hifi/tablet/TabletRoot.qml @@ -31,7 +31,8 @@ Item { Component { id: customInputDialogBuilder; TabletCustomQueryDialog { } } function customInputDialog(properties) { - return customInputDialogBuilder.createObject(tabletRoot, properties); + openModal = customInputDialogBuilder.createObject(tabletRoot, properties); + return openModal; } Component { id: fileDialogBuilder; TabletFileDialog { } } diff --git a/interface/resources/qml/hifi/tablet/TabletStoryCard.qml b/interface/resources/qml/hifi/tablet/TabletStoryCard.qml new file mode 100644 index 0000000000..ea6a23cb10 --- /dev/null +++ b/interface/resources/qml/hifi/tablet/TabletStoryCard.qml @@ -0,0 +1,132 @@ +// +// TabletAddressDialog.qml +// +// Created by Dante Ruiz on 2017/04/24 +// Copyright 2015 High Fidelity, Inc. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html +// + +import Hifi 1.0 +import QtQuick 2.4 +import QtGraphicalEffects 1.0 +import "../../controls" +import "../../styles" +import "../../windows" +import "../" +import "../toolbars" +import "../../styles-uit" as HifiStyles +import "../../controls-uit" as HifiControls + + +Rectangle { + id: cardRoot + HifiStyles.HifiConstants { id: hifi } + width: parent.width + height: parent.height + property string address: "" + + function setUrl(url) { + cardRoot.address = url; + webview.url = url; + } + + function goBack() { + } + + function visit() { + } + + Rectangle { + id: header + anchors { + left: parent.left + right: parent.right + top: parent.top + } + + width: parent.width + height: 50 + color: hifi.colors.white + + Row { + anchors.fill: parent + spacing: 80 + + Item { + id: backButton + anchors { + top: parent.top + left: parent.left + leftMargin: 100 + } + height: parent.height + width: parent.height + + HifiStyles.FiraSansSemiBold { + text: "BACK" + elide: Text.ElideRight + anchors.fill: parent + size: 16 + + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + + color: hifi.colors.lightGray + + MouseArea { + id: backButtonMouseArea + anchors.fill: parent + hoverEnabled: enabled + + onClicked: { + webview.goBack(); + } + } + } + } + + Item { + id: closeButton + anchors { + top: parent.top + right: parent.right + rightMargin: 100 + } + height: parent.height + width: parent.height + + HifiStyles.FiraSansSemiBold { + text: "CLOSE" + elide: Text.ElideRight + anchors.fill: parent + size: 16 + + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + + color: hifi.colors.lightGray + + MouseArea { + id: closeButtonMouseArea + anchors.fill: parent + hoverEnabled: enabled + + onClicked: root.pop(); + } + } + } + } + } + + HifiControls.WebView { + id: webview + anchors { + top: header.bottom + right: parent.right + left: parent.left + bottom: parent.bottom + } + } +} diff --git a/scripts/defaultScripts.js b/scripts/defaultScripts.js index aba2f35e6b..109b92d33a 100644 --- a/scripts/defaultScripts.js +++ b/scripts/defaultScripts.js @@ -21,7 +21,7 @@ var DEFAULT_SCRIPTS_COMBINED = [ "system/snapshot.js", "system/help.js", "system/pal.js", // "system/mod.js", // older UX, if you prefer - "system/goto.js", + "system/tablet-goto.js", "system/marketplaces/marketplaces.js", "system/edit.js", "system/tablet-users.js",