Skip to content

Commit c41f24d

Browse files
brandyscarneybrandyscarney
committed
feat(item): add the ability to show a forward arrow on md and wp modes
The following Sass variables control this: ``` $item-ios-detail-push-show $item-md-detail-push-show $item-wp-detail-push-show ``` ios is set to true by default, the others are set to false. references #5993
1 parent cb1caca commit c41f24d

File tree

10 files changed

+121
-12
lines changed

10 files changed

+121
-12
lines changed

‎src/components/item/item.ios.scss

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ $item-ios-paragraph-text-color: #666 !default;
1010
$item-ios-avatar-size: 3.6rem !default;
1111
$item-ios-thumbnail-size: 5.6rem !default;
1212
$item-ios-note-color: darken($list-ios-border-color, 10%) !default;
13+
14+
$item-ios-detail-push-show: true !default;
1315
$item-ios-detail-push-color: $list-ios-border-color !default;
1416

1517
$item-ios-divider-background: #f7f7f7 !default;
@@ -163,9 +165,11 @@ ion-note {
163165
color: $item-ios-note-color;
164166
}
165167

166-
button.item:not([detail-none]) .item-inner,
167-
a.item:not([detail-none]) .item-inner,
168-
.item[detail-push] .item-inner {
168+
169+
// iOS Item Detail Push
170+
// --------------------------------------------------
171+
172+
@mixin ios-detail-push() {
169173
@include ios-detail-push-icon($item-ios-detail-push-color);
170174

171175
padding-right: 32px;
@@ -175,6 +179,15 @@ a.item:not([detail-none]) .item-inner,
175179
background-size: 14px 14px;
176180
}
177181

182+
// Only show the forward arrow icon if true
183+
@if $item-ios-detail-push-show == true {
184+
.item[detail-push] .item-inner,
185+
button.item:not([detail-none]) .item-inner,
186+
a.item:not([detail-none]) .item-inner {
187+
@include ios-detail-push();
188+
}
189+
}
190+
178191

179192
// iOS Item Group
180193
// --------------------------------------------------

‎src/components/item/item.md.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ $item-md-avatar-size: 4rem !default;
1313
$item-md-thumbnail-size: 8rem !default;
1414
$item-md-note-color: darken($list-md-border-color, 10%) !default;
1515

16+
$item-md-detail-push-show: false !default;
17+
$item-md-detail-push-color: $list-md-border-color !default;
18+
1619
$item-md-divider-background: #fff !default;
1720
$item-md-divider-color: #222 !default;
1821
$item-md-divider-padding: 5px 15px !default;
@@ -84,6 +87,29 @@ $item-md-sliding-content-background: $list-md-background-color !default;
8487
}
8588

8689

90+
// Material Design Item Detail Push
91+
// --------------------------------------------------
92+
93+
@mixin md-detail-push() {
94+
@include md-detail-push-icon($item-md-detail-push-color);
95+
96+
padding-right: 32px;
97+
98+
background-repeat: no-repeat;
99+
background-position: right ($item-md-padding-right - 2) center;
100+
background-size: 14px 14px;
101+
}
102+
103+
// Only show the forward arrow icon if true
104+
@if $item-md-detail-push-show == true {
105+
.item[detail-push] .item-inner,
106+
button.item:not([detail-none]) .item-inner,
107+
a.item:not([detail-none]) .item-inner {
108+
@include md-detail-push();
109+
}
110+
}
111+
112+
87113
// Material Design Item Media
88114
// --------------------------------------------------
89115

‎src/components/item/item.wp.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ $item-wp-avatar-size: 4rem !default;
1515
$item-wp-thumbnail-size: 8rem !default;
1616
$item-wp-note-color: $input-wp-border-color !default;
1717

18+
$item-wp-detail-push-show: false !default;
19+
$item-wp-detail-push-color: $input-wp-border-color !default;
20+
1821
$item-wp-divider-background: #fff !default;
1922
$item-wp-divider-color: #222 !default;
2023
$item-wp-divider-padding: 5px 15px !default;
@@ -85,6 +88,29 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
8588
}
8689

8790

91+
// Windows Item Detail Push
92+
// --------------------------------------------------
93+
94+
@mixin wp-detail-push() {
95+
@include wp-detail-push-icon($item-wp-detail-push-color);
96+
97+
padding-right: 32px;
98+
99+
background-repeat: no-repeat;
100+
background-position: right ($item-wp-padding-right - 2) center;
101+
background-size: 14px 14px;
102+
}
103+
104+
// Only show the forward arrow icon if true
105+
@if $item-wp-detail-push-show == true {
106+
.item[detail-push] .item-inner,
107+
button.item:not([detail-none]) .item-inner,
108+
a.item:not([detail-none]) .item-inner {
109+
@include wp-detail-push();
110+
}
111+
}
112+
113+
88114
// Windows Item Media
89115
// --------------------------------------------------
90116

‎src/components/item/test/buttons/main.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
<button outline item-right (click)="testClick($event)">View</button>
8989
</ion-item>
9090

91-
<button ion-item *ngFor="let data of [0,1,2,3,4]; #i = index" [class.activated]="i == 1" (click)="testClick($event)">
91+
<button ion-item *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1" (click)="testClick($event)">
9292
<ion-avatar item-left>
9393
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
9494
</ion-avatar>

‎src/themes/dark.ios.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,7 @@ $item-ios-padding-icon-top: 10px !default;
7171
$item-ios-padding-icon-bottom: 9px !default;
7272

7373

74-
// iOS Toggle
75-
// --------------------------------------------------
76-
77-
$toggle-ios-handle-background-color: color($colors-ios, light) !default;
78-
79-
80-
// iOS Icon
74+
// iOS Item Push Icon
8175
// --------------------------------------------------
8276

8377
$icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
@@ -88,6 +82,12 @@ $icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' vi
8882
}
8983

9084

85+
// iOS Toggle
86+
// --------------------------------------------------
87+
88+
$toggle-ios-handle-background-color: color($colors-ios, light) !default;
89+
90+
9191
// iOS Body
9292
// --------------------------------------------------
9393

‎src/themes/dark.md.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,18 @@ $item-md-padding-icon-bottom: 10px !default;
5959
$item-md-divider-background: #151515 !default;
6060
$item-md-divider-color: color($colors-md, light) !default;
6161

62+
63+
// Material Design Item Push Icon
64+
// --------------------------------------------------
65+
66+
$icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
67+
68+
@mixin md-detail-push-icon($fg-color) {
69+
$svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
70+
@include svg-background-image($svg);
71+
}
72+
73+
6274
// Material Design Toggle
6375
// ---------------------------------------------------
6476
$toggle-md-handle-background-color-off: color($colors-md, light) !default;

‎src/themes/dark.wp.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,17 @@ $item-wp-divider-background: #151515 !default;
6060
$item-wp-divider-color: color($colors-wp, light) !default;
6161

6262

63+
// Windows Item Push Icon
64+
// --------------------------------------------------
65+
66+
$icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
67+
68+
@mixin wp-detail-push-icon($fg-color) {
69+
$svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
70+
@include svg-background-image($svg);
71+
}
72+
73+
6374
// Windows Toggle
6475
// ---------------------------------------------------
6576
$toggle-wp-handle-background-color-off: color($colors-wp, light) !default;

‎src/themes/default.ios.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ $item-ios-padding-icon-top: 10px !default;
4848
$item-ios-padding-icon-bottom: 9px !default;
4949

5050

51-
// iOS Icon
51+
// iOS Item Push Icon
5252
// --------------------------------------------------
5353

5454
$icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;

‎src/themes/default.md.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,16 @@ $item-md-padding-icon-top: 11px !default;
4848
$item-md-padding-icon-bottom: 10px !default;
4949

5050

51+
// Material Design Item Push Icon
52+
// --------------------------------------------------
53+
54+
$icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
55+
56+
@mixin md-detail-push-icon($fg-color) {
57+
$svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
58+
@include svg-background-image($svg);
59+
}
60+
5161

5262
// Material Design Body
5363
// --------------------------------------------------

‎src/themes/default.wp.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,17 @@ $item-wp-padding-icon-top: 11px !default;
4848
$item-wp-padding-icon-bottom: 10px !default;
4949

5050

51+
// Windows Item Push Icon
52+
// --------------------------------------------------
53+
54+
$icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
55+
56+
@mixin wp-detail-push-icon($fg-color) {
57+
$svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
58+
@include svg-background-image($svg);
59+
}
60+
61+
5162
// Windows Input
5263
// --------------------------------------------------
5364

0 commit comments

Comments
 (0)