Merge pull request #10016 from druiz17/tablet-goto

Porting goto to the tablet

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;

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;
+    }
+}
+        

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
+            id: navBar
-            height: 90
+            width: 480
-            gradient: Gradient {
+            height: 70
-                GradientStop {
+            color: hifiStyleConstants.colors.white
-                    position: 0
+            anchors {
-                    color: "#2b2b2b"
+                top: parent.top
+                right: parent.right
+                rightMargin: 0
+                left: parent.left
+                leftMargin: 0
+            }
 
+            ToolbarButton {
+                id: homeButton
+                imageURL: "../../../images/home.svg"
+                onClicked: {
+                    addressBarDialog.loadHome();
+                    root.shown = false;
                 }
-
+                anchors {
-                GradientStop {
+                    left: parent.left
-                    position: 1
+                    verticalCenter: parent.verticalCenter
-                    color: "#1e1e1e"
                 }
             }
+            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 {
+            color: hifiStyleConstants.colors.white
-                    GradientStop {
+            anchors.bottom: parent.keyboardEnabled ? keyboard.top : parent.bottom
-                        position: 0
-                        color: "#2b2b2b"
-
-                    }
-                    
-                    GradientStop {
-                        position: 1
-                        color: "#0f212e"
-                    }
-                }
-
-            
-            anchors.bottom: backgroundImage.top
             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 {
+        Timer {
-            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 {
             // Delay updating location text a bit to avoid flicker of content and so that connection status is valid.
             id: updateLocationTextTimer
             running: false

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 { } }

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
+        }
+    }   
+}

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",