library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-10-10 06:54:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Style changes

Browse Source
This commit is contained in:
George Michael Brower 2011-01-24 14:21:21 -07:00
parent e96f7110f7
commit 767b8d6894
4 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
controller.boolean.js
View File

@ -16,7 +16,8 @@ var BooleanController = function() {
input.checked = !input.checked; // counteracts default. input.checked = !input.checked; // counteracts default.
}, false); }, false);
this.domElement.style.cursor = 'pointer'; this.domElement.style.cursor = "pointer";
this.propertyNameElement.style.cursor = "pointer";
this.domElement.appendChild(input); this.domElement.appendChild(input);
}; };

4
controller.function.js
View File

@ -2,13 +2,11 @@ var FunctionController = function() {
this.type = "function"; this.type = "function";
var _this = this; var _this = this;
Controller.apply(this, arguments); Controller.apply(this, arguments);
var input = document.createElement('input');
input.setAttribute('type', 'submit');
this.domElement.addEventListener('click', function() { this.domElement.addEventListener('click', function() {
_this.object[_this.propertyName].call(_this.object); _this.object[_this.propertyName].call(_this.object);
}, false); }, false);
this.domElement.style.cursor = "pointer"; this.domElement.style.cursor = "pointer";
this.domElement.appendChild(input); this.propertyNameElement.style.cursor = "pointer";
}; };
FunctionController.prototype = new Controller(); FunctionController.prototype = new Controller();
FunctionController.prototype.constructor = FunctionController; FunctionController.prototype.constructor = FunctionController;

3
demo.html
View File

@ -16,6 +16,7 @@ var controllableObject =
constrainedNum: 0, constrainedNum: 0,
textProperty: "a string", textProperty: "a string",
booleanProperty: false, booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() { functionProperty: function() {
alert("I am a function!"); alert("I am a function!");
} }
@ -39,6 +40,8 @@ window.onload = function() {
// Creates a checkbox // Creates a checkbox
GUI.add(controllableObject, "booleanProperty"); GUI.add(controllableObject, "booleanProperty");
// Creates a checkbox
GUI.add(controllableObject, "anotherBooleanProperty");
// Creates a button // Creates a button
GUI.add(controllableObject, "functionProperty"); GUI.add(controllableObject, "functionProperty");

51
gui.css
View File

@ -20,6 +20,7 @@
#guidat-controllers { #guidat-controllers {
height: 300px; height: 300px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
background-color: #eee; background-color: #eee;
} }
@ -41,31 +42,50 @@
padding: 5px; padding: 5px;
height: 23px; height: 23px;
clear: left; clear: left;
border-bottom: 1px solid #444; border-bottom: 1px solid #222;
background-color: #111; background-color: #111;
} }
.guidat-controller.boolean:hover,
.guidat-controller.function:hover{
background-color: #000;
}
.guidat-controller input { .guidat-controller input {
float: right; float: right;
clear: both; outline: none;
border: 0; clear: both;
padding: 2px; border: 0;
padding: 2px;
} }
.guidat-controller.number {
border-left: 5px solid #00aeff ;
.guidat-controller.number input[type=number] {
width: 55px;
} }
.guidat-controller.string { .guidat-controller.string {
border-left-color: #0af; border-left: 5px solid #1ed36f;
}
.guidat-controller.string input {
border: 0;
text-align: right;
color: #1ed36f;
background-color: rgba(0,0,0,0);
}
.guidat-controller.boolean {
border-left: 5px solid #54396e;
}
.guidat-controller.function {
border-left: 5px solid #e61d5f;
}
.guidat-controller.number input[type=number] {
width: 45px;
} }
.guidat-controller:nth-child(even) { .guidat-controller.boolean input {
background-color: #1a1a1a; margin-top: 6px;
} }
.guidat-controller:last-child { .guidat-controller:last-child {
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
@ -75,5 +95,6 @@ padding: 2px;
.guidat-propertyname { .guidat-propertyname {
padding: 5px; padding: 5px;
cursor: default;
display: inline-block; display: inline-block;
} }