pleroma/pleroma-fe
Watch
2
2
Fork
You've already forked pleroma-fe
 10
Code Issues 351 Pull requests 26 Projects Releases 5 Packages 1 Wiki Activity

Lightbox improvement - Drag navigation #1874

Closed
edijs wants to merge 10 commits from gitlab-mr-iid-604 into develop
pull from: gitlab-mr-iid-604
merge into: pleroma:develop
Conversation 27 Commits 10 Files changed 3 +118 -40
edijs commented 2019-02-21 16:36:00 +00:00
Member
Copy link

Closes #381

Closes #381
edijs commented 2019-02-21 16:53:24 +00:00
Author
Member
Copy link

@feld , @hj please review this

@feld , @hj please review this
hj commented 2019-02-21 18:08:46 +00:00
Member
Copy link

can't this be done in template?

can't this be done in template?
hj commented 2019-02-21 18:09:33 +00:00
Member
Copy link

i don't like that video is being part of draggable. Will it conflict with dragging the seekbar?

i don't like that video is being part of draggable. Will it conflict with dragging the seekbar?
hj commented 2019-02-21 18:12:49 +00:00
Member
Copy link
  1. i think you can use empty canvas instead of empty image
  2. image is too big, better use a 1x1 gif in some minimal palette mode.
1. i think you can use empty canvas instead of empty image 2. image is too big, better use a 1x1 gif in some minimal palette mode.
hj commented 2019-02-21 18:13:54 +00:00
Member
Copy link

I don't think we really need to support drag events, only touch ones. Nobody really drags carousels on desktop. I think horizontal scroll is used far more often that dragging.

I don't think we really need to support drag events, only touch ones. Nobody really drags carousels on desktop. I think horizontal scroll is used far more often that dragging.
feld commented 2019-02-21 20:51:57 +00:00
Owner
Copy link

We need drag for mobile, though.

We need drag for mobile, though.
edijs commented 2019-02-21 21:13:54 +00:00
Author
Member
Copy link

@feld @hj, ok just want to confirm.

  1. On desktop, horizontal scroll will navigate images but drag event
  2. On mobile, drag event will work for navigation
@feld @hj, ok just want to confirm. 1. On desktop, horizontal scroll will navigate images but drag event 2. On mobile, drag event will work for navigation
edijs commented 2019-02-21 21:37:16 +00:00
Author
Member
Copy link

I have confirmed that video seek bar works good without conflict.

I have confirmed that video seek bar works good without conflict.
hj commented 2019-02-21 21:41:29 +00:00
Member
Copy link

it doesn't work without drag?

it doesn't work without drag?
feld commented 2019-02-21 21:42:41 +00:00
Owner
Copy link

Drag is a native mobile UX feature because it has a touch screen. If I see photos or a gallery on a mobile device or tablet the instinct is to drag, not look for a button element.

Drag is a native mobile UX feature because it has a touch screen. If I see photos or a gallery on a mobile device or tablet the instinct is to drag, not look for a button element.
hj commented 2019-02-21 21:47:03 +00:00
Member
Copy link

i'm not talking about UX, i'm talking about what sort of events browser fires

i'm not talking about UX, i'm talking about what sort of events browser fires
feld commented 2019-02-21 21:48:39 +00:00
Owner
Copy link

Do you mean "what happens if the mobile browser can't send drag events" ?

Do you mean "what happens if the mobile browser can't send drag events" ?
hj commented 2019-02-21 21:59:14 +00:00
Member
Copy link

no i mean "does browser send touch events, drag events or both?"

no i mean "does browser send touch events, drag events or both?"
hj commented 2019-02-21 22:00:08 +00:00
Member
Copy link

the answer is probably "touch events only, drag event after enormous delay and only if we don't react to touch event" btw, but i want a confirmation.

the answer is probably "touch events only, drag event after enormous delay and only if we don't react to touch event" btw, but i want a confirmation.
edijs commented 2019-02-21 23:12:46 +00:00
Author
Member
Copy link

@hj , @feld can you please review the changes?

To say again,

  1. On desktop, horizontal mouse scroll will navigate images, but drag/drop won't work.
  2. On mobile, touch & drag will navigate gallery.
@hj , @feld can you please review the changes? To say again, 1. On desktop, horizontal mouse scroll will navigate images, but drag/drop won't work. 2. On mobile, touch & drag will navigate gallery.
edijs commented 2019-02-21 23:13:26 +00:00
Author
Member
Copy link

No longer needed after removed drag event in desktop.

No longer needed after removed drag event in desktop.
shpuld commented 2019-02-24 16:38:41 +00:00
Member
Copy link

if you try dragging on desktop there's some weird side-effect on Chromium where the grabbed image moves with the cursor with gray edges depending on aspect ratio, there shouldn't be anything (which is how it works on firefox, which is good). Also the drag on mobile should use a way lower threshold, 100px is a lot especially when there's no feedback when you start dragging. I'd try something like 30-50px

if you try dragging on desktop there's some weird side-effect on Chromium where the grabbed image moves with the cursor with gray edges depending on aspect ratio, there shouldn't be anything (which is how it works on firefox, which is good). Also the drag on mobile should use a way lower threshold, 100px is a lot especially when there's no feedback when you start dragging. I'd try something like 30-50px
edijs commented 2019-02-25 14:34:57 +00:00
Author
Member
Copy link

Fixed

Fixed
shpuld commented 2019-02-25 16:31:48 +00:00
Member
Copy link

Now the dragging doesn't work on mobile

Now the dragging doesn't work on mobile
hj commented 2019-02-25 20:04:07 +00:00
Member
Copy link

swiping works for me on firefox, however it's not intuitive that anything is going on, maybe sliding current picture would be a good improvement.

also background scrolls while you try to swipe making it even more confusing.

swiping works for me on firefox, however it's not intuitive that anything is going on, maybe sliding current picture would be a good improvement. also background scrolls while you try to swipe making it even more confusing.
shpuld commented 2019-02-26 14:14:30 +00:00
Member
Copy link

I tried it on my phone (firefox) and responsive design mode in both ff and chromium yesterday, haven't tried the newer version yet.

Doing animations for the images will be a more difficult thing considering there's just one image that changes instead of one moving away while other one comes in, I'd leave it for further improvements if deemed necessary.

I tried it on my phone (firefox) and responsive design mode in both ff and chromium yesterday, haven't tried the newer version yet. Doing animations for the images will be a more difficult thing considering there's just one image that changes instead of one moving away while other one comes in, I'd leave it for further improvements if deemed necessary.
shpuld commented 2019-02-26 14:21:08 +00:00
Member
Copy link

I don't think this is the approach we'd want.. isn't there a way to distinguish between mouse move events and touch events?

I don't think this is the approach we'd want.. isn't there a way to distinguish between mouse move events and touch events?
shpuld commented 2019-02-26 14:32:27 +00:00
Member
Copy link

Ok, it works with the newer version, one thing I'd add, check if Y movement is smaller than X or otherwise small enough, so it won't trigger the change when you do 35px on X and 80px on Y

Ok, it works with the newer version, one thing I'd add, check if Y movement is smaller than X or otherwise small enough, so it won't trigger the change when you do 35px on X and 80px on Y
edijs commented 2019-02-28 03:59:18 +00:00
Author
Member
Copy link

No, we need to distinguish the browser to enable dragging. On desktop we catch only scroll events while touch event in mobile browser.

IMO, isMobileBrowser will be useful service for others.

No, we need to distinguish the browser to enable dragging. On desktop we catch only scroll events while touch event in mobile browser. IMO, `isMobileBrowser` will be useful service for others.
edijs commented 2019-02-28 04:00:58 +00:00
Author
Member
Copy link

Implemented checking Y movement, and fixed background scroll.

Implemented checking Y movement, and fixed background scroll.
hj commented 2019-02-28 07:25:42 +00:00
Member
Copy link

Detecting browser is very bad practice, detect features support instead.

Detecting browser is very bad practice, detect features support instead.
shpuld commented 2019-02-28 17:14:08 +00:00
Member
Copy link

Keep in mind you can do touch on devices/browsers that aren't mobile as well. We don't care which browser the swipe was done on, we care if it was done using a touch or a mouse.

Keep in mind you can do touch on devices/browsers that aren't mobile as well. We don't care which browser the swipe was done on, we care if it was done using a touch or a mouse.

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1
Instance Admin Dashboard

  
NL2
Improved Mobile Experience

  
NL4
Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility
https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident
Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
4 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
pleroma/pleroma-fe!1874
No description provided.