diff --git a/elements/controller-number/controller-number.js b/elements/controller-number/controller-number.js index b11ceee..3681f92 100644 --- a/elements/controller-number/controller-number.js +++ b/elements/controller-number/controller-number.js @@ -17,11 +17,11 @@ Polymer('controller-number', { min: 0, - max: 100, + max: 1, + value: 0, step: null, decimals: 3, - value: 50, - + ready: function() { var _this = this; diff --git a/elements/controller-number/controller-number.styl b/elements/controller-number/controller-number.styl index 0eccd5f..2be3e1c 100644 --- a/elements/controller-number/controller-number.styl +++ b/elements/controller-number/controller-number.styl @@ -1,4 +1,4 @@ -@import 'shared'; +@import '../shared'; fill-color = number-color track-color = light @@ -12,7 +12,8 @@ knob-size = 6px display: block; font-size: 0; height: 100%; - user-select: none; + user-select: none;\ + } @@ -76,12 +77,12 @@ knob-size = 6px // } input { - + font(); height: track-height; - margin-left: 5px; + margin: 0 ( padding/2 ); display: inline-block; background: transparent; border: 0; diff --git a/elements/gui-panel/gui-panel.html b/elements/gui-panel/gui-panel.html index 52712da..64142d5 100644 --- a/elements/gui-panel/gui-panel.html +++ b/elements/gui-panel/gui-panel.html @@ -10,6 +10,7 @@
+
×
diff --git a/elements/gui-panel/gui-panel.js b/elements/gui-panel/gui-panel.js index bfa920c..feeeef1 100644 --- a/elements/gui-panel/gui-panel.js +++ b/elements/gui-panel/gui-panel.js @@ -9,11 +9,27 @@ Polymer('gui-panel', { add: function( object, property ) { var row = document.createElement( 'gui-row' ); - row.name = property; var controller; - if ( typeof object[ property ] == 'number' ) { + + + var value; + + // gui.add( object, 'property' ... + if ( typeof object == 'object' ) { + + value = object[ property ]; + + // gui.add( 0, 'anonymous-value' ... + } else { + + value = object; + + } + + + if ( typeof value == 'number' ) { controller = document.createElement( 'controller-number' ); @@ -23,13 +39,22 @@ Polymer('gui-panel', { } - controller.object = object; - controller.property = property; + // gui.add( object, 'property' ... + if ( typeof object == 'object' ) { + controller.object = object; + controller.property = property; + } + + row.name = property; controller.name = function( name ) { row.name = name; }; + controller.comment = function( comment ) { + row.comment = comment; + }; + row.appendChild( controller ); this.appendChild( row ); diff --git a/elements/gui-panel/gui-panel.styl b/elements/gui-panel/gui-panel.styl index 368df8e..17c8177 100644 --- a/elements/gui-panel/gui-panel.styl +++ b/elements/gui-panel/gui-panel.styl @@ -1,6 +1,21 @@ +@import '../shared'; + :host { + position: absolute; top: 0; right: 20px; - width: 300px; + width: 270px; + + } + +#closeButton { + + font(); + font-size: 14px; + cursor: pointer; + background: #000; + text-align: center; + padding: padding*0.4 padding; +} \ No newline at end of file diff --git a/elements/gui-row/gui-row.html b/elements/gui-row/gui-row.html index 4656752..c3339f6 100644 --- a/elements/gui-row/gui-row.html +++ b/elements/gui-row/gui-row.html @@ -1,22 +1,43 @@ - + + diff --git a/elements/gui-row/gui-row.js b/elements/gui-row/gui-row.js index cc7e58f..a8c6f47 100644 --- a/elements/gui-row/gui-row.js +++ b/elements/gui-row/gui-row.js @@ -1,7 +1,27 @@ +/* + +[ ] comment hover behavior + +*/ + Polymer('gui-row', { + comment: null, + + commentOpen: false, + ready: function() { - + + + + }, + + openComment: function() { + this.$.comment.style.height = this.$.commentInner.offsetHeight + 'px'; + }, + + closeComment: function() { + this.$.comment.style.height = ''; } }); \ No newline at end of file diff --git a/elements/gui-row/gui-row.styl b/elements/gui-row/gui-row.styl index 75a1b61..2160808 100644 --- a/elements/gui-row/gui-row.styl +++ b/elements/gui-row/gui-row.styl @@ -1,20 +1,73 @@ -@import 'shared'; +@import '../shared'; + + +:host { + + user-select: none; + background: #1a1a1a; + + height: 100%; + width: 100%; + display: block; + + font(); + +} #row { - -webkit-text-select: none; - background: #1a1a1a; + +} + +#comment { + + line-height: 16px; + user-select: text; + + background: #E0CF99; + height: 0; + color: #333; + + + box-sizing: border-box; + overflow: hidden; + transition: height 0.15s ease; + box-shadow: inset 0 2px 0 dark; + +} + +#commentInner { + padding: padding; } #name { - font(); - text-overflow: ellipsis; word-wrap: break-word; overflow: hidden; - width: 33%; - padding: 0 10px; + padding: 0 padding; box-sizing: border-box; + display: inline-block; + width: 40%; + + height: 30px; + line-height: 30px; + + cursor: default; + + .comment-true & { + cursor: pointer; + } + } +.comment-true #nameInner { + display: inline-block; + border-bottom: 1px dotted light; + + &:after { + content: ' ?'; + color: light; + } + +} \ No newline at end of file diff --git a/elements/shared.styl b/elements/shared.styl index ad04acc..831e136 100644 --- a/elements/shared.styl +++ b/elements/shared.styl @@ -2,6 +2,8 @@ number-color = #25a0d8 +padding = 10px + ease = cubic-bezier( .25, .25, 0, 1 ) light = rgba( 255, 255, 255, 0.25 ) diff --git a/index.js b/index.js index 326da70..43958ca 100644 --- a/index.js +++ b/index.js @@ -1,21 +1,30 @@ var object = { - "listen4Free": 25, + "listen4Free": 0, "step": 10, "straddleZero": 0, "maxIsNegative": -2, + "hasComment": 0 }; // How do we kill polymer-ready ... document.addEventListener( 'polymer-ready', function() { var gui = new GUI(); + gui.add( object, 'listen4Free' ); gui.add( object, 'listen4Free' ); gui.add( object, 'listen4Free' ); - gui.add( object, 'listen4Free' ).name( 'customName' ); - gui.add( object, 'step', 0, 50, 5 ); - gui.add( object, 'straddleZero', -1, 1, 0.01 ); + + gui.add( object, 'hasComment' ).comment( 'Hi there.' ); - var c = gui.add( object, 'maxIsNegative', -5, -2 ); + gui.add( -2, 'anonymousSlider', -5, -2 ); + + gui.add( object, 'listen4Free' ).name( 'customName' ) + + gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut, condimentum hendrerit purus. Cras a cursus ante. Integer nec nibh vitae lacus convallis viverra in at urna. Donec hendrerit convallis lacus, nec condimentum neque aliquam ac. Sed suscipit leo vel ligula condimentum scelerisque. Aliquam fermentum sagittis nisi vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et dolor eros. Sed vel venenatis odio, quis porta mi. Ut sed commodo velit, in porta ante.' ); + + gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. ' );; + + gui.add( object, 'maxIsNegative', -5, -2 ); }); \ No newline at end of file