mirror of
https://github.com/overte-org/overte.git
synced 2025-08-08 21:36:47 +02:00
Merge pull request #10016 from druiz17/tablet-goto
Porting goto to the tablet
This commit is contained in:
Seth Alves
GitHub
commit
48ea9acfb3
6 changed files with 356 additions and 148 deletions
|
|
@ -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,6 +153,7 @@ Rectangle {
|
|||
margins: textPadding;
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
FiraSansRegular {
|
||||
id: users;
|
||||
|
|
@ -216,6 +217,12 @@ Rectangle {
|
|||
margins: smallMargin;
|
||||
}
|
||||
}
|
||||
DropShadow {
|
||||
anchors.fill: actionIcon
|
||||
radius: 8.0
|
||||
color: "#80000000"
|
||||
source: actionIcon
|
||||
}
|
||||
MouseArea {
|
||||
id: messageArea;
|
||||
width: parent.width;
|
||||
|
|
|
|||
58
interface/resources/qml/hifi/TabletTextButton.qml
Normal file
58
interface/resources/qml/hifi/TabletTextButton.qml
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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,158 +89,18 @@ Item {
|
|||
|
||||
onMetaverseServerUrlChanged: updateLocationTextTimer.start();
|
||||
Rectangle {
|
||||
id: topBar
|
||||
height: 90
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#2b2b2b"
|
||||
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#1e1e1e"
|
||||
}
|
||||
}
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
anchors.topMargin: 0
|
||||
anchors.top: parent.top
|
||||
|
||||
Row {
|
||||
id: thing
|
||||
spacing: 2 * hifi.layout.spacing
|
||||
|
||||
anchors {
|
||||
top: parent.top;
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
TextButton {
|
||||
id: allTab;
|
||||
text: "ALL";
|
||||
property string includeActions: 'snapshot, concurrency';
|
||||
selected: allTab === selectedTab;
|
||||
action: tabSelect;
|
||||
}
|
||||
|
||||
TextButton {
|
||||
id: placeTab;
|
||||
text: "PLACES";
|
||||
property string includeActions: 'concurrency';
|
||||
selected: placeTab === selectedTab;
|
||||
action: tabSelect;
|
||||
|
||||
}
|
||||
|
||||
TextButton {
|
||||
id: snapTab;
|
||||
text: "SNAP";
|
||||
property string includeActions: 'snapshot';
|
||||
selected: snapTab === selectedTab;
|
||||
action: tabSelect;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: bgMain
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#2b2b2b"
|
||||
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#0f212e"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
anchors.bottom: backgroundImage.top
|
||||
anchors.bottomMargin: 0
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
anchors.top: topBar.bottom
|
||||
anchors.topMargin: 0
|
||||
|
||||
ListModel { id: suggestions }
|
||||
|
||||
ListView {
|
||||
id: scroll
|
||||
|
||||
property int stackedCardShadowHeight: 10;
|
||||
clip: true
|
||||
spacing: 14
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
leftMargin: 50
|
||||
}
|
||||
model: suggestions
|
||||
orientation: ListView.Vertical
|
||||
|
||||
delegate: Card {
|
||||
width: cardWidth;
|
||||
height: cardHeight;
|
||||
goFunction: goCard;
|
||||
userName: model.username;
|
||||
placeName: model.place_name;
|
||||
hifiUrl: model.place_name + model.path;
|
||||
thumbnail: model.thumbnail_url;
|
||||
imageUrl: model.image_url;
|
||||
action: model.action;
|
||||
timestamp: model.created_at;
|
||||
onlineUsers: model.online_users;
|
||||
storyId: model.metaverseId;
|
||||
drillDownToPlace: model.drillDownToPlace;
|
||||
shadowHeight: scroll.stackedCardShadowHeight;
|
||||
hoverThunk: function () { scroll.currentIndex = index; }
|
||||
unhoverThunk: function () { scroll.currentIndex = -1; }
|
||||
}
|
||||
|
||||
highlightMoveDuration: -1;
|
||||
highlightMoveVelocity: -1;
|
||||
highlight: Rectangle { color: "transparent"; border.width: 4; border.color: hifiStyleConstants.colors.blueHighlight; z: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: backgroundImage
|
||||
id: navBar
|
||||
width: 480
|
||||
height: 70
|
||||
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#c2ced8"
|
||||
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#c2ced8"
|
||||
}
|
||||
}
|
||||
|
||||
color: hifiStyleConstants.colors.white
|
||||
anchors {
|
||||
bottom: parent.keyboardEnabled ? keyboard.top : parent.bottom
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
rightMargin: 0
|
||||
left: parent.left
|
||||
leftMargin: 0
|
||||
}
|
||||
|
||||
|
||||
ToolbarButton {
|
||||
id: homeButton
|
||||
imageURL: "../../../images/home.svg"
|
||||
|
|
@ -244,10 +110,41 @@ Item {
|
|||
}
|
||||
anchors {
|
||||
left: parent.left
|
||||
leftMargin: homeButton.width / 2
|
||||
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
|
||||
|
||||
|
|
@ -275,10 +172,10 @@ Item {
|
|||
focus: true
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
left: homeButton.right
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
leftMargin: homeButton.width
|
||||
rightMargin: homeButton.width / 2
|
||||
leftMargin: 0
|
||||
rightMargin: 0
|
||||
topMargin: parent.inputAreaStep + (2 * hifi.layout.spacing)
|
||||
bottomMargin: parent.inputAreaStep
|
||||
}
|
||||
|
|
@ -303,13 +200,126 @@ Item {
|
|||
anchors.fill: parent
|
||||
onClicked: {
|
||||
isCursorVisible = true;
|
||||
//parent.cursorVisible = 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: addressBar.bottom
|
||||
|
||||
Row {
|
||||
id: thing
|
||||
spacing: 5 * hifi.layout.spacing
|
||||
|
||||
anchors {
|
||||
top: parent.top;
|
||||
left: parent.left
|
||||
leftMargin: 25
|
||||
}
|
||||
|
||||
TabletTextButton {
|
||||
id: allTab;
|
||||
text: "ALL";
|
||||
property string includeActions: 'snapshot, concurrency';
|
||||
selected: allTab === selectedTab;
|
||||
action: tabSelect;
|
||||
}
|
||||
|
||||
TabletTextButton {
|
||||
id: placeTab;
|
||||
text: "PLACES";
|
||||
property string includeActions: 'concurrency';
|
||||
selected: placeTab === selectedTab;
|
||||
action: tabSelect;
|
||||
|
||||
}
|
||||
|
||||
TabletTextButton {
|
||||
id: snapTab;
|
||||
text: "SNAP";
|
||||
property string includeActions: 'snapshot';
|
||||
selected: snapTab === selectedTab;
|
||||
action: tabSelect;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: bgMain
|
||||
color: hifiStyleConstants.colors.white
|
||||
anchors.bottom: parent.keyboardEnabled ? keyboard.top : parent.bottom
|
||||
anchors.bottomMargin: 0
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
anchors.top: topBar.bottom
|
||||
anchors.topMargin: 0
|
||||
|
||||
ListModel { id: suggestions }
|
||||
|
||||
ListView {
|
||||
id: scroll
|
||||
|
||||
property int stackedCardShadowHeight: 0;
|
||||
clip: true
|
||||
spacing: 14
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
leftMargin: 10
|
||||
verticalCenter: parent.verticalCenter;
|
||||
horizontalCenter: parent.horizontalCenter;
|
||||
}
|
||||
model: suggestions
|
||||
orientation: ListView.Vertical
|
||||
|
||||
delegate: Card {
|
||||
width: cardWidth;
|
||||
height: cardHeight;
|
||||
goFunction: goCard;
|
||||
userName: model.username;
|
||||
placeName: model.place_name;
|
||||
hifiUrl: model.place_name + model.path;
|
||||
thumbnail: model.thumbnail_url;
|
||||
imageUrl: model.image_url;
|
||||
action: model.action;
|
||||
timestamp: model.created_at;
|
||||
onlineUsers: model.online_users;
|
||||
storyId: model.metaverseId;
|
||||
drillDownToPlace: model.drillDownToPlace;
|
||||
shadowHeight: scroll.stackedCardShadowHeight;
|
||||
hoverThunk: function () { scroll.currentIndex = index; }
|
||||
unhoverThunk: function () { scroll.currentIndex = -1; }
|
||||
}
|
||||
|
||||
highlightMoveDuration: -1;
|
||||
highlightMoveVelocity: -1;
|
||||
highlight: Rectangle { color: "transparent"; border.width: 4; border.color: hifiStyleConstants.colors.blueHighlight; z: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
|
|
|
|||
|
|
@ -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 { } }
|
||||
|
|
|
|||
132
interface/resources/qml/hifi/tablet/TabletStoryCard.qml
Normal file
132
interface/resources/qml/hifi/tablet/TabletStoryCard.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue