mirror of
https://github.com/overte-org/overte.git
synced 2025-04-20 03:44:02 +02:00
Merge pull request #7446 from ctrlaltdavid/20855
Restyle entities editor
This commit is contained in:
Brad Hefta-Gaub
commit
95e0682012
15 changed files with 1899 additions and 742 deletions
883
examples/html/edit-style.css
Normal file
883
examples/html/edit-style.css
Normal file
|
|
@ -0,0 +1,883 @@
|
|||
/*
|
||||
// edit-style.css
|
||||
//
|
||||
// Created by Ryan Huffman on 13 Nov 2014
|
||||
// Copyright 2014 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
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway-Regular;
|
||||
src: url(../../resources/fonts/Raleway-Regular.ttf), /* Production */
|
||||
url(../../interface/resources/fonts/Raleway-Regular.ttf); /* Development */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway-Light;
|
||||
src: url(../../resources/fonts/Raleway-Light.ttf),
|
||||
url(../../interface/resources/fonts/Raleway-Light.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway-Bold;
|
||||
src: url(../../resources/fonts/Raleway-Bold.ttf),
|
||||
url(../../interface/resources/fonts/Raleway-Bold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway-SemiBold;
|
||||
src: url(../../resources/fonts/Raleway-SemiBold.ttf),
|
||||
url(../../interface/resources/fonts/Raleway-SemiBold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: FiraSans-SemiBold;
|
||||
src: url(../../resources/fonts/FiraSans-SemiBold.ttf),
|
||||
url(../../interface/resources/fonts/FiraSans-SemiBold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: AnonymousPro-Regular;
|
||||
src: url(../../resources/fonts/AnonymousPro-Regular.ttf),
|
||||
url(../../interface/resources/fonts/AnonymousPro-Regular.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: HiFi-Glyphs;
|
||||
src: url(../../resources/fonts/hifi-glyphs.ttf),
|
||||
url(../../interface/resources/fonts/hifi-glyphs.ttf);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 24px 12px 24px 12px;
|
||||
|
||||
color: #afafaf;
|
||||
background-color: #404040;
|
||||
font-family: Raleway-Regular;
|
||||
font-size: 15px;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 15px;
|
||||
color: #afafaf;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border: 2px solid #575757;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
thead {
|
||||
font-family: Raleway-Regular;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
background-color: #1c1c1c;
|
||||
padding: 1px 0px;
|
||||
border-bottom: 1px solid #575757;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tbody {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
font-family: Raleway-Light;
|
||||
font-size: 13px;
|
||||
background-color: #1c1c1c;
|
||||
border-top: 1px solid #575757;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tfoot tr {
|
||||
background-color: #1c1cff;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
height: 26px; /* 28px with thead padding */
|
||||
}
|
||||
|
||||
thead th {
|
||||
height: 26px;
|
||||
background-color: #1c1c1c;
|
||||
border-right: 1px solid #575757;
|
||||
}
|
||||
|
||||
thead th:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
tfoot td {
|
||||
height: 18px;
|
||||
width: 100%;
|
||||
background-color: #1c1c1c;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
tr {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #2e2e2e;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #1c1c1c;
|
||||
}
|
||||
|
||||
tr:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
tr.selected {
|
||||
color: #000000;
|
||||
background-color: #00b4ef;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: center;
|
||||
word-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: nowrap;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
td.url {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
input[type="text"], input[type="number"], textarea {
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
color: #afafaf;
|
||||
background-color: #252525;
|
||||
border: none;
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: AnonymousPro-Regular;
|
||||
font-size: 16px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
min-height: 64px;
|
||||
width: 100%;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
outline: 1px solid #00b4ef;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
input::selection, textarea::selection {
|
||||
color: #000000;
|
||||
background-color: #00b4ef;
|
||||
}
|
||||
|
||||
input.search {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
input:disabled, textarea:disabled {
|
||||
background-color: #383838;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
height: 28px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
padding-right: 6px;
|
||||
}
|
||||
input[type=number]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
opacity: 1.0;
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 10px;
|
||||
overflow: hidden;
|
||||
font-family: hifi-glyphs;
|
||||
font-size: 50px;
|
||||
color: #afafaf;
|
||||
cursor: pointer;
|
||||
/*background-color: #000000;*/
|
||||
}
|
||||
input[type=number]::-webkit-inner-spin-button:before,
|
||||
input[type=number]::-webkit-inner-spin-button:after {
|
||||
position:absolute;
|
||||
left: -21px;
|
||||
line-height: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
input[type=number]::-webkit-inner-spin-button:before {
|
||||
content: "6";
|
||||
top: 5px;
|
||||
}
|
||||
input[type=number]::-webkit-inner-spin-button:after {
|
||||
content: "5";
|
||||
bottom: 6px;
|
||||
}
|
||||
input[type="number"]::-webkit-inner-spin-button:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
input.no-spin::-webkit-outer-spin-button,
|
||||
input.no-spin::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
input[type=button] {
|
||||
font-family: Raleway-Bold;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: top;
|
||||
height: 28px;
|
||||
min-width: 120px;
|
||||
padding: 0px 12px;
|
||||
margin-right: 8px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
background: linear-gradient(#343434 20%, #000 100%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=button].glyph {
|
||||
font-family: HiFi-Glyphs;
|
||||
font-size: 20px;
|
||||
text-transform: none;
|
||||
min-width: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type=button].red {
|
||||
color: #fff;
|
||||
background-color: #94132e;
|
||||
background: linear-gradient(#d42043 20%, #94132e 100%);
|
||||
}
|
||||
input[type=button].blue {
|
||||
color: #fff;
|
||||
background-color: #94132e;
|
||||
background: linear-gradient(#00b4ef 20%, #1080b8 100%);
|
||||
}
|
||||
|
||||
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]: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]:disabled {
|
||||
color: #252525;
|
||||
background: linear-gradient(#575757 20%, #252525 100%);
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
input[type=checkbox] + label {
|
||||
padding-left: 24px;
|
||||
background-position-y: 6px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACpSURBVDhPY2xoaGD68+dPMSMjY9L////VgTQjAw4AlH8PxLOPHj1azWxjY1MBVNsBFBfBpwkEgNKcQGwtJyfHyATkF0KEiQdAzYlMQEIUyicFyDD9+/ePgRxMvsb///4zkIOZ/v0HmkAGHginYjGNGAzS+BpdkAj8mun/3//92DyPD//993cG88nTJ4+Zm5p/BSZeJYb/DEJADEzNOPF7hn8Mk69cvVIPAHN5pyfo70F5AAAAAElFTkSuQmCC);
|
||||
}
|
||||
input[type=checkbox]:enabled + label:hover {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAClSURBVDhPY2hoaGD6//9/6b9//64D8T8gGycASr/7+/dv5/79+1kYgIxKqDjRAKiniRFIv2JgYBAFYlLAE0aQ66AckgDjjx8/yNP44cMH8jS+fPmSPI0PHz4kT+PNmzfJ03jp0iXyNJ46dYo8jYcPHyYnAbxm+vnzZz8wLhlIwd+/f5/BrKSkdExCQuLrnz9/lIBpUAiIQekXF34PTGmTT548WQ8AokXg+rhVtPYAAAAASUVORK5CYII=);
|
||||
}
|
||||
input[type=checkbox]:checked + label {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFLSURBVDhPjZK9SgNBFIXvbCaQRDQq7mIhQRPBRisJKcwLWOobaCsExEaxcEEQe0trGysfwg0EwWoDsbFIJUaIBJOwus547saNP3FlPzgzzJxzL5edFbZtG77v7wkhtrXWS9gFRQC/DZ07jnOYKJfL+8ie4n7mvyIGdhpay+VyQuK8y5dPZoHuVtbpZcLi4wjJ1x4t316R9dDgBlsSi8mGu7pJjyJFzVaH+r7iqyHSELSQzVADjS0UgjlDKUUsLzVO98+9kSLGV5qaHXhjU0GWNSxk3hCIwnsfeMNCjTArLmHeUBodoLiE+R+jxuHPUZP4elGE3teonx2S/Q7lJzOUlkYQ+A4/xzyegzNhXmJpwTMXry9IFjcoa84O0r+QXpcK1cugCLREZadyoA19Ergxwf96nKjd1KqlYqmLQ540TUNwItUmRWdu3T36AODjwgpY9xqqAAAAAElFTkSuQmCC);
|
||||
}
|
||||
input[type=checkbox]:checked + label:hover {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEySURBVDhPnZLPSsNAEMa/XVPBCE0RhNy0OarP4Av4AD6JB0GwVBA8efBBxHsgh4CQswcRoUIpiIpVAm3zZ5M4szFSbQPBH3xkJvNNZskOer2eLIriKM/ze1JOcS1UHmdZduF5ngEKjr/fN4Z6+oKerwA2gxC4HAFPEWVLsAzgZAvYt3Q6Enw6jg7uBAaTFMNwhpnKdbXCkAJdy8ROu4XrXW2HTJIErHcFDD6nC02Mom8PwymeE2gvS0ZRBBaTlsOXEmdlrfLLOI7Bakrl/zWxCT8T/904f9QW/b06qtrCUdtFCqdjYs2Q2jAPX8c2XQd7Kr/wfV8vwIPs4Ga1ixe5Xrr/YFLTYfKIvWzM6ZtwXZdX7lxXG0L+sxXHcW5t254opRzawQ0S72+dPmjTroIgOP0CQSMt5LDn1T8AAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.selectable {
|
||||
-webkit-touch-callout: text;
|
||||
-webkit-user-select: text;
|
||||
-khtml-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.color-box {
|
||||
display: inline-block;
|
||||
width: 15pt;
|
||||
height: 15pt;
|
||||
border: 0.75pt solid black;
|
||||
margin: 1.5pt;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-box.highlight {
|
||||
width: 13.5pt;
|
||||
height: 13.5pt;
|
||||
border: 1.5pt solid black;
|
||||
}
|
||||
|
||||
|
||||
.section-header, .sub-section-header {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin: 22px -12px 0 -12px;
|
||||
padding: 14px 12px 0 12px;
|
||||
font-family: Raleway-Regular;
|
||||
font-size: 12px;
|
||||
color: #afafaf;
|
||||
height: 28px;
|
||||
text-transform: uppercase;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
position: relative;
|
||||
background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left;
|
||||
}
|
||||
|
||||
.sub-section-header, .no-collapse {
|
||||
background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left;
|
||||
}
|
||||
|
||||
.section-header:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
background: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sub-section-header {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.section-header span {
|
||||
font-family: HiFi-Glyphs;
|
||||
font-size: 30px;
|
||||
float: right;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.section-header[collapsed="true"] {
|
||||
margin-bottom: -22px;
|
||||
}
|
||||
|
||||
.text-group[collapsed="true"] ~ .text-group,
|
||||
.zone-group[collapsed="true"] ~ .zone-group,
|
||||
.web-group[collapsed="true"] ~ .web-group,
|
||||
.hyperlink-group[collapsed="true"] ~ .hyperlink-group,
|
||||
.spatial-group[collapsed="true"] ~ .spatial-group,
|
||||
.physical-group[collapsed="true"] ~ .physical-group,
|
||||
.behavior-group[collapsed="true"] ~ .behavior-group,
|
||||
.model-group[collapsed="true"] ~ .model-group,
|
||||
.light-group[collapsed="true"] ~ .light-group {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.property {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-top: 22px;
|
||||
min-height: 29px;
|
||||
}
|
||||
|
||||
.property label {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-family: Raleway-SemiBold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: block;
|
||||
min-height: 18px;
|
||||
}
|
||||
.value label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 48px;
|
||||
}
|
||||
.value span {
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.checkbox + .checkbox {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.checkbox-sub-props {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.property .number {
|
||||
float: left;
|
||||
}
|
||||
.property .number + .number {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label, .gen label {
|
||||
float: left;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.number > input {
|
||||
clear: both;
|
||||
float: left;
|
||||
}
|
||||
.number > span {
|
||||
clear: both;
|
||||
float: left;
|
||||
}
|
||||
.xyz > div, .pyr > div, .gen > div {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.unit {
|
||||
padding-left: 4px;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
margin-bottom: -17px;
|
||||
}
|
||||
|
||||
.dropdown select {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.dropdown dl {
|
||||
clear: both;
|
||||
}
|
||||
.dropdown dl {
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 15px;
|
||||
width: 172px;
|
||||
height: 28px;
|
||||
padding: 0 28px 0 12px;
|
||||
|
||||
color: #afafaf;
|
||||
background: linear-gradient(#7d7d7d 20%, #686a68 100%);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.dropdown dl[dropped="true"] {
|
||||
color: #404040;
|
||||
background: linear-gradient(#afafaf, #afafaf);
|
||||
}
|
||||
|
||||
.dropdown dt {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #121212;
|
||||
width: 100%;
|
||||
}
|
||||
.dropdown dt:hover {
|
||||
color: #404040;
|
||||
}
|
||||
.dropdown dt:focus {
|
||||
outline: none;
|
||||
}
|
||||
.dropdown dt span:first-child {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
.dropdown dt span:last-child {
|
||||
font-family: HiFi-Glyphs;
|
||||
font-size: 42px;
|
||||
float: right;
|
||||
margin-right: -48px;
|
||||
position: relative;
|
||||
left: -12px;
|
||||
top: -11px;
|
||||
}
|
||||
|
||||
.dropdown dd {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 3px;
|
||||
display: none;
|
||||
}
|
||||
.dropdown dl[dropped="true"] dd {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown li {
|
||||
list-style-type: none;
|
||||
padding: 3px 0 1px 12px;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 15px;
|
||||
color: #404040;
|
||||
background-color: #afafaf
|
||||
}
|
||||
.dropdown li:hover {
|
||||
background-color: #00b4ef;
|
||||
}
|
||||
|
||||
|
||||
div.refresh {
|
||||
box-sizing: border-box;
|
||||
padding-right: 44px;
|
||||
}
|
||||
div.refresh input[type="button"] {
|
||||
float: right;
|
||||
margin-right: -44px;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
margin-bottom: 12px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 4px solid #afafaf;
|
||||
border-radius: 4px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABTSURBVChTjcxBDoAwCETRwTs33sFjwB6uaCE1Ggvav5qQF7CSqu40dllHjYiOT3gh3yV8Ii+Fb+RNMEP9hm3sKENmBhG5P1aImWMH/EMerSAAOAFgTC/R8ZXSXAAAAABJRU5ErkJggg==);
|
||||
background-position: bottom right;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.color-picker:focus {
|
||||
outline: none;
|
||||
}
|
||||
.color-picker[active="true"] {
|
||||
border-color: #000;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABDSURBVChTjcoLCkAhCETRNq0tf97Y5xGZ1gVJ45TH6njThIO+xk2UwhWFcEdH6JCqOuiQiMDi/hcii3crRRb/7ggAPvIMVihQwvSXAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.rgb label {
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.rgb label + * {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.tuple {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.tuple div {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-width: 120px;
|
||||
min-height: 1px;
|
||||
}
|
||||
.tuple div:nth-child(1) {
|
||||
float: left;
|
||||
}
|
||||
.tuple div:nth-child(2) {
|
||||
}
|
||||
.tuple div:nth-child(3) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.rgb .tuple input {
|
||||
padding-left: 65px;
|
||||
}
|
||||
.xyz .tuple input {
|
||||
padding-left: 25px;
|
||||
}
|
||||
.pyr .tuple input {
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
.tuple div > label:first-child {
|
||||
float: left;
|
||||
}
|
||||
.tuple div > label + input {
|
||||
clear: both;
|
||||
float: left;
|
||||
}
|
||||
.tuple div input + label {
|
||||
display: inline !important;
|
||||
float: none !important;
|
||||
position: absolute;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
left: 0;
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tuple .red + label, .tuple .x + label, .tuple .pitch + label {
|
||||
color: #e2334d;
|
||||
}
|
||||
.tuple .green + label, .tuple .y + label, .tuple .yaw + label {
|
||||
color: #1ac567;
|
||||
}
|
||||
.tuple .blue + label, .tuple .z + label, .tuple .roll + label {
|
||||
color: #1080b8;
|
||||
}
|
||||
|
||||
.tuple .red:focus, .tuple .x:focus, .tuple .pitch:focus {
|
||||
outline-color: #e2334d;
|
||||
}
|
||||
.tuple .green:focus, .tuple .y:focus, .tuple .yaw:focus {
|
||||
outline-color: #1ac567;
|
||||
}
|
||||
tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
|
||||
outline-color: #1080b8;
|
||||
}
|
||||
|
||||
.xyz .buttons input {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.xyz .buttons span {
|
||||
word-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.row input {
|
||||
float: left;
|
||||
}
|
||||
.row input[type=button] {
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #2e2e2e;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #696969;
|
||||
border: 2px solid #2e2e2e;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* FIXME: Revisit textarea resizer/corner when move to Qt 5.6 or later: see if can get resizer/corner to always be visible and
|
||||
have correct background color with and without scrollbars. */
|
||||
textarea:enabled::-webkit-resizer {
|
||||
background-size: 10px 10px;
|
||||
background: #252525 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAXSURBVChTY1RVVWXADZigNA4wMqUZGACS3gCD5UUtKAAAAABJRU5ErkJggg==) no-repeat bottom right;
|
||||
}
|
||||
textarea:focus::-webkit-resizer {
|
||||
background-size: 10px 10px;
|
||||
background: #000000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACOSURBVChThdC5DQQhDAXQvyRI5LQxFdABARWQElAPogYkiqEWQhLYGe8xxzJaS5a/8AuQHwDG2n+Lvee0hBDQWlO+hRvy3mNZFjDG5vCDOOeIMaL3/guPKISAWiu9n+AVSSlhraXdF86Qcw6tNdoTvEOlFOScd6iUOv3JGEMopYQx9jNvaawnoHnNr8Z4AuRLPOq2gPgnAAAAAElFTkSuQmCC) no-repeat bottom right;
|
||||
}
|
||||
textarea:enabled[scrolling="true"]::-webkit-resizer {
|
||||
background-size: 10px 10px;
|
||||
background: #2e2e2e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACKSURBVChTjdAxDsMgDAXQT4UYuQIzCwsSKxsSJ4YDoByDY7AwUOG2aZMQqX+xhd9gzIwxA3/k8a7LCCFgraX+Fk4UY4RSCoyxNfwgzjlyzhhjXOEvSimhtUbvB3hGUkp472m2wxUKIaD3TnOCd6jWim3bvlBrfdjJOUeolEJoZj/4PMH83bl/BXgCWSs2Z09IjgoAAAAASUVORK5CYII=) no-repeat bottom right;
|
||||
}
|
||||
|
||||
|
||||
#entity-list-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
#delete {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
#entity-list {
|
||||
position: relative; /* New positioning context. */
|
||||
}
|
||||
|
||||
#search-area {
|
||||
padding-right: 148px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
#filter {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
#radius-and-unit {
|
||||
float: right;
|
||||
margin-right: -148px;
|
||||
}
|
||||
|
||||
|
||||
#entity-table-scroll {
|
||||
/* Height is set by JavaScript. */
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-top: 28px; /* Space for header and footer outside of scroll region. */
|
||||
margin-top: 28px;
|
||||
border-left: 2px solid #575757;
|
||||
border-right: 2px solid #575757;
|
||||
}
|
||||
|
||||
#entity-table-scroll, #entity-table {
|
||||
background-color: #1c1c1c;
|
||||
}
|
||||
|
||||
#entity-table {
|
||||
margin-top: -28px;
|
||||
margin-bottom: -18px;
|
||||
table-layout: fixed;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#entity-table thead {
|
||||
border: 2px solid #575757;
|
||||
border-top-left-radius: 7px;
|
||||
border-top-right-radius: 7px;
|
||||
border-bottom: 1px solid #575757;
|
||||
}
|
||||
|
||||
#entity-table tfoot {
|
||||
border: 2px solid #575757;
|
||||
border-bottom-left-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
border-top: 1px solid #575757;
|
||||
}
|
||||
|
||||
#entity-table thead tr, #entity-table thead tr th,
|
||||
#entity-table tfoot tr, #entity-table tfoot tr td {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#entity-table th:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#col-type {
|
||||
width: 16%;
|
||||
}
|
||||
#col-name {
|
||||
width: 42%;
|
||||
}
|
||||
#col-url {
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
#entity-table thead {
|
||||
position: absolute;
|
||||
top: 49px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#entity-table thead th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#entity-table tfoot {
|
||||
position: absolute;
|
||||
bottom: -21px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#no-entities {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
padding: 12px;
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
|
||||
#properties-list .property:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#property-id::selection {
|
||||
color: #000000;
|
||||
background-color: #00b4ef;
|
||||
}
|
||||
|
||||
|
||||
input#dimension-rescale-button {
|
||||
min-width: 50px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
|
||||
.color-set label, .color-set span {
|
||||
display: block;
|
||||
}
|
||||
.color-set span {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
|
@ -1,6 +1,16 @@
|
|||
<!--
|
||||
// entityList.html
|
||||
//
|
||||
// Created by Ryan Huffman on 19 Nov 2014
|
||||
// Copyright 2014 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
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" href="edit-style.css">
|
||||
<script src="list.min.js"></script>
|
||||
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
||||
<script type="text/javascript" src="eventBridgeLoader.js"></script>
|
||||
|
|
@ -26,8 +36,10 @@
|
|||
elDelete = document.getElementById("delete");
|
||||
elTeleport = document.getElementById("teleport");
|
||||
elRadius = document.getElementById("radius");
|
||||
elFooter = document.getElementById("footer-text");
|
||||
elNoEntitiesMessage = document.getElementById("no-entities");
|
||||
elNoEntitiesRadius = document.getElementById("no-entities-radius");
|
||||
elEntityTableScroll = document.getElementById("entity-table-scroll");
|
||||
|
||||
document.getElementById("entity-name").onclick = function() {
|
||||
setSortColumn('name');
|
||||
|
|
@ -168,6 +180,17 @@
|
|||
notFound = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedEntities.length > 1) {
|
||||
elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
|
||||
} else if (selectedEntities.length === 1) {
|
||||
elFooter.firstChild.nodeValue = "1 entity selected";
|
||||
} else if (entityList.visibleItems.length === 1) {
|
||||
elFooter.firstChild.nodeValue = "1 entity found";
|
||||
} else {
|
||||
elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
|
||||
}
|
||||
|
||||
return notFound;
|
||||
}
|
||||
|
||||
|
|
@ -214,57 +237,90 @@
|
|||
} else if (data.type == "update") {
|
||||
var newEntities = data.entities;
|
||||
if (newEntities.length == 0) {
|
||||
elEntityTable.style.display = "none";
|
||||
elNoEntitiesMessage.style.display = "block";
|
||||
} else {
|
||||
elEntityTable.style.display = "table";
|
||||
elNoEntitiesMessage.style.display = "none";
|
||||
for (var i = 0; i < newEntities.length; i++) {
|
||||
var id = newEntities[i].id;
|
||||
addEntity(id, newEntities[i].name, newEntities[i].type, newEntities[i].url);
|
||||
}
|
||||
updateSelectedEntities(data.selectedIDs);
|
||||
resize();
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(refreshEntities, 1000);
|
||||
}
|
||||
|
||||
function resize() {
|
||||
// Take up available window space
|
||||
elEntityTableScroll.style.height = window.innerHeight - 232;
|
||||
|
||||
// Update the widths of the header cells to match the body
|
||||
var tds = document.querySelectorAll("#entity-table-body tr:first-child td");
|
||||
var ths = document.querySelectorAll("#entity-table thead th");
|
||||
if (tds.length >= ths.length) {
|
||||
for (var i = 0; i < ths.length; i++) {
|
||||
ths[i].style.width = tds[i].offsetWidth;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onresize = resize;
|
||||
resize();
|
||||
});
|
||||
}
|
||||
|
||||
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
|
||||
document.addEventListener("contextmenu", function (event) {
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload='loaded();'>
|
||||
<div id="entity-list-header">
|
||||
<input type="button" id="refresh" value="Refresh" />
|
||||
<input type="button" id="teleport" value="Teleport" />
|
||||
<input type="button" id="delete" style="background-color: rgb(244, 64, 64); float: right" value="Delete" />
|
||||
<input type="button" class="glyph" id="refresh" value="F" />
|
||||
<input type="button" id="teleport" value="Jump To Selection" />
|
||||
<input type="button" class="red" id="delete" value="Delete" />
|
||||
</div>
|
||||
|
||||
<div id="entity-list">
|
||||
<div id="search-area">
|
||||
<input type="text" class="search" id="filter" placeholder="Filter" />
|
||||
<span id="radius-and-unit"><input type="number" id="radius" value="100" /> m</span>
|
||||
<span id="radius-and-unit"><input type="number" id="radius" value="100" /><span class="unit">m</span></span>
|
||||
</div>
|
||||
<div id="entity-table-scroll">
|
||||
<table id="entity-table">
|
||||
<colgroup>
|
||||
<col span="1" id="col-type" />
|
||||
<col span="1" id="col-name" />
|
||||
<col span="1" id="col-url" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline"> ▾</span></th>
|
||||
<th id="entity-name" data-sort="type">Name <span class="sort-order" style="display: none"> ▾</span></th>
|
||||
<th id="entity-url" data-sort="url">File <span class="sort-order" style="display: none"> ▾</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list" id="entity-table-body">
|
||||
<tr>
|
||||
<td class="type">Type</td>
|
||||
<td class="name">Name</td>
|
||||
<td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
|
||||
<td class="id" style="display: none">Type</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td id="footer-text" colspan="3">Footer text</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div id="no-entities">
|
||||
No entities found within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.
|
||||
</div>
|
||||
</div>
|
||||
<table id="entity-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline"> ▾</span></th>
|
||||
<th id="entity-name" data-sort="type">Name <span class="sort-order" style="display: inline"> ▾</span></th>
|
||||
<th id="entity-url" data-sort="url">URL <span class="sort-order" style="display: none"> ▾</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list" id="entity-table-body">
|
||||
<tr>
|
||||
<td class="id" style="display: none">Type</td>
|
||||
<td class="type">Type</td>
|
||||
<td class="name">Name</td>
|
||||
<td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="no-entities">
|
||||
No entities found within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,6 +1,16 @@
|
|||
<!--
|
||||
// gridControls.html
|
||||
//
|
||||
// Created by Ryan Huffman on 6 Nov 2014
|
||||
// Copyright 2014 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
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" href="edit-style.css">
|
||||
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
||||
<script type="text/javascript" src="eventBridgeLoader.js"></script>
|
||||
<script>
|
||||
|
|
@ -109,61 +119,63 @@
|
|||
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
|
||||
});
|
||||
|
||||
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
|
||||
document.addEventListener("contextmenu", function (event) {
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload='loaded();'>
|
||||
<div class="grid-section">
|
||||
<div id="grid-section">
|
||||
|
||||
<div class="property-section">
|
||||
<label>Visible</label>
|
||||
<div class="section-header">
|
||||
<label>Editing Grid</label>
|
||||
</div>
|
||||
|
||||
<div class="property checkbox">
|
||||
<input type='checkbox' id="horiz-grid-visible">
|
||||
<label for="horiz-grid-visible">Visible</label>
|
||||
</div>
|
||||
|
||||
<div class="property checkbox">
|
||||
<input type="checkbox" id="snap-to-grid">
|
||||
<label for="snap-to-grid">Snap entities to grid</label>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="number">
|
||||
<label>Major grid size</label>
|
||||
<span>
|
||||
<input type="number" id="major-spacing" min="1" step="1" /><span class="unit">m</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="number">
|
||||
<label>Minor grid size</label>
|
||||
<span>
|
||||
<input type="number" id="minor-spacing" min="0.2" step="0.2" /><span class="unit">m</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property number">
|
||||
<label>Position (Y axis)</label>
|
||||
<span>
|
||||
<input type='checkbox' id="horiz-grid-visible">
|
||||
<input type="number" id="horiz-y" step="0.1" /><span class="unit">m</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="property-section">
|
||||
<label>Snap to grid</label>
|
||||
<span>
|
||||
<input type='checkbox' id="snap-to-grid">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="horizontal-position" class="property-section">
|
||||
<label>Position (Y Axis)</label>
|
||||
<span>
|
||||
<input type='number' id="horiz-y" class="number" step="0.1"></input>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="property-section">
|
||||
<label>Minor Grid Size</label>
|
||||
<span>
|
||||
<input type='number' id="minor-spacing" min="0.2" step="0.2"></input>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="property-section">
|
||||
<label>Major Grid Every</label>
|
||||
<span>
|
||||
<input type='number' id="major-spacing" min="1" step="1", ></input>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="property-section">
|
||||
<label>Grid Color</label>
|
||||
<div class="property color-set">
|
||||
<label>Grid line color</label>
|
||||
<span id="grid-colors"></span>
|
||||
</div>
|
||||
|
||||
<div class="property-section">
|
||||
<div class="property">
|
||||
<span>
|
||||
<input type="button" id="move-to-selection" value="Move to Selection">
|
||||
</span>
|
||||
</div>
|
||||
<div class="property-section">
|
||||
<span>
|
||||
<input type="button" id="move-to-avatar" value="Move to Avatar">
|
||||
</span>
|
||||
<input type="button" id="move-to-selection" value="Align To Selection">
|
||||
<input type="button" id="move-to-avatar" value="Align To Avatar">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ EntityListTool = function(opts) {
|
|||
|
||||
var url = ENTITY_LIST_HTML_URL;
|
||||
var webView = new OverlayWebWindow({
|
||||
title: 'Entities', source: url, toolWindow: true
|
||||
title: 'Entity List', source: url, toolWindow: true
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@
|
|||
<script type="text/javascript" src="../html/eventBridgeLoader.js"></script>
|
||||
<script type="text/javascript" src="particleExplorer.js?v42"></script>
|
||||
<script>
|
||||
function loaded() {
|
||||
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
|
||||
document.addEventListener("contextmenu", function (event) {
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
|
|
@ -60,7 +66,7 @@ body{
|
|||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="loaded();">
|
||||
<div class="importer">
|
||||
<input type='text' id="importer-input" placeholder="Import: Paste JSON here." onkeypress="handleInputKeyPress(event)">
|
||||
<div class = "exported-props-section">
|
||||
|
|
|
|||
|
|
@ -416,7 +416,6 @@ Window {
|
|||
anchors.top: assetDirectory.bottom
|
||||
anchors.bottom: uploadSection.top
|
||||
anchors.margins: 12
|
||||
anchors.bottomMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
|
||||
|
|
@ -445,7 +444,7 @@ Window {
|
|||
name: "Upload A File"
|
||||
spacing: hifi.dimensions.contentSpacing.y
|
||||
anchors.bottom: parent.bottom
|
||||
height: 130
|
||||
height: 92
|
||||
|
||||
Item {
|
||||
height: parent.height
|
||||
|
|
|
|||
|
|
@ -1,13 +1,25 @@
|
|||
//
|
||||
// ToolWindow.qml
|
||||
//
|
||||
// Created by Bradley Austin Davis on 12 Jan 2016
|
||||
// Copyright 2016 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 QtQuick 2.5
|
||||
import QtQuick.Controls 1.4
|
||||
import QtQuick.Controls.Styles 1.4
|
||||
import QtWebEngine 1.1
|
||||
import QtWebChannel 1.0
|
||||
import Qt.labs.settings 1.0
|
||||
|
||||
import "windows" as Windows
|
||||
import "controls" as Controls
|
||||
import "windows-uit"
|
||||
import "controls-uit"
|
||||
import "styles-uit"
|
||||
|
||||
Windows.Window {
|
||||
Window {
|
||||
id: toolWindow
|
||||
resizable: true
|
||||
objectName: "ToolWindow"
|
||||
|
|
@ -15,9 +27,13 @@ Windows.Window {
|
|||
destroyOnInvisible: false
|
||||
closable: true
|
||||
visible: false
|
||||
width: 384; height: 640;
|
||||
title: "Tools"
|
||||
title: "Edit"
|
||||
property alias tabView: tabView
|
||||
implicitWidth: 520; implicitHeight: 695
|
||||
minSize: Qt.vector2d(400, 500)
|
||||
|
||||
HifiConstants { id: hifi }
|
||||
|
||||
onParentChanged: {
|
||||
if (parent) {
|
||||
x = 120;
|
||||
|
|
@ -32,8 +48,11 @@ Windows.Window {
|
|||
}
|
||||
|
||||
TabView {
|
||||
anchors.fill: parent
|
||||
id: tabView;
|
||||
width: pane.contentWidth
|
||||
height: pane.scrollHeight // Pane height so that don't use Window's scrollbars otherwise tabs may be scrolled out of view.
|
||||
property int tabCount: 0
|
||||
|
||||
Repeater {
|
||||
model: 4
|
||||
Tab {
|
||||
|
|
@ -43,7 +62,7 @@ Windows.Window {
|
|||
enabled: false
|
||||
property string originalUrl: "";
|
||||
|
||||
Controls.WebView {
|
||||
WebView {
|
||||
id: webView;
|
||||
anchors.fill: parent
|
||||
enabled: false
|
||||
|
|
@ -60,6 +79,61 @@ Windows.Window {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
style: TabViewStyle {
|
||||
|
||||
frame: Rectangle { // Background shown before content loads.
|
||||
anchors.fill: parent
|
||||
color: hifi.colors.baseGray
|
||||
}
|
||||
|
||||
frameOverlap: 0
|
||||
|
||||
tab: Rectangle {
|
||||
implicitWidth: text.width
|
||||
implicitHeight: 3 * text.height
|
||||
color: styleData.selected ? hifi.colors.black : hifi.colors.tabBackgroundDark
|
||||
|
||||
RalewayRegular {
|
||||
id: text
|
||||
text: styleData.title
|
||||
font.capitalization: Font.AllUppercase
|
||||
size: hifi.fontSizes.tabName
|
||||
width: tabView.tabCount > 1 ? styleData.availableWidth / tabView.tabCount : implicitWidth + 2 * hifi.dimensions.contentSpacing.x
|
||||
elide: Text.ElideRight
|
||||
color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.lightGrayText
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
|
||||
Rectangle { // Separator.
|
||||
width: 1
|
||||
height: parent.height
|
||||
color: hifi.colors.black
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
visible: styleData.index > 0
|
||||
|
||||
Rectangle {
|
||||
width: 1
|
||||
height: 1
|
||||
color: hifi.colors.baseGray
|
||||
anchors.left: parent.left
|
||||
anchors.bottom: parent.bottom
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle { // Active underline.
|
||||
width: parent.width - (styleData.index > 0 ? 1 : 0)
|
||||
height: 1
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.baseGray
|
||||
}
|
||||
}
|
||||
|
||||
tabOverlap: 0
|
||||
}
|
||||
}
|
||||
|
||||
function updateVisiblity() {
|
||||
|
|
@ -129,6 +203,7 @@ Windows.Window {
|
|||
tab.originalUrl = "";
|
||||
tab.item.url = "about:blank";
|
||||
tab.item.enabled = false;
|
||||
tabView.tabCount--;
|
||||
}
|
||||
|
||||
function addWebTab(properties) {
|
||||
|
|
@ -150,6 +225,7 @@ Windows.Window {
|
|||
return;
|
||||
}
|
||||
|
||||
|
||||
if (properties.width) {
|
||||
tabView.width = Math.min(Math.max(tabView.width, properties.width), toolWindow.maxSize.x);
|
||||
}
|
||||
|
|
@ -169,6 +245,7 @@ Windows.Window {
|
|||
|
||||
var result = tab.item;
|
||||
result.enabled = true;
|
||||
tabView.tabCount++;
|
||||
console.log("Setting event bridge: " + eventBridge);
|
||||
result.eventBridgeWrapper.eventBridge = eventBridge;
|
||||
result.url = properties.source;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ Column {
|
|||
Item {
|
||||
id: leadingSpace
|
||||
width: 1
|
||||
height: isFirst ? hifi.dimensions.contentSpacing.y : hifi.dimensions.controlInterlineHeight
|
||||
height: isFirst ? hifi.dimensions.contentSpacing.y : 0
|
||||
anchors.top: parent.top
|
||||
}
|
||||
|
||||
|
|
@ -97,11 +97,11 @@ Column {
|
|||
|
||||
HiFiGlyphs {
|
||||
anchors {
|
||||
verticalCenter: title.verticalCenter
|
||||
top: title.top
|
||||
topMargin: -9
|
||||
right: parent.right
|
||||
rightMargin: -4
|
||||
}
|
||||
y: -2
|
||||
size: hifi.fontSizes.disclosureButton
|
||||
text: isCollapsed ? hifi.glyphs.disclosureButtonExpand : hifi.glyphs.disclosureButtonCollapse
|
||||
color: hifi.colors.lightGrayText
|
||||
|
|
|
|||
74
interface/resources/qml/controls-uit/WebView.qml
Normal file
74
interface/resources/qml/controls-uit/WebView.qml
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
//
|
||||
// WebView.qml
|
||||
//
|
||||
// Created by Bradley Austin Davis on 12 Jan 2016
|
||||
// Copyright 2016 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 QtQuick 2.5
|
||||
import QtWebEngine 1.1
|
||||
|
||||
WebEngineView {
|
||||
id: root
|
||||
property var newUrl;
|
||||
|
||||
Component.onCompleted: {
|
||||
console.log("Connecting JS messaging to Hifi Logging")
|
||||
// Ensure the JS from the web-engine makes it to our logging
|
||||
root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
|
||||
console.log("Web Window JS message: " + sourceID + " " + lineNumber + " " + message);
|
||||
});
|
||||
}
|
||||
|
||||
// FIXME hack to get the URL with the auth token included. Remove when we move to Qt 5.6
|
||||
Timer {
|
||||
id: urlReplacementTimer
|
||||
running: false
|
||||
repeat: false
|
||||
interval: 50
|
||||
onTriggered: url = newUrl;
|
||||
}
|
||||
|
||||
onUrlChanged: {
|
||||
console.log("Url changed to " + url);
|
||||
var originalUrl = url.toString();
|
||||
newUrl = urlHandler.fixupUrl(originalUrl).toString();
|
||||
if (newUrl !== originalUrl) {
|
||||
root.stop();
|
||||
if (urlReplacementTimer.running) {
|
||||
console.warn("Replacement timer already running");
|
||||
return;
|
||||
}
|
||||
urlReplacementTimer.start();
|
||||
}
|
||||
}
|
||||
|
||||
onFeaturePermissionRequested: {
|
||||
grantFeaturePermission(securityOrigin, feature, true);
|
||||
}
|
||||
|
||||
onLoadingChanged: {
|
||||
// Required to support clicking on "hifi://" links
|
||||
if (WebEngineView.LoadStartedStatus == loadRequest.status) {
|
||||
var url = loadRequest.url.toString();
|
||||
if (urlHandler.canHandleUrl(url)) {
|
||||
if (urlHandler.handleUrl(url)) {
|
||||
root.stop();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onNewViewRequested:{
|
||||
var component = Qt.createComponent("../Browser.qml");
|
||||
var newWindow = component.createObject(desktop);
|
||||
request.openIn(newWindow.webView)
|
||||
}
|
||||
|
||||
// This breaks the webchannel used for passing messages. Fixed in Qt 5.6
|
||||
// See https://bugreports.qt.io/browse/QTBUG-49521
|
||||
//profile: desktop.browserProfile
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@ Preference {
|
|||
|
||||
children: [ contentContainer ]
|
||||
|
||||
height: contentContainer.height + (root.isLast ? 2 * hifi.dimensions.contentSpacing.y : 0)
|
||||
height: contentContainer.height + (contentContainer.isCollapsed ? 0 : hifi.dimensions.controlInterlineHeight)
|
||||
|
||||
Component.onCompleted: d.buildPreferences();
|
||||
|
||||
|
|
@ -111,7 +111,6 @@ Preference {
|
|||
|
||||
case Preference.Checkbox:
|
||||
checkBoxCount++;
|
||||
console.log("####### checkBoxCount = " + checkBoxCount);
|
||||
builder = checkboxBuilder;
|
||||
break;
|
||||
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ Window {
|
|||
}
|
||||
|
||||
HifiControls.VerticalSpacer {
|
||||
height: 2 // Table view draws a little taller than it's height.
|
||||
height: hifi.dimensions.controlInterlineHeight + 2 // Table view draws a little taller than it's height.
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ Item {
|
|||
readonly property color lightGrayText: "#afafaf"
|
||||
readonly property color faintGray: "#e3e3e3"
|
||||
readonly property color primaryHighlight: "#00b4ef"
|
||||
readonly property color blueHighlight: "#00b4ef"
|
||||
readonly property color blueAccent: "#1080b8"
|
||||
readonly property color redHighlight: "#e2334d"
|
||||
readonly property color redAccent: "#b70a37"
|
||||
|
|
@ -75,12 +76,12 @@ Item {
|
|||
readonly property color lightGrayText80: "#ccafafaf"
|
||||
readonly property color faintGray80: "#cce3e3e3"
|
||||
readonly property color faintGray50: "#80e3e3e3"
|
||||
readonly property color locked: "#252525"
|
||||
|
||||
// Other colors
|
||||
readonly property color white: "#ffffff"
|
||||
readonly property color gray: "#808080"
|
||||
readonly property color black: "#000000"
|
||||
readonly property color locked: "#252525"
|
||||
// Semitransparent
|
||||
readonly property color white50: "#80ffffff"
|
||||
readonly property color white30: "#4dffffff"
|
||||
|
|
@ -115,6 +116,8 @@ Item {
|
|||
readonly property color dropDownDarkStart: "#7d7d7d"
|
||||
readonly property color dropDownDarkFinish: "#6b6a6b"
|
||||
readonly property color textFieldLightBackground: "#d4d4d4"
|
||||
readonly property color tabBackgroundDark: "#252525"
|
||||
readonly property color tabBackgroundLight: "#d4d4d4"
|
||||
}
|
||||
|
||||
Item {
|
||||
|
|
@ -152,6 +155,7 @@ Item {
|
|||
readonly property real sectionName: dimensions.largeScreen ? 12 : 10
|
||||
readonly property real inputLabel: dimensions.largeScreen ? 14 : 10
|
||||
readonly property real textFieldInput: dimensions.largeScreen ? 15 : 12
|
||||
readonly property real textFieldInputLabel: dimensions.largeScreen ? 13 : 9
|
||||
readonly property real tableText: dimensions.largeScreen ? 15 : 12
|
||||
readonly property real buttonLabel: dimensions.largeScreen ? 13 : 9
|
||||
readonly property real iconButton: dimensions.largeScreen ? 13 : 9
|
||||
|
|
@ -164,7 +168,7 @@ Item {
|
|||
readonly property real menuItem: dimensions.largeScreen ? 15 : 11
|
||||
readonly property real shortcutText: dimensions.largeScreen ? 13 : 9
|
||||
readonly property real carat: dimensions.largeScreen ? 38 : 30
|
||||
readonly property real disclosureButton: dimensions.largeScreen ? 20 : 15
|
||||
readonly property real disclosureButton: dimensions.largeScreen ? 30 : 22
|
||||
}
|
||||
|
||||
Item {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ Fadable {
|
|||
property bool resizable: false
|
||||
|
||||
property vector2d minSize: Qt.vector2d(100, 100)
|
||||
property vector2d maxSize: Qt.vector2d(1280, 720)
|
||||
property vector2d maxSize: Qt.vector2d(1280, 800)
|
||||
|
||||
// The content to place inside the window, determined by the client
|
||||
default property var content
|
||||
|
|
|
|||
|
|
@ -220,6 +220,24 @@ ApplicationWindow {
|
|||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Add Tab 2"
|
||||
onClicked: {
|
||||
console.log(desktop.toolWindow);
|
||||
desktop.toolWindow.addWebTab({ source: "Foo 2" });
|
||||
desktop.toolWindow.showTabForUrl("Foo 2", true);
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Add Tab 3"
|
||||
onClicked: {
|
||||
console.log(desktop.toolWindow);
|
||||
desktop.toolWindow.addWebTab({ source: "Foo 3" });
|
||||
desktop.toolWindow.showTabForUrl("Foo 3", true);
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Destroy Tab"
|
||||
onClicked: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue