Style the entity editor's "grid" tab

This commit is contained in:
David Rowe 2016-03-25 14:15:03 +13:00
parent 46df386f0b
commit 42af3ebc4a
3 changed files with 81 additions and 68 deletions

View file

@ -44,8 +44,12 @@
url(../../interface/resources/fonts/hifi-glyphs.ttf); url(../../interface/resources/fonts/hifi-glyphs.ttf);
} }
body { * {
margin: 0; margin: 0;
padding: 0;
}
body {
padding: 24px 12px 24px 12px; padding: 24px 12px 24px 12px;
color: #afafaf; color: #afafaf;
@ -163,15 +167,14 @@ td.url {
} }
input, textarea { input[type="text"], input[type="number"], textarea {
margin: 0; margin: 0;
padding: 0 12px; padding: 0 12px;
color: #afafaf; color: #afafaf;
background-color: #252525; background-color: #252525;
border: none; border: none;
font-family: Raleway-SemiBold; font-family: FiraSans-SemiBold;
font-size: 15px; font-size: 15px;
font-style: normal;
} }
textarea { textarea {
@ -212,7 +215,7 @@ input:disabled, textarea:disabled {
input[type="text"], input[type="number"] { input[type="text"], input[type="number"] {
height: 28px; height: 28px;
min-width: 120px; width: 120px;
} }
input[type="number"] { input[type="number"] {
@ -222,7 +225,6 @@ input[type="number"] {
input:focus { input:focus {
color: #fff; color: #fff;
background-color: #000; background-color: #000;
border: 1px dotted red;
} }
input::selection { input::selection {
@ -326,46 +328,60 @@ input[type=button].red:active {
} }
.section-header, .sub-section-header { .section-header, .sub-section-header {
background: #AAA; padding: 0 0 0 0;
border-bottom: 0.75pt solid #CCC; font-size: 12px;
background-color: #333333; color: #afafaf;
color: #999;
padding: 3pt;
padding-top: 6pt;
} }
.section-header label, .sub-section-header label { .property {
font-weight: bold; display: table;
font-size: 11pt; width: 100%;
margin-top: 22px;
min-height: 29px;
} }
.sub-section-header { .property label {
padding-top: 4px; display: table-cell;
vertical-align: middle;
font-family: Raleway-SemiBold;
font-size: 14px;
vertical-align: middle;
} }
.sub-section-header label { .checkbox + .checkbox {
font-size: 9pt; margin-top: 0;
}
.checkbox span {
display: table-cell;
width: 21px;
vertical-align: middle;
} }
.multi-property-section { .property .number {
float: left;
}
.number + .number {
margin-left: 12px;
} }
.property-section { .number label {
display: block; float: left;
margin: 10 10; margin-bottom: 4px;
height: 22.5pt; }
.number span {
clear: both;
float: left;
} }
.property-section label { .color span, .color label {
font-weight: bold; display: inline-block;
float: left;
}
.color label {
padding: 4px 12px 0 0;
margin-left: 12px;
} }
.property-section span {
float: right;
}
.grid-section {
}
.color-picker { .color-picker {
width: 50px; width: 50px;
@ -436,9 +452,6 @@ input[type=button].red:active {
margin-right: -148px; margin-right: -148px;
} }
#radius {
width: 4em;
}
#entity-table-scroll { #entity-table-scroll {
/* Height is set by JavaScript. */ /* Height is set by JavaScript. */

View file

@ -123,57 +123,58 @@
</script> </script>
</head> </head>
<body onload='loaded();'> <body onload='loaded();'>
<div class="grid-section"> <div id="grid-section">
<div class="property-section"> <div class="section-header">
<label>Visible</label> <label>EDITING GRID</label>
</div>
<div class="property checkbox">
<span> <span>
<input type='checkbox' id="horiz-grid-visible"> <input type='checkbox' id="horiz-grid-visible">
</span> </span>
<label>Visible</label>
</div> </div>
<div class="property-section"> <div class="property checkbox">
<label>Snap to grid</label>
<span> <span>
<input type='checkbox' id="snap-to-grid"> <input type='checkbox' id="snap-to-grid">
</span> </span>
<label>Snap entities to grid</label>
</div> </div>
<div id="horizontal-position" class="property-section"> <div class="property">
<label>Position (Y Axis)</label> <div class="number">
<label>Major grid size</label>
<span>
<input type="number" id="major-spacing" min="1" step="1" />&nbsp;m
</span>
</div>
<div class="number">
<label>Minor grid size</label>
<span>
<input type="number" id="minor-spacing" min="0.2" step="0.2" />&nbsp;m
</span>
</div>
</div>
<div class="property number">
<label>Position (Y axis)</label>
<span> <span>
<input type='number' id="horiz-y" class="number" step="0.1"></input> <input type="number" id="horiz-y" step="0.1" />&nbsp;m
</span> </span>
</div> </div>
<div class="property-section"> <div class="property color">
<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>
<span id="grid-colors"></span> <span id="grid-colors"></span>
<label>Grid line color</label>
</div> </div>
<div class="property-section"> <div class="property">
<span> <span>
<input type="button" id="move-to-selection" value="Move to Selection"> <input type="button" id="move-to-selection" value="ALIGN TO SELECTION">
</span> <input type="button" id="move-to-avatar" value="ALIGN TO AVATAR">
</div> </span>
<div class="property-section">
<span>
<input type="button" id="move-to-avatar" value="Move to Avatar">
</span>
</div> </div>
</div> </div>
</body> </body>

View file

@ -111,7 +111,6 @@ Preference {
case Preference.Checkbox: case Preference.Checkbox:
checkBoxCount++; checkBoxCount++;
console.log("####### checkBoxCount = " + checkBoxCount);
builder = checkboxBuilder; builder = checkboxBuilder;
break; break;