Merge pull request #6 from unicef-polymer/develop

Develop

README.md

@@ -1,12 +1,19 @@
 # \<etools-content-panel\>
 
 A simple panel with header to display a collapsible content.
+The header can also have buttons on the right side on the title (slotted content `slot="panel-btns""`, 
+check first usage example).
 
 ![alt tag](etools-content-panel-demo.png)
 
 ## Usage
 ```html
 <etools-content-panel panel-title="Panel title" show-expand-btn>
+  <div slot="panel-btns">
+    <paper-icon-button icon="add-circle"></paper-icon-button>
+    <paper-icon-button icon="create"></paper-icon-button>
+    <paper-icon-button icon="polymer"></paper-icon-button>
+  </div>
   <div>Your content goes here...</div>
 </etools-content-panel>
 
@@ -53,6 +60,7 @@ Custom property | Description | Default
 `--ecp-disabled-color` | Content disabled color | `#d1d1d1`
 `--epc-toolbar-content` | Mixin applied to toolbar content | `{}`
 `--epc-toolbar` | Mixin applied to paper-toolbar element | `{}`
+`--ecp-header-btns-wrapper` | Mixin appplied to panel header right btns container | `{}`
 
 
 ## Install

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "etools-content-panel",
   "description": "A simple panel with heading to display content in an organized manner. ",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "license": "https://github.com/unicef-polymer/etools-content-panel/blob/master/LICENSE.md",
   "main": "etools-content-panel.html",
   "dependencies": {

demo/index.html

@@ -6,8 +6,17 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
+    <script>
+      window.Polymer = {
+        dom: 'shadow',
+        lazyRegister: true
+      };
+    </script>
+
     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+    <link rel="import" href="../../iron-icons/iron-icons.html">
 
     <link rel="import" href="../etools-content-panel.html">
 
@@ -28,6 +37,11 @@ <h1>etools-content-panel demo</h1>
       <demo-snippet>
         <template>
           <etools-content-panel panel-title="Panel title" show-expand-btn>
+            <div slot="panel-btns">
+              <paper-icon-button icon="add-circle"></paper-icon-button>
+              <paper-icon-button icon="create"></paper-icon-button>
+              <paper-icon-button icon="polymer"></paper-icon-button>
+            </div>
             <div>Your content goes here...</div>
           </etools-content-panel>
 

etools-content-panel.html

@@ -26,6 +26,7 @@
 `--ecp-disabled-color` | Content disabled color | `#d1d1d1`
 `--epc-toolbar-content` | Mixin applied to toolbar content | `{}`
 `--epc-toolbar` | Mixin applied to paper-toolbar element | `{}`
+`--ecp-header-btns-wrapper` | Mixin appplied to panel header right btns container | `{}`
 
 @demo demo/index.html
 -->
@@ -62,6 +63,11 @@
         }
       }
 
+      #panel-btns-wrapper {
+        opacity: 0.8;
+        @apply(--ecp-header-btns-wrapper);
+      }
+
       .disabled paper-toolbar {
         opacity: 0.5;
         @apply(--ecp-header-disabled);
@@ -87,6 +93,9 @@
                            hidden$="[[!showExpandBtn]]"
                            disabled$="[[isDisabled]]"></paper-icon-button>
         <div class="title">[[panelTitle]]</div>
+        <div id="panel-btns-wrapper">
+          <slot name="panel-btns"></slot>
+        </div>
       </paper-toolbar>
       <iron-collapse opened="{{open}}">
         <div id="content-wrapper">