feat(layout): add -print breakpoint alias

support layout and flex attributes * remove superfluous use of `screen and` in mediaQueries * also support `hide-print` to hide elements when printing * update docs to hide sideNav when printing * update docs to use white background colors for demos * support Layout API usages with print-xx suffices; which enabled component printing at the specified breakpoint range.
angular · Jan 29, 2016 · eb1249d · eb1249d
1 parent 0dc2ec7
commit eb1249d
Show file tree

Hide file tree

Showing 21 changed files with 610 additions and 457 deletions.
diff --git a/docs/app/css/layout-demo.css b/docs/app/css/layout-demo.css
@@ -1,5 +1,6 @@
 demo-include {
   display: block;
+  background-color:white;
 }
 
 .colorNested .demo-content > div div  {

diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
@@ -15,7 +15,7 @@
 <body layout="row" ng-cloak>
 
   <md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
-              md-component-id="left"
+              md-component-id="left" hide-print
               md-is-locked-open="$mdMedia('gt-sm')">
 
     <header class="nav-header">

diff --git a/gulp/config.js b/gulp/config.js
@@ -29,14 +29,13 @@ module.exports = {
     'src/core/style/mixins.scss',
     'src/core/style/structure.scss',
     'src/core/style/typography.scss',
+    'src/core/style/layout.scss',
     'src/core/services/layout/layout.scss'
   ],
-  scssStandaloneFiles: [
-    'src/core/services/layout/layout.attributes.scss'
-  ],
-  scssTestFiles: [
-    'src/core/services/layout/layout.scss'
-  ],
+  scssPrintFiles: [
+      'src/core/style/layout.scss',
+      'src/core/services/layout/layout.print.scss'
+    ],
   paths: 'src/{components,services}/**',
   outputDir: 'dist/',
   demoFolder: 'demo-partials'

diff --git a/gulp/tasks/build-scss.js b/gulp/tasks/build-scss.js
@@ -30,31 +30,28 @@ exports.task = function() {
     gulp.src(paths)
       .pipe(util.filterNonCodeFiles())
       .pipe(filter(['**', '!**/*-theme.scss']))
+      .pipe(filter(['**', '!**/*.attributes.scss']))    // no layout attribute selectors
+      .pipe(filter(['**', '!**/*.print.scss']))         // no print styles
       .pipe(concat('angular-material.scss'))
-      .pipe(gulp.dest(dest))
+      .pipe(gulp.dest(dest))                            // raw uncompiled SCSSS
   );
 
   streams.push(
-      gulp.src(paths)
-          .pipe(util.filterNonCodeFiles())
-          .pipe(filter(['**', '!**/*-theme.scss']))
-          .pipe(filter(['**', '!**/attributes.scss']))
-          .pipe(concat('angular-material.scss'))
+      gulp.src(dest)
           .pipe(sass())
           .pipe(rename({ basename: filename }))
           .pipe(util.autoprefix())
           .pipe(insert.prepend(config.banner))
-          .pipe(gulp.dest(dest))
+          .pipe(gulp.dest(dest))                        // unminified
           .pipe(gulpif(!IS_DEV, minifyCss()))
           .pipe(rename({extname: '.min.css'}))
-          .pipe(gulp.dest(dest))
+          .pipe(gulp.dest(dest))                        // minified
   );
   streams.push(
-      gulp.src(config.scssStandaloneFiles)
-          .pipe(insert.prepend(baseVars))
+      gulp.src(config.scssPrintFiles.slice())           // Layout API for Printing
           .pipe(sass())
           .pipe(util.autoprefix())
-          .pipe(rename({ basename: "layouts" }))
+          .pipe(rename({ basename: "print" }))
           .pipe(rename({ prefix: 'angular-material.'}))
           .pipe(insert.prepend(config.banner))
           .pipe(gulp.dest(dest))

diff --git a/src/components/bottomSheet/bottom-sheet.scss b/src/components/bottomSheet/bottom-sheet.scss
@@ -121,19 +121,19 @@ md-bottom-sheet {
         }
       }
 
-      @media screen and (max-width: $layout-breakpoint-sm) {
+      @media (max-width: $layout-breakpoint-sm) {
         @include grid-items-per-row(3, true);
       }
 
-      @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
+      @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
         @include grid-items-per-row(4);
       }
 
-      @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
+      @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
         @include grid-items-per-row(6);
       }
 
-      @media screen and (min-width: $layout-breakpoint-lg) {
+      @media (min-width: $layout-breakpoint-lg) {
         @include grid-items-per-row(7);
       }
 

diff --git a/src/components/chips/demoContactChips/style.scss b/src/components/chips/demoContactChips/style.scss
@@ -34,7 +34,7 @@ md-content.autocomplete {
     }
   }
 
-  @media screen and (min-width: 960px) {
+  @media (min-width: 960px) {
     float: left;
     width: 33%;
   }

diff --git a/src/components/content/content.scss b/src/components/content/content.scss
@@ -22,6 +22,10 @@ md-content {
   &.autoScroll {
     -webkit-overflow-scrolling: auto;
   }
+
+  @media print {
+    overflow: visible !important;
+  }
 }
 
 
diff --git a/src/components/fabSpeedDial/demoMoreOptions/style.scss b/src/components/fabSpeedDial/demoMoreOptions/style.scss
@@ -3,7 +3,7 @@
   top: 16px;
 }
 
-@media only screen and (max-device-width: 600px) {
+@media (max-device-width: 600px) {
   .md-fab-top-right {
     top: 9px;
     right: 9px;

diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
@@ -92,13 +92,13 @@ md-sidenav {
   }
 }
 
-@media screen and (min-width: $layout-breakpoint-xs) {
+@media (min-width: $layout-breakpoint-xs) {
   md-sidenav {
     max-width: $sidenav-desktop-width;
   }
 }
 
-@media screen and (max-width: $sidenav-desktop-width + $sidenav-min-space) {
+@media (max-width: $sidenav-desktop-width + $sidenav-min-space) {
   md-sidenav {
     width: calc(100% - #{$sidenav-min-space});
     min-width: calc(100% - #{$sidenav-min-space});

diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
@@ -132,7 +132,7 @@ md-toolbar {
 }
 
 // Handle mobile portrait
-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) {
+@media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) {
   md-toolbar {
     min-height: $toolbar-height-mobile-portrait;
   }
@@ -144,7 +144,7 @@ md-toolbar {
 }
 
 // Handle mobile landscape
-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) {
+@media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) {
   md-toolbar {
     min-height: $toolbar-height-mobile-landscape;
   }

diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss
@@ -17,7 +17,7 @@ md-tooltip {
 
   font-weight: 500;
   font-size: $tooltip-fontsize-sm;
-  @media screen and (min-width: $layout-breakpoint-sm) {
+  @media (min-width: $layout-breakpoint-sm) {
     font-size: $tooltip-fontsize-lg;
   }
 
@@ -33,7 +33,7 @@ md-tooltip {
     line-height: $tooltip-height-sm;
     padding-left: $tooltip-lr-padding-sm;
     padding-right: $tooltip-lr-padding-sm;
-    @media screen and (min-width: $layout-breakpoint-sm) {
+    @media (min-width: $layout-breakpoint-sm) {
       height: $tooltip-height-lg;
       line-height: $tooltip-height-lg;
       padding-left: $tooltip-lr-padding-lg;

diff --git a/src/components/whiteframe/demoBasicClassUsage/style.css b/src/components/whiteframe/demoBasicClassUsage/style.css
@@ -3,7 +3,7 @@ md-whiteframe {
   margin: 30px;
   height: 100px;
 }
-@media screen and (max-width: 599px) {
+@media (max-width: 599px) {
   md-whiteframe {
     margin: 7px;
     height: 50px;
@@ -13,7 +13,7 @@ md-whiteframe {
     font-size: 0.4em;
   }
 }
-@media screen and (min-width: 600px ) and (max-width: 959px) {
+@media (min-width: 600px ) and (max-width: 959px) {
   md-whiteframe {
     margin: 20px;
     height: 75px;
@@ -22,7 +22,7 @@ md-whiteframe {
     font-size: 0.6em;
   }
 }
-@media screen and (min-width: 960px ) and (max-width: 1199px) {
+@media (min-width: 960px ) and (max-width: 1199px) {
   md-whiteframe {
     margin: 20px;
     height: 90px;
@@ -33,7 +33,7 @@ md-whiteframe {
   }
 }
 
-@media screen  and (min-width: 1200px) {
+@media (min-width: 1200px) {
   md-whiteframe {
     margin: 25px;
     height: 100px;

diff --git a/src/components/whiteframe/demoDirectiveAttributeUsage/style.css b/src/components/whiteframe/demoDirectiveAttributeUsage/style.css
@@ -5,7 +5,7 @@ md-whiteframe, div.padded {
 }
 
 /* For breakpoint `-xs` */
-@media screen and (max-width: 599px) {
+@media (max-width: 599px) {
   md-whiteframe, div.padded {
     margin: 7px;
     height: 50px;
@@ -17,7 +17,7 @@ md-whiteframe, div.padded {
 }
 
 /* For breakpoint `-sm` */
-@media screen and (min-width: 600px ) and (max-width: 959px) {
+@media (min-width: 600px ) and (max-width: 959px) {
   md-whiteframe, div.padded {
     margin: 20px;
     height: 75px;
@@ -28,7 +28,7 @@ md-whiteframe, div.padded {
 }
 
 /* For breakpoint `-md` */
-@media screen and (min-width: 960px ) and (max-width: 1279px) {
+@media (min-width: 960px ) and (max-width: 1279px) {
   md-whiteframe, div.padded {
     margin: 20px;
     height: 90px;
@@ -40,7 +40,7 @@ md-whiteframe, div.padded {
 }
 
 /* For breakpoint `-gt-md` */
-@media screen and (min-width: 1280px) {
+@media (min-width: 1280px) {
   md-whiteframe, div.padded {
     margin: 25px;
     height: 100px;

diff --git a/src/core/services/layout/layout.attributes.scss b/src/core/services/layout/layout.attributes.scss
@@ -141,10 +141,12 @@ $layout-breakpoint-lg:     1920px !default;
   // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
   // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
   // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
-  @media screen\0 {
-      [#{$flexName}] {
-        flex: 1 1 0%;
-      }
+  @if $name != '-print' { 
+    @media screen\0 {
+        [#{$flexName}] {
+          flex: 1 1 0%;
+        }
+    }
   }
 
   [#{$flexName}-grow]        { flex: 1 1 100%;  box-sizing: border-box; }
@@ -503,4 +505,13 @@ $layout-breakpoint-lg:     1920px !default;
   }
 }
 
+@media print {
+  // PRINT
+  @include layouts_for_breakpoint(print);
+
+  [hide-print]:not([show-print]):not([show]) {
+    display: none;
+  }
+}
+
 
diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js
@@ -3,7 +3,7 @@
 
   var $mdUtil, $interpolate, $log;
 
-  var SUFFIXES = /(-gt)?-(sm|md|lg)/g;
+  var SUFFIXES = /(-gt)?-(sm|md|lg|print)/g;
   var WHITESPACE = /\s+/g;
 
   var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink', 'nogrow' ];
@@ -77,7 +77,7 @@
     var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
 
     // NOTE: these are also defined in constants::MEDIA_PRIORITY and constants::MEDIA
-    var BREAKPOINTS     = [ "", "xs", "gt-xs", "sm", "gt-sm", "md", "gt-md", "lg", "gt-lg", "xl" ];
+    var BREAKPOINTS     = [ "", "xs", "gt-xs", "sm", "gt-sm", "md", "gt-md", "lg", "gt-lg", "xl", "print" ];
     var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
     var API_NO_VALUES   = [ "show", "hide", "layout-padding", "layout-margin" ];