mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-10 00:36:34 +02:00
Base UI elements
This commit is contained in:
parent
94041291d5
commit
aca343330f
5 changed files with 136 additions and 24 deletions
|
@ -32,7 +32,7 @@ var DEFAULT_SCRIPTS_COMBINED = [
|
||||||
"system/firstPersonHMD.js",
|
"system/firstPersonHMD.js",
|
||||||
"system/tablet-ui/tabletUI.js",
|
"system/tablet-ui/tabletUI.js",
|
||||||
"system/emote.js",
|
"system/emote.js",
|
||||||
"system/tabletRezzer.js"
|
"system/miniTablet.js"
|
||||||
];
|
];
|
||||||
var DEFAULT_SCRIPTS_SEPARATE = [
|
var DEFAULT_SCRIPTS_SEPARATE = [
|
||||||
"system/controllers/controllerScripts.js",
|
"system/controllers/controllerScripts.js",
|
||||||
|
|
102
scripts/system/html/css/miniTablet.css
Normal file
102
scripts/system/html/css/miniTablet.css
Normal file
|
@ -0,0 +1,102 @@
|
||||||
|
/*
|
||||||
|
miniTablet.css
|
||||||
|
|
||||||
|
Created by David Rowe on 20 Aug 2018.
|
||||||
|
Copyright 2018 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
|
||||||
|
*/
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: #121212;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
background-color: #404040;
|
||||||
|
position: relative;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .button {
|
||||||
|
width: 100%;
|
||||||
|
height: 88px;
|
||||||
|
background-color: #252525;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .button.off {
|
||||||
|
border: 2px solid #6a6a6a;
|
||||||
|
background-color: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .button.off:hover {
|
||||||
|
border: 2px solid #1fc6a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .button.on {
|
||||||
|
border: 2px solid #1fc6a6;
|
||||||
|
background-color: #1fc6a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .button.on:hover {
|
||||||
|
border: 2px solid #e3e3e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .button:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mute {
|
||||||
|
padding-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bubble {
|
||||||
|
padding-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
color: #e3e3e3;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 12px;
|
||||||
|
width: 24px;
|
||||||
|
position: relative;
|
||||||
|
top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer div p {
|
||||||
|
position: relative;
|
||||||
|
top: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .button:hover {
|
||||||
|
border: 1px solid #1fc6a6;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: -1px;
|
||||||
|
}
|
31
scripts/system/html/miniTablet.html
Normal file
31
scripts/system/html/miniTablet.html
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
<!--
|
||||||
|
miniTablet.html
|
||||||
|
|
||||||
|
Created by David Rowe on 20 Aug 2018.
|
||||||
|
Copyright 2018 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
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/miniTablet.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
<div id="mute" class="button off">
|
||||||
|
<img id="mute-img" />
|
||||||
|
</div>
|
||||||
|
<div id="bubble" class="button off">
|
||||||
|
<img id="bubble-img" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<div id="expand" class="button"><p>...</p></div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,21 +0,0 @@
|
||||||
<!--
|
|
||||||
tabletRezzer.html
|
|
||||||
|
|
||||||
Created by David Rowe on 20 Aug 2018.
|
|
||||||
Copyright 2018 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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
Hello world!
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,5 +1,5 @@
|
||||||
//
|
//
|
||||||
// tabletRezzer.js
|
// miniTablet.js
|
||||||
//
|
//
|
||||||
// Created by David Rowe on 9 Aug 2018.
|
// Created by David Rowe on 9 Aug 2018.
|
||||||
// Copyright 2018 High Fidelity, Inc.
|
// Copyright 2018 High Fidelity, Inc.
|
||||||
|
@ -41,7 +41,7 @@
|
||||||
|
|
||||||
// UI overlay.
|
// UI overlay.
|
||||||
proxyUIOverlay = null,
|
proxyUIOverlay = null,
|
||||||
PROXY_UI_HTML = Script.resolvePath("./html/tabletRezzer.html"),
|
PROXY_UI_HTML = Script.resolvePath("./html/miniTablet.html"),
|
||||||
PROXY_UI_DIMENSIONS = { x: 0.0577, y: 0.0905 },
|
PROXY_UI_DIMENSIONS = { x: 0.0577, y: 0.0905 },
|
||||||
PROXY_UI_WIDTH_PIXELS = 150,
|
PROXY_UI_WIDTH_PIXELS = 150,
|
||||||
METERS_TO_INCHES = 39.3701,
|
METERS_TO_INCHES = 39.3701,
|
Loading…
Reference in a new issue