javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(reorder): get gesture working and icon visible with opacity

Browse Source
This commit is contained in:
Brandy Carney
2017-12-07 11:18:26 -05:00
parent d23fd68143
commit 26918e097f
3 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/src/components/reorder-group/reorder-group.scss
View File

@ -67,13 +67,17 @@
.reorder-icon { .reorder-icon {
@include transform(translate3d($reorder-initial-transform, 0, 0)); @include transform(translate3d($reorder-initial-transform, 0, 0));
display: block;
font-size: 1.3em; font-size: 1.3em;
transition: transform 140ms ease-in; transition: transform 140ms ease-in;
} }
.item-ios .reorder-icon { .item-ios .reorder-icon {
font-size: 2em; font-size: 2em;
opacity: .3;
fill: currentColor;
opacity: .4;
} }
.reorder[slot="start"] .reorder-icon { .reorder[slot="start"] .reorder-icon {

5
packages/core/src/components/reorder-group/reorder-group.tsx
View File

@ -19,7 +19,10 @@ export class ReorderIndexes {
@Component({ @Component({
tag: 'ion-reorder-group', tag: 'ion-reorder-group',
styleUrl: 'reorder-group.scss' styleUrl: 'reorder-group.scss',
host: {
theme: 'reorder-group'
}
}) })
export class ReorderGroup { export class ReorderGroup {
private selectedItemEl: HTMLElement = null; private selectedItemEl: HTMLElement = null;

21
packages/core/src/components/reorder/test/basic/index.html
View File

@ -39,9 +39,9 @@
<ion-reorder slot="start"></ion-reorder> <ion-reorder slot="start"></ion-reorder>
</ion-item> </ion-item>
<ion-item> <ion-item color="secondary">
Item 4 (custom ion-reorder) Item 4 (default ion-reorder slot="start")
<ion-reorder slot="end"><ion-icon name="pizza"></ion-reorder> <ion-reorder slot="start"></ion-reorder>
</ion-item> </ion-item>
<ion-item> <ion-item>
@ -50,13 +50,14 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
Item 6 (custom ion-reorder slot="start") Item 6 (custom ion-reorder)
<ion-reorder slot="start"><ion-icon name="pizza"></ion-reorder> <ion-reorder slot="end"><ion-icon name="pizza"></ion-reorder>
</ion-item> </ion-item>
<ion-reorder class="no-hide"> <ion-item>
<ion-item>Item 7 (the whole item can be dragged)</ion-item> Item 7 (custom ion-reorder slot="start")
</ion-reorder> <ion-reorder slot="start"><ion-icon name="pizza"></ion-reorder>
</ion-item>
<ion-reorder class="no-hide"> <ion-reorder class="no-hide">
<ion-item>Item 8 (the whole item can be dragged)</ion-item> <ion-item>Item 8 (the whole item can be dragged)</ion-item>
@ -66,6 +67,10 @@
<ion-item>Item 9 (the whole item can be dragged)</ion-item> <ion-item>Item 9 (the whole item can be dragged)</ion-item>
</ion-reorder> </ion-reorder>
<ion-reorder class="no-hide">
<ion-item>Item 10 (the whole item can be dragged)</ion-item>
</ion-reorder>
</ion-reorder-group> </ion-reorder-group>
</ion-list> </ion-list>
</ion-content> </ion-content>