add tabs to separate propertes and styles in the inspector

Polymer · Apr 7, 2014 · 42def6c · 42def6c
1 parent 366410f
commit 42def6c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
diff --git a/elements/x-inspector/x-inspector.css b/elements/x-inspector/x-inspector.css
@@ -30,12 +30,29 @@ license that can be found in the LICENSE file.
   float: right;
 }
 
-#interior {
-  position: absolute;
-  top: 62px;
-  right: 0;
-  bottom: 0;
-  left: 0;
+#tabs {
+  padding: 10px 10px 0;
+  border-bottom: 1px solid #ccc;
+}
+
+#tabs > * {
+  display: inline-block;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-radius: 3px 3px 0 0;
+}
+
+#tabs > .core-selected {
+  border-color: #ccc;
+  background-color: #eee;
+}
+
+#interior > * {
   padding: 8px;
   overflow-x: hidden;
   overflow-y: auto;

diff --git a/elements/x-inspector/x-inspector.html b/elements/x-inspector/x-inspector.html
@@ -45,6 +45,8 @@
   <template>
 
     <link rel="stylesheet" href="x-inspector.css">
+
+    <core-layout flow="v"></core-layout>
 
     <div id="header" theme="polymer-ui-light-theme">
 
@@ -61,19 +63,27 @@
 
     </div>
 
-    <div id="interior">
-      <template repeat="{{properties}}">
-        <x-property-inspector property="{{}}" hidden="{{meta.hidden}}"></x-property-inspector>
-      </template>
+    <core-selector id="tabs" selected="{{selected}}">
+      <span>Properties</span>
+      <span>Styles</span>
+    </core-selector>
+
+    <core-pages id="interior" core-flex selected="{{selected}}">
+      <div>
+        <template repeat="{{properties}}">
+          <x-property-inspector property="{{}}" hidden="{{meta.hidden}}"></x-property-inspector>
+        </template>
+      </div>
       <x-style-inspector sourceElement="{{sourceElement}}"></x-style-inspector>
-    </div>
+    </core-pages>
 
     <x-meta id="meta"></x-meta>
 
   </template>
   <script>
 
     Polymer('x-inspector', {
+      selected: 0,
       sourceElement: null,
       properties: null,
       crumbs: [],