Adds noToolbar, noArrows, noHighlight properties

- turns off most styling when <google-codelab theme="minimal"> is used
parachain-tracker · Jan 30, 2016 · c4bbdb9 · c4bbdb9
1 parent b4a5829
commit c4bbdb9
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 86 deletions.
diff --git a/codelab-style.html b/codelab-style.html
@@ -55,6 +55,7 @@
 
 paper-toolbar {
   background: var(--google-codelab-header-background, --paper-blue-600);
+  color: #fff;
 }
 
 paper-toolbar .title {
@@ -71,21 +72,15 @@
   flex-shrink: 0;
 }
 
-h1 {
-  font-size: 22px;
-  font-weight: 300;
-  line-height: 1em;
-  color: white;
-  padding: 0;
-  margin: 0.67em 8px;
+/* override external styles */
+:host([theme="minimal"]) #resumeDialog > * {
+  margin-top: 20px;
+  padding: 0 24px;
 }
 
-#countdown {
-  text-align: right;
-  vertical-align: bottom;
-  font-weight: 400;
-  min-width: 80px;
-  color: white;
+:host([theme="minimal"]) #resumeDialog .buttons {
+  padding: 8px 8px 8px 24px;
+  margin: 0;
 }
 
 #countdown iron-icon {
@@ -118,7 +113,7 @@
 }
 
 .navbutton.prevbutton[disabled] {
-  background: var(--google-codelab-fab-background, );
+  background: var(--google-codelab-fab-background);
   color: white;
   transform: scale(0);
 }
@@ -133,6 +128,7 @@
   overflow: hidden;
   border-radius: 4px;
   padding: 6px 16px;
+  box-sizing: content-box; /* override users that set * selector box-sizing. */
 }
 
 .toc-item i {
@@ -196,11 +192,19 @@
 
 #metadata {
   color: var(--google-codelab-footer-text-color, #777);
-  font-size: 0.9em;
+  font-size: 0.7em;
+}
+
+:host(:not([theme="minimal"])) #metadata {
+  position: fixed;
+  bottom: 8px;
+  background-color: var(--paper-grey-100);
+  padding: 4px 8px;
 }
 
 #feedback a {
   color: currentcolor;
+  text-decoration: underline;
 }
 
 @media (min-width: 641px) {

diff --git a/demo/codelab.html b/demo/codelab.html
@@ -21,9 +21,16 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>codelab demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+  <link rel="stylesheet"
+      href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700">
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../google-codelab-elements.html">
+  <style>
+  body {
+    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
+  }
+  </style>
 </head>
 <body unresolved class="fullbleed">
 

diff --git a/demo/embed.html b/demo/embed.html
@@ -20,19 +20,17 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>Embeddable codelab demo</title>
+  <link rel="stylesheet"
+      href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700|Material+Icons">
+  <link rel="stylesheet"
+      href="https://developers.google.com/_static/80c6b067d5/css/devsite-google-blue.css">
+  <link rel="stylesheet" href="https://developers.google.com/maps/styles/common.css">
+
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../google-codelab-elements.html">
   <style is="custom-style">
-    html, body {
-      height: 100%;
-    }
-    body {
-      padding: 40px;
-      color: #212121;
-      font: 400 16px/24px Roboto,sans-serif;
-    }
     #container {
       display: flex;
       justify-content: center;
@@ -41,15 +39,11 @@
       margin: 0 auto;
     }
     google-codelab {
-      height: 600px;
+      height: 700px;
       /*background-color: #eee;*/
     }
-    h1, h2 {
-      font-weight: inherit;
-    }
     :root {
       --google-codelab-background: transparent;
-      --google-codelab-step-background: transparent;
 
       /* Other customizations */
       /*--google-codelab-step-link-color: initial;*/
@@ -70,8 +64,10 @@ <h1>Codelabs  > Build Google Maps Using Web Components & No Code!</h1>
                   title="Build Google Maps Using Web Components & No Code!"
                   feedback-link="https://github.com/googlecodelabs"
                   environment="web"
-                  hide-toolbar
-                  last-updated="2015-01-28">
+                  last-updated="2015-01-28"
+                  no-toolbar
+                  no-arrows
+                  no-highlight>
 
     <google-codelab-step label="Overview" duration="2">
 

diff --git a/google-codelab-step.html b/google-codelab-step.html
@@ -122,6 +122,13 @@ <h2 id="title"><span>{{step}}</span>. <span>{{label}}</span></h2>
       _isHighlighted: false,
 
       _activeChanged: function() {
+        var codelab = Polymer.dom(this).parentNode;
+
+        // Don't syntax highlight code if google-codelab requests it.
+        if (codelab.localName === 'google-codelab' && codelab.noHighlight) {
+          return;
+        }
+
         if (this.active && !this._isHighlighted) {
 
           // Minimize jank by waiting one click to do syntax highlighting.

diff --git a/google-codelab.html b/google-codelab.html
@@ -33,7 +33,6 @@
 <link rel="import" href="../paper-menu/paper-menu.html">
 <link rel="import" href="../paper-item/paper-item.html">
 
-<link rel="import" href="shared-style.html">
 <link rel="import" href="layout-style.html">
 <link rel="import" href="codelab-style.html">
 <link rel="import" href="analytics-behavior.html">
@@ -44,7 +43,8 @@
 
 Example:
 
-    <google-codelab title="Awesome codelab" feedback-link="http://example.org">
+    <google-codelab title="Awesome codelab" feedback-link="http://example.org"
+                    last-updated="2015-01-28">
       <google-codelab-step label="One" step="1" duration="10">
         ...
       </google-codelab-step>
@@ -53,12 +53,18 @@
       </google-codelab-step>
     </google-codelab>
 
+The element can also be used in a minimalistic mode where less styling is
+applied. Use the `theme="minimal"` attribute and combine with the
+`noToolbar`, `noArrows`, and `noHighlight` properties to turn off the top nav and
+prevent syntax highlighting code blocks, respectively:
+
+    <google-codelab theme="minimal" no-toolbar no-arrows no-highlight>
+
 @demo demo/codelab.html
 @demo demo/embed.html
 -->
 <dom-module id="google-codelab">
   <template strip-whitespace>
-    <style include="shared-style"></style>
     <style include="layout-style"></style>
     <style include="codelab-style"></style>
 
@@ -95,7 +101,7 @@
       </div>
 
       <paper-scroll-header-panel id="headerpanel" fixed main>
-        <paper-toolbar hidden$="[[hideToolbar]]">
+        <paper-toolbar hidden$="[[noToolbar]]">
           <template is="dom-if" if="{{_narrow}}" strip-whitespace>
             <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
           </template>
@@ -119,7 +125,7 @@ <h1 class="title">{{title}}</h1>
 
     </paper-drawer-panel>
 
-    <footer id="controls">
+    <footer id="controls" hidden$="[[noArrows]]">
       <div class="fabs layout horizontal justified">
         <paper-fab raised class="navbutton prevbutton" icon="chevron-left"
           on-tap="selectPrevious"
@@ -268,10 +274,26 @@ <h2>Would you like to resume where you left off?</h2>
           value: null
         },
 
+        /**
+         * Hides the topnav toolbar.
+         */
+        noToolbar: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * Hides the forward/background navigation arrows.
+         */
+        noArrows: {
+          type: Boolean,
+          value: false
+        },
+
         /**
          * Property determines whether the toolbar is hidden.
          */
-        hideToolbar: {
+        noHighlight: {
           type: Boolean,
           value: false,
           reflectToAttribute: true

diff --git a/shared-style.html b/shared-style.html
@@ -1,5 +1,5 @@
 <!--
-Copyright (c) 2015 Google Inc.
+Copyright (c) 2016 Google Inc.
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not
 use this file except in compliance with the License. You may obtain a copy of
@@ -22,25 +22,6 @@
         --paper-radio-button-checked-ink-color: #4285f4;
         --paper-radio-button-checked-color: #4285f4;
         --paper-radio-button-unchecked-color: #4285f4;
-
-        --text-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
-        --text-font-size: 14px;
-        --text-font-weight: 200;
-      }
-
-      /* Components' shared styles */
-      :host {
-        font-family: var(--text-font-family);
-        font-size: var(--text-font-size);
-        font-weight: var(--text-font-weight);
-      }
-
-      /* Document styles */
-      /* TODO: Consider moving to site and preview projects. */
-      body {
-        font-family: var(--text-font-family);
-        font-size: var(--text-font-size);
-        font-weight: var(--text-font-weight);
       }
     </style>
   </template>