Delete + Edit like Apple clock app

ionic-v1
1

Hey guys,

in my app the user can create items. But I just want to have two buttons in my header.

  1. Edit
  2. Add new

On Edit I want to show the delete button, but I also want to show the ion-chevron-right (arrow right) to show the user that he can edit the item.

Just like in the default apple clock app. Any ideas? On edit it should look like:

image
604123215_1616938138304051090.jpg612×792 24.8 KB

2

Does no one has an idea?

3

So you want something like this: http://codepen.io/anon/pen/YPQXzR

Click the top left button to show the delete.

4

I know how to show the delete. But I want to give the user the possibility to EDIT a item. So he can click the item while showDelete is TRUE and edit it on a different page.

5

Ohhh, understood. Updated: http://codepen.io/anon/pen/PwjqbY

I added extra right to the chevron icon in the css so you can still see it. I’m sure you can tweak it. Code to get the ng-click taken from @mhartington:

6

Thaaaank you very much :slight_smile:

1 Like
7

I discovered a new problem with this wonderful solution. While the animation there is a bug.

My code looks like:

<ion-list show-delete="view.showDelete" class="list list-editing">
    	<ion-item ng-repeat="(control, data) in controldata" href="#/controls/{{control}}" ng-class="{'activate-link': view.showDelete,'item-toggle':!view.showDelete, 'item-icon-right':view.showDelete, 'grey':!data.active}" class="item-icon-left item-button-right">
    		<ion-delete-button ng-click="deleteControl(control)" class="ion-minus-circled"></ion-delete-button>
    		<i class="icon icon-{{data.icon}}"></i>
    		<h2 class="padding">{{data.label}}</h2>
    		<label class="toggle" ng-hide="view.showDelete">
	    		<input type="checkbox" ng-model="data.active" ng-change="toggleControl(control, data.active)">
	    		<div class="track">
		    		<div class="handle"></div>
		    	</div>
		    </label>
		    <i class="icon ion-chevron-right icon-accessory ng-hide" ng-show="view.showDelete"></i>
    	</ion-item>
    </ion-list>

And while the animation it looks like:

image
CapturFiles_3.jpg900×1594 70.5 KB

I uploaded a video on youtube: Broken animation Video

I think the problem is that the toggle and ion-chevron-right are both animated, so for a couple of milliseconds both are shown. But they are both position:absolute, so I have no idea what the actual problem is.

But only on hiding the chevron and showing the toggle!

8

No ideas guys? :frowning: I have absolutely no idea what the problem is

9

Could you put your new code in a codepen? It’s easier to help when we can mess with it. :smile:

10

Oh, sorry brandyshea, sure :smiley:

Here it is: Codepen

On desktop its working fine, I only get this problem on mobile devices, in my case: iPhone 6 and iPad Air.

11

Change the ng-hide on the toggle to this:

ng-show="!data.showDelete"

That fixes it for me.

12

I changed it (see Codepen), but it’s still the same.

13

I see the problem again. I had to build it as an app in order to see it. I’m looking into it between working on other things. So far no luck finding a solution. The animation seems really slow regardless though.

14

Thank you brandy for all your help I tried to find a way for stoping the animation of the element that should be hidden, but I couldn’t. I hope you gonna have more luck.

You could add me on skype (username: moritzdrescher) if you need further information/details.

15

Ok I have it working like this. Does this work for you, or are you able to reproduce the problem again?

See codepen: http://codepen.io/anon/pen/EavpGz