feat(windows): initial add of windows mode

basically a copy of md for now

references #5565

gulpfile.js

@@ -266,6 +266,7 @@ gulp.task('sass', function() {
   gulp.src([
     'ionic/ionic.ios.scss',
     'ionic/ionic.md.scss',
+    'ionic/ionic.wp.scss',
     'ionic/ionic.scss'
   ])
   .pipe(sass({
@@ -300,6 +301,7 @@ gulp.task('sass.themes', function() {
 
   buildTheme('ios');
   buildTheme('md');
+  buildTheme('wp');
 });
 
 /**

ionic/components.wp.scss

@@ -0,0 +1,9 @@
+
+// Windows Globals
+@import "globals.wp";
+
+
+// Windows Components
+@import
+  "components/app/app.wp",
+  "components/button/button.wp";

ionic/components/app/app.wp.scss

@@ -0,0 +1,39 @@
+@import "../../globals.wp";
+
+// Windows App
+// --------------------------------------------------
+
+ion-content {
+  color: $text-wp-color;
+}
+
+p {
+  color: $paragraph-wp-color;
+}
+
+a {
+  color: $link-wp-color;
+}
+
+hr {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+@each $color-name, $color-value in $colors-wp {
+  h1, h2, h3, h4, h5, h6,
+  p,
+  span,
+  a:not([button]),
+  small,
+  b,
+  i,
+  strong,
+  em,
+  sub,
+  sup,
+  ion-icon {
+    &[#{$color-name}] {
+      color: $color-value !important;
+    }
+  }
+}

ionic/components/button/button.wp.scss

@@ -0,0 +1,308 @@
+@import "../../globals.wp";
+@import "./button";
+
+// Windows Button
+// --------------------------------------------------
+
+$button-wp-margin:                         0.4rem 0.2rem !default;
+$button-wp-padding:                        0 1.1em !default;
+$button-wp-font-size:                      1.4rem !default;
+$button-wp-height:                         3.6rem !default;
+$button-wp-box-shadow:                     0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$button-wp-box-shadow-active:              0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21) !default;
+
+$button-wp-border-radius:                  2px !default;
+$button-wp-animation-curve:                cubic-bezier(0.4, 0, 0.2, 1) !default;
+$button-wp-transition-duration:            300ms !default;
+
+$button-wp-clear-hover-background-color:   rgba(158, 158, 158, 0.1) !default;
+$button-wp-clear-active-background-color:  rgba(158, 158, 158, 0.2) !default;
+
+$button-wp-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
+$button-wp-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
+
+$button-wp-color:                          map-get($colors-wp, primary) !default;
+$button-wp-color-activated:                color-shade($button-wp-color) !default;
+$button-wp-text-color:                     color-inverse($button-wp-color) !default;
+$button-wp-hover-opacity:                  0.8 !default;
+
+$button-wp-large-font-size:                2rem !default;
+$button-wp-large-height:                   2.8em !default;
+$button-wp-large-padding:                  1.0em !default;
+$button-wp-small-font-size:                1.3rem !default;
+$button-wp-small-height:                   2.1em !default;
+$button-wp-small-padding:                  0.9em !default;
+$button-wp-small-icon-font-size:           1.4em !default;
+
+
+// Windows Default Button
+// --------------------------------------------------
+
+.button {
+  margin: $button-wp-margin;
+  padding: $button-wp-padding;
+  height: $button-wp-height;
+  border-radius: $button-wp-border-radius;
+
+  font-weight: 500;
+  font-size: $button-wp-font-size;
+
+  color: $button-wp-text-color;
+  background-color: $button-wp-color;
+  box-shadow: $button-wp-box-shadow;
+
+  text-transform: uppercase;
+
+  transition: box-shadow $button-wp-transition-duration $button-wp-animation-curve,
+              background-color $button-wp-transition-duration $button-wp-animation-curve,
+              color $button-wp-transition-duration $button-wp-animation-curve;
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-wp-color;
+  }
+
+  &.activated {
+    box-shadow: $button-wp-box-shadow-active;
+    background-color: $button-wp-color-activated;
+  }
+
+  ion-button-effect {
+    background-color: $button-wp-text-color;
+  }
+}
+
+
+// Windows Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin wp-button-default($color-name, $color-value) {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $fg-color: color-inverse($bg-color);
+
+    color: $fg-color;
+    background-color: $bg-color;
+
+    &:hover:not(.disable-hover) {
+      background-color: $bg-color;
+    }
+
+    &.activated {
+      opacity: 1;
+      background-color: $bg-color-activated;
+    }
+
+    ion-button-effect {
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Windows Button Sizes
+// --------------------------------------------------
+
+.button-large {
+  padding: 0 $button-wp-large-padding;
+  height: $button-wp-large-height;
+  font-size: $button-wp-large-font-size;
+}
+
+.button-small {
+  padding: 0 $button-wp-small-padding;
+  height: $button-wp-small-height;
+  font-size: $button-wp-small-font-size;
+}
+
+.button-small.button-icon-only ion-icon {
+  font-size: $button-wp-small-icon-font-size;
+}
+
+// Windows Block Button
+// --------------------------------------------------
+
+.button-block {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// Windows Full Button
+// --------------------------------------------------
+
+.button-full {
+  margin-right: 0;
+  margin-left: 0;
+  border-radius: 0;
+  border-right-width: 0;
+  border-left-width: 0;
+}
+
+// Windows Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border-width: 1px;
+  border-style: solid;
+  border-color: $button-wp-color;
+  background-color: transparent;
+  color: $button-wp-color;
+  box-shadow: none;
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-wp-clear-hover-background-color;
+  }
+
+  &.activated {
+    opacity: 1;
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  ion-button-effect {
+    background-color: $button-wp-color;
+  }
+}
+
+
+// Windows Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin wp-button-outline($color-name, $color-value) {
+
+  .button-outline-#{$color-name} {
+    $fg-color: color-shade($color-value, 5%);
+    border-color: $fg-color;
+    background-color: transparent;
+    color: $fg-color;
+
+    &:hover:not(.disable-hover) {
+      background-color: $button-wp-clear-hover-background-color;
+    }
+
+    &.activated {
+      background-color: transparent;
+    }
+
+    ion-button-effect {
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Windows Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  border-color: transparent;
+  opacity: 1;
+  box-shadow: none;
+  background-color: transparent;
+  color: $button-wp-color;
+
+  &.activated {
+    background-color: $button-wp-clear-active-background-color;
+    box-shadow: none;
+  }
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-wp-clear-hover-background-color;
+  }
+
+  ion-button-effect {
+    background-color: #999;
+  }
+}
+
+
+// Windows Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin wp-button-clear($color-name, $color-value) {
+
+  .button-clear-#{$color-name} {
+    $fg-color: $color-value;
+    border-color: transparent;
+    background-color: transparent;
+    color: $fg-color;
+
+    &.activated {
+      background-color: $button-wp-clear-active-background-color;
+      box-shadow: none;
+    }
+
+    &:hover:not(.disable-hover) {
+      color: $fg-color;
+    }
+  }
+}
+
+
+// Windows Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+  border-radius: $button-round-border-radius;
+}
+
+
+// Windows FAB Button
+// --------------------------------------------------
+
+.button-fab {
+  border-radius: 50%;
+  box-shadow: $button-wp-fab-box-shadow;
+
+  transition: box-shadow $button-wp-transition-duration $button-wp-animation-curve,
+              background-color $button-wp-transition-duration $button-wp-animation-curve,
+              color $button-wp-transition-duration $button-wp-animation-curve;
+
+  &.activated {
+    box-shadow: $button-wp-fab-box-shadow-active;
+  }
+}
+
+.button-icon-only {
+  padding: 0;
+}
+
+
+// Windows Ripple Effect
+// --------------------------------------------------
+
+$ripple-background-color:       #555 !default;
+
+ion-button-effect {
+  position: absolute;
+  z-index: 0;
+  display: block;
+  border-radius: 50%;
+
+  background-color: $ripple-background-color;
+  opacity: 0.2;
+
+  pointer-events: none;
+  transition-timing-function: ease-in-out;
+}
+
+
+// Generate Windows Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-wp {
+  @include wp-button-default($color-name, $color-value);
+  @include wp-button-outline($color-name, $color-value);
+  @include wp-button-clear($color-name, $color-value);
+}
+
+
+// Core Button Overrides
+// --------------------------------------------------
+
+@import "./button-fab";
+@import "./button-icon";

ionic/config/bootstrap.ts

@@ -81,7 +81,7 @@ function setupDom(window, document, config, platform, clickBlock, featureDetect)
   }
 
   // set the mode class name
-  // ios/md
+  // ios/md/wp
   bodyEle.classList.add(mode);
 
   // language and direction

ionic/config/modes.ts

@@ -57,3 +57,33 @@ Config.setModeConfig('md', {
 
   tabSubPages: true,
 });
+
+
+// Windows Mode Settings
+Config.setModeConfig('wp', {
+  activator: 'highlight',
+
+  actionSheetEnter: 'action-sheet-md-slide-in',
+  actionSheetLeave: 'action-sheet-md-slide-out',
+
+  alertEnter: 'alert-md-pop-in',
+  alertLeave: 'alert-md-pop-out',
+
+  backButtonText: '',
+  backButtonIcon: 'md-arrow-back',
+
+  iconMode: 'md',
+
+  menuType: 'overlay',
+
+  modalEnter: 'modal-md-slide-in',
+  modalLeave: 'modal-md-slide-out',
+
+  pageTransition: 'md-transition',
+  pageTransitionDelay: 96,
+
+  tabbarHighlight: true,
+  tabbarPlacement: 'top',
+
+  tabSubPages: true,
+});

ionic/globals.wp.scss

@@ -0,0 +1,7 @@
+
+// Core Globals
+@import "globals.core";
+
+
+// Windowsn Globals
+@import "themes/default.wp";

ionic/ionic.scss

@@ -14,3 +14,10 @@
   @import "components.md";
   @include md-body();
 }
+
+// Windows Components
+.wp {
+  @import "components.wp";
+  @include wp-body();
+}
+

ionic/ionic.wp.scss

@@ -0,0 +1,13 @@
+/*! Ionic: Windows */
+@charset "UTF-8";
+
+// Core Components
+@import "components.core";
+
+// Windows Components
+@import "components.wp";
+
+// Windows Body
+body {
+  @include wp-body();
+}

ionic/platform/registry.ts

@@ -144,7 +144,7 @@ Platform.register({
     'tablet'
   ],
   settings: {
-    mode: 'md',
+    mode: 'wp',
   },
   isMatch(p: Platform): boolean {
     return p.isPlatform('windowsphone', 'windows phone');

ionic/themes/dark.wp.scss

@@ -0,0 +1,89 @@
+@import "./dark";
+
+// Windows Dark Theme
+// ----------------------------------
+
+$colors-wp: map-merge($colors, ()) !default;
+
+
+$text-wp-color:                       $text-color !default;
+$paragraph-wp-color:                  $paragraph-color !default;
+$link-wp-color:                       map-get($colors-wp, primary) !default;
+$background-wp-color:                 $background-color !default;
+$subdued-text-wp-color:               $subdued-text-color !default;
+
+$font-family-wp-base:                 "Roboto", "Helvetica Neue", sans-serif !default;
+$font-size-wp-base:                   $font-size-base !default;
+
+
+// Windows Outer content
+// --------------------------------------------------
+$outer-content-wp-background-color:   $background-color !default;
+
+// Windows Toolbar
+// --------------------------------------------------
+
+$toolbar-wp-background:               $toolbar-background !default;
+$toolbar-wp-border-color:             $toolbar-border-color !default;
+$toolbar-wp-text-color:               #fff !default;
+$toolbar-wp-active-color:             $toolbar-active-color !default;
+$toolbar-wp-inactive-color:           $toolbar-inactive-color !default;
+$toolbar-wp-button-color:             #424242 !default;
+
+// Windows Card
+// --------------------------------------------------
+
+$card-wp-header-color:                #ddd !default;
+$card-wp-title-text-color:            #fff !default;
+$card-wp-text-color:                  #ddd !default;
+
+// Windows List
+// --------------------------------------------------
+
+$list-wp-text-color:                  $list-text-color !default;
+$list-wp-border-color:                #dedede !default;
+$list-wp-background-color:            $list-background-color !default;
+$list-wp-activated-background-color:  #d9d9d9 !default;
+
+
+// Windows Item
+// --------------------------------------------------
+
+$item-wp-padding-top:                 13px !default;
+$item-wp-padding-right:               16px !default;
+$item-wp-padding-bottom:              13px !default;
+$item-wp-padding-left:                16px !default;
+$item-wp-padding-media-top:           9px !default;
+$item-wp-padding-media-bottom:        9px !default;
+$item-wp-padding-icon-top:            11px !default;
+$item-wp-padding-icon-bottom:         10px !default;
+$item-wp-divider-bg:                  #151515 !default;
+$item-wp-divider-color:               map-get($colors-wp, light) !default;
+
+// Windows Toggle
+// ---------------------------------------------------
+$toggle-wp-handle-background-color-off: map-get($colors-wp, light) !default;
+
+
+// Ripple Color
+// --------------------------------------------------
+
+@function ripple-background-color($button-color) {
+  @return rgba( red($button-color), green($button-color), blue($button-color), 0.1);
+}
+
+
+// Windows Body
+// --------------------------------------------------
+
+@mixin wp-body() {
+  font-family: $font-family-wp-base;
+  font-size: $font-size-wp-base;
+  background-color: $background-wp-color;
+}
+
+
+// Roboto Font
+@at-root {
+  @import "../fonts/roboto";
+}

ionic/themes/default.wp.scss

@@ -0,0 +1,66 @@
+@import "./default";
+
+// Windows Default Theme
+// ----------------------------------
+
+$colors-wp: copy-colors($colors) !default;
+
+
+$text-wp-color:                       $text-color !default;
+$paragraph-wp-color:                  $paragraph-color !default;
+$link-wp-color:                       map-get($colors-wp, primary) !default;
+$background-wp-color:                 $background-color !default;
+$subdued-text-wp-color:               $subdued-text-color !default;
+
+$font-family-wp-base:                 "Roboto", "Helvetica Neue", sans-serif !default;
+$font-size-wp-base:                   $font-size-base !default;
+
+
+// Windows Toolbar
+// --------------------------------------------------
+
+$toolbar-wp-background:               $toolbar-background !default;
+$toolbar-wp-border-color:             $toolbar-border-color !default;
+$toolbar-wp-text-color:               #424242 !default;
+$toolbar-wp-active-color:             $toolbar-active-color !default;
+$toolbar-wp-inactive-color:           $toolbar-inactive-color !default;
+$toolbar-wp-button-color:             #424242 !default;
+
+
+// Windows List
+// --------------------------------------------------
+
+$list-wp-text-color:                  $list-text-color !default;
+$list-wp-border-color:                #dedede !default;
+$list-wp-background-color:            $list-background-color !default;
+$list-wp-activated-background-color:  #f1f1f1 !default;
+
+
+// Windows Item
+// --------------------------------------------------
+
+$item-wp-padding-top:                 13px !default;
+$item-wp-padding-right:               16px !default;
+$item-wp-padding-bottom:              13px !default;
+$item-wp-padding-left:                16px !default;
+$item-wp-padding-media-top:           9px !default;
+$item-wp-padding-media-bottom:        9px !default;
+$item-wp-padding-icon-top:            11px !default;
+$item-wp-padding-icon-bottom:         10px !default;
+
+
+
+// Windows Body
+// --------------------------------------------------
+
+@mixin wp-body() {
+  font-family: $font-family-wp-base;
+  font-size: $font-size-wp-base;
+  background-color: $background-wp-color;
+}
+
+
+// Roboto Font
+@at-root {
+  @import "../fonts/roboto";
+}

scripts/e2e/e2e.template.html

@@ -8,6 +8,7 @@
   <!-- using relative paths in order for snapshot e2e tests to also work -->
   <link id="iosLink" ios-href="../../../bundles/ionic.ios.css" rel="stylesheet">
   <link id="mdLink" md-href="../../../bundles/ionic.md.css" rel="stylesheet">
+  <link id="wpLink" wp-href="../../../bundles/ionic.wp.css" rel="stylesheet">
 
   <script>
     if (location.href.indexOf('snapshot=true') > -1) {
@@ -30,6 +31,8 @@
       link.setAttribute('ios-href', link.getAttribute('ios-href').replace('.css', '.dark.css'));
       link = document.getElementById('mdLink');
       link.setAttribute('md-href', link.getAttribute('md-href').replace('.css', '.dark.css'));
+      link = document.getElementById('wpLink');
+      link.setAttribute('wp-href', link.getAttribute('wp-href').replace('.css', '.dark.css'));
     }
   </script>
 

scripts/e2e/ionic.wp.dark.scss

@@ -0,0 +1,6 @@
+
+// For E2E dark theme tests
+
+@import "../../ionic/themes/dark.wp.scss";
+
+@import "../../ionic/ionic.wp.scss";