mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
folders
This commit is contained in:
parent
59486459b2
commit
e523c634c5
18
TODO.md
18
TODO.md
@ -1,24 +1,22 @@
|
|||||||
PARITY
|
PARITY
|
||||||
|
|
||||||
- [ ] folders
|
- [x] folders
|
||||||
- [ ] function controller
|
- [x] function controller
|
||||||
- [ ] color controller
|
- [ ] color controller
|
||||||
|
|
||||||
- [ ] remember
|
- [ ] remember
|
||||||
|
|
||||||
- [ ] save server !!
|
- [ ] presets
|
||||||
- [ ] acknowledges save
|
- [x] save server !!
|
||||||
- [ ] dat-gui server npm install -g ?
|
- [x] acknowledges save
|
||||||
- [ ] remember gui.vars
|
- [x] dat-gui server npm install -g ?
|
||||||
- [ ] presets
|
- [x] remember gui.vars
|
||||||
- [x] remember option controller
|
- [x] remember option controller
|
||||||
- [x] debounce save
|
- [x] debounce save
|
||||||
|
|
||||||
|
|
||||||
NEW FEATURES
|
NEW FEATURES
|
||||||
|
|
||||||
- [ ] dividers
|
|
||||||
|
|
||||||
- [ ] * disable * listen
|
- [ ] * disable * listen
|
||||||
- [ ] override gui.var initialValues with url.js
|
- [ ] override gui.var initialValues with url.js
|
||||||
|
|
||||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
|||||||
!function(t){var n=function(){this.vars={},this.$={dockedContent:document.body},Object.defineProperties(this.$.dockedContent,{offsetWidth:{get:function(){return window.innerWidth}},offsetHeight:{get:function(){return window.innerHeight}}})};n.ready=function(t){return window.Promise&&0===arguments.length?new Promise(function(t){t()}):void t()},n.prototype.addEventListener=function(t,n){"resize"==t&&window.addEventListener(t,n)},n.prototype.var=function(t,n){return this.vars[t]=n,i},n.prototype.add=function(){return i};var e=function(){return this},i={on:e};t.Gui=n}(this);
|
!function(t){var n=function(){this.vars={},this.$={dockedContent:document.body},Object.defineProperties(this.$.dockedContent,{offsetWidth:{get:function(){return window.innerWidth}},offsetHeight:{get:function(){return window.innerHeight}}})};n.ready=function(t){return window.Promise&&0===arguments.length?new Promise(function(t){t()}):void t()},n.prototype.addEventListener=function(t,n){"resize"==t&&window.addEventListener(t,n)},n.prototype.var=function(t,n){return this.vars[t]=n,i},n.prototype.folder=function(){return this},n.prototype.add=function(){return i};var e=function(){return this},i={on:e,onChange:e,disable:e};t.Gui=n}(this);
|
@ -53,7 +53,11 @@ Polymer( 'dat-gui-base', {
|
|||||||
|
|
||||||
valueChanged: function() {
|
valueChanged: function() {
|
||||||
|
|
||||||
this.fire( 'change', this.value );
|
if ( this.__firstChange ) {
|
||||||
|
this.fire( 'change', this.value );
|
||||||
|
}
|
||||||
|
this.__firstChange = true;
|
||||||
|
|
||||||
this.update();
|
this.update();
|
||||||
|
|
||||||
},
|
},
|
||||||
@ -102,6 +106,8 @@ Polymer( 'dat-gui-base', {
|
|||||||
|
|
||||||
onChange: function( v ) {
|
onChange: function( v ) {
|
||||||
|
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
this.addEventListener( 'change', function( e ) {
|
this.addEventListener( 'change', function( e ) {
|
||||||
|
|
||||||
v( e.detail );
|
v( e.detail );
|
||||||
@ -118,4 +124,16 @@ Polymer( 'dat-gui-base', {
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
disable: function( disabled ) {
|
||||||
|
|
||||||
|
if ( disabled === undefined ) {
|
||||||
|
disabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.row.disabled = disabled;
|
||||||
|
|
||||||
|
return this;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
} );
|
} );
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
#container {
|
#container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-left: 8px;
|
|
||||||
}
|
}
|
||||||
#switch-track {
|
#switch-track {
|
||||||
width: 2em;
|
width: 2em;
|
||||||
@ -50,7 +49,7 @@
|
|||||||
transform: translate3d(1.2em, 0, 0) scale(1.5);
|
transform: translate3d(1.2em, 0, 0) scale(1.5);
|
||||||
}
|
}
|
||||||
#text {
|
#text {
|
||||||
margin-left: 8px;
|
margin-left: 9px;
|
||||||
}
|
}
|
||||||
.value-false #text {
|
.value-false #text {
|
||||||
color: rgba(255,255,255,0.25);
|
color: rgba(255,255,255,0.25);
|
||||||
|
@ -7,7 +7,6 @@ border-radius = height
|
|||||||
#container
|
#container
|
||||||
height 100%
|
height 100%
|
||||||
cursor pointer
|
cursor pointer
|
||||||
padding-left padding
|
|
||||||
|
|
||||||
#switch-track
|
#switch-track
|
||||||
width width
|
width width
|
||||||
|
15
elements/dat-gui-folder/dat-gui-folder.css
Normal file
15
elements/dat-gui-folder/dat-gui-folder.css
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
#name {
|
||||||
|
padding: 9px;
|
||||||
|
padding-top: 18px;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.25);
|
||||||
|
font-weight: bold;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.open-false #controllers {
|
||||||
|
display: none;
|
||||||
|
}
|
23
elements/dat-gui-folder/dat-gui-folder.html
Normal file
23
elements/dat-gui-folder/dat-gui-folder.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<polymer-element
|
||||||
|
name="dat-gui-folder"
|
||||||
|
attributes="name open parent">
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="dat-gui-folder.css">
|
||||||
|
|
||||||
|
<div id="container" class="open-{{ open }}" >
|
||||||
|
|
||||||
|
<div id="name" on-tap="{{ tap }}">{{ name }}</div>
|
||||||
|
|
||||||
|
<div id="controllers">
|
||||||
|
<content></content>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="dat-gui-folder.js"></script>
|
||||||
|
|
||||||
|
</polymer-element>
|
28
elements/dat-gui-folder/dat-gui-folder.js
Normal file
28
elements/dat-gui-folder/dat-gui-folder.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
/* globals Polymer */
|
||||||
|
|
||||||
|
Polymer( 'dat-gui-folder', {
|
||||||
|
|
||||||
|
parent: null,
|
||||||
|
open: false,
|
||||||
|
|
||||||
|
add: function() {
|
||||||
|
var controller = this.parent.add.apply( this.parent, arguments );
|
||||||
|
this.appendChild( controller.row );
|
||||||
|
return controller;
|
||||||
|
},
|
||||||
|
|
||||||
|
var: function() {
|
||||||
|
var controller = this.parent.var.apply( this.parent, arguments );
|
||||||
|
this.appendChild( controller.row );
|
||||||
|
return controller;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// Events
|
||||||
|
// -------------------------------
|
||||||
|
|
||||||
|
tap: function() {
|
||||||
|
this.open = !this.open
|
||||||
|
}
|
||||||
|
|
||||||
|
} );
|
14
elements/dat-gui-folder/dat-gui-folder.styl
Normal file
14
elements/dat-gui-folder/dat-gui-folder.styl
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
@import '../shared/shared'
|
||||||
|
|
||||||
|
#name
|
||||||
|
padding padding
|
||||||
|
padding-top padding * 2
|
||||||
|
border-bottom 1px solid light
|
||||||
|
font-weight bold
|
||||||
|
-webkit-font-smoothing antialiased
|
||||||
|
cursor pointer
|
||||||
|
user-select none
|
||||||
|
|
||||||
|
.open-false
|
||||||
|
#controllers
|
||||||
|
display none
|
@ -1,6 +1,5 @@
|
|||||||
#container {
|
#container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-left: 8px;
|
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
#container
|
#container
|
||||||
height 100%
|
height 100%
|
||||||
padding-left padding
|
|
||||||
|
|
||||||
button
|
button
|
||||||
cursor pointer
|
cursor pointer
|
@ -3,7 +3,7 @@
|
|||||||
}
|
}
|
||||||
#track-container {
|
#track-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 8px;
|
padding-right: 9px;
|
||||||
}
|
}
|
||||||
#track {
|
#track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -71,11 +71,11 @@ input::selection {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
:host-context(.touch-false) .slider-true input:hover {
|
:host-context(.touch-false) .slider-true input:hover {
|
||||||
width: 35%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
.slider-true input:focus {
|
.slider-true input:focus {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
.slider-false input {
|
.slider-false input {
|
||||||
padding-left: 8px;
|
padding-left: 9px;
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ knob-size = 0.6em
|
|||||||
|
|
||||||
#track-container
|
#track-container
|
||||||
height 100%
|
height 100%
|
||||||
padding 0 padding
|
padding-right padding
|
||||||
|
|
||||||
#track
|
#track
|
||||||
width 100%
|
width 100%
|
||||||
@ -76,7 +76,7 @@ input
|
|||||||
padding 0
|
padding 0
|
||||||
|
|
||||||
+hover()
|
+hover()
|
||||||
width 35%
|
width 50%
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
width 50%
|
width 50%
|
||||||
|
@ -1,8 +1,37 @@
|
|||||||
#container {
|
#container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 8px;
|
|
||||||
}
|
}
|
||||||
select {
|
select {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
opacity: 0;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||||
|
filter: alpha(opacity=0);
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.key {
|
||||||
|
pointer-events: none;
|
||||||
|
color: #1ebd6e;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 7px;
|
||||||
|
}
|
||||||
|
.key span {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
-o-text-overflow: ellipsis;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
width: 4px;
|
||||||
|
margin-right: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
svg polygon {
|
||||||
|
fill: rgba(255,255,255,0.25);
|
||||||
|
}
|
||||||
|
:host-context(.touch-false) #container:hover svg polygon {
|
||||||
|
fill: #ecebe0;
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,18 @@
|
|||||||
<link rel="stylesheet" href="dat-gui-option.css">
|
<link rel="stylesheet" href="dat-gui-option.css">
|
||||||
|
|
||||||
<div id="container" horizontal layout center>
|
<div id="container" horizontal layout center>
|
||||||
|
|
||||||
|
<div class="key">
|
||||||
|
|
||||||
|
<svg viewBox="0 0 10 24">
|
||||||
|
<polygon points="0,9.5 5,0.9 10,9.5 "></polygon>
|
||||||
|
<polygon points="10,16.75 5,24.7 0,16.75 "></polygon>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<span>{{ key }}</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<select value="{{ key }}" on-change="{{ change }}">
|
<select value="{{ key }}" on-change="{{ change }}">
|
||||||
|
|
||||||
<template repeat="{{ name in options | keys }}">
|
<template repeat="{{ name in options | keys }}">
|
||||||
@ -18,6 +29,7 @@
|
|||||||
|
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
@ -3,8 +3,36 @@
|
|||||||
|
|
||||||
#container
|
#container
|
||||||
height 100%
|
height 100%
|
||||||
cursor pointer
|
|
||||||
padding-left padding
|
|
||||||
|
|
||||||
select
|
select
|
||||||
outline none
|
outline none
|
||||||
|
opacity 0
|
||||||
|
width 100%
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
.key
|
||||||
|
pointer-events none
|
||||||
|
color color-string
|
||||||
|
position absolute
|
||||||
|
margin-top 7px
|
||||||
|
span
|
||||||
|
vertical-align middle
|
||||||
|
margin-top 2px
|
||||||
|
display inline-block
|
||||||
|
overflow hidden
|
||||||
|
text-overflow ellipsis
|
||||||
|
|
||||||
|
|
||||||
|
svg
|
||||||
|
width 4px
|
||||||
|
margin-right 8px
|
||||||
|
vertical-align middle
|
||||||
|
margin-top 1px
|
||||||
|
polygon
|
||||||
|
fill light
|
||||||
|
|
||||||
|
#container
|
||||||
|
+hover()
|
||||||
|
svg
|
||||||
|
polygon
|
||||||
|
fill color-font
|
@ -1,4 +1,3 @@
|
|||||||
input {
|
input {
|
||||||
color: #1ebd6e;
|
color: #1ebd6e;
|
||||||
padding-left: 8px;
|
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
@import '../shared/shared'
|
@import '../shared/shared'
|
||||||
|
|
||||||
input
|
input
|
||||||
color color-string
|
color color-string
|
||||||
padding-left padding
|
|
@ -41,7 +41,6 @@
|
|||||||
#controllers {
|
#controllers {
|
||||||
font: 10px 'Lucida Grande', sans-serif;
|
font: 10px 'Lucida Grande', sans-serif;
|
||||||
color: #ecebe0;
|
color: #ecebe0;
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
}
|
||||||
.touch-true #controllers {
|
.touch-true #controllers {
|
||||||
font-size: 13.5px;
|
font-size: 13.5px;
|
||||||
@ -49,19 +48,17 @@
|
|||||||
.docked-true #controllers {
|
.docked-true #controllers {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 4.35em;
|
|
||||||
}
|
}
|
||||||
#closeButton {
|
#closeButton {
|
||||||
font: 10px 'Lucida Grande', sans-serif;
|
font: 10px 'Lucida Grande', sans-serif;
|
||||||
color: #ecebe0;
|
color: #ecebe0;
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 6px 8px;
|
padding: 6.75px 9px;
|
||||||
}
|
}
|
||||||
.touch-true #closeButton {
|
.touch-true #closeButton {
|
||||||
font-size: 13.5px;
|
font-size: 13.5px;
|
||||||
@ -79,9 +76,8 @@
|
|||||||
gui-button {
|
gui-button {
|
||||||
font: 10px 'Lucida Grande', sans-serif;
|
font: 10px 'Lucida Grande', sans-serif;
|
||||||
color: #ecebe0;
|
color: #ecebe0;
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
background: #282828;
|
background: #282828;
|
||||||
height: 2.9em;
|
height: 3em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
-webkit-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1);
|
-webkit-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1);
|
||||||
-moz-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1);
|
-moz-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1);
|
||||||
@ -95,8 +91,8 @@ gui-button {
|
|||||||
.docked-true gui-button {
|
.docked-true gui-button {
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 4.35em;
|
width: 4.5em;
|
||||||
height: 4.35em;
|
height: 4.5em;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
<link rel="import" href="../../../polymer/polymer.html">
|
<link rel="import" href="../../../polymer/polymer.html">
|
||||||
|
<link rel="import" href="../dat-gui-folder/dat-gui-folder.html">
|
||||||
<link rel="import" href="../gui-row/gui-row.html">
|
<link rel="import" href="../gui-row/gui-row.html">
|
||||||
<link rel="import" href="../gui-button/gui-button.html">
|
<link rel="import" href="../gui-button/gui-button.html">
|
||||||
|
|
||||||
@ -20,7 +21,7 @@
|
|||||||
<content></content>
|
<content></content>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<gui-button hidden?="{{ !autoPlace }}" on-tap="{{ toggleOpen }}" open="{{ open }}"></gui-button>
|
<!-- <gui-button hidden?="{{ !autoPlace }}" on-tap="{{ toggleOpen }}" open="{{ open }}"></gui-button> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -66,10 +66,12 @@ Polymer( 'dat-gui', {
|
|||||||
|
|
||||||
controller.name = function( name ) {
|
controller.name = function( name ) {
|
||||||
row.name = name;
|
row.name = name;
|
||||||
|
return controller;
|
||||||
};
|
};
|
||||||
|
|
||||||
controller.comment = function( comment ) {
|
controller.comment = function( comment ) {
|
||||||
row.comment = comment;
|
row.comment = comment;
|
||||||
|
return controller;
|
||||||
};
|
};
|
||||||
|
|
||||||
row.appendChild( controller );
|
row.appendChild( controller );
|
||||||
@ -87,11 +89,24 @@ Polymer( 'dat-gui', {
|
|||||||
|
|
||||||
objectControllers[ controller.path ] = controller;
|
objectControllers[ controller.path ] = controller;
|
||||||
|
|
||||||
|
|
||||||
return controller;
|
return controller;
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
folder: function( name, open ) {
|
||||||
|
|
||||||
|
var folder = document.createElement( 'dat-gui-folder' );
|
||||||
|
|
||||||
|
folder.name = name;
|
||||||
|
folder.open = open === undefined ? true : open;
|
||||||
|
folder.parent = this;
|
||||||
|
|
||||||
|
this.appendChild( folder );
|
||||||
|
|
||||||
|
return folder;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
remove: function( controller ) {
|
remove: function( controller ) {
|
||||||
|
|
||||||
this.removeChild( controller );
|
this.removeChild( controller );
|
||||||
|
@ -10,7 +10,7 @@ dur = 0.4s
|
|||||||
#panel
|
#panel
|
||||||
transition transform dur cubic-bezier( 0, 0.8, 0, 1 )
|
transition transform dur cubic-bezier( 0, 0.8, 0, 1 )
|
||||||
background color-panel
|
background color-panel
|
||||||
|
|
||||||
.autoplace-true &
|
.autoplace-true &
|
||||||
width panel-width
|
width panel-width
|
||||||
position fixed
|
position fixed
|
||||||
@ -44,8 +44,6 @@ dur = 0.4s
|
|||||||
position absolute
|
position absolute
|
||||||
width 100%
|
width 100%
|
||||||
|
|
||||||
top row-height * 1.5
|
|
||||||
|
|
||||||
|
|
||||||
#closeButton
|
#closeButton
|
||||||
panel-font()
|
panel-font()
|
||||||
@ -56,10 +54,10 @@ dur = 0.4s
|
|||||||
|
|
||||||
|
|
||||||
#dockedContent:not(:empty)
|
#dockedContent:not(:empty)
|
||||||
position: fixed
|
position fixed
|
||||||
top: 0
|
top 0
|
||||||
left: 0
|
left 0
|
||||||
bottom: 0
|
bottom 0
|
||||||
|
|
||||||
// needs to be dynamic if we do panel resizing again
|
// needs to be dynamic if we do panel resizing again
|
||||||
right: panel-width
|
right: panel-width
|
||||||
|
@ -75,6 +75,10 @@ Gui.constructor = function( params ) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Docked
|
||||||
|
|
||||||
|
this.docked = params.docked || false;
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,8 +1,13 @@
|
|||||||
|
#container.disabled-true {
|
||||||
|
opacity: 0.4;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
|
||||||
|
filter: alpha(opacity=40);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
#row {
|
#row {
|
||||||
font: 10px 'Lucida Grande', sans-serif;
|
font: 10px 'Lucida Grande', sans-serif;
|
||||||
color: #ecebe0;
|
color: #ecebe0;
|
||||||
-webkit-font-smoothing: antialiased;
|
height: 3em;
|
||||||
height: 2.9em;
|
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
@ -13,6 +18,7 @@
|
|||||||
-ms-transition: background-color 0.2s linear;
|
-ms-transition: background-color 0.2s linear;
|
||||||
transition: background-color 0.2s linear;
|
transition: background-color 0.2s linear;
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||||
|
padding: 0 9px;
|
||||||
}
|
}
|
||||||
:host-context(.touch-true) #row {
|
:host-context(.touch-true) #row {
|
||||||
font-size: 13.5px;
|
font-size: 13.5px;
|
||||||
@ -21,12 +27,13 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
#name {
|
#name {
|
||||||
padding: 0 8px;
|
padding-right: 9px;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 38%;
|
width: 38%;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
.comment-true #name {
|
.comment-true #name {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -43,7 +50,6 @@
|
|||||||
#comment {
|
#comment {
|
||||||
font: 10px 'Lucida Grande', sans-serif;
|
font: 10px 'Lucida Grande', sans-serif;
|
||||||
color: #ecebe0;
|
color: #ecebe0;
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
line-height: 1.6em;
|
line-height: 1.6em;
|
||||||
background: #e0cf99;
|
background: #e0cf99;
|
||||||
color: #333;
|
color: #333;
|
||||||
@ -94,7 +100,7 @@
|
|||||||
transition-delay: 200ms;
|
transition-delay: 200ms;
|
||||||
}
|
}
|
||||||
#commentInner {
|
#commentInner {
|
||||||
padding: 8px;
|
padding: 9px;
|
||||||
}
|
}
|
||||||
.comment-true #nameInner {
|
.comment-true #nameInner {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
<link rel="import" href="../../../polymer/polymer.html">
|
<link rel="import" href="../../../polymer/polymer.html">
|
||||||
|
|
||||||
<polymer-element name="gui-row" attributes="name comment">
|
<polymer-element name="gui-row" attributes="name comment disabled">
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div>
|
<link rel="stylesheet" href="gui-row.css">
|
||||||
|
|
||||||
<link rel="stylesheet" href="gui-row.css">
|
<div id="container" class="disabled-{{ disabled }}">
|
||||||
|
|
||||||
<div id="row" class="comment-{{ comment != null }}" layout horizontal>
|
<div id="row" class="comment-{{ comment != null }}" layout horizontal>
|
||||||
|
|
||||||
|
@ -4,6 +4,7 @@ Polymer( 'gui-row', {
|
|||||||
|
|
||||||
comment: null,
|
comment: null,
|
||||||
commentOpen: false,
|
commentOpen: false,
|
||||||
|
disabled: false,
|
||||||
|
|
||||||
ready: function() {},
|
ready: function() {},
|
||||||
|
|
||||||
|
@ -1,22 +1,28 @@
|
|||||||
@import '../shared/shared'
|
@import '../shared/shared'
|
||||||
|
|
||||||
|
#container.disabled-true
|
||||||
|
opacity 0.4
|
||||||
|
pointer-events none
|
||||||
|
|
||||||
#row
|
#row
|
||||||
panel-font()
|
panel-font()
|
||||||
height row-height
|
height row-height
|
||||||
user-select none
|
user-select none
|
||||||
transition background-color 0.2s linear
|
transition background-color 0.2s linear
|
||||||
border-bottom 1px solid lighter
|
border-bottom 1px solid lighter
|
||||||
|
padding 0 padding
|
||||||
|
// overflow hidden
|
||||||
|
|
||||||
#controller
|
#controller
|
||||||
height 100%
|
height 100%
|
||||||
|
|
||||||
#name
|
#name
|
||||||
// overflow hidden
|
// overflow hidden
|
||||||
padding 0 padding
|
padding-right padding
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
width row-name-width
|
width row-name-width
|
||||||
cursor default
|
cursor default
|
||||||
|
-webkit-font-smoothing antialiased
|
||||||
.comment-true &
|
.comment-true &
|
||||||
cursor pointer
|
cursor pointer
|
||||||
+touch()
|
+touch()
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
input {
|
input {
|
||||||
font: 10px 'Lucida Grande', sans-serif;
|
font: 10px 'Lucida Grande', sans-serif;
|
||||||
color: #ecebe0;
|
color: #ecebe0;
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -23,9 +22,3 @@ input {
|
|||||||
:host-context(.touch-true) input {
|
:host-context(.touch-true) input {
|
||||||
font-size: 13.5px;
|
font-size: 13.5px;
|
||||||
}
|
}
|
||||||
input:focus {
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
}
|
|
||||||
:host-context(.touch-false) input:hover {
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
}
|
|
||||||
|
@ -12,7 +12,7 @@ input
|
|||||||
outline none
|
outline none
|
||||||
transition background-color 0.15s linear
|
transition background-color 0.15s linear
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
&:focus
|
// &:focus
|
||||||
background lighter
|
// background lighter
|
||||||
+hover()
|
// +hover()
|
||||||
background lighter
|
// background lighter
|
@ -8,10 +8,10 @@ touch-scale = 1.35
|
|||||||
panel-width = 245px
|
panel-width = 245px
|
||||||
panel-width-touch = 320px
|
panel-width-touch = 320px
|
||||||
|
|
||||||
row-height = 2.9em
|
row-height = 3em
|
||||||
row-name-width = 38%
|
row-name-width = 38%
|
||||||
|
|
||||||
padding = 8px
|
padding = 9px
|
||||||
|
|
||||||
/* colors */
|
/* colors */
|
||||||
|
|
||||||
@ -38,8 +38,6 @@ ease = cubic-bezier( .25, .25, 0, 1 )
|
|||||||
panel-font( color = color-font )
|
panel-font( color = color-font )
|
||||||
font font-size 'Lucida Grande', sans-serif
|
font font-size 'Lucida Grande', sans-serif
|
||||||
color color
|
color color
|
||||||
if ( color == color-font )
|
|
||||||
-webkit-font-smoothing antialiased
|
|
||||||
+touch()
|
+touch()
|
||||||
font-size font-size * touch-scale
|
font-size font-size * touch-scale
|
||||||
|
|
||||||
|
@ -59,6 +59,12 @@ Gui.prototype.var = function( name, value ) {
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Gui.prototype.folder = function( name ) {
|
||||||
|
|
||||||
|
return this;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
Gui.prototype.add = function( object, path ) {
|
Gui.prototype.add = function( object, path ) {
|
||||||
|
|
||||||
return controllerShim;
|
return controllerShim;
|
||||||
@ -70,7 +76,9 @@ var identity = function() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var controllerShim = {
|
var controllerShim = {
|
||||||
on: identity
|
on: identity,
|
||||||
|
onChange: identity,
|
||||||
|
disable: identity
|
||||||
};
|
};
|
||||||
|
|
||||||
scope.Gui = Gui;
|
scope.Gui = Gui;
|
||||||
|
Loading…
Reference in New Issue
Block a user