no message

build/gui.html

@@ -482,6 +482,7 @@ if(f)g=void 0;else if(f=g[this.name],!f)return void console.error("Cannot find f
   -webkit-font-smoothing: antialiased;
 }
 #row {
+  border: 1px solid #00f;
   height: 30px;
   -webkit-transition: background-color 0.2s linear;
   -moz-transition: background-color 0.2s linear;
@@ -497,9 +498,7 @@ if(f)g=void 0;else if(f=g[this.name],!f)return void console.error("Cannot find f
   height: 100%;
 }
 #name {
-  -o-text-overflow: ellipsis;
+  border: 1px solid #f0f;
-  text-overflow: ellipsis;
-  word-wrap: break-word;
   overflow: hidden;
   padding: 0 8px;
   -webkit-box-sizing: border-box;
@@ -507,11 +506,18 @@ if(f)g=void 0;else if(f=g[this.name],!f)return void console.error("Cannot find f
   box-sizing: border-box;
   display: inline-block;
   width: 40%;
+  height: 100%;
   cursor: default;
 }
 .comment-true #name {
   cursor: pointer;
 }
+#nameInner {
+  border: 1px solid #f00;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+}
 #comment {
   line-height: 16px;
   -webkit-user-select: text;
@@ -571,8 +577,10 @@ if(f)g=void 0;else if(f=g[this.name],!f)return void console.error("Cannot find f
 
     <div id="row" class="comment-{{ comment != null }}" layout="" horizontal="" center="">
         
-        <div id="name" on-mouseover="{{ openComment }}" on-mouseout="{{ closeComment }}">
+        <div id="name" on-mouseover="{{ openComment }}" on-mouseout="{{ closeComment }}" layout="" horizontal="" center="">
+
             <div id="nameInner">{{ name }}</div>
+
         </div>
 
         <div id="controller" flex="">
@@ -632,12 +640,26 @@ Polymer('gui-row', {
   font: 10px 'Lucida Grande', sans-serif;
   color: #eee;
   -webkit-font-smoothing: antialiased;
-  color: text-color;
   cursor: pointer;
   text-align: center;
   padding: 6px 8px;
   background: #000;
 }
+#closeButton:hover {
+  background: #1a1a1a;
+}
+#closeButtonDocked {
+  position: absolute;
+  left: -40px;
+  border: 1px solid #00f;
+  top: 0;
+  color: #000;
+  width: 40px;
+  height: 40px;
+}
+#controllers {
+  overflow: auto;
+}
 #container {
   background: #1a1a1a;
   -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0.8, 0, 1);
@@ -651,23 +673,36 @@ Polymer('gui-row', {
   position: fixed;
   top: 0;
 }
-#container.docked-false {
+#container.autoplace-true.docked-false {
   right: 20px;
 }
-#container.docked-true {
+#container.autoplace-true.docked-true {
   right: 0;
   bottom: 0;
-  overflow: auto;
+}
+#container.autoplace-true.docked-true.open-false {
+  -webkit-transform: translate3d(245px, 0, 0);
+  -moz-transform: translate3d(245px, 0, 0);
+  -o-transform: translate3d(245px, 0, 0);
+  -ms-transform: translate3d(245px, 0, 0);
+  transform: translate3d(245px, 0, 0);
 }
 </style>
 
 <div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }}">
+    
     <div id="controllers">
         <content></content>
     </div>
+
     <div id="closeButton" on-tap="{{ tapClose }}" hidden?="{{ docked }}">{{ open ? &apos;Close&apos; : &apos;Open&apos; }} Controls</div>
+
+    <div id="closeButtonDocked" on-tap="{{ tapClose }}" hidden?="{{ !docked }}"></div>
+    
+
 </div>
 
+
 </template>
 
 
@@ -752,18 +787,37 @@ Polymer('gui-panel', {
     },
 
 
+    // Observers
+    // ------------------------------- 
+
     openChanged: function() {
 
-        var y;
+        if ( this.open || this.docked ) {
-        if ( this.open ) {
+            
-            y = 0;
+            // let the style sheet take care of things
+
+            this.$.container.style.transform = '';
+
         } else { 
-            y = -this.$.controllers.offsetHeight + 'px';
+
-        }
+            // todo: need the rest of the vendor prefixes ...
+            // wish i could pipe javascript variables into styl.
+
+            var y = -this.$.controllers.offsetHeight + 'px';
             this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)';
 
+        }
+
+
     },
 
+    dockedChanged: function() {
+
+        this.openChanged();
+
+    },
+    
+
     // Events
     // ------------------------------- 
     
@@ -781,6 +835,7 @@ Polymer('gui-panel', {
 
     },
 
+
     // Legacy
     // -------------------------------     
 
@@ -790,7 +845,7 @@ Polymer('gui-panel', {
 
     },
 
-    // domElement
+    // todo: domElement
 
 });</script>
 
@@ -1163,13 +1218,7 @@ Polymer( 'controller-number', {
 
 <template>
 
-<style>:host {
+<style>#container {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-#container {
   height: 100%;
 }
 #track-container {
@@ -1246,7 +1295,7 @@ input {
   transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
 }
 .slider-true input:hover {
-  width: 28%;
+  width: 33%;
 }
 .slider-true input:focus {
   width: 50%;
@@ -1255,7 +1304,7 @@ input {
   width: 100%;
 }
 input::selection {
-  background-color: rgba(255,255,255,0.1);
+  background-color: #25a0d8;
 }
 </style>
 
@@ -1345,7 +1394,7 @@ Polymer( 'controller-boolean', {
   height: 100%;
 }
 #input {
-  height: 20px;
+  vertical-align: middle;
 }
 </style>
 

elements/controller-boolean/controller-boolean.html

@@ -3,10 +3,7 @@
 
 <script src="controller-boolean.js"></script>
 
-<polymer-element 
+<polymer-element name="controller-boolean" extends="controller-base">
-    name="controller-boolean" 
-    extends="controller-base"
-    >
 
 <template>
 

elements/controller-boolean/controller-boolean.styl

@@ -11,5 +11,5 @@
 }
 
 #input {
-    height: 20px;
+    vertical-align: middle;
 }

elements/controller-number/controller-number.styl

@@ -7,10 +7,6 @@ track-size = 1px;
 fill-size = 1px;
 knob-size = 6px
 
-:host {
-    user-select: none;
-}
-
 #container { 
     height: 100%;
 }
@@ -109,5 +105,5 @@ input {
 }
 
 input::selection { 
-    background-color: rgba( 255, 255, 255, 0.1 );
+    background-color: number-color;
 }

elements/gui-panel/gui-panel.html

@@ -10,12 +10,19 @@
 <link rel="stylesheet" href="gui-panel.css">
 
 <div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }}">
+    
     <div id="controllers">
         <content></content>
     </div>
+
     <div id="closeButton" on-tap="{{ tapClose }}" hidden?="{{ docked }}">{{ open ? 'Close' : 'Open' }} Controls</div>
+
+    <div id="closeButtonDocked" on-tap="{{ tapClose }}" hidden?="{{ !docked }}"></div>
+    
+
 </div>
 
+
 </template>
 
 </div>

elements/gui-panel/gui-panel.js

@@ -78,18 +78,37 @@ Polymer('gui-panel', {
     },
 
 
+    // Observers
+    // ------------------------------- 
+
     openChanged: function() {
 
-        var y;
+        if ( this.open || this.docked ) {
-        if ( this.open ) {
+            
-            y = 0;
+            // let the style sheet take care of things
+
+            this.$.container.style.transform = '';
+
         } else { 
-            y = -this.$.controllers.offsetHeight + 'px';
+
-        }
+            // todo: need the rest of the vendor prefixes ...
+            // wish i could pipe javascript variables into styl.
+
+            var y = -this.$.controllers.offsetHeight + 'px';
             this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)';
 
+        }
+
+
     },
 
+    dockedChanged: function() {
+
+        this.openChanged();
+
+    },
+    
+
     // Events
     // ------------------------------- 
     
@@ -107,6 +126,7 @@ Polymer('gui-panel', {
 
     },
 
+
     // Legacy
     // -------------------------------     
 
@@ -116,6 +136,6 @@ Polymer('gui-panel', {
 
     },
 
-    // domElement
+    // todo: domElement
 
 });

elements/gui-panel/gui-panel.styl

@@ -4,35 +4,78 @@
     
     panel-font()
 
-    color: text-color;
     // font-size: 14px;
+    
     cursor: pointer;
     text-align: center;
     padding: padding * 0.75 padding;
     background: black;
 
+    &:hover { 
+        background: panel-color;
+    }
+
+}
+
+#closeButtonDocked { 
+    
+    position: absolute;
+    left: -40px;
+    border: 1px solid blue;
+    top: 0;
+    color: black;
+
+    width: 40px;
+    height: 40px;
+
+}
+
+#controllers { 
+    overflow: auto;
+
 }
 
 #container { 
 
     background: panel-color;
+    transition: transform 0.4s cubic-bezier( 0, 0.8, 0, 1 );
 
     &.autoplace-true { 
+
         width: panel-width;
         position: fixed;
         top: 0;
-    }
 
         &.docked-false {
+
             right: 20px;
+
+            &.open-true { 
+                
+            }
+
+            &.open-false { 
+            }
+
         }
 
         &.docked-true {
+            
             right: 0;
             bottom: 0;
-        overflow: auto;
-    }
 
-    transition: transform 0.4s cubic-bezier( 0, 0.8, 0, 1 );
+            &.open-true {
+
+            }
+    
+            &.open-false { 
+                transform: translate3d( panel-width, 0, 0 );
+            }
+
+        }
+
+    }
+
+
 
 }

elements/gui-row/gui-row.html

@@ -14,8 +14,11 @@
             id="name"
             on-mouseover="{{ openComment }}"
             on-mouseout="{{ closeComment }}"
+            layout horizontal center
             >
+
             <div id="nameInner">{{ name }}</div>
+
         </div>
 
         <div id="controller" flex>

elements/gui-row/gui-row.styl

@@ -34,14 +34,12 @@
 
     debug( magenta )
 
-    text-overflow: ellipsis;
-    word-wrap: break-word;
     overflow: hidden;
     padding: 0 padding;
     box-sizing: border-box;
     display: inline-block;
     width: 40%;
-
+    height: 100%;
     cursor: default;
 
     .comment-true & { 
@@ -50,6 +48,16 @@
 
 }
 
+#nameInner {
+
+    debug( red );
+
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+    
+    
+
+}
 
 #comment { 
 

examples/index.html

@@ -35,7 +35,10 @@
 
         gui = new dat.GUI();
 
+        gui.docked = true;
+
         gui.add( gui, 'docked' );
+        gui.add( gui, 'open' );
         
         gui.add( object, 'listen4Free' );
         gui.add( object, 'listen4Free' );