mirror of
https://github.com/overte-org/overte.git
synced 2025-08-12 10:14:17 +02:00
Disable drop-downs and color pickers when other controls are disabled
This commit is contained in:
David Rowe
parent
67b9c76643
commit
33d9909684
2 changed files with 61 additions and 27 deletions
|
|
@ -574,10 +574,8 @@ hr {
|
|||
width: 172px;
|
||||
height: 28px;
|
||||
padding: 0 28px 0 12px;
|
||||
|
||||
color: #afafaf;
|
||||
background: linear-gradient(#7d7d7d 20%, #686a68 100%);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.dropdown dl[dropped="true"] {
|
||||
|
|
@ -636,6 +634,17 @@ hr {
|
|||
background-color: #00b4ef;
|
||||
}
|
||||
|
||||
.dropdown dl[disabled="disabled"], .dropdown dl[disabled="disabled"][dropped="true"] {
|
||||
color: #252525;
|
||||
background: linear-gradient(#575757 20%, #252525 100%);
|
||||
}
|
||||
.dropdown dl[disabled="disabled"] dd {
|
||||
display: none;
|
||||
}
|
||||
.dropdown dl[disabled="disabled"] dt:hover {
|
||||
color: #252525;
|
||||
}
|
||||
|
||||
|
||||
div.refresh {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -666,6 +675,16 @@ div.refresh input[type="button"] {
|
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABDSURBVChTjcoLCkAhCETRNq0tf97Y5xGZ1gVJ45TH6njThIO+xk2UwhWFcEdH6JCqOuiQiMDi/hcii3crRRb/7ggAPvIMVihQwvSXAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.color-picker[disabled="disabled"] {
|
||||
border-color: #afafaf;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABTSURBVChTjcxBDoAwCETRwTs33sFjwB6uaCE1Ggvav5qQF7CSqu40dllHjYiOT3gh3yV8Ii+Fb+RNMEP9hm3sKENmBhG5P1aImWMH/EMerSAAOAFgTC/R8ZXSXAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.colpick[disabled="disabled"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.rgb label {
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@
|
|||
Multiple: ""
|
||||
}
|
||||
|
||||
var colorPickers = [];
|
||||
|
||||
debugPrint = function(message) {
|
||||
EventBridge.emitWebEvent(
|
||||
JSON.stringify({
|
||||
|
|
@ -56,6 +58,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
function enableProperties() {
|
||||
enableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
|
||||
enableChildren(document, ".colpick");
|
||||
}
|
||||
|
||||
function disableProperties() {
|
||||
disableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
|
||||
disableChildren(document, ".colpick");
|
||||
for (var i = 0; i < colorPickers.length; i++) {
|
||||
colorPickers[i].colpickHide();
|
||||
}
|
||||
}
|
||||
|
||||
function showElements(els, show) {
|
||||
for (var i = 0; i < els.length; i++) {
|
||||
els[i].style.display = (show) ? 'table' : 'none';
|
||||
|
|
@ -490,7 +505,7 @@
|
|||
elTypeIcon.style.display = "none";
|
||||
elType.innerHTML = "<i>No selection</i>";
|
||||
elID.innerHTML = "";
|
||||
disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
|
||||
disableProperties();
|
||||
} else if (data.selections.length > 1) {
|
||||
var selections = data.selections;
|
||||
|
||||
|
|
@ -520,7 +535,7 @@
|
|||
|
||||
elID.innerHTML = ids.join("<br>");
|
||||
|
||||
disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
|
||||
disableProperties();
|
||||
} else {
|
||||
var activeElement = document.activeElement;
|
||||
|
||||
|
|
@ -543,10 +558,10 @@
|
|||
elLocked.checked = properties.locked;
|
||||
|
||||
if (properties.locked) {
|
||||
disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
|
||||
disableProperties();
|
||||
elLocked.removeAttribute('disabled');
|
||||
} else {
|
||||
enableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
|
||||
enableProperties();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -889,10 +904,10 @@
|
|||
elColorRed.addEventListener('change', colorChangeFunction);
|
||||
elColorGreen.addEventListener('change', colorChangeFunction);
|
||||
elColorBlue.addEventListener('change', colorChangeFunction);
|
||||
$('#property-color').colpick({
|
||||
colorScheme:'dark',
|
||||
layout:'hex',
|
||||
color:'000000',
|
||||
colorPickers.push($('#property-color').colpick({
|
||||
colorScheme: 'dark',
|
||||
layout: 'hex',
|
||||
color: '000000',
|
||||
onShow: function (colpick) {
|
||||
$('#property-color').attr('active', 'true');
|
||||
},
|
||||
|
|
@ -900,12 +915,12 @@
|
|||
$('#property-color').attr('active', 'false');
|
||||
},
|
||||
onSubmit: function (hsb, hex, rgb, el) {
|
||||
$(el).css('background-color', '#'+hex);
|
||||
$(el).css('background-color', '#' + hex);
|
||||
$(el).colpickHide();
|
||||
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
|
||||
}
|
||||
})
|
||||
|
||||
}));
|
||||
|
||||
elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight'));
|
||||
|
||||
var lightColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
||||
|
|
@ -913,10 +928,10 @@
|
|||
elLightColorRed.addEventListener('change', lightColorChangeFunction);
|
||||
elLightColorGreen.addEventListener('change', lightColorChangeFunction);
|
||||
elLightColorBlue.addEventListener('change', lightColorChangeFunction);
|
||||
$('#property-light-color').colpick({
|
||||
colorScheme:'dark',
|
||||
layout:'hex',
|
||||
color:'000000',
|
||||
colorPickers.push($('#property-light-color').colpick({
|
||||
colorScheme: 'dark',
|
||||
layout: 'hex',
|
||||
color: '000000',
|
||||
onShow: function (colpick) {
|
||||
$('#property-light-color').attr('active', 'true');
|
||||
},
|
||||
|
|
@ -924,11 +939,11 @@
|
|||
$('#property-light-color').attr('active', 'false');
|
||||
},
|
||||
onSubmit: function (hsb, hex, rgb, el) {
|
||||
$(el).css('background-color', '#'+hex);
|
||||
$(el).css('background-color', '#' + hex);
|
||||
$(el).colpickHide();
|
||||
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
|
||||
}
|
||||
})
|
||||
}));
|
||||
|
||||
elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1));
|
||||
elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1));
|
||||
|
|
@ -960,7 +975,7 @@
|
|||
elTextTextColorRed.addEventListener('change', textTextColorChangeFunction);
|
||||
elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction);
|
||||
elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction);
|
||||
$('#property-text-text-color').colpick({
|
||||
colorPickers.push($('#property-text-text-color').colpick({
|
||||
colorScheme:'dark',
|
||||
layout:'hex',
|
||||
color: '000000',
|
||||
|
|
@ -976,14 +991,14 @@
|
|||
$(el).attr('active', 'false');
|
||||
emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b);
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
||||
'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue);
|
||||
elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction);
|
||||
elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
|
||||
elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction);
|
||||
$('#property-text-background-color').colpick({
|
||||
colorPickers.push($('#property-text-background-color').colpick({
|
||||
colorScheme:'dark',
|
||||
layout:'hex',
|
||||
color:'000000',
|
||||
|
|
@ -998,10 +1013,10 @@
|
|||
$(el).colpickHide();
|
||||
emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b);
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
elZoneStageSunModelEnabled.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','sunModelEnabled'));
|
||||
$('#property-zone-key-light-color').colpick({
|
||||
colorPickers.push($('#property-zone-key-light-color').colpick({
|
||||
colorScheme:'dark',
|
||||
layout:'hex',
|
||||
color:'000000',
|
||||
|
|
@ -1016,7 +1031,7 @@
|
|||
$(el).colpickHide();
|
||||
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight');
|
||||
}
|
||||
});
|
||||
}));
|
||||
var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight','color', elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue);
|
||||
elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction);
|
||||
elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction);
|
||||
|
|
@ -1042,7 +1057,7 @@
|
|||
elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction);
|
||||
elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction);
|
||||
elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction);
|
||||
$('#property-zone-skybox-color').colpick({
|
||||
colorPickers.push($('#property-zone-skybox-color').colpick({
|
||||
colorScheme:'dark',
|
||||
layout:'hex',
|
||||
color:'000000',
|
||||
|
|
@ -1057,7 +1072,7 @@
|
|||
$(el).colpickHide();
|
||||
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox');
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox','url'));
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue