search

200ok-ch / organice

An implementation of Org mode without the dependency of Emacs - built for mobile and desktop browsers
https://organice.200ok.ch/
GNU Affero General Public License v3.0
2.42k stars 150 forks source link

Disable deleting headlines using "swipe left" on Desktop #586

Open markamaze opened 3 years ago

markamaze commented 3 years ago

Before creating a new issue, please read the "How we work with issues" section in the documentation: https://organice.200ok.ch/documentation.html#how_we_work_with_issues

Is your feature request related to a problem? Please describe. on a laptop, it is too difficult to swipe to delete with a mouse on a phone, it is too easy to delete and may lead to unintentionally removing header items

Describe the solution you'd like add a headerActionItem to initialize the same action as a swipe add a confirmation handler after the remove action to allow user to cancel or confirm the delete

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

I'd like to put some work into this. I'm a newer developer looking for open source projects and this seems doable for me. before finding organice, I was looking at it on org-web and believe that to add the confirmation I need to look into react-motion and how it's implemented in the header in order to add a confirmation following the delete action. If this issue is worth working on, any input on a good approach would be appreciated.

tarnung commented 3 years ago

Hi @markamaze You are not the first having issues with this. We recently disabled user select to make swiping on the desktop a bit more usable. At least now you don't accidently select text.

I recently played around with alternative UI approaches. There I used swipe for visibility cycling (exactly because it's an action that doesn't change anything about your file) and an action button for deleting a header. In pr #559 you can find some images further down the thread. Feel free to join the discussion about where to take it!

I don't really like the Idea of having a button and a swipe action doing the same thing. We could use swipe on mobile and buttons on desktop, but that also complicates things since we would have to keep both UIs in mind for all further changes.

A confirmation would be too cumbersome in my opinion. Undo lets you recover an accidentally deleted header easily (if you realise you deleted it). Granted it could be done minimally intrusive by highlighting the header itself after swipe, tapping it again to confirm deletion.

I think changing delete on swipe needs to be part of a bigger UI rethink. If we decide to keep the swipe to delete action, I'd support having a confirm. But I'm probably not the only one with opinions on this.

munen commented 3 years ago

Hi @markamaze

Thanks for checking out organice and offering to contribute!🙏🏻

My thoughts on the issue:

Delete on swipe is a very common UX pattern on iOS (Apple and non Apple apps use it). For me, it’s also working equally well in organice as in the native apps. I have never seen an app require a confirmation. Also, we have infinite undo/redo, hence it’s even better in organice compared to an Apple app (where you’d have to do an undiscoverable “shake the phone” to maybe get an undo with no redo).

I think the confusion comes from users using swipe on desktop. It has neither place nor need there. Let’s disable swipe on desktop. Instead, it’s already possible to use the delete key from the keyboard. That’s also common desktop UX. The button is even configurable in the settings.

tarnung commented 3 years ago

I agree with @munen. Disabling swipe on desktop is ok with me. If we disable swipe to delete I'd also disable swipe to advance todo-state. There's a shortcut for that too.

We have a boolean isMobileBrowser in lib/browser_utils.js which already works. I changed it a bit recently and it currently behaves inconsistently between my machine and ci. Maybe it could be improved.

As far as making it harder to accidentally delete headers on mobile - I would welcome making swipe a little less imediate. If there is a way to ignore minimal sideways movement I would'nt as often accidentally begin a swipe while scrolling. I never accidentally deleted a header but it feels wrong if I intend to scroll and suddenly I see a header moved sideways. It always makes me look again to see if I haven't changed anything by accident. It doesn't happen all the time, but enough to be a pain point.

@markamaze I'd be happy if you could work on these issues. Feel free to aks questions if anything is unclear.

munen commented 3 years ago

If we disable swipe to delete I'd also disable swipe to advance todo-state. There's a shortcut for that too.

Yes. Swipe on desktop is not a great UX pattern. We can delete any swipe action on Desktop.

We have a boolean isMobileBrowser in lib/browser_utils.js which already works. I changed it a bit recently and it currently behaves inconsistently between my machine and ci. Maybe it could be improved.

I haven't dug into this, but from the top of my head it's even easier since swipe for 'click' and 'touch' is handled manually. This already disables swiping on Desktop for me, but leaves work for cleanup: https://github.com/200ok-ch/organice/pull/587

If that's the way to go, @markamaze could take over the PR.

As far as making it harder to accidentally delete headers on mobile - I would welcome making swipe a little less imediate. If there is a way to ignore minimal sideways movement I would'nt as often accidentally begin a swipe while scrolling. I never accidentally deleted a header but it feels wrong if I intend to scroll and suddenly I see a header moved sideways. It always makes me look again to see if I haven't changed anything by accident. It doesn't happen all the time, but enough to be a pain point.

Sounds good to me!

Maybe the behavior is different on different devices. I don't think I'm getting this beavior on my iPhone, but it doesn't sound optimal the way you describe it.

Maybe these magic numbers could be tweaked: https://github.com/200ok-ch/organice/blob/ad8ad05b3935adf7203bc3f558922818dbb452da/src/components/OrgFile/components/Header/index.js#L25-L26

Or maybe the whole swiping could do with a makeover if there's a more robust solution.

markamaze commented 3 years ago

Hope everyone had a good holiday, sorry for my delay. It seems I may have been a little eager in my initial post; when I moved to organice from org-web I didn't catch the undo/redo buttons that weren't there in org-web. That certainly makes a confirmation seem unnecessary.

I'll get on this and see what I can do. If I understand correctly, my main objectives are: make the swipe require a longer drag distance to be a little less responsive, and disable altogether if it is on a desktop. I'll be sure to post my questions or ideas as I have them.

Thanks all!

munen commented 3 years ago

No worries about the delay, thanks for checking in during Black Friday(;

It's not actually a holiday in Switzerland, but quite a few companies do offer discounts on things. But my day was quite nice anyway, thanks for asking^^ I hope you're having a nice day, as well^^

Yes, organice has come quite a long way since forking from org-web. org-web had and still has about 600 commits, organice now has >2000. Also, org-web didn't have any contributor that added anything quite big. The first who tried was asked to fork (me), so I'm happy to say that organice in the first year had quite a lot contributors who added non-trivial features(;

It still looks and behaves similar in many ways, because org-web was (and is) a great project, but there's huge differences under the hood by now.

(Having said so, org-web does have undo iirc. But organice has a different implementation^^)

I'll get on this and see what I can do. If I understand correctly, my main objectives are: make the swipe require a longer drag distance to be a little less responsive, and disable altogether if it is on a desktop. I'll be sure to post my questions or ideas as I have them.

Perfect! :+1:

Enjoy and let me know if you need anything.

markamaze commented 3 years ago

just downloaded github app on phone and hit a wrong button. didn't mean to close it.

I must be eager, I didn't catch the undo/redo on org-web either. Whoops. I was excited when I found org-web because it was exactly what I wish another program I use regularly was (orgzly on android), but not developed as much. When I came across your comment about forking to organice, I was even more excited because it is active and further developed. Finding a project like this is great for where I'm at as a new developer trying to expand beyond working on my own portfolio. I hope I can be helpful and productive as much as I hope to gain some experience.

Working with others outside the US is new to me, forgive my assumption that yesterday was a holiday for everyone. Glad you had a good day though and can get in on some black friday deals in Switzerland at least.

munen commented 3 years ago

You're very welcome - and FOSS is great to learn and gain experience. Happy to have you here^^

If you're interested, there's also a community chat: https://organice.200ok.ch/documentation.html#general

alensiljak commented 3 years ago

I would like to join the discussion with additional view. While initially I was not aware of undo/redo, since I can only use the example provided and not a real file, I thought that having a confirmation on destructive actions is quite necessary. Especially on a phone, where swiping things by accident can very easily happen. I would agree that swiping to delete is quite common in mobile environments. However, it should still require an additional action to confirm. A very common pattern, that I find quite satisfactory, is:

Something like: image

It could, of course, be an icon with a trash can, but you get the idea. I'd really like to see this implemented instead of the other two options - plain swipe to delete, or showing a pop-up confirmation dialog. Cheers

munen commented 3 years ago

@MisterY Thank you for joining the discussion!

Do you have an example application thta uses this proposed "Confirmation to delete on swipe" UX? I'm not aware of any. On the other hand, all natively installed applications by Apple that support delete to swipe (mail, reminders, etc) nether require it nor have an option to enable such a confirmation dialogue.

munen commented 3 years ago

At the maximum, this could be added as a configuration flag, if there’s proof that it is a common UX pattern. It certainly could not be a default as it would make a very common operation very cumbersome - gaining in complexity from one swipe to swipe, change to pop up, click confirmation.

Also, for any synchronized file (all files that are not the demo), this is basically redundant with the infinite undo/redo functionality.

alensiljak commented 3 years ago

Hi! Here's one example. It seems that Gmail on iOS uses that pattern.

Article

You are right that this might not be necessary if the item needs to be pushed ~30-50% of the screen to apply, and if the list item is completely visible. However, notes in Org mode may be long enough not to fit the screen, in which case the x might not be even visible.

I agree that the undo should also be enough to handle accidental deletes but they are called accidental for a reason. Perhaps adding a toast when an item is deleted would help. Perhaps a toast with an explicit Undo button? i.e. sample Somehow I just have a feeling that it is currently too easy to delete items and not notice. Perhaps I need to play with the app a bit more to get familiar but I will have to wait for CORS implementation on rclone side. Already submitted a request for that. Then rclone can then serve as a proxy to WebDAV services which don't allow CORS.

More examples:

munen commented 3 years ago

Your first resource, the link to businessinsider.com above doesn't explain the gmail app, it explains the standard Apple iOS mail app with a gmail account. It uses swipe to delete, that's true. I use it daily. It uses it as organice does, too. There's no confirmation dialogue.

The second resource, the medium article linked to, also shows a standard swipe to delete pattern as organice implements it:

I haven't thorougly checked your third and forth resource as they mainly show code in languages that I'm not familiar with.