Just a non-functioning little mock ;)

This commit is contained in:
George Michael Brower 2011-01-31 23:02:22 -05:00
parent a32e125876
commit 70c5c0447d
4 changed files with 27 additions and 17 deletions

View File

@ -14,6 +14,11 @@ var Controller = function() {
this.name(this.propertyName); this.name(this.propertyName);
this.domElement.appendChild(this.propertyNameElement); this.domElement.appendChild(this.propertyNameElement);
this.timeElement = document.createElement('div');
this.timeElement.setAttribute('class', 'guidat-time');
this.domElement.appendChild(this.timeElement);
GUI.makeUnselectable(this.domElement); GUI.makeUnselectable(this.domElement);
}; };

28
gui.css
View File

@ -1,10 +1,10 @@
#guidat { #guidat {
position: fixed; position: fixed;
top: 0; bottom: 0;
right: 0; width: 100%;
width: auto; left: 0;
z-index: 1001; z-index: 1001;
text-align: right;
} }
.guidat * { .guidat * {
@ -12,13 +12,21 @@
margin: 0px; margin: 0px;
} }
.guidat-time {
width: 75%;
float: right;
margin-top: -3px;
margin-right: -2px;
margin-left: 3px;
background-color: #555;
border-bottom: 1px solid #666;
height: 31px;
}
.guidat { .guidat {
color: #fff; color: #fff;
opacity: 0.97; opacity: 0.97;
text-align: left; text-align: left;
float: right;
margin-right: 20px;
margin-bottom: 20px;
background-color: #fff; background-color: #fff;
} }
@ -105,7 +113,7 @@ a.guidat-toggle:hover {
border: 0; border: 0;
color: #1ed36f; color: #1ed36f;
margin-right: 2px; margin-right: 2px;
width: 148px; width: 10.5%;
} }
.guidat-controller.boolean { .guidat-controller.boolean {
@ -117,7 +125,7 @@ width: 148px;
} }
.guidat-controller.number input[type=text] { .guidat-controller.number input[type=text] {
width: 35px; width: 3%;
margin-left: 5px; margin-left: 5px;
margin-right: 2px; margin-right: 2px;
color: #00aeff; color: #00aeff;
@ -157,7 +165,7 @@ width: 148px;
.guidat-slider-bg { .guidat-slider-bg {
background-color: #222; background-color: #222;
cursor: ew-resize; cursor: ew-resize;
width: 40%; width: 7%;
margin-top: 2px; margin-top: 2px;
float: right; float: right;
height: 21px; height: 21px;

7
gui.js
View File

@ -23,7 +23,6 @@ var GUI = function() {
var _this = this; var _this = this;
var open = false; var open = false;
var width = 280;
// Prevents checkForOverflow bug in which loaded gui appearance // Prevents checkForOverflow bug in which loaded gui appearance
// settings are not respected by presence of scrollbar. // settings are not respected by presence of scrollbar.
@ -37,7 +36,7 @@ var GUI = function() {
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat'); this.domElement.setAttribute('class', 'guidat');
this.domElement.style.width = width+'px'; this.domElement.style.width = "100%";//width+'px';
var controllerContainer = document.createElement('div'); var controllerContainer = document.createElement('div');
controllerContainer.setAttribute('class', 'guidat-controllers'); controllerContainer.setAttribute('class', 'guidat-controllers');
@ -112,7 +111,7 @@ var GUI = function() {
curControllerContainerHeight += dmy; curControllerContainerHeight += dmy;
controllerContainer.style.height = openHeight+'px'; controllerContainer.style.height = openHeight+'px';
width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH); width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
_this.domElement.style.width = width+'px'; //_this.domElement.style.width = width+'px';
checkForOverflow(); checkForOverflow();
}; };
@ -444,7 +443,7 @@ var GUI = function() {
width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]); width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
_this.domElement.style.width = width+"px"; //_this.domElement.style.width = width+"px";
openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]); openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
explicitOpenHeight = true; explicitOpenHeight = true;

View File

@ -40,12 +40,10 @@
var fizzyText = new FizzyText("gui-dat"); var fizzyText = new FizzyText("gui-dat");
var gui = new GUI(); var gui = new GUI();
var gui2 = new GUI();
// Text field // Text field
gui.add(fizzyText, "message"); gui.add(fizzyText, "message");
gui2.add(window, "onload");
// Sliders with min and max // Sliders with min and max
gui.add(fizzyText, "maxSize", 0.5, 7); gui.add(fizzyText, "maxSize", 0.5, 7);