Merge pull request #52 from frankiefu/master

updated components for the new changes in g-component

Author: Steve Orvell

src/g-icon-button.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-icon-button" attributes="src, active">
+<element name="g-icon-button" attributes="src active">
   <link rel="components" href="g-icon.html">
   <template>
     <style>
@@ -15,16 +15,13 @@
         width: 40px;
         height: 40px;
         border: 1px solid transparent;
-        padding: 9px;
-        background: inherit;
+        padding: 3px;
         cursor: pointer;
-        -webkit-transition: none;
       }
 
       @host:hover, @host.selected {
         border: 1px solid rgba(0,0,0,0.16);
         border-radius: 3px;
-        background: inherit;
         opacity: 0.8;
       }
 

src/g-icon.html

@@ -17,18 +17,17 @@
       }
 
       #icon {
-        width: 21px;
-        height: 21px;
+        width: 32px;
+        height: 32px;
         cursor: pointer;
         background: no-repeat center;
-        background-size: contain;
       }
     </style>
     <div id="icon" style="background-image:url({{src}})"></div>
   </template>
   <script>    
     /**
-     * g-icon is a 21x21 glyph expressed as a background-image.
+     * g-icon is a 32x32 glyph expressed as a background-image.
      * @module g-icon
      */
     this.component();

src/g-menu-button.html

@@ -11,7 +11,7 @@
   <link rel="components" href="g-overlay.html">
   <link rel="components" href="g-menu.html"/>
   <template>
-    <g-icon-button id="button" on-click="toggle" src="{{src}}"></g-icon-button>
+    <g-icon-button id="button" on-click="toggle" src="{{src}}" active="{{opened}}"></g-icon-button>
     <g-overlay id="overlay" class="slideup" opened="{{opened}}">
       <div class="arrow-border"></div>
       <div class="arrow"></div>
@@ -26,8 +26,7 @@
       publish: {
         //* Toggle the opened state of the dropdown.
         toggle: function() {
-          this.$.overlay.toggle();
-          this.$.button.active = this.$.overlay.opened;
+          this.opened = !this.opened;
         },
         //* Returns the selected item.
         get selection() {

src/g-menu-item.html

@@ -12,7 +12,7 @@
       @host {
         display: block;
         box-sizing: border-box;
-        padding: 11px 10px;
+        padding: 8px 10px;
         margin: 10px;
         border: 1px solid transparent;
         border-radius: 3px;

src/g-panels.html

@@ -6,7 +6,7 @@
  */
 -->
 <element name="g-panels" attributes="transition, selected, index" 
-         handlers="keydown: keydownHandler">
+         on-keydown="keydownHandler">
 <link rel="components" href="g-component.html">
 <link rel="components" href="panel-transitions/g-panel-transition.html">
 <link rel="components" href="panel-transitions/g-keyframe-panel-transition.html">

src/g-ratings.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-ratings" attributes="count, value">
+<element name="g-ratings" attributes="count value">
   <link rel="components" href="g-component.html">
   <template>
     <style>
@@ -21,9 +21,14 @@
         background: url('images/star_full.svg') center no-repeat;
       }
     </style>
-    <template iterate="stars">
-      <span index="{{index}}" class="star {{starClass}}" on-click="starClick"></span>
-    </template>
+    <!-- FIXME(ffu): in MDV polyfill, setting a model on a template element does
+    not cause the children to have the proper model. Workaround here to add a div
+    at the top-level. -->
+    <div>
+      <template iterate="stars">
+        <span index="{{index}}" class="star {{starClass}}" on-click="starClick"></span>
+      </template>
+    </div>
   </template>
   <script>
     this.component({
@@ -42,8 +47,8 @@
           s.starClass = i < this.value ? 'full' : '';
         }.bind(this));
       },
-      starClick: function(e) {
-        var s = e.currentTarget.model;
+      starClick: function(inEvent, inDetail, inSender) {
+        var s = inSender.model;
         this.node.value = s.index + (s.starClass == 'full' ? 0 : 1);
       }
     });

src/g-tabs.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-tabs" extends="g-selector" attributes="selected multi vertical" on-click="clickHandler">
+<element name="g-tabs" extends="g-selector" attributes="selected multi vertical">
   <link rel="components" href="g-selector.html">
   <template>
     <style>