goto on 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;//showPlace && (desktop ? desktop.gradientsSupported : false)
         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;
@@ -154,48 +154,44 @@ Rectangle {
         }
     }
 
-    Rectangle {
-        radius: 20
-        color: "transparent"
-        Row {
-            FiraSansRegular {
-                id: users;
-                visible: isConcurrency;
-                text: onlineUsers;
-                size: textSize;
-                color: messageColor;
-                anchors.verticalCenter: message.verticalCenter;
-            }
-            Image {
-                id: icon;
-                source: "../../images/snap-icon.svg"
-                width: 40;
-                height: 40;
-                visible: action === 'snapshot';
-            }
-            RalewayRegular {
-                id: message;
-                text: isConcurrency ? ((onlineUsers === 1) ? "person" : "people") : (drillDownToPlace ? "snapshots" : ("by " + userName));
-                size: textSizeSmall;
-                color: messageColor;
-                elide: Text.ElideRight; // requires a width to be specified`
-                width: root.width - textPadding
-                    - (users.visible ? users.width + parent.spacing : 0)
-                    - (icon.visible ? icon.width + parent.spacing : 0)
-                    - (actionIcon.width + (2 * smallMargin));
-                anchors {
-                    bottom: parent.bottom;
-                    bottomMargin: parent.spacing;
-                }
-            }
-            spacing: textPadding;
-            height: messageHeight;
+       Row {
+        FiraSansRegular {
+            id: users;
+            visible: isConcurrency;
+            text: onlineUsers;
+            size: textSize;
+            color: messageColor;
+            anchors.verticalCenter: message.verticalCenter;
+        }
+        Image {
+            id: icon;
+            source: "../../images/snap-icon.svg"
+            width: 40;
+            height: 40;
+            visible: action === 'snapshot';
+        }
+        RalewayRegular {
+            id: message;
+            text: isConcurrency ? ((onlineUsers === 1) ? "person" : "people") : (drillDownToPlace ? "snapshots" : ("by " + userName));
+            size: textSizeSmall;
+            color: messageColor;
+            elide: Text.ElideRight; // requires a width to be specified`
+            width: root.width - textPadding
+                - (users.visible ? users.width + parent.spacing : 0)
+                - (icon.visible ? icon.width + parent.spacing : 0)
+                - (actionIcon.width + (2 * smallMargin));
             anchors {
                 bottom: parent.bottom;
-                left: parent.left;
-                leftMargin: textPadding;
+                bottomMargin: parent.spacing;
             }
         }
+        spacing: textPadding;
+        height: messageHeight;
+        anchors {
+            bottom: parent.bottom;
+            left: parent.left;
+            leftMargin: textPadding;
+        }
     }
     // These two can be supplied to provide hover behavior.
     // For example, AddressBarDialog provides functions that set the current list view item
@@ -221,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/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,11 +20,11 @@ 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
 
@@ -32,7 +33,7 @@ Item {
     property int cardHeight: 320;
     property string metaverseBase: addressBarDialog.metaverseServerUrl + "/api/v1/";
 
-
+    Component { id: tabletStoryCard; TabletStoryCard {} }
     Component.onCompleted: {
         fillDestinations();
         updateLocationText();
@@ -42,7 +43,7 @@ Item {
     Component.onDestruction: {
         root.parentChanged.disconnect(center);
     }
-
+    
     function center() {
         // Explicitly center in order to avoid warnings at shutdown
         anchors.centerIn = parent;
@@ -54,6 +55,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;
@@ -86,7 +90,7 @@ Item {
             id: navBar
             width: 480
             height: 70
-            color: hifi.colors.white
+            color: hifiStyleConstants.colors.white
             anchors {
                 top: parent.top
                 right: parent.right
@@ -194,7 +198,7 @@ Item {
                     anchors.fill: parent
                     onClicked: {
                         isCursorVisible = true;
-                        //parent.cursorVisible = true;
+                        parent.cursorVisible = true;
                         parent.forceActiveFocus();
                         addressBarDialog.keyboardEnabled = HMD.active
                         tabletRoot.playButtonClickSound();
@@ -204,14 +208,14 @@ Item {
 
             Rectangle {
                 anchors.fill: addressLine
-                color: hifiStyleConstants.colors.baseGray
+                color: hifiStyleConstants.colors.lightGray
                 opacity: 0.1
             }
         }
         Rectangle {
             id: topBar
             height: 37
-            color: hifi.colors.white
+            color: hifiStyleConstants.colors.white
 
             anchors.right: parent.right
             anchors.rightMargin: 0
@@ -260,7 +264,7 @@ Item {
 
         Rectangle {
             id: bgMain
-            color: hifi.colors.white
+            color: hifiStyleConstants.colors.white
             anchors.bottom: parent.keyboardEnabled ? keyboard.top : parent.bottom
             anchors.bottomMargin: 0
             anchors.right: parent.right

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