Base UI elements

This commit is contained in:
David Rowe 2018-08-20 16:00:02 +12:00
parent 94041291d5
commit aca343330f
5 changed files with 136 additions and 24 deletions

View file

@ -32,7 +32,7 @@ var DEFAULT_SCRIPTS_COMBINED = [
"system/firstPersonHMD.js",
"system/tablet-ui/tabletUI.js",
"system/emote.js",
"system/tabletRezzer.js"
"system/miniTablet.js"
];
var DEFAULT_SCRIPTS_SEPARATE = [
"system/controllers/controllerScripts.js",

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

View 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>

View file

@ -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>

View file

@ -1,5 +1,5 @@
//
// tabletRezzer.js
// miniTablet.js
//
// Created by David Rowe on 9 Aug 2018.
// Copyright 2018 High Fidelity, Inc.
@ -41,7 +41,7 @@
// UI overlay.
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_WIDTH_PIXELS = 150,
METERS_TO_INCHES = 39.3701,