mirror of
https://github.com/lubosz/overte.git
synced 2025-04-23 09:25:31 +02:00
Merge pull request #9578 from fayeli/users-jump-to
Rework users.js for Tablet: better jump to user & who can find me toggle
This commit is contained in:
Faye Li
GitHub
commit
3e165d5fbb
3 changed files with 269 additions and 14 deletions
|
|
@ -24,7 +24,7 @@ var DEFAULT_SCRIPTS = [
|
|||
"system/goto.js",
|
||||
"system/marketplaces/marketplaces.js",
|
||||
"system/edit.js",
|
||||
"system/users.js",
|
||||
"system/tablet-users.js",
|
||||
"system/selectAudioDevice.js",
|
||||
"system/notifications.js",
|
||||
"system/controllers/controllerDisplayManager.js",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.top-bar .container {
|
||||
.top-bar .myContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -47,6 +48,44 @@
|
|||
padding: 30px;
|
||||
}
|
||||
|
||||
#user-info-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
#visibility-toggle {
|
||||
font-family: 'Raleway';
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: top;
|
||||
height: 28px;
|
||||
min-width: 120px;
|
||||
padding: 0px 18px;
|
||||
margin-right: 0px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
color: #121212;
|
||||
background-color: #afafaf;
|
||||
background: linear-gradient(#fff 20%, #afafaf 100%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#visibility-toggle:enabled:hover {
|
||||
background: linear-gradient(#fff, #fff);
|
||||
border: none;
|
||||
}
|
||||
|
||||
#visibility-toggle:active {
|
||||
background: linear-gradient(#afafaf, #afafaf);
|
||||
}
|
||||
|
||||
#visibility-toggle span {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
@ -99,35 +138,146 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=button].red {
|
||||
color: #fff;
|
||||
background-color: #94132e;
|
||||
background: linear-gradient(#d42043 20%, #94132e 100%);
|
||||
}
|
||||
input[type=button].blue {
|
||||
color: #fff;
|
||||
background-color: #1080b8;
|
||||
background: linear-gradient(#00b4ef 20%, #1080b8 100%);
|
||||
}
|
||||
input[type=button].white {
|
||||
color: #121212;
|
||||
background-color: #afafaf;
|
||||
background: linear-gradient(#fff 20%, #afafaf 100%);
|
||||
}
|
||||
|
||||
input[type=button].blue:hover {
|
||||
input[type=button]:enabled:hover {
|
||||
background: linear-gradient(#000, #000);
|
||||
border: none;
|
||||
}
|
||||
input[type=button].red:enabled:hover {
|
||||
background: linear-gradient(#d42043, #d42043);
|
||||
border: none;
|
||||
}
|
||||
input[type=button].blue:enabled:hover {
|
||||
background: linear-gradient(#00b4ef, #00b4ef);
|
||||
border: none;
|
||||
}
|
||||
input[type=button].white:enabled:hover {
|
||||
background: linear-gradient(#fff, #fff);
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type=button]:active {
|
||||
background: linear-gradient(#343434, #343434);
|
||||
}
|
||||
input[type=button].red:active {
|
||||
background: linear-gradient(#94132e, #94132e);
|
||||
}
|
||||
input[type=button].blue:active {
|
||||
background: linear-gradient(#1080b8, #1080b8);
|
||||
}
|
||||
input[type=button].white:active {
|
||||
background: linear-gradient(#afafaf, #afafaf);
|
||||
}
|
||||
|
||||
input[type=button]:disabled {
|
||||
color: #252525;
|
||||
background: linear-gradient(#575757 20%, #252525 100%);
|
||||
}
|
||||
|
||||
input[type=button][pressed=pressed] {
|
||||
color: #00b4ef;
|
||||
}
|
||||
|
||||
#friends-button {
|
||||
margin: 0px 0px 15px 10px;
|
||||
}
|
||||
|
||||
/*Vertically Center Modal*/
|
||||
.modal {
|
||||
color: black;
|
||||
text-align: center;
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.modal:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.dropdown-menu li {
|
||||
color: #333;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dropdown-menu .divider {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.dropdown-menu li:hover {
|
||||
background: #dcdcdc;
|
||||
}
|
||||
|
||||
.dropdown-menu li h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dropdown-menu li p {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="container">
|
||||
<div class="myContainer">
|
||||
<div>Users Online</div>
|
||||
<img id="refresh-button" onclick="pollUsers()" src="https://hifi-content.s3.amazonaws.com/faye/tablet-dev/refresh-icon.svg"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div id="user-info-div">
|
||||
<h4></h4>
|
||||
<div class="dropdown">
|
||||
<button id="visibility-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Online
|
||||
<span class="glyphicon glyphicon-menu-down"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="visibility-toggle">
|
||||
<li class="visibility-option" data-visibility="all">
|
||||
<h6>Online</h6>
|
||||
<p>You will be shown online to everyone else. Anybody will be able to find you from the users online list and jump to your current location.</p>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li class="visibility-option" data-visibility="friends">
|
||||
<h6>Available to Friends Only</h6>
|
||||
<p>You will be shown online only to users you have added as friends. Other users may still interact with you in the same domain, but they won't be able to find you from the users online list.</p>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li class="visibility-option" data-visibility="none">
|
||||
<h6>Appear Offline</h6>
|
||||
<p>No one will be able to find you from the users online list. However, this does not prevent other users in the same domain from interacting with you. For a complete "Do not disturb" mode, you may want to go to your own private domain and set allow entering to no one.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="tabs">
|
||||
<li tab-id="tab-1" class="current">Everyone (0)</li>
|
||||
<li tab-id="tab-2">Friends (0)</li>
|
||||
|
|
@ -140,11 +290,33 @@
|
|||
<input type="button" class="blue" id="friends-button" value="Add/Remove Friends">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="myModalLabel">Jump to username @ Placename</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This will teleport you to a new location and possibly another domain. Are you sure?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<input type="button" data-dismiss="modal" value="Cancel">
|
||||
<input type="button" data-dismiss="modal" id="jump-to-confirm-button" value="OK">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online";
|
||||
var FRIENDS_FILTER = "&filter=friends";
|
||||
var myUsername = null;
|
||||
var myVisibility = null;
|
||||
|
||||
function displayUsers(data, element) {
|
||||
element.empty();
|
||||
|
|
@ -155,10 +327,18 @@
|
|||
$("#dev-div").append("<p>" + data.users[i].username + "is online but not in a domain</p>");
|
||||
} else {
|
||||
$("#dev-div").append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
|
||||
// Don't display yourself
|
||||
if (data.users[i].username !== myUsername) {
|
||||
if (data.users[i].username === myUsername) {
|
||||
$("#user-info-div h4").text(data.users[i].username + " @ " + data.users[i].location.root.name);
|
||||
} else {
|
||||
console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
|
||||
element.append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
|
||||
// Create a list item and put user info in data-* attributes, also make it trigger the jump to confirmation modal
|
||||
$("<li></li>", {
|
||||
"data-toggle": "modal",
|
||||
"data-target": "#myModal",
|
||||
"data-username": data.users[i].username,
|
||||
"data-placename": data.users[i].location.root.name,
|
||||
text: data.users[i].username + " @ " + data.users[i].location.root.name
|
||||
}).appendTo(element);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -201,10 +381,17 @@
|
|||
// Parse the string into an object
|
||||
event = JSON.parse(event);
|
||||
}
|
||||
if (event.type === "sendUsername") {
|
||||
if (event.type === "user-info") {
|
||||
myUsername = event.data.username;
|
||||
$("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
|
||||
consoloe.log("myUsername is " + myUsername);
|
||||
myVisibility = event.data.visibility;
|
||||
$("#user-info-div h4").text(myUsername);
|
||||
var buttonText = "Online";
|
||||
if (myVisibility === "none") {
|
||||
buttonText = "Appear Offline";
|
||||
} else if (myVisibility === "friends") {
|
||||
buttonText = "Available To Friends Only";
|
||||
}
|
||||
$("#visibility-toggle").html(buttonText + "<span class='glyphicon glyphicon-menu-down'></span>")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -222,6 +409,43 @@
|
|||
$(this).addClass("current");
|
||||
});
|
||||
|
||||
// Jump to user: Fill confirmation modal with data of the selected user
|
||||
$("#myModal").on("show.bs.modal", function (event) {
|
||||
// Get the element that triggered the modal
|
||||
var li = $(event.relatedTarget);
|
||||
// Extract info from data-* attributes
|
||||
var username = li.data("username");
|
||||
var placename = li.data("placename");
|
||||
// Write info to the modal
|
||||
var modal = $(this);
|
||||
modal.find(".modal-title").text("Jump to " + username + " @ " + placename);
|
||||
$("#jump-to-confirm-button").data("username", username);
|
||||
})
|
||||
|
||||
$("#jump-to-confirm-button").click(function() {
|
||||
var jumpToObject = {
|
||||
"type": "jump-to",
|
||||
"data": {
|
||||
"username": $(this).data("username")
|
||||
}
|
||||
}
|
||||
EventBridge.emitWebEvent(JSON.stringify(jumpToObject));
|
||||
});
|
||||
|
||||
// Click listener for toggling who can see me
|
||||
$(".visibility-option").click(function() {
|
||||
myVisibility = $(this).data("visibility");
|
||||
var newButtonText = $(this).find("h6").text();
|
||||
$("#visibility-toggle").html(newButtonText + "<span class='glyphicon glyphicon-menu-down'></span>");
|
||||
var visibilityObject = {
|
||||
"type": "toggle-visibility",
|
||||
"data": {
|
||||
"visibility": myVisibility
|
||||
}
|
||||
}
|
||||
EventBridge.emitWebEvent(JSON.stringify(visibilityObject));
|
||||
});
|
||||
|
||||
// Listen for events from hifi
|
||||
EventBridge.scriptEventReceived.connect(onScriptEventReceived);
|
||||
|
||||
|
|
@ -229,7 +453,7 @@
|
|||
var eventObject = {"type": "ready"};
|
||||
EventBridge.emitWebEvent(JSON.stringify(eventObject));
|
||||
|
||||
// Click listener mangage friends button
|
||||
// Click listener for add/remove friends button
|
||||
$("#friends-button").click(function() {
|
||||
// Send a manage friends event to hifi
|
||||
eventObject = {"type": "manage-friends"};
|
||||
|
|
|
|||
|
|
@ -12,10 +12,26 @@
|
|||
|
||||
(function() { // BEGIN LOCAL_SCOPE
|
||||
var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
|
||||
|
||||
var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
|
||||
var FRIENDS_WINDOW_WIDTH = 290;
|
||||
var FRIENDS_WINDOW_HEIGHT = 500;
|
||||
var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
|
||||
|
||||
// Initialise visibility based on global service
|
||||
var VISIBILITY_VALUES_SET = {};
|
||||
VISIBILITY_VALUES_SET["all"] = true;
|
||||
VISIBILITY_VALUES_SET["friends"] = true;
|
||||
VISIBILITY_VALUES_SET["none"] = true;
|
||||
var myVisibility;
|
||||
if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
|
||||
myVisibility = GlobalServices.findableBy;
|
||||
} else {
|
||||
// default to friends if it can't be determined
|
||||
myVisibility = "friends";
|
||||
GlobalServices.findableBy = myVisibilty;
|
||||
}
|
||||
|
||||
var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
|
||||
var button = tablet.addButton({
|
||||
icon: "icons/tablet-icons/people-i.svg",
|
||||
|
|
@ -35,10 +51,12 @@
|
|||
// send username to html
|
||||
var myUsername = GlobalServices.username;
|
||||
var object = {
|
||||
"type": "sendUsername",
|
||||
"data": {"username": myUsername}
|
||||
"type": "user-info",
|
||||
"data": {
|
||||
"username": myUsername,
|
||||
"visibility": myVisibility
|
||||
}
|
||||
};
|
||||
print("sending username: " + myUsername);
|
||||
tablet.emitScriptEvent(JSON.stringify(object));
|
||||
}
|
||||
if (event.type === "manage-friends") {
|
||||
|
|
@ -53,6 +71,19 @@
|
|||
friendsWindow.setVisible(true);
|
||||
friendsWindow.raise();
|
||||
}
|
||||
if (event.type === "jump-to") {
|
||||
if (typeof event.data.username !== undefined) {
|
||||
// teleport to selected user from the online users list
|
||||
location.goToUser(event.data.username);
|
||||
}
|
||||
}
|
||||
if (event.type === "toggle-visibility") {
|
||||
if (typeof event.data.visibility !== undefined) {
|
||||
// update your visibility (all, friends, or none)
|
||||
myVisibility = event.data.visibility;
|
||||
GlobalServices.findableBy = myVisibility;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.clicked.connect(onClicked);
|
||||
|
|
|
|||
Loading…
Reference in a new issue