From bd1f88016cad3ec0ea37b59ceb6e7377ffa78bc4 Mon Sep 17 00:00:00 2001
From: George Michael Brower
 <georgebrower@georgebrower-macbookpro2.roam.corp.google.com>
Date: Sun, 24 Aug 2014 00:11:26 -0700
Subject: [PATCH] string controller and styles

---
 build/gui.html                                | 99 +++++++++++++++----
 .../controller-boolean/controller-boolean.js  |  8 ++
 .../controller-number/controller-number.styl  | 10 +-
 .../controller-string/controller-string.html  |  3 +-
 .../controller-string/controller-string.js    |  3 +-
 .../controller-string/controller-string.styl  | 10 ++
 elements/gui-panel/gui-panel.html             |  8 +-
 elements/gui-panel/gui-panel.js               |  2 +
 elements/gui-panel/gui-panel.styl             | 22 ++++-
 elements/gui-row/gui-row.html                 |  3 -
 elements/gui-row/gui-row.styl                 |  4 +-
 elements/shared.styl                          | 30 +++++-
 examples/index.html                           | 10 +-
 13 files changed, 163 insertions(+), 49 deletions(-)

diff --git a/build/gui.html b/build/gui.html
index 1bef6a2..869ccb9 100644
--- a/build/gui.html
+++ b/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;
-}
-#row:hover {
-  background-color: #262626;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 #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;
-  height: 40px;
+  width: 50px;
+  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">
-</div>
+<input id="input" type="text" value="{{ value }}">
 
 </template>
 
@@ -1363,9 +1414,17 @@ Polymer( 'controller-boolean', {
         
         this.value = this.$.input.checked;
 
+    },
+
+    update: function() {
+
+        // should i really have to do this?
+        this.$.input.checked = this.value;
+
     }
     
     
+    
 
 });
 </script>
diff --git a/elements/controller-boolean/controller-boolean.js b/elements/controller-boolean/controller-boolean.js
index 7b61e03..5d3a1c4 100644
--- a/elements/controller-boolean/controller-boolean.js
+++ b/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;
+
     }
     
     
+    
 
 });
diff --git a/elements/controller-number/controller-number.styl b/elements/controller-number/controller-number.styl
index c20a908..a70234a 100644
--- a/elements/controller-number/controller-number.styl
+++ b/elements/controller-number/controller-number.styl
@@ -71,13 +71,7 @@ knob-size = 6px
 
 input { 
     
-    panel-font()
-    color: text-color;
-    height: 100%;
-    display: inline-block;
-    background: transparent;
-    border: 0;
-    outline: none;
+    input()
 
     .slider-true & {
     
@@ -85,6 +79,8 @@ input {
         margin-left: padding;
         width: 25%;
         transition: width 0.2s ease;
+        padding: 0;
+
 
         &:hover {
             width: 33%;
diff --git a/elements/controller-string/controller-string.html b/elements/controller-string/controller-string.html
index 64bf923..85091e3 100644
--- a/elements/controller-string/controller-string.html
+++ b/elements/controller-string/controller-string.html
@@ -12,8 +12,7 @@
 
 <link rel="stylesheet" href="controller-string.css">
 
-<div id="container">
-</div>
+<input id="input" type="text" value="{{ value }}">
 
 </template>
 
diff --git a/elements/controller-string/controller-string.js b/elements/controller-string/controller-string.js
index 8a69d2c..6b46b1e 100644
--- a/elements/controller-string/controller-string.js
+++ b/elements/controller-string/controller-string.js
@@ -6,4 +6,5 @@ Gui.register( 'controller-string', function( value ) {
 
 Polymer( 'controller-string', {
 
-});
+
+});
\ No newline at end of file
diff --git a/elements/controller-string/controller-string.styl b/elements/controller-string/controller-string.styl
index e69de29..2320379 100644
--- a/elements/controller-string/controller-string.styl
+++ b/elements/controller-string/controller-string.styl
@@ -0,0 +1,10 @@
+@import '../shared';
+
+:host
+    height: 100%;
+
+input
+    input();
+    width: 100%;
+    height: 100%;
+    color: string-color;
\ No newline at end of file
diff --git a/elements/gui-panel/gui-panel.html b/elements/gui-panel/gui-panel.html
index 52f3856..e7e9637 100644
--- a/elements/gui-panel/gui-panel.html
+++ b/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>
\ No newline at end of file
diff --git a/elements/gui-panel/gui-panel.js b/elements/gui-panel/gui-panel.js
index ba25d52..81f0fc3 100644
--- a/elements/gui-panel/gui-panel.js
+++ b/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;
         };
diff --git a/elements/gui-panel/gui-panel.styl b/elements/gui-panel/gui-panel.styl
index 4946f97..3ac30a7 100644
--- a/elements/gui-panel/gui-panel.styl
+++ b/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;
-    height: 40px;
+    width: 50px;
+    height: 50px;
+
+    padding: 10px;
+    box-sizing: border-box;
+
+}
+
+#closeButtonDockedInner {
+
+    border-radius: 3px;
+    background: #fff;
+
+    width: 100%;
+    height: 100%;
 
 }
diff --git a/elements/gui-row/gui-row.html b/elements/gui-row/gui-row.html
index e9bb9eb..c876c68 100644
--- a/elements/gui-row/gui-row.html
+++ b/elements/gui-row/gui-row.html
@@ -37,9 +37,6 @@
 
 </template>
 
-
-</div>
-
 <script src="gui-row.js"></script>
 
 </polymer-element>
\ No newline at end of file
diff --git a/elements/gui-row/gui-row.styl b/elements/gui-row/gui-row.styl
index cd825e0..bec473b 100644
--- a/elements/gui-row/gui-row.styl
+++ b/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;
     }
 
 }
diff --git a/elements/shared.styl b/elements/shared.styl
index 8a36749..bb10783 100644
--- a/elements/shared.styl
+++ b/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;
\ No newline at end of file
+    -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
\ No newline at end of file
diff --git a/examples/index.html b/examples/index.html
index d645990..edb81db 100644
--- a/examples/index.html
+++ b/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 );