From 327d038f34999871a7b2eb6234f2b4e97c694f0c Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Sat, 23 Aug 2014 23:03:17 -0700 Subject: [PATCH] no message --- build/gui.html | 97 ++++++++++++++----- .../controller-boolean.html | 5 +- .../controller-boolean.styl | 2 +- .../controller-number/controller-number.styl | 6 +- elements/gui-panel/gui-panel.html | 7 ++ elements/gui-panel/gui-panel.js | 32 ++++-- elements/gui-panel/gui-panel.styl | 67 ++++++++++--- elements/gui-row/gui-row.html | 3 + elements/gui-row/gui-row.styl | 14 ++- examples/index.html | 3 + 10 files changed, 181 insertions(+), 55 deletions(-) diff --git a/build/gui.html b/build/gui.html index 50f6909..63f9bc6 100644 --- a/build/gui.html +++ b/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; - text-overflow: ellipsis; - word-wrap: break-word; + border: 1px solid #f0f; 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
-
+
+
{{ name }}
+
@@ -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); }
+
+
{{ open ? 'Close' : 'Open' }} Controls
+ +
+ +
+ @@ -752,18 +787,37 @@ Polymer('gui-panel', { }, + // Observers + // ------------------------------- + openChanged: function() { - var y; - if ( this.open ) { - y = 0; + if ( this.open || this.docked ) { + + // 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)'; + } - 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 }); @@ -1163,13 +1218,7 @@ Polymer( 'controller-number', {