-
Notifications
You must be signed in to change notification settings - Fork 85
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
Enh/Align app navigation item counter in a better way #4991
Conversation
Signed-off-by: Grigory Vodyanov <[email protected]>
@@ -314,7 +314,7 @@ Just set the `pinned` prop. | |||
<!-- Counter and Actions --> | |||
<div v-if="hasUtils && !editingActive" | |||
class="app-navigation-entry__utils" | |||
:class="{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }"> | |||
:class="{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen, 'app-navigation-entry__utils--add-spacing': !hasChildren }"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe call it --has-children
or something? Just to make it more descriptive?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This leads to the misalignment of the utils/actions on the right, as can be seen in the screenshot. This needs to be fixed, as it looks far worse than the right-aligned counter in my opinion.
Signed-off-by: Grigory Vodyanov <[email protected]>
@raimund-schluessler Does this look better? |
Yes, better. But now the counter jumps to the right when the entry is hovered: |
Could you please suggest how I could reproduce this? |
Go to the docs https://deploy-preview-4991--nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationitem scroll to "Element with counter" and hover it. |
Fixed in #6054 |
☑️ Resolves
🖼️ Screenshots
🏁 Checklist