mesh ui work
This commit is contained in:
Stewart Allen
parent
16fa536605
commit
cbec4b2e87
3 changed files with 69 additions and 250 deletions
|
|
@ -9,40 +9,56 @@ function $d(id, v) {
|
|||
$(id).style.display = v;
|
||||
}
|
||||
|
||||
function $h(id, h) {
|
||||
$(id).innerHTML = h;
|
||||
}
|
||||
|
||||
(function() {
|
||||
|
||||
let DOC = document,
|
||||
WIN = window;
|
||||
|
||||
function init() {
|
||||
let container = $('container'),
|
||||
moto = self.moto,
|
||||
let moto = self.moto,
|
||||
sky = false;
|
||||
dark = false,
|
||||
ortho = false,
|
||||
zoomrev = true;
|
||||
zoomspd = 1,
|
||||
Space = moto.Space;
|
||||
space = moto.Space,
|
||||
platform = space.platform;
|
||||
|
||||
// setup default workspace
|
||||
Space.showSkyGrid(sky);
|
||||
Space.setSkyColor(dark ? 0 : 0xffffff);
|
||||
Space.init(container, delta => { }, ortho);
|
||||
Space.platform.onMove(delta => { } );
|
||||
Space.platform.setRound(false);
|
||||
Space.platform.setZOff(0.2);
|
||||
Space.platform.setSize(500,500,2.5);
|
||||
Space.platform.setGrid(25,5);
|
||||
Space.view.setZoom(zoomrev, zoomspd);
|
||||
Space.useDefaultKeys(true);
|
||||
|
||||
// hide loading curtain
|
||||
$d('curtain','none');
|
||||
|
||||
// remove version cache bust from url
|
||||
window.history.replaceState({},'','/mesh/');
|
||||
space.showSkyGrid(sky);
|
||||
space.setSkyColor(dark ? 0 : 0xffffff);
|
||||
space.init($('container'), delta => { }, ortho);
|
||||
platform.onMove(delta => { } );
|
||||
platform.setRound(false);
|
||||
platform.setZOff(0.2);
|
||||
platform.setSize(500,500,2.5);
|
||||
platform.setGrid(25,5);
|
||||
space.view.setZoom(zoomrev, zoomspd);
|
||||
space.useDefaultKeys(true);
|
||||
|
||||
// start worker
|
||||
moto.client.start(`/code/mesh_work?${gapp.version}`);
|
||||
|
||||
// set app version
|
||||
$h('app-name', "Mesh:Tool");
|
||||
$h('app-vers', gapp.version);
|
||||
|
||||
// hide loading curtain
|
||||
$d('curtain','none');
|
||||
}
|
||||
|
||||
document.onreadystatechange = function() {
|
||||
if (document.readyState === 'complete') {
|
||||
// remove version cache bust from url
|
||||
WIN.history.replaceState({},'','/mesh/');
|
||||
|
||||
// setup init() trigger when dom + scripts complete
|
||||
DOC.onreadystatechange = function() {
|
||||
if (DOC.readyState === 'complete') {
|
||||
init();
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -7,15 +7,26 @@
|
|||
--highlight: rgba(126,153,183,0.4);
|
||||
--main-color: rgba(126,153,183,1);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Russo One';
|
||||
src: url('/kiri/ext/russo-one.ttf');
|
||||
}
|
||||
|
||||
a, a:hover, a:visited {
|
||||
border: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
|
|
@ -27,17 +38,19 @@ a, a:hover, a:visited {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
#app-name {
|
||||
xposition: absolute;
|
||||
|
||||
#app-info {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
z-index: 50;
|
||||
}
|
||||
#app-name:hover #app-info {
|
||||
|
||||
#app-info:hover #app-vers {
|
||||
display: flex;
|
||||
}
|
||||
#app-info {
|
||||
|
||||
#app-vers {
|
||||
display: none;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
|
|
@ -53,128 +66,25 @@ a, a:hover, a:visited {
|
|||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
}
|
||||
#app-name, #app-acct {
|
||||
|
||||
#app-info {
|
||||
cursor: pointer;
|
||||
}
|
||||
#app,div {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#top-sep, #mid-sep {
|
||||
|
||||
#top-sep {
|
||||
z-index: 14;
|
||||
height: 1px;
|
||||
background-image: var(--gradbar);
|
||||
}
|
||||
#gsbox {
|
||||
|
||||
#loading {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding-right: 15px;
|
||||
position: fixed;
|
||||
display: none;
|
||||
}
|
||||
div {
|
||||
position: relative;
|
||||
}
|
||||
button.yellow {
|
||||
background-color: #eda;
|
||||
border: 1px solid rgba(0,0,255,0.5);
|
||||
}
|
||||
button.yellow:hover {
|
||||
background-color: #eea;
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
background-color: #eee;
|
||||
padding: 2px 7px 3px 7px;
|
||||
margin: 1px 1px 2px;
|
||||
cursor: pointer;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--main-color);
|
||||
color: white;
|
||||
}
|
||||
button[load] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
button[del] {
|
||||
margin-left: 5px;
|
||||
}
|
||||
input {
|
||||
background-color: #eeeeeed6;
|
||||
margin-bottom: 1px;
|
||||
text-align: right;
|
||||
border: 1px solid #bbb;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
input:focus {
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border-color: #6C7F94;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 10%);
|
||||
}
|
||||
input[disabled] {
|
||||
background-color: #ddd;
|
||||
color: #000;
|
||||
border-width: 1px;
|
||||
}
|
||||
input[type="range"] {
|
||||
width: 85px;
|
||||
background-color: transparent;
|
||||
}
|
||||
input[type=range]::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
input[type="checkbox"] + .color {
|
||||
z-index: 10000;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
margin: 2px;
|
||||
}
|
||||
input[type="checkbox"]:not(:checked) + .color {
|
||||
border: 1px solid blue;
|
||||
background-color: rgba(255,255,255,0.5) !important;
|
||||
}
|
||||
input[type="checkbox"].color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
select, textarea, button, input, a {
|
||||
outline: none;
|
||||
}
|
||||
textarea {
|
||||
overflow: scroll;
|
||||
}
|
||||
select {
|
||||
border: 1px solid #bbb;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
th, tr, td, span, div, label, button {
|
||||
user-select: none;
|
||||
}
|
||||
th, tr, td, label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -191,18 +101,12 @@ th, tr, td, label {
|
|||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.frow {
|
||||
.f-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.f-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.auto {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.basis-50 {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -227,41 +131,12 @@ th, tr, td, label {
|
|||
.j-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.middle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-just {
|
||||
text-align: justify;
|
||||
}
|
||||
.t-right {
|
||||
text-align: right;
|
||||
}
|
||||
.russo {
|
||||
font-family: 'Russo One', sans-serif;
|
||||
}
|
||||
.overy {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.mh0 {
|
||||
min-height: 0;
|
||||
}
|
||||
.mh35 {
|
||||
max-height: 35%;
|
||||
}
|
||||
.mh85 {
|
||||
max-height: 85%;
|
||||
}
|
||||
|
||||
:-moz-any() {
|
||||
overflow-x: hidden !important;
|
||||
|
|
@ -282,17 +157,7 @@ th, tr, td, label {
|
|||
position: fixed;
|
||||
background-color: #fff;
|
||||
font-family: 'Russo One', sans-serif;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
#tracker {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 101;
|
||||
z-index: 50000;
|
||||
}
|
||||
|
||||
#container {
|
||||
|
|
@ -301,6 +166,7 @@ th, tr, td, label {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#container canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -313,63 +179,7 @@ th, tr, td, label {
|
|||
padding: 3px;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
#top > div {
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
#modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
height: 300px;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--bg-gray);
|
||||
border-bottom: 1px solid black;
|
||||
border-top: 1px solid black;
|
||||
overflow: hidden;
|
||||
}
|
||||
#modal > div {
|
||||
position: absolute;
|
||||
transform: translateX(50%) translateY(-50%);
|
||||
right: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
.mdialog {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
min-height: 20px;
|
||||
font-size: smaller;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#gdpr {
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
}
|
||||
#gdpr a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#gotit {
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
padding: 5px 20px 5px 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#fps {
|
||||
position: fixed;
|
||||
font-size: 10px;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
color: #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,21 +21,14 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="app" class="f-col">
|
||||
<div id="curtain" class="j-center a-center"><img id="gsbox"/>loading...</div>
|
||||
<div id="curtain" class="j-center a-center"><img id="loading"/>loading...</div>
|
||||
<div id="container"></div>
|
||||
<div id="tracker"></div>
|
||||
<div id="top" class="f-row">
|
||||
<div id="app-name" class="f-col a-center">
|
||||
<div>Mesh:Tool<div id="app-info">version</div></div>
|
||||
<div id="app-info" class="f-col a-center">
|
||||
<div><div id="app-name"></div><div id="app-vers">version</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mid-sep"></div>
|
||||
<div id="gdpr" class="noshow">
|
||||
<p>this site uses <A href="/privacy.html" target="privacy">cookies</a> to preserve application preferences</p>
|
||||
<button id="gotit" class="f-col j-center">got it</button>
|
||||
</div>
|
||||
<div id="tool-info" class="noshow"></div>
|
||||
<div id="fps" class="noshow"></div>
|
||||
<div id="top-sep"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue