use core-* elements

Polymer · Apr 6, 2014 · 3e6378a · 3e6378a
1 parent c2c2790
commit 3e6378a
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 259 deletions.
diff --git a/bower.json b/bower.json
@@ -5,6 +5,7 @@
     "platform": "Polymer/platform#master",
     "code-mirror": "Polymer/code-mirror#master",
     "github-elements": "PolymerLabs/github-elements#master",
+    "x-meta": "PolymerLabs/x-meta#master",
     "polymer-elements": "Polymer/polymer-elements#master",
     "polymer-ui-elements": "Polymer/polymer-ui-elements#master",
     "more-elements": "Polymer/more-elements#master"

diff --git a/elements/designer-element/designer-element.css b/elements/designer-element/designer-element.css
@@ -0,0 +1,30 @@
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+#viewSelector {
+  padding: 4px;
+  background: #E0E0E0;
+  border-radius: 2px;
+  margin-left: 8px;
+}
+
+#inspector {
+  position: relative;
+  width: 350px;
+  border-left: 1px solid silver;
+  transition: width 0.3s;
+  box-shadow: -5px 0 8px rgba(0, 0, 0, 0.14);
+}
+
+#inspector.maximized {
+  width: 0;
+  border: 0;
+}
+
+#frameContainer {
+  height: 100%;
+  z-index: 0;
+}
diff --git a/elements/designer-element/designer-element.html b/elements/designer-element/designer-element.html
@@ -1,94 +1,60 @@
-<link rel="import" href="../../components/polymer-layout/polymer-layout.html">
-<link rel="import" href="../../components/polymer-flex-layout/polymer-flex-layout.html">
-<link rel="import" href="../../components/polymer-ui-toolbar/polymer-ui-toolbar.html">
-<link rel="import" href="../../components/polymer-ui-icon-button/polymer-ui-icon-button.html">
+<link rel="import" href="../../components/core-selector/core-selector.html">
+<link rel="import" href="../../components/core-layout/core-layout.html">
+<link rel="import" href="../../components/core-pages/core-pages.html">
+
+<link rel="import" href="../../components/paper-appbar/paper-appbar.html">
+<link rel="import" href="../../components/paper-icon-button/paper-icon-button.html">
 
 <link rel="import" href="../../components/code-mirror/code-mirror.html">
 <link rel="import" href="../../components/github-elements/github-elements.html">
 
 <link rel="import" href="../x-dom-serializer/x-dom-serializer.html">
-
 <link rel="import" href="../x-inspector/x-inspector.html">
 <link rel="import" href="../x-file-document/x-file-document.html">
 
 <polymer-element name="designer-element">
 <template>
 
-  <style>
-
-    iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-    }
-
-    #viewSelector {
-      padding: 4px;
-      background: #E0E0E0;
-      border-radius: 2px;
-      margin-left: 8px;
-    }
+  <link rel="stylesheet" href="designer-element.css">
 
-    #inspector {
-      position: relative;
-      width: 350px;
-      border-left: 1px solid silver;
-      transition: width 0.3s;
-      box-shadow: -5px 0 8px rgba(0, 0, 0, 0.14);
-    }
+  <core-layout flow="v"></core-layout>
 
-    #inspector.maximized {
-      width: 0;
-      border: 0;
-    }
-
-    #frameContainer {
-      height: 100%;
-      z-index: 0;
-    }
+  <paper-appbar id="appbar" theme="paper-light-theme">
 
-  </style>
+    <paper-icon-button icon="maximize" on-tap="{{fullscreenAction}}"></paper-icon-button>
 
-  <polymer-layout vertical></polymer-layout>
-
-  <polymer-ui-toolbar id="appbar" theme="polymer-ui-light-theme">
-
-    <polymer-ui-icon-button icon="maximize" on-tap="{{fullscreenAction}}"></polymer-ui-icon-button>
-
-    <polymer-selector id="viewSelector" selected="{{selected}}">
-      <polymer-ui-icon-button src="assets/design.png" name="design"></polymer-ui-icon-button>
-      <polymer-ui-icon-button src="assets/code.png" name="code"></polymer-ui-icon-button>
-    </polymer-selector>
+    <core-selector id="viewSelector" selected="{{selected}}">
+      <paper-icon-button src="assets/design.png" name="design"></paper-icon-button>
+      <paper-icon-button src="assets/code.png" name="code"></paper-icon-button>
+    </core-selector>
 
     <span style="padding-right: 24px;"></span>
 
-    <polymer-ui-icon-button icon="add" on-tap="{{saveAction}}"></polymer-ui-icon-button>
+    <paper-icon-button icon="add" on-tap="{{saveAction}}"></paper-icon-button>
     <!-- shareAction has to be triggered from on-click to allow opening a tab (otherwise can only open a floating window) -->
-    <polymer-ui-icon-button icon="shortcut" on-click="{{shareAction}}"></polymer-ui-icon-button>
+    <paper-icon-button icon="shortcut" on-click="{{shareAction}}"></paper-icon-button>
 
     <span style="padding-right: 16px;"></span>
 
-    <polymer-ui-icon-button icon="left" on-tap="{{promoteElement}}"></polymer-ui-icon-button>
-    <polymer-ui-icon-button icon="right" on-tap="{{demoteElement}}"></polymer-ui-icon-button>
+    <paper-icon-button icon="left" on-tap="{{promoteElement}}"></paper-icon-button>
+    <paper-icon-button icon="right" on-tap="{{demoteElement}}"></paper-icon-button>
 
-  </polymer-ui-toolbar>
+  </paper-appbar>
 
-  <polymer-ui-pages flex selected="{{selected}}">
+  <core-pages core-flex selected="{{selected}}">
 
-    <section name="design">
-      <polymer-flex-layout></polymer-flex-layout>
-      <div id="frameContainer" flex>
+    <core-layout name="design">
+      <div id="frameContainer" core-flex>
         <iframe id="frame" src="designer.html"></iframe>
       </div>
       <x-inspector id="inspector" on-delete-element="{{deleteElement}}" on-parent-element="{{selectParentElement}}" on-bind-property="{{applyPropertyBinding}}"></x-inspector>
-    </section>
+    </core-layout>
 
-    <section name="code">
-      <polymer-layout></polymer-layout>
-      <code-mirror id="code" flex></code-mirror>
-    </section>
+    <core-layout name="code">
+      <code-mirror id="code" core-flex></code-mirror>
+    </core-layout>
 
-  </polymer-ui-pages>
+  </core-pages>
 
   <x-dom-serializer id="serializer"></x-dom-serializer>
 
@@ -133,24 +99,26 @@
     },
 
     designerReady: function(event) {
-      //console.log('designerReady');
       this.designer = event.target;
-      this.designer.loadLinks(window.metadata, function() {
-        if (this.firstLoad) {
-          this.firstLoad = false;
-          this.loadRemoteContent();
-          return;
-        }
-        if (this.pendingHtml) {
-          this.loadHtml(this.pendingHtml);
-          this.pendingHtml = null;
-        } else {
-          var tag = Platform.flags.element;
-          if (tag) {
-            this.designer.createElement(tag);
-          }
+      // crosses iframe boundary
+      this.designer.import(window.metadata, this.importsLoaded.bind(this));
+    },
+
+    importsLoaded: function() {
+      if (this.firstLoad) {
+        this.firstLoad = false;
+        this.loadRemoteContent();
+        return;
+      }
+      if (this.pendingHtml) {
+        this.loadHtml(this.pendingHtml);
+        this.pendingHtml = null;
+      } else {
+        var tag = Platform.flags.element;
+        if (tag) {
+          this.designer.createElement(tag);
         }
-      }.bind(this));
+      }
     },
 
     designChange: function(event) {

diff --git a/elements/designer-element/designer.html b/elements/designer-element/designer.html
@@ -7,23 +7,26 @@
   <script>
     window.parent.postMessage('designer-loading', location.href);
   </script>
-  
+
   <link rel="import" href="../x-designer/x-designer.html">
 
   <style>
+
     body {
       font-size: 12px;
       font-family: 'Helvetica Neue', Helvetica, Roboto, Arial;
       overflow: hidden;
     }
+
     x-designer {
       -webkit-transform: translateZ(0);
       transform: translateZ(0);
     }
+
   </style>
 
 </head>
-<body>
+<body unresolved>
 
   <x-designer></x-designer>
 

diff --git a/elements/x-designer/x-designer.html b/elements/x-designer/x-designer.html
@@ -1,4 +1,3 @@
-<link rel="import" href="../../components/polymer-layout/polymer-layout.html">
 <link rel="import" href="../../components/polymer-flex-layout/polymer-flex-layout.html">
 <link rel="import" href="../../components/polymer-ui-splitter/polymer-ui-splitter.html">
 <link rel="import" href="../x-designable/x-designable.html">
@@ -100,8 +99,11 @@
       }
     },
 
-    loadLinks: function(urls, callback) {
-      Polymer.import(urls, callback);
+    'import': function(urls, callback) {
+      var imports = urls.map(function(u) {
+        return '../' + u;
+      }, this);
+      Polymer.import(imports, callback);
     },
 
     loadHtml: function(html) {

diff --git a/elements/x-meta/x-meta.html b/elements/x-meta/x-meta.html