Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: keep menubar in one line - prioritize entries #2294

Merged
merged 3 commits into from
Apr 19, 2022
Merged

Conversation

max-nextcloud
Copy link
Collaborator

target version: master, NC24

Menubar entries with submenus cannot be moved to the more-button.
Prioritize them when picking the icons for the toolbar.
If they still do not fit - do not add them to the more button either
they do not work there.

This makes sure that the menubar fits in one line and does not overflow.

Still prioritizing undo and bold over emoji and callout.
The former ones are need fairly frequently while the latter not so often.
In addition mobile phones have an emoji picker in their text entry.

Signed-off-by: Max max@nextcloud.com

@max-nextcloud max-nextcloud added this to the Nextcloud 24 milestone Apr 13, 2022
@max-nextcloud
Copy link
Collaborator Author

Prioritized callout and emoji so they are available even on small screens as recommended by @jancborchardt in chat:

It’s better to have all things available but a bit moved, than to have some not available

:key="icon.label"
v-tooltip="getLabelAndKeys(icon)"
:class="getIconClasses(icon)"
:disabled="disabled(icon)"
@click="clickIcon(icon)" />
<template v-else>
<div v-show="$index < iconCount || !icon.class"
<div v-show="icon.priority <= iconCount"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: can we use v-if instead of v-show?

Suggested change
<div v-show="icon.priority <= iconCount"
<div v-if="icon.priority <= iconCount"

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was not sure so i sticked to what was used. But i think we can use v-if. If the screen is resized new tools will show up or disappear. But that does not mean we have to keep them around all the time. We might as well create / remove them as needed.

src/mixins/menubar.js Show resolved Hide resolved
@juliusknorr
Copy link
Member

/backport to stable24

Menubar entries with submenus cannot be moved to the more-button.
Prioritize them when picking the icons for the toolbar.
If they still do not fit - do not add them to the more button either
they do not work there.

This makes sure that the menubar fits in one line and does not overflow.

Still prioritizing `undo` and `bold` over `emoji` and `callout`.
The former ones are need fairly frequently while the latter not so often.
In addition mobile phones have an emoji picker in their text entry.

Signed-off-by: Max <max@nextcloud.com>
They cannot be shown in the menu with the remaining tools.

Signed-off-by: Max <max@nextcloud.com>
When resizing the browser make sure the three dot menu stays on the same line.
Without a buffer it would sometimes wrap
even though theoretical there was enough space in the menu bar.

No idea what is going on there - but a 4px buffer seems to prevent just that.

Signed-off-by: Max <max@nextcloud.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backported successfully backported
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants