string controller and styles

build/gui.html

@@ -482,10 +482,7 @@ if(f)g=void 0;else if(f=g[this.name],!f)return void console.error("Cannot find f
   -o-transition: background-color 0.2s linear;
   -ms-transition: background-color 0.2s linear;
   transition: background-color 0.2s linear;
-  border-bottom: 1px solid #262626;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
-}
-#row:hover {
-  background-color: #262626;
 }
 #controller {
   height: 100%;
@@ -589,9 +586,6 @@ if(f)g=void 0;else if(f=g[this.name],!f)return void console.error("Cannot find f
 
 </template>
 
-
-
-
 <script>/*
 
 [ ] comment hover behavior
@@ -670,11 +664,23 @@ Polymer('gui-row', {
 }
 #closeButtonDocked {
   position: absolute;
-  left: -40px;
+  right: 245px;
+  cursor: pointer;
   top: 0;
   color: #000;
-  width: 40px;
+  width: 50px;
-  height: 40px;
+  height: 50px;
+  padding: 10px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+#closeButtonDockedInner {
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #fff;
+  width: 100%;
+  height: 100%;
 }
 </style>
 
@@ -686,16 +692,14 @@ Polymer('gui-row', {
 
     <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 id="closeButtonDocked" on-tap="{{ tapClose }}" hidden?="{{ !docked }}">
-    
+        <div id="closeButtonDockedInner"></div>
+    </div>
     
 </div>
 
-
 </template>
 
-
-
 <script>/*
 
 [ ] kill horizontal scroll when docked
@@ -760,6 +764,8 @@ Polymer('gui-panel', {
         var row = document.createElement( 'gui-row' );
         row.name = path;
 
+        controller.row = row;
+
         controller.name = function( name ) {
             row.name = name;
         };
@@ -1271,7 +1277,21 @@ input {
   display: inline-block;
   background: transparent;
   border: 0;
+  padding: 0;
   outline: none;
+  padding-left: 8px;
+  -webkit-transition: background-color 0.15s linear;
+  -moz-transition: background-color 0.15s linear;
+  -o-transition: background-color 0.15s linear;
+  -ms-transition: background-color 0.15s linear;
+  transition: background-color 0.15s linear;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+input:hover,
+input:focus {
+  background: rgba(255,255,255,0.05);
 }
 .slider-true input {
   text-align: center;
@@ -1282,6 +1302,7 @@ input {
   -o-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
   -ms-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
   transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  padding: 0;
 }
 .slider-true input:hover {
   width: 33%;
@@ -1328,17 +1349,47 @@ input::selection {
 
 Polymer( 'controller-string', {
 
-});
+
-</script>
+});</script>
 
 <polymer-element name="controller-string" extends="controller-base" assetpath="../elements/controller-string/">
 
 <template>
 
-<style></style>
+<style>:host {
+  height: 100%;
+}
+input {
+  font: 10px 'Lucida Grande', sans-serif;
+  color: #eee;
+  -webkit-font-smoothing: antialiased;
+  color: text-color;
+  height: 100%;
+  display: inline-block;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  outline: none;
+  padding-left: 8px;
+  -webkit-transition: background-color 0.15s linear;
+  -moz-transition: background-color 0.15s linear;
+  -o-transition: background-color 0.15s linear;
+  -ms-transition: background-color 0.15s linear;
+  transition: background-color 0.15s linear;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  color: #1ebd6e;
+}
+input:hover,
+input:focus {
+  background: rgba(255,255,255,0.05);
+}
+</style>
 
-<div id="container">
+<input id="input" type="text" value="{{ value }}">
-</div>
 
 </template>
 
@@ -1363,10 +1414,18 @@ Polymer( 'controller-boolean', {
         
         this.value = this.$.input.checked;
 
+    },
+
+    update: function() {
+
+        // should i really have to do this?
+        this.$.input.checked = this.value;
+
     }
     
     
     
+
 });
 </script>
 

elements/controller-boolean/controller-boolean.js

@@ -15,8 +15,16 @@ Polymer( 'controller-boolean', {
         
         this.value = this.$.input.checked;
 
+    },
+
+    update: function() {
+
+        // should i really have to do this?
+        this.$.input.checked = this.value;
+
     }
     
     
     
+
 });

elements/controller-number/controller-number.styl

@@ -71,13 +71,7 @@ knob-size = 6px
 
 input { 
     
-    panel-font()
+    input()
-    color: text-color;
-    height: 100%;
-    display: inline-block;
-    background: transparent;
-    border: 0;
-    outline: none;
 
     .slider-true & {
     
@@ -85,6 +79,8 @@ input {
         margin-left: padding;
         width: 25%;
         transition: width 0.2s ease;
+        padding: 0;
+
 
         &:hover {
             width: 33%;

elements/controller-string/controller-string.html

@@ -12,8 +12,7 @@
 
 <link rel="stylesheet" href="controller-string.css">
 
-<div id="container">
+<input id="input" type="text" value="{{ value }}">
-</div>
 
 </template>
 

elements/controller-string/controller-string.js

@@ -6,4 +6,5 @@ Gui.register( 'controller-string', function( value ) {
 
 Polymer( 'controller-string', {
 
+
 });

elements/controller-string/controller-string.styl

@@ -0,0 +1,10 @@
+@import '../shared';
+
+:host
+    height: 100%;
+
+input
+    input();
+    width: 100%;
+    height: 100%;
+    color: string-color;

elements/gui-panel/gui-panel.html

@@ -17,16 +17,14 @@
 
     <div id="closeButton" on-tap="{{ tapClose }}" hidden?="{{ docked }}">{{ open ? 'Close' : 'Open' }} Controls</div>
 
-    <div id="closeButtonDocked" on-tap="{{ tapClose }}" hidden?="{{ !docked }}"></div>
+    <div id="closeButtonDocked" on-tap="{{ tapClose }}" hidden?="{{ !docked }}">
-    
+        <div id="closeButtonDockedInner"></div>
-
     </div>
     
+</div>
 
 </template>
 
-</div>
-
 <script src="gui-panel.js"></script>
 
 </polymer-element>

elements/gui-panel/gui-panel.js

@@ -62,6 +62,8 @@ Polymer('gui-panel', {
         var row = document.createElement( 'gui-row' );
         row.name = path;
 
+        controller.row = row;
+
         controller.name = function( name ) {
             row.name = name;
         };

elements/gui-panel/gui-panel.styl

@@ -52,6 +52,7 @@
     
     panel-font()
     
+    user-select: none;
     cursor: pointer;
     text-align: center;
     padding: padding * 0.75 padding;
@@ -66,16 +67,27 @@
 #closeButtonDocked { 
     
     position: absolute;
-    left: -40px;
+    right: panel-width;
     
     cursor: pointer;
 
-    border: 1px solid blue;
-
     top: 0;
     color: black;
 
-    width: 40px;
+    width: 50px;
-    height: 40px;
+    height: 50px;
+
+    padding: 10px;
+    box-sizing: border-box;
+
+}
+
+#closeButtonDockedInner {
+
+    border-radius: 3px;
+    background: #fff;
+
+    width: 100%;
+    height: 100%;
 
 }

elements/gui-row/gui-row.html

@@ -37,9 +37,6 @@
 
 </template>
 
-
-</div>
-
 <script src="gui-row.js"></script>
 
 </polymer-element>

elements/gui-row/gui-row.styl

@@ -14,10 +14,10 @@
     
     height: min-row-height;
     transition: background-color 0.2s linear;
-    border-bottom: 1px solid #262626;
+    border-bottom: 1px solid lighter;
 
     &:hover { 
-        background-color: #262626;
+        // background-color: #262626;
     }
 
 }

elements/shared.styl

@@ -1,26 +1,52 @@
 @import 'nib';
 
+// config 
+
+support-for-ie ?= true
 use-debug = false
 
 debug( color )
     if use-debug
         border: 1px solid color
 
+// constants
+
 panel-width = 245px
 min-row-height = 30px
 
 font-color = #eee
 panel-color = #1a1a1a
-number-color = #25a0d8
+
+number-color = #25A0D8
+string-color = #1EBD6E
 
 padding = 8px
 
 ease = cubic-bezier( .25, .25, 0, 1 )
 
 light = rgba( 255, 255, 255, 0.25 )
+lighter = rgba( 255, 255, 255, 0.05 )
+
 dark = rgba( 0, 0, 0, 0.1 );
 
+// common
+
 panel-font()
     font: 10px 'Lucida Grande', sans-serif;
     color: font-color;
     -webkit-font-smoothing: antialiased;
+
+input()
+    panel-font()
+    color: text-color;
+    height: 100%;
+    display: inline-block;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    outline: none;
+    padding-left: padding;
+    transition: background-color 0.15s linear;
+    box-sizing: border-box;
+    &:hover, &:focus
+        background: lighter

examples/index.html

@@ -12,6 +12,9 @@
     </script>
 
     <style type="text/css">
+    body {
+        background: #aaa;
+    }
     </style>
 
 </head>
@@ -38,11 +41,14 @@
         gui.docked = true;
 
         gui.add( gui, 'docked' );
-        gui.add( gui, 'open' );
+        var r = gui.add( gui, 'open' );
+
+        gui.add( r.row, 'name' );
+
         
         gui.add( object, 'listen4Free' );
         gui.add( object, 'listen4Free' );
-        gui.add( object, 'listen4Free' );
+        gui.add( object, 'listen4Free', 0, 1000 );
 
         gui.add( object, 'zeroTo1', 0, 1 );