string controller and styles

2024-12-12 04:08:27 +00:00 · 2014-08-24 00:11:26 -07:00 · 2014-08-24 00:11:26 -07:00 · bd1f88016c
commit bd1f88016c
parent 6a07fc5074
13 changed files with 163 additions and 49 deletions
--- 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>
--- 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;
+
    }
    
    
+    

 });
--- 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%;
--- 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>

--- 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', {

-});
+
+});
--- 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;
--- 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>
--- 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;
        };
--- 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%;

 }
--- 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>
--- 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;
    }

 }
--- 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;
+    -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
--- 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 );