add drawerWidth property to allow setting drawer width

googlearchive · Jul 29, 2014 · 12e1cc2 · 12e1cc2
1 parent 880c27b
commit 12e1cc2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/core-drawer-panel.css b/core-drawer-panel.css
@@ -21,8 +21,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   position: absolute;
   top: 0;
   left: 0;
-  /* FIXME(ffu): remove hard-coded drawer panel width */
-  width: 256px;
   height: 100%;
   box-sizing: border-box;
   -mox-box-sizing: border-box;
@@ -62,7 +60,6 @@ polyfill-next-selector { content: ':host [drawer]'; }
   top: 0;
   right: 0;
   bottom: 0;
-  left: 256px;
 }
 
 .transition #main {
@@ -71,7 +68,6 @@ polyfill-next-selector { content: ':host [drawer]'; }
 
 .right-drawer #main {
   left: 0;
-  right: 256px;
 }
 
 .right-drawer.transition #main {

diff --git a/core-drawer-panel.html b/core-drawer-panel.html
@@ -65,12 +65,12 @@
 
   <core-selector class="{{ {'narrow-layout' : queryMatches, transition : transition, dragging : dragging, 'right-drawer': rightDrawer} | tokenList }}" valueattr="id" selected="{{selected}}">
 
-    <div id="main" >
+    <div id="main" _style="left: {{ narrow || rightDrawer ? '0' : drawerWidth }}; right: {{ rightDrawer ? (narrow ? '' : drawerWidth) : '' }};">
       <content select="[main]"></content>
       <div id="scrim" on-tap="{{togglePanel}}"></div>
     </div>
 
-    <div id="drawer">
+    <div id="drawer" _style="width: {{ drawerWidth }}">
       <content select="[drawer]"></content>
     </div>
 
@@ -89,6 +89,16 @@
      */
 
     publish: {
+
+      /**
+       * Width of the drawer panel.
+       *
+       * @attribute drawerWidth
+       * @type string
+       * @default '256px'
+       */
+      drawerWidth: '256px',
+
       /**
        * Max-width when the panel changes to narrow layout.
        *