input decorator and form

toolkitchen · Mar 21, 2013 · 1acc212 · 1acc212
1 parent 718da6c
commit 1acc212
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 77 deletions.
diff --git a/forms/components/g-form.html b/forms/components/g-form.html
@@ -5,12 +5,15 @@
         form[is="g-form"] {
           padding: 10px;
           background-color: #f0f0ed;
+          display: -webkit-flex;
+          -webkit-flex-flow: column;
         }
       }
+      content::-webkit-distributed(*) {
+        -webkit-flex: 1;
+      }
     </style>
-    <x-flex-layout class="column">
-      <content></content>
-    </x-flex-layout>
+    <content></content>
   </template>
   <script>
     Toolkit.register(this);

diff --git a/forms/components/g-input.html b/forms/components/g-input.html
@@ -1,23 +1,52 @@
-<element name="g-input">
+<element name="g-input-decorator">
   <template>
     <style>
-      ::-webkit-input-placeholder, ::-moz-placeholder, ::-ms-input-placeholder {
-        color: rgba(0, 0, 0, 0.5);
+      @host {
+        g-input-decorator {
+          border: 1px solid #b2b2b2;
+          background: white;
+        }
       }
-      content::-webkit-distributed(input) {
-        -webkit-flex: 1;
-        -ms-flex: 1;
-        flex: 1;
-        border: 1px solid #b2b2b2;
+      #shadow {
+        display: -webkit-flex;
+        -webkit-flex-flow: row nowrap;
+        -webkit-align-items: center;
       }
-      content::-webkit-distributed(input:focus) {
-        outline: 0;
+      .focused {
         box-shadow: inset 0 0 5px #448afd, 0 0 5px #448afd;
       }
+      #input::-webkit-distributed(input) {
+        border: none;
+        outline: 0;
+        -webkit-flex: 1;
+      }
+      #input::-webkit-distributed(input::-webkit-input-placeholder) {
+        color: rgba(0, 0, 0, 0.5);
+      }
+      #left::-webkit-distributed(*), #right::-webkit-distributed(*) {
+        -webkit-flex: 0;
+        -webkit-user-select: none;
+      }
     </style>
-    <content></content>
+    <div id="shadow">
+      <content id="left" select="[left]"></content>
+      <content id="input" select="input"></content>
+      <content id="right" select=""></content>
+    </div>
   </template>
   <script>
-    Toolkit.register(this);
+    Toolkit.register(this, {
+      toggleFocus: function(inFocused) {
+        this.$.shadow.classList.toggle('focused', inFocused);
+      },
+      ready: function() {
+        this.addEventListener('focus', function(e){
+          this.toggleFocus(true);
+        }.bind(this), true);
+        this.addEventListener('blur', function(e){
+          this.toggleFocus();
+        }.bind(this), true);
+      }
+    });
   </script>
 </element>
diff --git a/forms/forms.html b/forms/forms.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <title>Toolkit Form Controls></title>
-<script src="../../Platform/platform.js"></script>
+<script src="../../toolkit/platform/platform.js"></script>
 <script src="../../toolkit/toolkit.js"></script>
-<link rel="component" href="../../flexbox/components/x-flex-layout.html">
+<!-- <script src="../declarativeShadow/ShadowRoot.js"></script> -->
+<link rel="component" href="../flexbox/components/x-flex-layout.html">
 <link rel="component" href="components/g-form.html">
 <link rel="component" href="components/g-input.html">
 <style>
@@ -13,65 +14,11 @@
     background-color: white;
     color: rgba(0, 0, 0, .8);
   }
-  body, html {
-    height: 100%;
-  }
-  .flex {
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-  }
-  .flex-container {
-    /* old webkit */
-    display: -webkit-flexbox;
-    /* new webkit */
-    display: -webkit-flex;
-    /* ie */
-    display: -ms-flexbox;
-    /* standard */
-    display: flex;
-  }
-  .flex-column {
-    /* old webkit */
-    -webkit-box-orient: vertical;
-    /* new webkit */
-    -webkit-flex-direction: column;
-    /* ie */
-    -ms-flex-direction: column;
-    /* standard */
-    flex-direction: column;
-  }
-  .invalid {
-    box-shadow: 0 0 10px 5px #d84437;
-  }
-  input[type=range] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    width: auto;
-    height: 40px;
-    background: black;
-  }
-  ::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border-radius: 60px;
-    height: 60px;
-    width: 60px;
-    background: blue;
-  }
-  ::-moz-range-track {
-    height: 40px;
-    background: black;
-  }
-  ::-moz-range-thumb {
-    -moz-appearance: none;
-    border-radius: 60px;
-    height: 60px;
-    width: 60px;
-    background: blue;
-  }
 </style>
-<form is="g-form">
-  <g-input flex="1">
-    <input>
-  </g-input>
+<form is="g-form" id="form">
+  <g-input-decorator>
+    <div right>Bar</div>
+    <input placeholder="placeholder">
+    <div left>Foo</div>
+  </g-input-decorator>
 </form>