From e05f147945975a91d9dc8cb5c4c4f4aba8510fbe Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 25 Feb 2016 16:17:26 -0500 Subject: [PATCH] feat(windows): windows UI cleanup references #5565 --- ionic/components/action-sheet/action-sheet.ts | 35 ++++++++++++++++++- .../action-sheet/action-sheet.wp.scss | 4 +++ ionic/components/alert/alert.wp.scss | 6 ++++ ionic/components/card/card.scss | 10 ------ ionic/components/card/card.wp.scss | 17 ++++----- ionic/components/card/test/advanced/main.html | 26 +++++++------- ionic/components/card/test/basic/main.html | 2 +- ionic/components/checkbox/checkbox.wp.scss | 2 +- ionic/components/item/item.wp.scss | 12 ------- ionic/components/label/label.wp.scss | 1 - ionic/components/radio/radio.wp.scss | 6 +++- ionic/components/toolbar/toolbar.wp.scss | 3 +- ionic/config/modes.ts | 4 +-- ionic/themes/dark.wp.scss | 11 ------ ionic/themes/default.wp.scss | 11 ------ 15 files changed, 78 insertions(+), 72 deletions(-) diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index eff9962746..7ee9f394ef 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -18,7 +18,7 @@ import {ViewController} from '../nav/view-controller'; * dismissed by the user before they can resume interaction with the app. * Dangerous (destructive) options are made obvious. There are easy * ways to cancel out of the action sheet, such as tapping the backdrop or - * hitting the escape key on desktop. + * hitting the escape key on desktop. * * An action sheet is created from an array of `buttons`, with each button * including properties for its `text`, and optionally a `handler` and `role`. @@ -363,3 +363,36 @@ class ActionSheetMdSlideOut extends Transition { } } Transition.register('action-sheet-md-slide-out', ActionSheetMdSlideOut); + +class ActionSheetWpSlideIn extends Transition { + constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) { + super(opts); + + let ele = enteringView.pageRef().nativeElement; + let backdrop = new Animation(ele.querySelector('.backdrop')); + let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper')); + + backdrop.fromTo('opacity', 0.01, 0.1); + wrapper.fromTo('translateY', '100%', '0%'); + + this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper); + } +} +Transition.register('action-sheet-wp-slide-in', ActionSheetWpSlideIn); + + +class ActionSheetWpSlideOut extends Transition { + constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) { + super(opts); + + let ele = leavingView.pageRef().nativeElement; + let backdrop = new Animation(ele.querySelector('.backdrop')); + let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper')); + + backdrop.fromTo('opacity', 0.1, 0); + wrapper.fromTo('translateY', '0%', '100%'); + + this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper); + } +} +Transition.register('action-sheet-wp-slide-out', ActionSheetWpSlideOut); diff --git a/ionic/components/action-sheet/action-sheet.wp.scss b/ionic/components/action-sheet/action-sheet.wp.scss index 9f69df78b9..b40115ec8c 100644 --- a/ionic/components/action-sheet/action-sheet.wp.scss +++ b/ionic/components/action-sheet/action-sheet.wp.scss @@ -7,6 +7,7 @@ $action-sheet-wp-text-align: left !default; $action-sheet-wp-background-color: #F2F2F2 !default; +$action-sheet-wp-box-shadow: 0px -1px 0px rgba(0,0,0,0.2) !default; $action-sheet-wp-title-padding: 19px 16px 17px !default; $action-sheet-wp-title-font-size: 2.0rem !default; @@ -23,6 +24,9 @@ $action-sheet-wp-button-background-active-color: $list-wp-activated-background- $action-sheet-wp-icon-font-size: 2.4rem !default; $action-sheet-wp-icon-margin: 0 28px 0 0 !default; +.action-sheet-wrapper { + box-shadow: $action-sheet-wp-box-shadow; +} .action-sheet-title { padding: $action-sheet-wp-title-padding; diff --git a/ionic/components/alert/alert.wp.scss b/ionic/components/alert/alert.wp.scss index ab19e6d362..1fa537099f 100644 --- a/ionic/components/alert/alert.wp.scss +++ b/ionic/components/alert/alert.wp.scss @@ -4,6 +4,7 @@ // Windows Alerts // -------------------------------------------------- +$alert-wp-backdrop-color: white !default; $alert-wp-width: 100% !default; $alert-wp-border-radius: 0 !default; $alert-wp-border-width: 1px !default; @@ -45,6 +46,11 @@ $alert-wp-radio-border-color: $input-wp-border-color !default; $alert-wp-buttons-padding: 10px 20px !default; $alert-wp-buttons-justify-content: flex-end !default; +ion-alert { + .backdrop { + background-color: $alert-wp-backdrop-color; + } +} .alert-wrapper { width: $alert-wp-width; diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss index 1f8b7c2163..8d6024b3eb 100644 --- a/ionic/components/card/card.scss +++ b/ionic/components/card/card.scss @@ -24,13 +24,3 @@ ion-card-header { ion-card-content { display: block; } - -ion-card > :first-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; -} - -ion-card > :last-child { - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; -} diff --git a/ionic/components/card/card.wp.scss b/ionic/components/card/card.wp.scss index 74182ee937..3b17d15ef7 100644 --- a/ionic/components/card/card.wp.scss +++ b/ionic/components/card/card.wp.scss @@ -4,10 +4,10 @@ // Windows Card // -------------------------------------------------- -$card-wp-margin-top: 10px !default; -$card-wp-margin-right: 10px !default; -$card-wp-margin-bottom: 10px !default; -$card-wp-margin-left: 10px !default; +$card-wp-margin-top: 8px !default; +$card-wp-margin-right: 8px !default; +$card-wp-margin-bottom: 8px !default; +$card-wp-margin-left: 8px !default; $card-wp-padding-top: 13px !default; $card-wp-padding-right: 16px !default; @@ -21,9 +21,9 @@ $card-wp-avatar-size: 4rem !default; $card-wp-thumbnail-size: 8rem !default; $card-wp-background-color: $list-wp-background-color !default; -$card-wp-border-radius: 0 !default; -$card-wp-border-width: 2px !default; -$card-wp-border-color: $input-wp-border-color !default; +$card-wp-border: 2px solid rgba(0,0,0,0.2) !default; +$card-wp-box-shadow: none !default; +$card-wp-border-radius: 4px !default; $card-wp-font-size: 1.4rem !default; $card-wp-line-height: 1.5 !default; @@ -44,7 +44,8 @@ ion-card { background: $card-wp-background-color; border-radius: $card-wp-border-radius; - border: $card-wp-border-width solid $card-wp-border-color; + box-shadow: $card-wp-box-shadow; + border: $card-wp-border; ion-list { margin-bottom: 0; diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html index 6cee3f5fa8..57b3d4eba5 100644 --- a/ionic/components/card/test/advanced/main.html +++ b/ionic/components/card/test/advanced/main.html @@ -19,17 +19,17 @@

- - + + - + @@ -55,21 +55,23 @@

Hello. I am a paragraph.

- - + + + + - + @@ -85,21 +87,21 @@ This card was breaking the border radius. - - + + - + - +