Skip to content

Commit e05f147

Browse files
brandyscarneybrandyscarney
committed
feat(windows): windows UI cleanup
references #5565
1 parent 706e0d7 commit e05f147

File tree

15 files changed

+78
-72
lines changed

15 files changed

+78
-72
lines changed

‎ionic/components/action-sheet/action-sheet.ts

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {ViewController} from '../nav/view-controller';
1818
* dismissed by the user before they can resume interaction with the app.
1919
* Dangerous (destructive) options are made obvious. There are easy
2020
* ways to cancel out of the action sheet, such as tapping the backdrop or
21-
* hitting the escape key on desktop.
21+
* hitting the escape key on desktop.
2222
*
2323
* An action sheet is created from an array of `buttons`, with each button
2424
* including properties for its `text`, and optionally a `handler` and `role`.
@@ -363,3 +363,36 @@ class ActionSheetMdSlideOut extends Transition {
363363
}
364364
}
365365
Transition.register('action-sheet-md-slide-out', ActionSheetMdSlideOut);
366+
367+
class ActionSheetWpSlideIn extends Transition {
368+
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
369+
super(opts);
370+
371+
let ele = enteringView.pageRef().nativeElement;
372+
let backdrop = new Animation(ele.querySelector('.backdrop'));
373+
let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
374+
375+
backdrop.fromTo('opacity', 0.01, 0.1);
376+
wrapper.fromTo('translateY', '100%', '0%');
377+
378+
this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
379+
}
380+
}
381+
Transition.register('action-sheet-wp-slide-in', ActionSheetWpSlideIn);
382+
383+
384+
class ActionSheetWpSlideOut extends Transition {
385+
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
386+
super(opts);
387+
388+
let ele = leavingView.pageRef().nativeElement;
389+
let backdrop = new Animation(ele.querySelector('.backdrop'));
390+
let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
391+
392+
backdrop.fromTo('opacity', 0.1, 0);
393+
wrapper.fromTo('translateY', '0%', '100%');
394+
395+
this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
396+
}
397+
}
398+
Transition.register('action-sheet-wp-slide-out', ActionSheetWpSlideOut);

‎ionic/components/action-sheet/action-sheet.wp.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
$action-sheet-wp-text-align: left !default;
88

99
$action-sheet-wp-background-color: #F2F2F2 !default;
10+
$action-sheet-wp-box-shadow: 0px -1px 0px rgba(0,0,0,0.2) !default;
1011

1112
$action-sheet-wp-title-padding: 19px 16px 17px !default;
1213
$action-sheet-wp-title-font-size: 2.0rem !default;
@@ -23,6 +24,9 @@ $action-sheet-wp-button-background-active-color: $list-wp-activated-background-
2324
$action-sheet-wp-icon-font-size: 2.4rem !default;
2425
$action-sheet-wp-icon-margin: 0 28px 0 0 !default;
2526

27+
.action-sheet-wrapper {
28+
box-shadow: $action-sheet-wp-box-shadow;
29+
}
2630

2731
.action-sheet-title {
2832
padding: $action-sheet-wp-title-padding;

‎ionic/components/alert/alert.wp.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
// Windows Alerts
55
// --------------------------------------------------
66

7+
$alert-wp-backdrop-color: white !default;
78
$alert-wp-width: 100% !default;
89
$alert-wp-border-radius: 0 !default;
910
$alert-wp-border-width: 1px !default;
@@ -45,6 +46,11 @@ $alert-wp-radio-border-color: $input-wp-border-color !default;
4546
$alert-wp-buttons-padding: 10px 20px !default;
4647
$alert-wp-buttons-justify-content: flex-end !default;
4748

49+
ion-alert {
50+
.backdrop {
51+
background-color: $alert-wp-backdrop-color;
52+
}
53+
}
4854

4955
.alert-wrapper {
5056
width: $alert-wp-width;

‎ionic/components/card/card.scss

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,3 @@ ion-card-header {
2424
ion-card-content {
2525
display: block;
2626
}
27-
28-
ion-card > :first-child {
29-
border-top-left-radius: inherit;
30-
border-top-right-radius: inherit;
31-
}
32-
33-
ion-card > :last-child {
34-
border-bottom-left-radius: inherit;
35-
border-bottom-right-radius: inherit;
36-
}

‎ionic/components/card/card.wp.scss

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
// Windows Card
55
// --------------------------------------------------
66

7-
$card-wp-margin-top: 10px !default;
8-
$card-wp-margin-right: 10px !default;
9-
$card-wp-margin-bottom: 10px !default;
10-
$card-wp-margin-left: 10px !default;
7+
$card-wp-margin-top: 8px !default;
8+
$card-wp-margin-right: 8px !default;
9+
$card-wp-margin-bottom: 8px !default;
10+
$card-wp-margin-left: 8px !default;
1111

1212
$card-wp-padding-top: 13px !default;
1313
$card-wp-padding-right: 16px !default;
@@ -21,9 +21,9 @@ $card-wp-avatar-size: 4rem !default;
2121
$card-wp-thumbnail-size: 8rem !default;
2222

2323
$card-wp-background-color: $list-wp-background-color !default;
24-
$card-wp-border-radius: 0 !default;
25-
$card-wp-border-width: 2px !default;
26-
$card-wp-border-color: $input-wp-border-color !default;
24+
$card-wp-border: 2px solid rgba(0,0,0,0.2) !default;
25+
$card-wp-box-shadow: none !default;
26+
$card-wp-border-radius: 4px !default;
2727
$card-wp-font-size: 1.4rem !default;
2828
$card-wp-line-height: 1.5 !default;
2929

@@ -44,7 +44,8 @@ ion-card {
4444

4545
background: $card-wp-background-color;
4646
border-radius: $card-wp-border-radius;
47-
border: $card-wp-border-width solid $card-wp-border-color;
47+
box-shadow: $card-wp-box-shadow;
48+
border: $card-wp-border;
4849

4950
ion-list {
5051
margin-bottom: 0;

‎ionic/components/card/test/advanced/main.html

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@
1919
</p>
2020
</ion-card-content>
2121

22-
<ion-row no-padding>
23-
<ion-col>
22+
<ion-row>
23+
<ion-col no-padding>
2424
<button clear small>
2525
<ion-icon name="star"></ion-icon>
2626
Star
2727
</button>
2828
</ion-col>
29-
<ion-col text-right>
29+
<ion-col no-padding text-right>
3030
<button clear small class="activated">
3131
<ion-icon name="share"></ion-icon>
32-
Share.activated
32+
Activated
3333
</button>
3434
</ion-col>
3535
</ion-row>
@@ -55,21 +55,23 @@ <h2>Card With An Inset Picture</h2>
5555
<p>Hello. I am a paragraph.</p>
5656
</ion-card-content>
5757

58-
<ion-row no-padding>
59-
<ion-col>
58+
<ion-row>
59+
<ion-col no-padding>
6060
<button clear small>
6161
<ion-icon name="star"></ion-icon>
6262
Favorite
6363
</button>
64+
</ion-col>
65+
<ion-col no-padding text-center>
6466
<button clear small>
6567
<ion-icon name="musical-notes"></ion-icon>
6668
Listen
6769
</button>
6870
</ion-col>
69-
<ion-col text-right>
71+
<ion-col no-padding text-right>
7072
<button clear small danger class="activated">
7173
<ion-icon name="share"></ion-icon>
72-
Share.activated
74+
Activated
7375
</button>
7476
</ion-col>
7577
</ion-row>
@@ -85,21 +87,21 @@ <h2>Card With An Inset Picture</h2>
8587
This card was breaking the border radius.
8688
</ion-card-content>
8789

88-
<ion-row text-center no-padding>
89-
<ion-col>
90+
<ion-row>
91+
<ion-col no-padding>
9092
<button clear small dark>
9193
<ion-icon name="star"></ion-icon>
9294
Favorite
9395
</button>
9496
</ion-col>
9597

96-
<ion-col>
98+
<ion-col no-padding text-center>
9799
<button clear small dark>
98100
<ion-icon name="musical-notes"></ion-icon>
99101
Listen
100102
</button>
101103
</ion-col>
102-
<ion-col>
104+
<ion-col no-padding text-right>
103105
<button clear small dark>
104106
<ion-icon name="share-alt"></ion-icon>
105107
Share

‎ionic/components/card/test/basic/main.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
<ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
33

4-
<ion-content class="outer-content" style="background:#eee">
4+
<ion-content style="background: #e5e5e5">
55

66
<ion-card>
77

‎ionic/components/checkbox/checkbox.wp.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ $checkbox-wp-border-bottom-style: solid !default;
88
$checkbox-wp-border-bottom-color: $list-wp-border-color !default;
99
$checkbox-wp-padding: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0 !default;
1010
$checkbox-wp-margin: 0 !default;
11-
$checkbox-wp-media-margin: $item-wp-padding-media-top 36px $item-wp-padding-media-bottom 4px !default;
11+
$checkbox-wp-media-margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default;
1212
$checkbox-wp-disabled-opacity: 0.3 !default;
1313

1414
$checkbox-wp-icon-background-color-off: $list-wp-background-color !default;

‎ionic/components/item/item.wp.scss

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ $item-wp-font-size: 1.6rem !default;
1414
$item-wp-avatar-size: 4rem !default;
1515
$item-wp-thumbnail-size: 8rem !default;
1616
$item-wp-note-color: $input-wp-border-color !default;
17-
$item-wp-detail-push-color: $input-wp-border-color !default;
1817

1918
$item-wp-divider-bg: #fff !default;
2019
$item-wp-divider-color: #222 !default;
@@ -34,7 +33,6 @@ $item-wp-sliding-content-bg: $list-wp-background-color !default;
3433
color: $item-wp-body-text-color;
3534
background-color: $item-wp-body-background-color;
3635
box-shadow: none;
37-
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
3836

3937
h1 {
4038
margin: 0 0 2px;
@@ -79,16 +77,6 @@ $item-wp-sliding-content-bg: $list-wp-background-color !default;
7977
border-bottom: 1px solid $list-wp-border-color;
8078
}
8179

82-
button.item:not([detail-none]) .item-inner,
83-
a.item:not([detail-none]) .item-inner,
84-
.item[detail-push] .item-inner {
85-
@include wp-detail-push-icon($item-wp-detail-push-color);
86-
background-repeat: no-repeat;
87-
background-position: right ($item-wp-padding-right - 2) center;
88-
background-size: 14px 14px;
89-
padding-right: 32px;
90-
}
91-
9280

9381
// Windows Item Media
9482
// --------------------------------------------------

‎ionic/components/label/label.wp.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ ion-label[stacked] {
3434
ion-label[floating] {
3535
transform-origin: left top;
3636
transform: translate3d(8px, 34px, 0);
37-
transition: transform 150ms ease-in-out;
3837
}
3938

4039
ion-label[stacked],

0 commit comments

Comments
 (0)