Merge pull request #34 from Polymer/mixin

Support @mixin + link to resource
googlearchive · Dec 17, 2014 · 2e351a1 · 2e351a1
2 parents 09cbecb + 57121f4
commit 2e351a1
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 8 deletions.
diff --git a/elements/core-doc-page.css b/elements/core-doc-page.css
@@ -10,6 +10,7 @@
 
 :host {
   display: block;
+  font-family: Roboto;
 }
 
 #info > * {
@@ -34,7 +35,11 @@ h1 {
   color: #E91E63;
   font-size: 52px;
   line-height: 60px;
-  font-weight: inherit;
+  font-weight: 300;
+}
+
+h3 {
+  font-weight: 500;
 }
 
 .box {
@@ -68,6 +73,26 @@ h1 {
   font-weight: 500;
 }
 
+.inheritance {
+  border-bottom: 1px solid #eee;
+  border-top: 1px solid #eee;
+  padding: 16px 0;
+}
+
+.inheritance h3 {
+  margin: 0 10px 0 0;
+}
+
+.inheritance .top > * {
+  margin-right: 7px;
+}
+
+.top b,
+.top strong {
+  text-transform: uppercase;
+  font-size: 14px;
+}
+
 .top pre {
   background-color: rgb(250, 250, 250);
   padding: 16px;

diff --git a/elements/core-doc-page.html b/elements/core-doc-page.html
@@ -15,6 +15,8 @@
 <link rel="import" href="../../prettify-element/prettify-import.html">
 <link rel="import" href="../../context-free-parser/context-free-parser.html">
 
+<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700|Source+Code+Pro' rel='stylesheet' type='text/css'>
+
 <!--
 
 Displays formatted source documentation scraped from input urls.
@@ -43,10 +45,38 @@ <h1>{{data.name}}</h1>
           <span layout horizontal center hidden?="{{!data.version}}"><core-icon icon="info-outline"></core-icon>Version: {{data.version}}</span>
         </p>
 
-        <template if="{{data.extends}}">
-          <section class="top">
-            <h3 id="{{data.name}}.extends">Extends: <a href="#{{data.extends}}">{{data.extends}}</a></h3>
-          </section>
+        <template bind="{{data as data}}" if="{{data.extends || data.mixins}}">
+          <div class="inheritance">
+            <template if="{{data.extends}}">
+              <section class="top extends" layout horizontal center>
+                <h3 id="{{data.name}}.extends">Extends:</h3>
+                <template repeat="{{e, i in data.extends}}">
+                  <div>
+                    <template if="{{e.url}}">
+                      <a href="{{e.url}}">{{e.name}}</a>
+                    </template>
+                    <template if="{{!e.url}}"><a href="#{{e.name}}">{{e.name}}</a></template>
+                    <span hidden?="{{i == data.extends.length - 1}}">,</span>
+                  </div>
+                </template>
+              </section>
+            </template>
+
+            <template if="{{data.mixins}}">
+              <section class="top mixins" layout horizontal center>
+                <h3 id="{{data.name}}.mixins">Mixins:</h3>
+                <template repeat="{{e, i in data.mixins}}">
+                  <div>
+                    <template if="{{e.url}}">
+                      <a href="{{e.url ? e.url : e.name}}">{{e.name}}</a>
+                    </template>
+                    <template if="{{!e.url}}"><span>{{e.name}}</span></template>
+                    <span hidden?="{{i == data.mixins.length - 1}}">,</span>
+                  </div>
+                </template>
+              </section>
+            </template>
+          </div>
         </template>
 
         <template if="{{data.description}}">

diff --git a/elements/core-doc-toc.css b/elements/core-doc-toc.css
@@ -19,9 +19,9 @@ core-header-panel {
   top: 0;
   left: 0;
   height: 100%;
-  width: 100%;
+  width: 100%;
 }
 
-core-toolbar {
-  background-color: #eeeeee;
+core-toolbar {
+  background-color: #eeeeee;
 }