fix: Use resize observer to calculate menubar icon limit

[juliusknorr]

Signed-off-by: Julius Härtl jus@bitgrid.net

📝 Summary

Make the icon limit recalculation more reliable by using a resize observer on the actual element and makes the code much cleaner

@vueuse/core is already a dependency through @nextcloud/vue

Fixes nextcloud/deck#4970

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[cypress]

Passing run #11537 ↗︎

0

149

2

0

0

Details:

fix: Use resize observer to calculate menubar icon limit
Project: Text	Commit: 088ef70a35
Status: Passed	Duration: 03:56 💡
Started: Aug 7, 2023 1:38 PM	Ended: Aug 7, 2023 1:42 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[max-nextcloud]

Code changes look good. So much cleaner indeed.
I did not give it a try. Happy to hear it also fixes things in deck.
I have one minor question in the review.
Also... backports?

[juliusknorr]

/compile

[mejo-]

Thanks for looking into this! We still a listener on resize in getClientWidth() at src/store/plugin.js and in src/mixins/isMobile.js.

Also in src/components/Editor/EditorOutline.vue we implement our own $resizeObserver.

Maybe it would be good to consolidate all of them? 🤔

[juliusknorr]

Sounds like a good idea. For the isMobile mixin we can actually rely on the one from @nextcloud/vue as it has a shared state and doesn't add another listener per usage.

I'd do that in a follow up to have the bugfix isolated for backports

[juliusknorr]

Need to double check, cypress failure looks like it could be related not showing the menubar on direct editing.

https://cloud.cypress.io/projects/hx9gqy/runs/11522/test-results/9f7c840a-7788-4409-a6d1-cfd42c58408c

[juliusknorr]

Pushed a fix to set the ready state in any case as for plain text files we don't have a resize observer as the menubar isn't there.

[juliusknorr]

/compile amend /

[mejo-]

/compile

[mejo-]

/backport 180cc39 to stable27

[mejo-]

/backport 180cc39 to stable26

[backportbot-nextcloud]

The backport to stable27 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable27
git pull origin stable27

# Create the new backport branch
git checkout -b fix/foo-stable27

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts. Resolve them.
git cherry-pick abc123

# Push the cherry pick commit to the remote repository and open a pull request
git push origin fix/foo-stable27

More info at https://docs.nextcloud.com/server/latest/developer_manual/getting_started/development_process.html#manual-backport

[backportbot-nextcloud]

The backport to stable26 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable26
git pull origin stable26

# Create the new backport branch
git checkout -b fix/foo-stable26

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts. Resolve them.
git cherry-pick abc123

# Push the cherry pick commit to the remote repository and open a pull request
git push origin fix/foo-stable26

More info at https://docs.nextcloud.com/server/latest/developer_manual/getting_started/development_process.html#manual-backport

[mejo-]

• Manual backport to stable27: [stable27] fix: Use resize observer to calculate menubar icon limit #4649
• Manual backport to stable26: [stable26] fix: Use resize observer to calculate menubar icon limit #4650