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

Lock body scroll when modal is open globally #2241

Closed
tae wants to merge 0 commits from gitlab-mr-iid-974 into develop
pull from: gitlab-mr-iid-974
merge into: pleroma:develop
Conversation 19 Commits - Files changed -
tae commented 2019-10-18 16:36:50 +00:00
Member
Copy link

for the status posting modal and the user reporting modal

for the status posting modal and the user reporting modal
hj commented 2019-10-21 17:16:29 +00:00
Member
Copy link

no need for viewClass, you can just specify class normally and vue will append it for you, i.e. <Modal class="x"> will become <div class="modal-view x">

no need for viewClass, you can just specify class normally and vue will append it for you, i.e. `<Modal class="x">` will become `<div class="modal-view x">`
hj commented 2019-10-21 17:17:29 +00:00
Member
Copy link

maybe animation should also moved here as well?

maybe animation should also moved here as well?
hj commented 2019-10-21 17:20:51 +00:00
Member
Copy link

it doesn't actually close it, so probably it shouldn't be called close? Same with method, maybe something like backdropClicked?

it doesn't actually close it, so probably it shouldn't be called close? Same with method, maybe something like `backdropClicked`?
hj commented 2019-10-21 17:22:32 +00:00
Member
Copy link

what

what
hj commented 2019-10-21 17:23:09 +00:00
Member
Copy link

is this change necessary?

is this change necessary?
hj commented 2019-10-21 17:23:41 +00:00
Member
Copy link

maybe use a Set?

maybe use a `Set`?
hj commented 2019-10-21 17:28:13 +00:00
Member
Copy link

can it be more explicit, like lockerEls.length === 0?

can it be more explicit, like `lockerEls.length === 0`?
hj commented 2019-10-21 17:29:15 +00:00
Member
Copy link

you mean >= 1, right?

you mean `>= 1`, right?
tae commented 2019-10-21 19:53:11 +00:00
Author
Member
Copy link

to prevent modal from moving horizontally while locking body scroll

to prevent modal from moving horizontally while locking body scroll
tae commented 2019-10-21 19:54:29 +00:00
Author
Member
Copy link

yes, necessary to set higher specificity to this CSS

yes, necessary to set higher specificity to this CSS
tae commented 2019-10-21 19:55:00 +00:00
Author
Member
Copy link

well, do you have any issue with the current one?

well, do you have any issue with the current one?
tae commented 2019-10-21 19:55:14 +00:00
Author
Member
Copy link

yes, it can be

yes, it can be
tae commented 2019-10-21 19:56:28 +00:00
Author
Member
Copy link

updated

updated
tae commented 2019-10-21 19:57:03 +00:00
Author
Member
Copy link

no, it is <=

no, it is `<= `
hj commented 2019-10-21 20:06:59 +00:00
Member
Copy link

It looks like you're trying to replicate Set behavior using an array, it would be more efficient to just use Set instead. Apart from possible performance boost (Array.includes is worst-case O(n), Set.has is O(1)) it would give clearer code - no need to check if object reference already exists in set it doesn't get duplicated since Set already enforces uniqueness of all of its elements, removing an entity from a Set is also easier and more performant.

It looks like you're trying to replicate Set behavior using an array, it would be more efficient to just use Set instead. Apart from possible performance boost (`Array.includes` is worst-case O(n), `Set.has` is O(1)) it would give clearer code - no need to check if object reference already exists in set it doesn't get duplicated since Set already enforces uniqueness of all of its elements, removing an entity from a Set is also easier and more performant.
tae commented 2019-10-21 20:07:56 +00:00
Author
Member
Copy link

the current naming is acceptable (this kind of naming is currently used in many modal libraries, i.e https://bootstrap-vue.js.org/docs/components/modal/#emitting-events-on-root, https://react-bootstrap.github.io/components/modal/). If you are really not comfortable with it, I can change to requestClose though

the current naming is acceptable (this kind of naming is currently used in many modal libraries, i.e https://bootstrap-vue.js.org/docs/components/modal/#emitting-events-on-root, https://react-bootstrap.github.io/components/modal/). If you are really not comfortable with it, I can change to `requestClose` though
hj commented 2019-10-21 20:27:35 +00:00
Member
Copy link

I'd prefer backdropClicked.

Both of the links you provided are more fleshed-out modals, which provide actual modal windows with buttons like "ok" "cancel" "close" (last one we should have actually in our modal windows/panels) so it makes a bit more sense to have "ok" "cancel" "close". On top of that vue modal you've linked seem to be actually stateful, i.e. it can keep track itself if it should be showing or not - it makes sense to emit an event signifying important change of internal state.

In this case we don't have state at all. I'd expect 'close' to be fired either after modal has hidden itself (which doesn't happen since hidden/shown state is controlled from outside) of if "close" button has been clicked in modal (which we won't have because it's not an actual Modal, more of a ModalView or something, idk), so it would make sense to give events less confusing names.

I'd prefer `backdropClicked`. Both of the links you provided are more fleshed-out modals, which provide actual modal windows with buttons like "ok" "cancel" "close" (last one we should have actually in our modal windows/panels) so it makes a bit more sense to have "ok" "cancel" "close". On top of that vue modal you've linked seem to be actually stateful, i.e. it can keep track **itself** if it should be showing or not - it makes sense to emit an event signifying important change of internal state. In this case we don't have state at all. I'd expect 'close' to be fired either after modal has hidden itself (which doesn't happen since hidden/shown state is controlled from outside) of if "close" button has been clicked in modal (which we won't have because it's not an actual Modal, more of a ModalView or something, idk), so it would make sense to give events less confusing names.
tae commented 2019-10-22 00:59:23 +00:00
Author
Member
Copy link

updated

updated
tae commented 2019-10-22 00:59:29 +00:00
Author
Member
Copy link

updated

updated

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
2 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!2241
No description provided.