diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 5ba5568b59..6aacaa5333 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -448,8 +448,68 @@ input[type=checkbox]:checked + label:hover { border: 1.5pt solid black; } +.shape-section, .light-section, .model-section, .web-section, .hyperlink-section, .text-section, .zone-section { + display: table; +} -.section-header, .sub-section-header, hr { + + +#properties-list fieldset { + position: relative; + /* 0.1px on the top is to prevent margin collapsing between this and it's first child */ + margin: 21px -21px 0px -21px; + padding: 0.1px 21px 0px 21px; + border: none; + border-top: 1px rgb(90,90,90) solid; + box-shadow: 0px -1px 0px rgb(37,37,37); +} + +#properties-list fieldset.fstuple, #properties-list fieldset.fsrow { + margin-top: 21px; + border: none; + box-shadow: none; +} + +#properties-list > fieldset[data-collapsed="true"] + fieldset { + margin-top: 0px; +} + +#properties-list > fieldset[data-collapsed="true"] > *:not(legend) { + display: none !important; +} + +#properties-list legend + fieldset { + margin-top: 0px; + border: none; + box-shadow: none; +} + +#properties-list > fieldset#properties-header { + margin-top: 0px; + padding-bottom: 0px; +} + + + +#properties-list > fieldset > legend { + position: relative; + display: table; + width: 100%; + margin: 21px -21px 0 -21px; + padding: 14px 21px 0 21px; + font-family: Raleway-Regular; + font-size: 12px; + color: #afafaf; + height: 28px; + text-transform: uppercase; + outline: none; + background-color: #404040; + border: none; + border-top: 1px rgb(90,90,90) solid; + box-shadow: 0 -1px 0 rgb(37,37,37), 0 4px 4px 0 rgba(0,0,0,0.75); +} + +div.section-header, .sub-section-header, hr { display: table; width: 100%; margin: 21px -21px 0 -21px; @@ -462,16 +522,18 @@ input[type=checkbox]:checked + label:hover { outline: none; } -.section-header { - position: relative; - background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left; + + +.column .sub-section-header { + background-image: none; + padding-top: 0; } .sub-section-header, .no-collapse, hr { background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left; } -.section-header:first-child { +div.section-header:first-child { margin-top: -2px; padding-top: 0; background: none; @@ -482,7 +544,7 @@ input[type=checkbox]:checked + label:hover { margin-bottom: -10px; } -.section-header span { +#properties-list > fieldset > legend span, .section-header span { font-family: HiFi-Glyphs; font-size: 30px; float: right; @@ -536,6 +598,18 @@ hr { font-size: 13px; } +.property legend, .number legend { + display: table-cell; + vertical-align: middle; + font-family: Raleway-SemiBold; + font-size: 14px; +} +.property legend .unit, .number legend .unit { + margin-left: 8px; + font-family: Raleway-Light; + font-size: 13px; +} + .value { display: block; min-height: 18px; @@ -545,6 +619,11 @@ hr { vertical-align: top; width: 48px; } +.value legend { + display: inline-block; + vertical-align: top; + width: 48px; +} .value span { font-family: FiraSans-SemiBold; font-size: 15px; @@ -572,6 +651,13 @@ hr { margin-top: -2px; } +.text legend, .url legend, .number legend, .textarea legend, .rgb legend, .xyz legend, .pyr legend, .dropdown legend, .gen legend { + float: left; + margin-left: 1px; + margin-bottom: 3px; + margin-top: -2px; +} + .number > input { clear: both; float: left; @@ -714,6 +800,14 @@ div.refresh input[type="button"] { display: none !important; } +#property-color-control1 { + display: table-cell; + float: none; +} + +#property-color-control1 + label { + border-left: 20px transparent solid; +} .rgb label { float: left; @@ -724,6 +818,15 @@ div.refresh input[type="button"] { clear: both; } +.rgb legend { + float: left; + margin-top: 10px; + margin-left: 21px; +} +.rgb legend + * { + clear: both; +} + .tuple div { display: inline-block; position: relative; @@ -813,6 +916,42 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus { display: table-cell; width: 50%; } + +#properties-list fieldset .two-column { + padding-top:21px; + display: flex; +} + +#properties-list .two-column fieldset { + /*display: table-cell;*/ + width: 50%; + margin: 0; + padding: 0; + border-top: none; + box-shadow: none; +} + +#properties-list .two-column fieldset legend { + display: table; + width: 100%; + margin: 21px -21px 0px -21px; + padding: 0px 0px 0px 21px; + font-family: Raleway-Regular; + font-size: 12px; + color: #afafaf; + height: 28px; + text-transform: uppercase; + outline: none; +} + +fieldset .checkbox-sub-props { + margin-top: 0; + } + +fieldset .checkbox-sub-props .property:first-child { + margin-top: 0; +} + .column { vertical-align: top; } @@ -1154,9 +1293,11 @@ th#entity-hasScript { } -#properties-header { +#properties-list #properties-header { display: table-row; height: 28px; + border-top: none; + box-shadow: none; } #properties-header .property { @@ -1261,3 +1402,260 @@ input#reset-to-natural-dimensions { font-size:16px; display:none; } + +#properties-list #collision-info > fieldset:first-of-type { + border-top: none !important; + box-shadow: none; + margin-top: 0; +} + +#properties-list { + display: flex; + flex-direction: column; +} + +/* ----- Order of Menu items for Primitive ----- */ +#properties-list.ShapeMenu #general, +#properties-list.BoxMenu #general, +#properties-list.SphereMenu #general { + order: 1; +} + +#properties-list.ShapeMenu #collision-info, +#properties-list.BoxMenu #collision-info, +#properties-list.SphereMenu #collision-info { + order: 2; +} + +#properties-list.ShapeMenu #physical, +#properties-list.BoxMenu #physical, +#properties-list.SphereMenu #physical { + order: 3; +} + +#properties-list.ShapeMenu #spatial, +#properties-list.BoxMenu #spatial, +#properties-list.SphereMenu #spatial { + order: 4; +} + +#properties-list.ShapeMenu #behavior, +#properties-list.BoxMenu #behavior, +#properties-list.SphereMenu #behavior { + order: 5; +} + +#properties-list.ShapeMenu #hyperlink, +#properties-list.BoxMenu #hyperlink, +#properties-list.SphereMenu #hyperlink { + order: 6; +} + +#properties-list.ShapeMenu #light, +#properties-list.BoxMenu #light, +#properties-list.SphereMenu #light, +#properties-list.ShapeMenu #model, +#properties-list.BoxMenu #model, +#properties-list.SphereMenu #model, +#properties-list.ShapeMenu #zone, +#properties-list.BoxMenu #zone, +#properties-list.SphereMenu #zone, +#properties-list.ShapeMenu #text, +#properties-list.BoxMenu #text, +#properties-list.SphereMenu #text, +#properties-list.ShapeMenu #web, +#properties-list.BoxMenu #web, +#properties-list.SphereMenu #web { + display: none; +} + + +/* ----- Order of Menu items for Light ----- */ +#properties-list.LightMenu #general { + order: 1; +} +#properties-list.LightMenu #light { + order: 2; +} +#properties-list.LightMenu #physical { + order: 3; +} +#properties-list.LightMenu #spatial { + order: 4; +} +#properties-list.LightMenu #behavior { + order: 5; +} +#properties-list.LightMenu #collision-info { + order: 6; +} +#properties-list.LightMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.LightMenu #model, +#properties-list.LightMenu #zone, +#properties-list.LightMenu #text, +#properties-list.LightMenu #web { + display: none; +} +/* items to hide */ +#properties-list.LightMenu .shape-group.shape-section.property.dropdown, +#properties-list.LightMenu color-section.color-control1 { + display: none +} + + +/* ----- Order of Menu items for Model ----- */ +#properties-list.ModelMenu #general { + order: 1; +} +#properties-list.ModelMenu #model { + order: 2; +} +#properties-list.ModelMenu #collision-info { + order: 3; +} +#properties-list.ModelMenu #physical { + order: 4; +} +#properties-list.ModelMenu #spatial { + order: 5; +} +#properties-list.ModelMenu #behavior { + order: 6; +} +#properties-list.ModelMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.ModelMenu #light, +#properties-list.ModelMenu #zone, +#properties-list.ModelMenu #text, +#properties-list.ModelMenu #web { + display: none; +} +/* items to hide */ +#properties-list.ModelMenu .shape-group.shape-section.property.dropdown, +#properties-list.ModelMenu .color-section.color-control1 { + display: none +} + + +/* ----- Order of Menu items for Zone ----- */ +#properties-list.ZoneMenu #general { + order: 1; +} +#properties-list.ZoneMenu #zone { + order: 2; +} +#properties-list.ZoneMenu #physical { + order: 3; +} +#properties-list.ZoneMenu #spatial { + order: 4; +} +#properties-list.ZoneMenu #behavior { + order: 5; +} +#properties-list.ZoneMenu #collision-info { + order: 6; +} +#properties-list.ZoneMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.ZoneMenu #light, +#properties-list.ZoneMenu #model, +#properties-list.ZoneMenu #text, +#properties-list.ZoneMenu #web { + display: none; +} +/* items to hide */ +#properties-list.ZoneMenu .shape-group.shape-section.property.dropdown, +#properties-list.ZoneMenu .color-section.color-control1 { + display: none +} + + +/* ----- Order of Menu items for Web ----- */ +#properties-list.WebMenu #general { + order: 1; +} +#properties-list.WebMenu #web { + order: 2; +} +#properties-list.WebMenu #collision-info { + order: 3; +} +#properties-list.WebMenu #physical { + order: 4; +} +#properties-list.WebMenu #spatial { + order: 5; +} +#properties-list.WebMenu #behavior { + order: 6; +} +#properties-list.WebMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.WebMenu #light, +#properties-list.WebMenu #model, +#properties-list.WebMenu #zone, +#properties-list.WebMenu #text { + display: none; +} +/* items to hide */ +#properties-list.WebMenu .shape-group.shape-section.property.dropdown, +#properties-list.WebMenu .color-section.color-control1 { + display: none; +} + + + +/* ----- Order of Menu items for Text ----- */ +#properties-list.TextMenu #general { + order: 1; +} +#properties-list.TextMenu #text { + order: 2; +} +#properties-list.TextMenu #collision-info { + order: 3; +} +#properties-list.TextMenu #physical { + order: 4; +} +#properties-list.TextMenu #spatial { + order: 5; +} +#properties-list.TextMenu #behavior { + order: 6; +} +#properties-list.TextMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.TextMenu #light, +#properties-list.TextMenu #model, +#properties-list.TextMenu #zone, +#properties-list.TextMenu #web { + display: none; +} +/* items to hide */ +#properties-list.TextMenu .shape-group.shape-section.property.dropdown, +#properties-list.TextMenu .color-section.color-control1 { + display: none +} + + +/* Currently always hidden */ +#properties-list #polyvox { + display: none; +} + +.skybox-section { + display: none; +} \ No newline at end of file diff --git a/scripts/system/html/entityProperties.html b/scripts/system/html/entityProperties.html index bf65bdad32..24a8b2fee0 100644 --- a/scripts/system/html/entityProperties.html +++ b/scripts/system/html/entityProperties.html @@ -8,130 +8,267 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html --> - - Properties - - - - - - - - - - - - - - -
-
-
- -
-
- - -
-
- - -
+ + + Properties + + + + + + + + + + + + + + + +
+ +
+
+
-
+
+ + +
+
+ + +
+
+ + +
+ + + + + + + + + + + + +
-
- - +
+
+
- -
- -
-
- - - - Saved! +
+
+
+
+ +
-
-
- -
-
- - -
-
- M -
-
- - -
-
- M -
-
- +
+ + +
+ +
+
+
+ + Collides With + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + Grabbing + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+ + + +
+ + PhysicalM + +
+
+ Linear velocity m/s +
+
+
+
+
+
+
+ + +
+
+
+
+ Angular velocity deg/s +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ Gravity m/s2 +
+
+
+
+
+
+
+ Acceleration m/s2 +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+ + SpatialM + +
+ Position m
-
-
- + +
+ Rotation deg
-
-
- + +
+ Dimensions m
-
-
- + +
+ Registration (pivot offset as ratio of dimension)
-
-
- + +
+ Scale %
-
+
@@ -153,278 +290,311 @@
-
-
- + + + +
+ + BehaviorM + +
+ +
+
+ + + + Saved! +
+
+
+ +
+
+ + +
+ +
+
+ + +
+
+ + +
+
+
+
+ + + + +
+
+
+
+ + + +
+
+ + +
+
+ +
+
+
+ + +
+
+ + + + + + +
+ + LightM + +
+
+ Light color
-
-
-
+
+
+
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- M -
-
- + +
-
-
-
+
+
+
+
+
+ +
-
- - -
-
-
- +
-
-
-
+
+
+
-
-
- - -
-
-
-
-
-
-
+ + + + +
+ + ModelM + +
+
+ +
-
-
-
- -
-
-
-
+
+ +
-
-
- -
-
-
-
+
+ +
-
-
-
-
- -
-
-
-
+ +
+
+ +
-
-
- M -
-
- - -
-
- - -
-
-
-
- Collides With + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
-
- - +
+
+ +
-
- - +
+ +
-
- - -
-
- - -
-
- - +
+ +
-
-
- Grabbing -
-
-
- - -
-
- - -
-
- - -
-
- - -
+ +
+
+ + +
+
+ + +
+
+ + + +
+ + ZoneM + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ +
+
+
+ +
+
+
+
-
+
+ + Stage + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ + Background + +
+ + +
+
+
+ + Skybox + +
+
+ Skybox color +
+
+
+
+
+
+
+ + +
+
+
+ + +
+ + TextM +
@@ -446,116 +616,22 @@
-
+
- + Background color
-
-
- M -
-
- - -
-
- - -
-
- - -
-
-
- - -
-
- -
-
-
- -
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
- - -
-
- - -
-
- -
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
- -
-
- - -
-
- -
-
-
- -
-
-
-
-
-
-
- - -
-
- M -
+ + + + +
+ + WebM +
@@ -564,36 +640,45 @@
-
- M +
+ + + + + +
+ + Voxel volume size m + +
+
+
+
-
-
- -
-
-
-
-
+
+ +
-
-
-
-
-
-
+
+ +
-
- - +
+ +
-
-
-
-
-
-
+
+ +
-
- - +
+ +
+ + + \ No newline at end of file diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index ce2f766946..04eadc98a1 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/scripts/system/html/js/entityProperties.js @@ -488,6 +488,7 @@ function loaded() { openEventBridge(function() { var allSections = []; + var elPropertiesList = document.getElementById("properties-list"); var elID = document.getElementById("property-id"); var elType = document.getElementById("property-type"); var elTypeIcon = document.getElementById("type-icon"); @@ -574,7 +575,8 @@ function loaded() { var elJSONEditor = document.getElementById("userdata-editor"); var elNewJSONEditor = document.getElementById('userdata-new-editor'); var elColorSections = document.querySelectorAll(".color-section"); - var elColor = document.getElementById("property-color"); + var elColorControl1 = document.getElementById("property-color-control1"); + var elColorControl2 = document.getElementById("property-color-control2"); var elColorRed = document.getElementById("property-color-red"); var elColorGreen = document.getElementById("property-color-green"); var elColorBlue = document.getElementById("property-color-blue"); @@ -688,7 +690,10 @@ function loaded() { data = JSON.parse(data); if (data.type == "server_script_status") { elServerScriptError.value = data.errorInfo; - elServerScriptError.style.display = data.errorInfo ? "block" : "none"; + // If we just set elServerScriptError's diplay to block or none, we still end up with + //it's parent contributing 21px bottom padding even when elServerScriptError is display:none. + // So set it's parent to block or none + elServerScriptError.parentElement.style.display = data.errorInfo ? "block" : "none"; if (data.statusRetrieved === false) { elServerScriptStatus.innerText = "Failed to retrieve status"; } else if (data.isRunning) { @@ -714,6 +719,7 @@ function loaded() { elTypeIcon.style.display = "none"; elType.innerHTML = "No selection"; elID.value = ""; + elPropertiesList.className = ''; disableProperties(); } else if (data.selections && data.selections.length > 1) { deleteJSONEditor(); @@ -742,6 +748,7 @@ function loaded() { elType.innerHTML = type + " (" + data.selections.length + ")"; elTypeIcon.innerHTML = ICON_FOR_TYPE[type]; elTypeIcon.style.display = "inline-block"; + elPropertiesList.className = ''; elID.value = ""; @@ -758,6 +765,7 @@ function loaded() { lastEntityID = '"' + properties.id + '"'; elID.value = properties.id; + elPropertiesList.className = properties.type + 'Menu'; elType.innerHTML = properties.type; elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type]; elTypeIcon.style.display = "inline-block"; @@ -892,48 +900,20 @@ function loaded() { elHyperlinkHref.value = properties.href; elDescription.value = properties.description; - for (var i = 0; i < allSections.length; i++) { - for (var j = 0; j < allSections[i].length; j++) { - allSections[i][j].style.display = 'none'; - } - } - - for (var i = 0; i < elHyperlinkSections.length; i++) { - elHyperlinkSections[i].style.display = 'table'; - } if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere") { - for (var i = 0; i < elShapeSections.length; i++) { - elShapeSections[i].style.display = 'table'; - } elShape.value = properties.shape; setDropdownText(elShape); - - } else { - for (var i = 0; i < elShapeSections.length; i++) { - elShapeSections[i].style.display = 'none'; - } } if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere" || properties.type == "ParticleEffect") { - for (var i = 0; i < elColorSections.length; i++) { - elColorSections[i].style.display = 'table'; - } elColorRed.value = properties.color.red; elColorGreen.value = properties.color.green; elColorBlue.value = properties.color.blue; - elColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; - } else { - for (var i = 0; i < elColorSections.length; i++) { - elColorSections[i].style.display = 'none'; - } + elColorControl1.style.backgroundColor = elColorControl2.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; } if (properties.type == "Model") { - for (var i = 0; i < elModelSections.length; i++) { - elModelSections[i].style.display = 'table'; - } - elModelURL.value = properties.modelURL; elShapeType.value = properties.shapeType; setDropdownText(elShapeType); @@ -951,20 +931,9 @@ function loaded() { elModelOriginalTextures.value = properties.originalTextures; setTextareaScrolling(elModelOriginalTextures); } else if (properties.type == "Web") { - for (var i = 0; i < elWebSections.length; i++) { - elWebSections[i].style.display = 'table'; - } - for (var i = 0; i < elHyperlinkSections.length; i++) { - elHyperlinkSections[i].style.display = 'none'; - } - elWebSourceURL.value = properties.sourceUrl; elWebDPI.value = properties.dpi; } else if (properties.type == "Text") { - for (var i = 0; i < elTextSections.length; i++) { - elTextSections[i].style.display = 'table'; - } - elTextText.value = properties.text; elTextLineHeight.value = properties.lineHeight.toFixed(4); elTextFaceCamera.checked = properties.faceCamera; @@ -976,10 +945,6 @@ function loaded() { elTextBackgroundColorGreen.value = properties.backgroundColor.green; elTextBackgroundColorBlue.value = properties.backgroundColor.blue; } else if (properties.type == "Light") { - for (var i = 0; i < elLightSections.length; i++) { - elLightSections[i].style.display = 'table'; - } - elLightSpotLight.checked = properties.isSpotlight; elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; @@ -992,10 +957,6 @@ function loaded() { elLightExponent.value = properties.exponent.toFixed(2); elLightCutoff.value = properties.cutoff.toFixed(2); } else if (properties.type == "Zone") { - for (var i = 0; i < elZoneSections.length; i++) { - elZoneSections[i].style.display = 'table'; - } - elZoneStageSunModelEnabled.checked = properties.stage.sunModelEnabled; elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLight.color.red + "," + properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")"; elZoneKeyLightColorRed.value = properties.keyLight.color.red; @@ -1032,10 +993,6 @@ function loaded() { showElements(document.getElementsByClassName('skybox-section'), elZoneBackgroundMode.value == 'skybox'); } else if (properties.type == "PolyVox") { - for (var i = 0; i < elPolyVoxSections.length; i++) { - elPolyVoxSections[i].style.display = 'table'; - } - elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2); elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2); elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2); @@ -1235,20 +1192,41 @@ function loaded() { elColorRed.addEventListener('change', colorChangeFunction); elColorGreen.addEventListener('change', colorChangeFunction); elColorBlue.addEventListener('change', colorChangeFunction); - colorPickers.push($('#property-color').colpick({ + colorPickers.push($('#property-color-control1').colpick({ colorScheme: 'dark', layout: 'hex', color: '000000', onShow: function(colpick) { - $('#property-color').attr('active', 'true'); + $('#property-color-control1').attr('active', 'true'); }, onHide: function(colpick) { - $('#property-color').attr('active', 'false'); + $('#property-color-control1').attr('active', 'false'); }, onSubmit: function(hsb, hex, rgb, el) { $(el).css('background-color', '#' + hex); $(el).colpickHide(); emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); + // Keep the companion control in sync + elColorControl2.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; + } + })); + colorPickers.push($('#property-color-control2').colpick({ + colorScheme: 'dark', + layout: 'hex', + color: '000000', + onShow: function(colpick) { + $('#property-color-control2').attr('active', 'true'); + }, + onHide: function(colpick) { + $('#property-color-control2').attr('active', 'false'); + }, + onSubmit: function(hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); + // Keep the companion control in sync + elColorControl1.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; + } })); @@ -1512,11 +1490,9 @@ function loaded() { var elCollapsible = document.getElementsByClassName("section-header"); var toggleCollapsedEvent = function(event) { - var element = event.target; - if (element.nodeName !== "DIV") { - element = element.parentNode; - } - var isCollapsed = element.getAttribute("collapsed") !== "true"; + var element = event.target.parentNode.parentNode; + var isCollapsed = element.dataset.collapsed !== "true"; + element.dataset.collapsed = isCollapsed ? "true" : false element.setAttribute("collapsed", isCollapsed ? "true" : "false"); element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M"; };