From 4e65b57f1950536aa40b33e70c99b9bd2185beee Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Fri, 20 Sep 2013 13:46:54 -0700
Subject: [PATCH] Sandbox: add polymer-grid-layout to the palette

---
 Sandbox/lib/components.html            |  1 +
 Sandbox/lib/tk-editors.html            | 24 ++++++++++++++++++++----
 Sandbox/lib/tk-property-inspector.html |  1 +
 Sandbox/metadata.html                  |  7 +++++++
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/Sandbox/lib/components.html b/Sandbox/lib/components.html
index 6e06544..f5e3b51 100644
--- a/Sandbox/lib/components.html
+++ b/Sandbox/lib/components.html
@@ -62,6 +62,7 @@
 <link rel="import" href="tk-preview.html">
 <link rel="import" href="tk-app.html">
 <!-- -->
+<link rel="import" href="../../../polymer-elements/polymer-grid-layout/polymer-grid-layout.html">
 <link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.html">
 <link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
 <link rel="import" href="../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
diff --git a/Sandbox/lib/tk-editors.html b/Sandbox/lib/tk-editors.html
index 8787708..d67f714 100755
--- a/Sandbox/lib/tk-editors.html
+++ b/Sandbox/lib/tk-editors.html
@@ -46,9 +46,9 @@
         font: inherit;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
-        -webkit-user-select: all;
+        /* -webkit-user-select: all;
         -moz-user-select: all;
-        user-select: all;
+        user-select: all; */
       }
       input:focus {
         outline: 1px solid #448afd;
@@ -200,9 +200,9 @@
         padding: 6px;
         margin: 0;
         width: 95%; 
-        -webkit-user-select: all; 
+        /* -webkit-user-select: all; 
         -moz-user-select: all;
-        user-select: all;
+        user-select: all; */
         overflow: auto; 
         vertical-align: middle;
       }
@@ -222,6 +222,22 @@
   </script>
 </polymer-element>
 
+<polymer-element name="tk-json-editor" extends="tk-text-editor">
+  <template>
+    <shadow></shadow>
+  </template>
+  <script>
+    Polymer('tk-json-editor', {
+      workingValueChanged: function() {
+        this.$.input.textContent = JSON.stringify(this.workingValue);
+      },
+      format: function(value) {
+        return JSON.parse(this.workingValue);
+      }
+    });
+  </script>
+</polymer-element>
+
 <polymer-element name="tk-range-editor" extends="tk-abstract-editor" attributes="min max step defaultValue">
   <template>
     <style>
diff --git a/Sandbox/lib/tk-property-inspector.html b/Sandbox/lib/tk-property-inspector.html
index b47091e..fe463d0 100755
--- a/Sandbox/lib/tk-property-inspector.html
+++ b/Sandbox/lib/tk-property-inspector.html
@@ -71,6 +71,7 @@
         'select': 'tk-select-editor',
         'color': 'tk-color-editor',
         'text': 'tk-text-editor',
+        'json': 'tk-json-editor',
         'id-select': 'tk-id-select-editor',
         'target-select': 'tk-target-select-editor',
         'speech': 'tk-speech-editor',
diff --git a/Sandbox/metadata.html b/Sandbox/metadata.html
index b4934e6..3cee255 100755
--- a/Sandbox/metadata.html
+++ b/Sandbox/metadata.html
@@ -1,3 +1,10 @@
+<tk-meta id="polymer-grid-layout" label="Grid Layout">
+  <template>
+    <polymer-grid-layout></polymer-grid-layout>
+  </template>
+  <property name="layout" kind="json"></property>
+</tk-meta>
+
 <tk-meta id="g-icon-button" label="Icon Button">
   <template>
     <g-icon-button src="images/mail.png"></g-icon-button>