Merge pull request #16 from PolymerElements/polish

Polish

bower.json

@@ -7,10 +7,12 @@
     "iron-doc-viewer": "PolymerElements/iron-doc-viewer#^0.9.0",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^0.9.0",
     "paper-toolbar": "PolymerElements/paper-toolbar#^0.9.0",
+    "iron-ajax": "PolymerElements/iron-ajax#^0.9.0",
     "hydrolysis": "Polymer/hydrolysis#^1.10",
     "paper-header-panel": "PolymerElements/paper-header-panel#^0.9.0",
     "iron-icons": "PolymerElements/iron-icons#^0.9.0",
-    "iron-selector": "PolymerElements/iron-selector#^0.9.0"
+    "iron-selector": "PolymerElements/iron-selector#^0.9.0",
+    "paper-styles": "PolymerElements/paper-styles#^0.9.0"
   },
   "devDependencies": {
     "test-fixture": "PolymerElements/test-fixture#^0.9.0",

demo/json-descriptor.json

@@ -0,0 +1 @@
+{"elements":[{"type":"element","desc":"Renders documentation describing an element's API.\n\n`iron-doc-viewer` renders element and behavior descriptions as extracted by\n[Hydrolysis](https://github.com/PolymerLabs/hydrolysis). You can provide them\neither via binding...\n\n    <iron-doc-viewer descriptor=\"{{elementDescriptor}}\"></iron-doc-viewer>\n\n...or by placing the element descriptor in JSON as the text content of an\n`iron-doc-viewer`:\n\n    <iron-doc-viewer>\n      {\n        \"is\": \"awesome-sauce\",\n        \"properties\": [\n          {\"name\": \"isAwesome\", \"type\": \"boolean\", \"desc\": \"Is it awesome?\"},\n        ]\n      }\n    </iron-doc-viewer>\n\nHowever, be aware that due to current limitations in Polymer 0.8, _changes_ to\nthe text content will not be respected, only the initial value will be loaded.\nIf you wish to update the documented element, please set it via the `descriptor`\nproperty.\n","events":[],"properties":[{"name":"descriptor","type":"hydrolysis.ElementDescriptor","desc":"The [Hydrolysis](https://github.com/PolymerLabs/hydrolysis)-generated\nelement descriptor to display details for.\n\nAlternatively, the element descriptor can be provided as JSON via the text content\nof this element.\n","published":true},{"name":"_collapsedChanged","type":"Function","params":[],"private":true,"function":true},{"name":"_descriptorChanged","type":"Function","desc":"Converts `descriptor` into our template-friendly `_model`. ","params":[],"private":true,"function":true},{"name":"_loadJson","type":"Function","desc":"Loads a hydrolysis element descriptor (as JSON) from the text content of\nthis element, if present.\n","params":[],"private":true,"function":true,"return":{"type":"hydrolysis.ElementDescriptor","desc":"parsed descriptor, or `null`.\n     "}},{"name":"_noneToShow","type":"Function","params":[{"name":"showPrivate"},{"name":"items"}],"private":true,"function":true},{"name":"_privateToggleLabel","type":"string","desc":"The label to show for the Private API toggle. ","published":true,"private":true},{"name":"_showPrivate","type":"Boolean","desc":"Whether private properties should be hidden or shown. ","published":true,"default":false,"private":true},{"name":"_showPrivateChanged","type":"Function","params":[],"private":true,"function":true},{"name":"_toggleCollapsed","type":"Function","params":[],"private":true,"function":true},{"name":"_togglePrivate","type":"Function","params":[],"private":true,"function":true},{"name":"ready","type":"Function","params":[],"private":true,"configuration":true,"function":true}],"is":"iron-doc-viewer","jsdoc":{"tags":[{"tag":"demo","type":null,"name":"demo/index.html","body":"Basic Demo\n"}]},"demos":[{"desc":"Basic Demo\n","path":"demo/index.html"}]},{"type":"element","desc":"Renders documentation describing a specific property of an element.\n\nGive it a hydrolysis `PropertyDescriptor` (via `descriptor`), and watch it go!\n","events":[],"properties":[{"name":"collapsed","type":"Boolean","desc":"Whether the property should show a one-liner, or full summary.\n\nNote that this property _is_ reflected as an attribute, but we perform\nthe reflection manually. In order to support the CSS transitions, we\nmust calculate the element height before setting the attribute.\n      ","published":true,"default":false},{"name":"descriptor","type":"hydrolysis.PropertyDescriptor","desc":"The [Hydrolysis](https://github.com/PolymerLabs/hydrolysis)-generated\nelement descriptor to display details for.\n\nAlternatively, the element descriptor can be provided as JSON via the text content\nof this element.\n","published":true},{"name":"_collapsedChanged","type":"Function","desc":"Reflects `collapsed` as the `_collapsed` attribute.\n\n\"Why not use `reflectToAttribute: true`?\", you ask? A fine question!\n\nWe avoid simple reflection purely because there is no purely declarative\nway of transitioning to/from `height: auto`. This callback manages\nsetting explicit heights for the property so that CSS can interpolate it.\n","params":[],"jsdoc":{"tags":[{"tag":"see","type":null,"name":"#_onTransitionEnd","body":null}]},"private":true,"function":true},{"name":"_computeHideMeta","type":"Function","params":[{"name":"descriptor"}],"private":true,"function":true},{"name":"_computeHideParams","type":"Function","params":[{"name":"descriptor"}],"private":true,"function":true},{"name":"_descriptorChanged","type":"Function","params":[],"private":true,"function":true},{"name":"_onTransitionEnd","type":"Function","desc":"Resets any state that was set up for transitions.\n\nWe are careful to reset our explicit heights after a transition\ncompletes, so that the property doesn't clip values if the user resizes\ntheir viewport.\n    ","params":[{"name":"event"}],"private":true,"function":true},{"name":"listeners","type":"Object","private":true,"configuration":true},{"name":"ready","type":"Function","params":[],"private":true,"configuration":true,"function":true}],"is":"iron-doc-property","demos":[]}],"elementsByTagName":{"iron-doc-viewer":{"type":"element","desc":"Renders documentation describing an element's API.\n\n`iron-doc-viewer` renders element and behavior descriptions as extracted by\n[Hydrolysis](https://github.com/PolymerLabs/hydrolysis). You can provide them\neither via binding...\n\n    <iron-doc-viewer descriptor=\"{{elementDescriptor}}\"></iron-doc-viewer>\n\n...or by placing the element descriptor in JSON as the text content of an\n`iron-doc-viewer`:\n\n    <iron-doc-viewer>\n      {\n        \"is\": \"awesome-sauce\",\n        \"properties\": [\n          {\"name\": \"isAwesome\", \"type\": \"boolean\", \"desc\": \"Is it awesome?\"},\n        ]\n      }\n    </iron-doc-viewer>\n\nHowever, be aware that due to current limitations in Polymer 0.8, _changes_ to\nthe text content will not be respected, only the initial value will be loaded.\nIf you wish to update the documented element, please set it via the `descriptor`\nproperty.\n","events":[],"properties":[{"name":"descriptor","type":"hydrolysis.ElementDescriptor","desc":"The [Hydrolysis](https://github.com/PolymerLabs/hydrolysis)-generated\nelement descriptor to display details for.\n\nAlternatively, the element descriptor can be provided as JSON via the text content\nof this element.\n","published":true},{"name":"_collapsedChanged","type":"Function","params":[],"private":true,"function":true},{"name":"_descriptorChanged","type":"Function","desc":"Converts `descriptor` into our template-friendly `_model`. ","params":[],"private":true,"function":true},{"name":"_loadJson","type":"Function","desc":"Loads a hydrolysis element descriptor (as JSON) from the text content of\nthis element, if present.\n","params":[],"private":true,"function":true,"return":{"type":"hydrolysis.ElementDescriptor","desc":"parsed descriptor, or `null`.\n     "}},{"name":"_noneToShow","type":"Function","params":[{"name":"showPrivate"},{"name":"items"}],"private":true,"function":true},{"name":"_privateToggleLabel","type":"string","desc":"The label to show for the Private API toggle. ","published":true,"private":true},{"name":"_showPrivate","type":"Boolean","desc":"Whether private properties should be hidden or shown. ","published":true,"default":false,"private":true},{"name":"_showPrivateChanged","type":"Function","params":[],"private":true,"function":true},{"name":"_toggleCollapsed","type":"Function","params":[],"private":true,"function":true},{"name":"_togglePrivate","type":"Function","params":[],"private":true,"function":true},{"name":"ready","type":"Function","params":[],"private":true,"configuration":true,"function":true}],"is":"iron-doc-viewer","jsdoc":{"tags":[{"tag":"demo","type":null,"name":"demo/index.html","body":"Basic Demo\n"}]},"demos":[{"desc":"Basic Demo\n","path":"demo/index.html"}]},"iron-doc-property":{"type":"element","desc":"Renders documentation describing a specific property of an element.\n\nGive it a hydrolysis `PropertyDescriptor` (via `descriptor`), and watch it go!\n","events":[],"properties":[{"name":"collapsed","type":"Boolean","desc":"Whether the property should show a one-liner, or full summary.\n\nNote that this property _is_ reflected as an attribute, but we perform\nthe reflection manually. In order to support the CSS transitions, we\nmust calculate the element height before setting the attribute.\n      ","published":true,"default":false},{"name":"descriptor","type":"hydrolysis.PropertyDescriptor","desc":"The [Hydrolysis](https://github.com/PolymerLabs/hydrolysis)-generated\nelement descriptor to display details for.\n\nAlternatively, the element descriptor can be provided as JSON via the text content\nof this element.\n","published":true},{"name":"_collapsedChanged","type":"Function","desc":"Reflects `collapsed` as the `_collapsed` attribute.\n\n\"Why not use `reflectToAttribute: true`?\", you ask? A fine question!\n\nWe avoid simple reflection purely because there is no purely declarative\nway of transitioning to/from `height: auto`. This callback manages\nsetting explicit heights for the property so that CSS can interpolate it.\n","params":[],"jsdoc":{"tags":[{"tag":"see","type":null,"name":"#_onTransitionEnd","body":null}]},"private":true,"function":true},{"name":"_computeHideMeta","type":"Function","params":[{"name":"descriptor"}],"private":true,"function":true},{"name":"_computeHideParams","type":"Function","params":[{"name":"descriptor"}],"private":true,"function":true},{"name":"_descriptorChanged","type":"Function","params":[],"private":true,"function":true},{"name":"_onTransitionEnd","type":"Function","desc":"Resets any state that was set up for transitions.\n\nWe are careful to reset our explicit heights after a transition\ncompletes, so that the property doesn't clip values if the user resizes\ntheir viewport.\n    ","params":[{"name":"event"}],"private":true,"function":true},{"name":"listeners","type":"Object","private":true,"configuration":true},{"name":"ready","type":"Function","params":[],"private":true,"configuration":true,"function":true}],"is":"iron-doc-property","demos":[]}},"behaviors":[],"features":[]}

iron-component-page.css

@@ -0,0 +1,146 @@
+:host {
+  font-family: 'Roboto', 'Noto', sans-serif;
+  @apply(--layout-fit);
+  @apply(--layout);
+  @apply(--layout-vertical);
+  overflow: hidden;
+  background: var(--paper-grey-50);
+}
+
+p {
+  max-width: 20em;
+}
+
+paper-header-panel {
+  @apply(--layout-flex);
+  background: var(--paper-grey-50);
+}
+
+paper-toolbar {
+  --paper-toolbar-background: var(--paper-grey-50);
+  --paper-toolbar-color: var(--paper-grey-800);
+  flex-shrink: 0;
+}
+
+:host > paper-header-panel {
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+:host(.loaded) > paper-header-panel {
+  opacity: 1.0;
+}
+
+#content {
+  display: block;
+  background: var(--paper-grey-50);
+  padding: 20px;
+}
+
+paper-toolbar a {
+  margin: 0 10px;
+  cursor: pointer;
+}
+
+paper-toolbar a:last-child {
+  margin-right: 0;
+}
+
+paper-toolbar a, paper-toolbar a iron-icon {
+  font-weight: normal;
+  color: var(--paper-grey-500);
+}
+
+paper-toolbar iron-icon {
+  margin: -2px 5px 0 0;
+}
+
+paper-toolbar a:hover, paper-toolbar a:hover iron-icon, paper-toolbar a.iron-selected, paper-toolbar a.iron-selected iron-icon {
+  color: var(--paper-grey-800);
+}
+
+#view, #docs, #demo {
+  @apply(--layout-fit);
+}
+
+#nodocs {
+  background: var(--paper-grey-50);
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--paper-grey-400);
+}
+
+#demo {
+  border: 0;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+  overflow-x: none;
+  overflow-y: auto;
+}
+
+#view > * {
+  display: none;
+}
+
+#view > .iron-selected {
+  display: block;
+}
+
+#docs {
+  padding: 20px;
+  max-width: 48em;
+  margin: 0 auto;
+}
+
+#active {
+  font-size: 20px;
+  font-family: Roboto, Noto;
+  border: 0;
+  background: transparent;
+}
+
+paper-toolbar a {
+  font-size: 14px;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+#cart-icon {
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+#catalog-heading {
+  margin: 4px 0 18px;
+}
+
+#catalog-heading h2 {
+  color: var(--paper-grey-800);
+  @apply(--paper-font-title);
+  margin: 0;
+}
+
+#catalog-heading .version {
+  color: var(--paper-grey-500);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 400;
+}
+#catalog-heading .version:before {
+  content: "(";
+}
+#catalog-heading .version:after {
+  content: ")";
+}
+
+[catalog-only] {
+  display: none;
+}
+
+:host([_catalog]) [catalog-only] {
+  display: block;
+}
+:host([_catalog]) [catalog-hidden] {
+  display: none;
+}