Skip to content

Commit 1d3d5a1

Browse files
manucorporatmanucorporat
committed
fix(item): sliding item with icon-only buttons
1 parent e0c2129 commit 1d3d5a1

2 files changed

Lines changed: 25 additions & 25 deletions

File tree

‎src/components/item/item-sliding.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ ion-item-options .button {
5151
box-sizing: content-box;
5252
}
5353

54-
ion-item-options:not([icon-left]) .button {
54+
ion-item-options:not([icon-left]) .button:not([icon-only]) {
5555
.button-inner {
5656
flex-direction: column;
5757
}

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@ <h2>HubStruck Notifications</h2>
3131
</a>
3232

3333
<ion-item-options side="left">
34-
<button ion-button (click)="unread(item100)">
34+
<button ion-button icon-only (click)="unread(item100)">
3535
<ion-icon name="mail"></ion-icon>
3636
</button>
3737
</ion-item-options>
3838
<ion-item-options side="right">
39-
<button ion-button danger (click)="unread(item100)">
39+
<button ion-button icon-only color="danger" (click)="unread(item100)">
4040
<ion-icon name="trash"></ion-icon>
4141
</button>
42-
<button ion-button (click)="unread(item100)" >
42+
<button ion-button icon-only (click)="unread(item100)" >
4343
<ion-icon name="star"></ion-icon>
4444
</button>
4545
</ion-item-options>
@@ -52,8 +52,8 @@ <h2>RIGHT side - no icons</h2>
5252
<p>Hey do you want to go to the game tonight?</p>
5353
</button>
5454
<ion-item-options *ngIf="slidingEnabled">
55-
<button ion-button primary (click)="archive(item0)">Archive</button>
56-
<button ion-button danger (click)="del(item0)">Delete</button>
55+
<button ion-button color="primary" (click)="archive(item0)">Archive</button>
56+
<button ion-button color="danger" (click)="del(item0)">Delete</button>
5757
</ion-item-options>
5858
</ion-item-sliding>
5959

@@ -63,8 +63,8 @@ <h2>LEFT side - no icons</h2>
6363
<p>I think I figured out how to get more Mountain Dew</p>
6464
</a>
6565
<ion-item-options side="left" (ionSwipe)="del($event)" *ngIf="slidingEnabled">
66-
<button ion-button primary (click)="archive(item1)">Archive</button>
67-
<button ion-button danger (click)="del(item1)">Delete</button>
66+
<button ion-button color="primary" (click)="archive(item1)">Archive</button>
67+
<button ion-button color="danger" (click)="del(item1)">Delete</button>
6868
</ion-item-options>
6969
</ion-item-sliding>
7070

@@ -75,16 +75,16 @@ <h2>RIGHT/LEFT side - icons</h2>
7575
<p>I think I figured out how to get more Mountain Dew</p>
7676
</ion-item>
7777
<ion-item-options side="left" (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
78-
<button ion-button secondary expandable (click)="unread(item2)">
78+
<button ion-button color="secondary" expandable (click)="unread(item2)">
7979
<ion-icon name="ios-checkmark"></ion-icon>Unread
8080
</button>
8181
</ion-item-options>
8282

8383
<ion-item-options side="right" (ionSwipe)="del(item2)" *ngIf="slidingEnabled">
84-
<button ion-button primary (click)="archive(item2)">
84+
<button ion-button color="primary" (click)="archive(item2)">
8585
<ion-icon name="mail"></ion-icon>Archive
8686
</button>
87-
<button ion-button danger (click)="del(item2)" expandable>
87+
<button ion-button color="danger" (click)="del(item2)" expandable>
8888
<ion-icon name="trash"></ion-icon>Delete
8989
</button>
9090
</ion-item-options>
@@ -97,16 +97,16 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
9797
<p>I think I figured out how to get more Mountain Dew</p>
9898
</ion-item>
9999
<ion-item-options side="left" icon-left (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
100-
<button ion-button secondary expandable (click)="unread(item3)">
100+
<button ion-button color="secondary" expandable (click)="unread(item3)">
101101
<ion-icon name="ios-checkmark"></ion-icon>Unread
102102
</button>
103103
</ion-item-options>
104104

105105
<ion-item-options icon-left (ionSwipe)="del(item3)">
106-
<button ion-button primary (click)="archive(item3)">
106+
<button ion-button color="primary" (click)="archive(item3)">
107107
<ion-icon name="mail"></ion-icon>Archive
108108
</button>
109-
<button ion-button danger (click)="del(item3)" expandable *ngIf="slidingEnabled">
109+
<button ion-button color="danger" (click)="del(item3)" expandable *ngIf="slidingEnabled">
110110
<ion-icon name="trash"></ion-icon>Delete
111111
</button>
112112
</ion-item-options>
@@ -119,7 +119,7 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
119119
One Line w/ Icon, div only text
120120
</ion-item>
121121
<ion-item-options icon-left (ionSwipe)="archive($event)">
122-
<button ion-button primary (click)="archive(item4)" expandable *ngIf="slidingEnabled">
122+
<button ion-button color="primary" (click)="archive(item4)" expandable *ngIf="slidingEnabled">
123123
<ion-icon name="archive"></ion-icon>Archive
124124
</button>
125125
</ion-item-options>
@@ -134,13 +134,13 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
134134
One Line w/ Avatar, div only text
135135
</ion-item>
136136
<ion-item-options>
137-
<button ion-button primary expandable>
137+
<button ion-button color="primary" expandable>
138138
<ion-icon name="more"></ion-icon>More
139139
</button>
140-
<button ion-button secondary (click)="archive(item5)">
140+
<button ion-button color="secondary" (click)="archive(item5)">
141141
<ion-icon name="archive"></ion-icon>Archive
142142
</button>
143-
<button ion-button danger (click)="del(item5)">
143+
<button ion-button color="danger" (click)="del(item5)">
144144
<ion-icon name="trash"></ion-icon>Delete
145145
</button>
146146
</ion-item-options>
@@ -151,11 +151,11 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
151151
One Line, dynamic option
152152
</ion-item>
153153
<ion-item-options>
154-
<button ion-button primary>
154+
<button ion-button color="primary">
155155
<ion-icon name="more"></ion-icon>
156156
{{ moreText }}
157157
</button>
158-
<button ion-button secondary (click)="archive(item6)">
158+
<button ion-button color="secondary" (click)="archive(item6)">
159159
<ion-icon name="archive"></ion-icon>
160160
{{ archiveText }}
161161
</button>
@@ -167,11 +167,11 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
167167
One Line, dynamic icon-left option
168168
</ion-item>
169169
<ion-item-options icon-left>
170-
<button ion-button primary>
170+
<button ion-button color="primary">
171171
<ion-icon name="more"></ion-icon>
172172
{{ moreText }}
173173
</button>
174-
<button ion-button secondary (click)="archive(item7)">
174+
<button ion-button color="secondary" (click)="archive(item7)">
175175
<ion-icon name="archive"></ion-icon>
176176
{{ archiveText }}
177177
</button>
@@ -187,10 +187,10 @@ <h2>DOWNLOAD</h2>
187187
<p>Paragraph text.</p>
188188
</ion-item>
189189
<ion-item-options (ionSwipe)="download($event)">
190-
<button ion-button primary (click)="archive(item8)">
190+
<button ion-button color="primary" (click)="archive(item8)">
191191
<ion-icon name="archive"></ion-icon>Archive
192192
</button>
193-
<button ion-button secondary expandable (click)="download(item8)">
193+
<button ion-button color="secondary" expandable (click)="download(item8)">
194194
<ion-icon name="download" class="download-hide"></ion-icon>
195195
<div class="download-hide">Download</div>
196196
<ion-spinner id="download-spinner"></ion-spinner>
@@ -227,7 +227,7 @@ <h2>Normal button (no sliding)</h2>
227227
<h3>ng-for {{data}}</h3>
228228
</ion-item>
229229
<ion-item-options>
230-
<button ion-button primary (click)="archive(item9)">Archive</button>
230+
<button ion-button color="primary" (click)="archive(item9)">Archive</button>
231231
</ion-item-options>
232232
</ion-item-sliding>
233233

0 commit comments

Comments
 (0)