Merge branch 'master' into stable

googlearchive · Aug 12, 2013 · 80d892b · 80d892b
2 parents 9ea373a + 8f6c848
commit 80d892b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/Sandbox/lib/components.html b/Sandbox/lib/components.html
@@ -3,6 +3,8 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
+<link rel="import" href="../../../polymer-elements/polymer-cookie/polymer-cookie.html" />
+<!-- -->
 <link rel="import" href="../../../toolkit-ui/elements/g-panels.html">
 <link rel="import" href="../../../toolkit-ui/elements/g-tabs.html">
 <link rel="import" href="../../../toolkit-ui/elements/g-ratings.html">

diff --git a/Sandbox/lib/css/tk-app.css b/Sandbox/lib/css/tk-app.css
@@ -27,13 +27,16 @@ input[type=checkbox] {
 
 #main {
   position: absolute;
-  /* top: 101px; */
   top: 61px;
   right: 0;
   bottom: 0;
   left: 0;
 }
 
+#main.banner {
+  top: 101px;
+}
+
 #designer, #source {
   position: absolute;
   top: 0;
@@ -83,7 +86,7 @@ input[type=checkbox] {
   margin: 0 10px;
 }
 
-#not-ide {
+#notide {
   background: #333;
   color: white;
   box-sizing: border-box;
@@ -94,7 +97,11 @@ input[type=checkbox] {
   border-bottom: 1px solid lightgray;
 }
 
-#not-ide a {
+#dismiss {
+  cursor: pointer;
+}
+
+#notide a {
   color: lightblue;
 }
 

diff --git a/Sandbox/lib/tk-app.html b/Sandbox/lib/tk-app.html
@@ -6,7 +6,10 @@
 <polymer-element name="tk-app" on-keyup="keyup" on-design-changed="designChanged" attributes="startMode">
   <template>
     <link rel="stylesheet" href="css/tk-app.css">
-    <!-- <div id="not-ide"><b>Wait, is this an IDE or something?</b> Nope, Sandbox just makes it easy to get a feel for Polymer. It’s more of a convenience and not required to make apps using Polymer. <a href="http://polymer-project.org/faq.html" target="_blank">Read More</a></div> -->
+    <polymer-cookie id="bannerCookie" name="seen_banner" value="{{ seen_banner }}"></polymer-cookie>
+    <div id="notide" hidden?="{{ seen_banner }}"><b>Wait, is this an IDE or something?</b> Nope, Sandbox just makes it easy to get a feel for
+      Polymer. It’s more of a convenience and not required to make apps using Polymer. <a
+        href="http://polymer-project.org/faq.html#sandbox" target="_blank">Read More</a> | <span id="dismiss" on-tap="hideBanner">Dismiss</span></div>
     <g-toolbar>
       <g-selector id="modeSelector" selected="{{selectedMode}}">
         <g-icon-button id="designerIcon" name="designer"></g-icon-button>
@@ -24,7 +27,7 @@
         </g-menu-button>
       </g-toolbar>
     </g-toolbar>
-    <div id="main">
+    <div id="main" class="{{banner: !seen_banner}}">
       <tk-designer id="designer" selected="{{selected}}" designElement="{{designElement}}" maximized="{{maximized}}"></tk-designer>
       <tk-source id="source" fontSize="{{fontSize}}" sourceElement="{{designElement}}" on-source-changed="sourceChanged" on-keydown="sourceKeydown"></tk-source>
       <tk-tools id="tools" selected="{{selected}}" sourceElement="{{designElement}}"
@@ -53,6 +56,9 @@
             'demo' : '';
         }
       },
+      hideBanner: function() {
+        this.seen_banner = true;
+      },
       toggleSize: function() {
         this.maximized = !this.maximized;
       },